diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index f067fef9c95ec..246248a9ee2a7 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -3,22 +3,22 @@ "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", 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 4eecaad75bf5b..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', @@ -122,6 +127,12 @@ module.exports = { 'filenames/match-exported': ['error'], }, }, + { + files: ['**/*.mjs'], + rules: { + 'import/extensions': ['error', 'ignorePackages'], + }, + }, { files: ['packages/*/src/**/*{.ts,.tsx,.js}'], excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx'], @@ -152,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/CHANGELOG.md b/CHANGELOG.md index 0886f83e7f00e..9a1706e2d9d50 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,169 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-beta.1 + +_Feb 1, 2024_ + +We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: + +- 🏃 Improve the filtering performance of the Data Grid by changing the `GridColDef` methods signatures (#11573) @cherniavskii +- 🎁 The Line Chart component now has animation by default (#11620) @alexfauquette +- 🚀 All charts have click handlers (#11411) @alexfauquette + Test their respective documentation demonstrations to know more about the data format: + + - [Scatter Chart](https://next.mui.com/x/react-charts/scatter/#click-event) + - [Line Chart](https://next.mui.com/x/react-charts/lines/#click-event) + - [Bar Chart](https://next.mui.com/x/react-charts/bars/#click-event) + - [Pie Chart](https://next.mui.com/x/react-charts/pie/#click-event) + + Big thanks to @giladappsforce and @yaredtsy for their contribution on exploring this feature. + +### Data Grid + +### Breaking changes + +- The signature of `GridColDef['valueGetter']` has been changed for performance reasons: + + ```diff + - valueGetter: ({ value, row }) => value, + + valueGetter: (value, row, column, apiRef) => value, + ``` + + The `GridValueGetterParams` interface has been removed: + + ```diff + - const customValueGetter = (params: GridValueGetterParams) => params.row.budget; + + const customValueGetter: GridValueGetterFn = (value, row) => row.budget; + ``` + +- The signature of `GridColDef['valueFormatter']` has been changed for performance reasons: + + ```diff + - valueFormatter: ({ value }) => value, + + valueFormatter: (value, row, column, apiRef) => value, + ``` + + The `GridValueFormatterParams` interface has been removed: + + ```diff + - const gridDateFormatter = ({ value, field, id }: GridValueFormatterParams) => value.toLocaleDateString(); + + const gridDateFormatter: GridValueFormatter = (value: Date) => value.toLocaleDateString(); + ``` + +- The signature of `GridColDef['valueSetter']` has been changed for performance reasons: + + ```diff + - valueSetter: (params) => { + - const [firstName, lastName] = params.value!.toString().split(' '); + - return { ...params.row, firstName, lastName }; + - } + + valueSetter: (value, row) => { + + const [firstName, lastName] = value!.toString().split(' '); + + return { ...row, firstName, lastName }; + +} + ``` + + The `GridValueSetterParams` interface has been removed: + + ```diff + - const setFullName = (params: GridValueSetterParams) => { + - const [firstName, lastName] = params.value!.toString().split(' '); + - return { ...params.row, firstName, lastName }; + - }; + + const setFullName: GridValueSetter = (value, row) => { + + const [firstName, lastName] = value!.toString().split(' '); + + return { ...row, firstName, lastName }; + + } + ``` + +- The signature of `GridColDef['valueParser']` has been changed for performance reasons: + + ```diff + - valueParser: (value, params: GridCellParams) => value.toLowerCase(), + + valueParser: (value, row, column, apiRef) => value.toLowerCase(), + ``` + +- The signature of `GridColDef['colSpan']` has been changed for performance reasons: + + ```diff + - colSpan: ({ row, field, value }: GridCellParams) => (row.id === 'total' ? 2 : 1), + + colSpan: (value, row, column, apiRef) => (row.id === 'total' ? 2 : 1), + ``` + +- The signature of `GridColDef['pastedValueParser']` has been changed for performance reasons: + + ```diff + - pastedValueParser: (value, params) => new Date(value), + + pastedValueParser: (value, row, column, apiRef) => new Date(value), + ``` + +- The signature of `GridColDef['groupingValueGetter']` has been changed for performance reasons: + + ```diff + - groupingValueGetter: (params) => params.value.name, + + groupingValueGetter: (value: { name: string }) => value.name, + ``` + +#### `@mui/x-data-grid@7.0.0-beta.1` + +- [DataGrid] Add `toggleAllMode` prop to the `columnsManagement` slot (#10794) @H999 +- [DataGrid] Change `GridColDef` methods signatures (#11573) @cherniavskii +- [DataGrid] Fix row reorder with cell selection (#11783) @PEsteves8 +- [DataGrid] Make columns management' casing consistent (#11858) @MBilalShafi +- [l10n] Improve Hebrew (he-IL) locale (#11788) @danielmishan85 + +#### `@mui/x-data-grid-pro@7.0.0-beta.1` [![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@7.0.0-beta.1`. + +#### `@mui/x-data-grid-premium@7.0.0-beta.1` [![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@7.0.0-beta.1`. + +### Date Pickers + +#### `@mui/x-date-pickers@7.0.0-beta.1` + +- [TimePicker] Add missing toolbar classes descriptions (#11856) @LukasTy + +#### `@mui/x-date-pickers-pro@7.0.0-beta.1` [![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@7.0.0-beta.1`. + +### Charts + +#### Breaking changes + +- The line chart now have animation by default. + You can disable it with `skipAnimation` prop. + See [animation documentation](next.mui.com/x/react-charts/lines/#animation) for more information. + +- Pie charts `onClick` get renamed `onItemClick` for consistency with other charts click callback. + +`@mui/x-charts@7.0.0-beta.1` + +- [charts] Add `onClick` support (#11411) @alexfauquette +- [charts] Add line animation (#11620) @alexfauquette +- [charts] Document how to modify color according to values (#11824) @alexfauquette +- [charts] Fix Tooltip crash with out of range lines (#11898) @alexfauquette + +### Docs + +- [docs] Add a general uplift to the changelog page (#11396) @danilo-leal +- [docs] Do not reference the Tree View overview page in the API pages (#11826) @flaviendelangle +- [docs] Fix charts API links (#11832) @alexfauquette +- [docs] Improve Support page (#11556) @oliviertassinari +- [docs] Improve column visibility documentation (#11857) @MBilalShafi +- [docs] Polish header @oliviertassinari +- [docs] Sync support page with core @oliviertassinari +- [docs] Update whats new page with "v7 Beta blogpost" content (#11879) @joserodolfofreitas + +### Core + +- [core] Rely on immutable ref when possible (#11847) @oliviertassinari +- [core] Bump monorepo (#11897) @alexfauquette + ## 7.0.0-beta.0 _Jan 26, 2024_ @@ -1873,6 +2036,90 @@ 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 +## 6.19.3 + +_Feb 1, 2024_ + +We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨: + +- 🌍 Improve Hebrew (he-IL) locale (#11831) @danielmishan85 +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.19.3` + +- [l10n] Improve Hebrew (he-IL) locale (@danielmishan85) (#11831) + +#### `@mui/x-data-grid-pro@6.19.3` [![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@6.19.3`. + +#### `@mui/x-data-grid-premium@6.19.3` [![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@6.19.3`. + +### Date Pickers + +#### `@mui/x-date-pickers@6.19.3` + +- [TimePicker] Add missing toolbar classes descriptions (#11862) @LukasTy + +#### `@mui/x-date-pickers-pro@6.19.3` [![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@6.19.3`. + +### Charts / `@mui/x-charts@6.19.3` + +- [charts] Document how to modify color according to values (#11854) @alexfauquette + +### Docs + +- [docs] Add a general uplift to the whats new page (#11883) @danilo-leal +- [docs] Fix 404 (#11852) @alexfauquette +- [docs] Fix generation (#11825) @alexfauquette +- [docs] Fix docs:api when typo in slots typing (#11861) @alexfauquette +- [docs] Improve Support page (#11556) @oliviertassinari +- [docs] Sync support page with core @oliviertassinari +- [docs] These API don't exist in MUI X v6 @oliviertassinari +- [docs] Update whats new page with v7 Beta blogpost content (#11886) @joserodolfofreitas + +## 6.19.2 + +_Jan 25, 2024_ + +We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨: + +- 🚀 Apply the `layout.tabs` class to `Tabs` slot (@LukasTy) (#11782) +- 🐞 Bugfixes + +### Date Pickers + +#### `@mui/x-date-pickers@6.19.2` + +- [pickers] Apply the `layout.tabs` class to `Tabs` slot (@LukasTy) (#11782) + +#### `@mui/x-date-pickers-pro@6.19.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@6.19.2`, plus: + +- [DateRangePicker] Remove `calendars` prop on `Mobile` (@LukasTy) (#11771) + +### Data Grid + +#### `@mui/x-data-grid@6.19.2` + +- [DataGrid] Fix support for tree with more than 50,000 children (@zenazn) (#11808) + +#### `@mui/x-data-grid-pro@6.19.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@6.19.2`. + +#### `@mui/x-data-grid-premium@6.19.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@6.19.2`. + ## 6.19.1 _Jan 19, 2024_ diff --git a/babel.config.js b/babel.config.js index 1019a75c38100..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'), @@ -21,11 +21,9 @@ const defaultAlias = { '@mui-internal/api-docs-builder': resolveAliasPath( './node_modules/@mui/monorepo/packages/api-docs-builder', ), - '@mui-internal/docs-utilities': '@mui/monorepo/packages/docs-utilities', '@mui-internal/test-utils': resolveAliasPath( './node_modules/@mui/monorepo/packages/test-utils/src', ), - 'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src', docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'), test: resolveAliasPath('./test'), packages: resolveAliasPath('./packages'), 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 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>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/docs/babel.config.js b/docs/babel.config.js index a32caeb7801f0..2ec7799d61593 100644 --- a/docs/babel.config.js +++ b/docs/babel.config.js @@ -2,21 +2,20 @@ 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', '@mui/material-nextjs': '../node_modules/@mui/monorepo/packages/mui-material-nextjs/src', '@mui-internal/api-docs-builder': '../node_modules/@mui/monorepo/packages/api-docs-builder', - '@mui-internal/docs-utilities': '../node_modules/@mui/monorepo/packages/docs-utilities', docs: '../node_modules/@mui/monorepo/docs', docsx: './', }; diff --git a/docs/constants.js b/docs/constants.js new file mode 100644 index 0000000000000..8b2dbe4c383c9 --- /dev/null +++ b/docs/constants.js @@ -0,0 +1,6 @@ +// These are also loaded by scripts that only undestand CommonJS. (l10n) + +module.exports = { + SOURCE_CODE_REPO: 'https://github.com/mui/mui-x', + SOURCE_GITHUB_BRANCH: 'next', // #default-branch-switch +}; diff --git a/docs/data/charts-component-api-pages.ts b/docs/data/charts-component-api-pages.ts index b2a117fef59bc..76bc2512caa06 100644 --- a/docs/data/charts-component-api-pages.ts +++ b/docs/data/charts-component-api-pages.ts @@ -57,6 +57,10 @@ const apiPages: MuiPage[] = [ pathname: '/x/api/charts/charts-legend', title: 'ChartsLegend', }, + { + pathname: '/x/api/charts/charts-on-axis-click-handler', + title: 'ChartsOnAxisClickHandler', + }, { pathname: '/x/api/charts/charts-reference-line', title: 'ChartsReferenceLine', @@ -85,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/bars/BarClickNoSnap.js b/docs/data/charts/bars/BarClickNoSnap.js new file mode 100644 index 0000000000000..da4a899c22abc --- /dev/null +++ b/docs/data/charts/bars/BarClickNoSnap.js @@ -0,0 +1,96 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import IconButton from '@mui/material/IconButton'; +import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; + +import { BarChart } from '@mui/x-charts/BarChart'; + +import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; + +const barChartsParams = { + series: [ + { + id: 'series-1', + data: [3, 4, 1, 6, 5], + label: 'A', + stack: 'total', + highlightScope: { + highlighted: 'item', + }, + }, + { + id: 'series-2', + data: [4, 3, 1, 5, 8], + label: 'B', + stack: 'total', + highlightScope: { + highlighted: 'item', + }, + }, + { + id: 'series-3', + data: [4, 2, 5, 4, 1], + label: 'C', + highlightScope: { + highlighted: 'item', + }, + }, + ], + xAxis: [{ data: ['0', '3', '6', '9', '12'], scaleType: 'band', id: 'axis1' }], + height: 400, +}; + +export default function BarClickNoSnap() { + const [itemData, setItemData] = React.useState(); + const [axisData, setAxisData] = React.useState(); + + return ( + + + setItemData(d)} + onAxisClick={(event, d) => setAxisData(d)} + /> + + + + + Click on the chart + { + setItemData(null); + setAxisData(null); + }} + > + + + + + + + ); +} diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md index 2603d5f2d1b0b..1fe2616864e39 100644 --- a/docs/data/charts/bars/bars.md +++ b/docs/data/charts/bars/bars.md @@ -1,7 +1,7 @@ --- title: React Bar chart productId: x-charts -components: BarChart, BarElement, BarPlot +components: BarChart, BarElement, BarPlot, ChartsOnAxisClickHandler --- # Charts - Bars @@ -64,6 +64,48 @@ If you're using [composition](/x/react-charts/composition/), you should set the {{"demo": "HorizontalBars.js"}} +## Click event + +Bar charts provides two click handlers: + +- `onItemClick` for click on a specific bar. +- `onAxisClick` for a click anywhere in the chart + +They both provide the following signature. + +```js +const clickHandler = ( + event, // The mouse event. + params, // An object that identifies the clicked elements. +) => {}; +``` + +{{"demo": "BarClickNoSnap.js"}} + +:::info +Their is a slight difference between the `event` of `onItemClick` and `onAxisClick`: + +- For `onItemClick` it's a React synthetic mouse event emitted by the bar component. +- For `onAxisClick` it's a native mouse event emitted by the svg component. + +::: + +### Composition + +If you're using composition, you can get those click event as follow. +Notice that the `onAxisClick` will handle both bar and line series if you mix them. + +```jsx +import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler'; +// ... + + + {/* ... */} + + +; +``` + ## Animation To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop. 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/LineClickNoSnap.js b/docs/data/charts/lines/LineClickNoSnap.js new file mode 100644 index 0000000000000..f60adf5623891 --- /dev/null +++ b/docs/data/charts/lines/LineClickNoSnap.js @@ -0,0 +1,102 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import IconButton from '@mui/material/IconButton'; +import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; + +import { LineChart } from '@mui/x-charts/LineChart'; + +import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; + +const lineChartsParams = { + series: [ + { + id: 'series-1', + data: [3, 4, 1, 6, 5], + label: 'A', + area: true, + stack: 'total', + highlightScope: { + highlighted: 'item', + }, + }, + { + id: 'series-2', + data: [4, 3, 1, 5, 8], + label: 'B', + area: true, + stack: 'total', + highlightScope: { + highlighted: 'item', + }, + }, + { + id: 'series-3', + data: [4, 2, 5, 4, 1], + label: 'C', + area: true, + stack: 'total', + highlightScope: { + highlighted: 'item', + }, + }, + ], + xAxis: [{ data: [0, 3, 6, 9, 12], scaleType: 'linear', id: 'axis1' }], + height: 400, +}; + +export default function LineClickNoSnap() { + const [itemData, setItemData] = React.useState(); + const [axisData, setAxisData] = React.useState(); + + return ( + + + setItemData(d)} + onMarkClick={(event, d) => setItemData(d)} + onLineClick={(event, d) => setItemData(d)} + onAxisClick={(event, d) => setAxisData(d)} + /> + + + + + Click on the chart + { + setItemData(null); + setAxisData(null); + }} + > + + + + + + + ); +} diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md index 37a1250e87f8a..72b117a8e159c 100644 --- a/docs/data/charts/lines/lines.md +++ b/docs/data/charts/lines/lines.md @@ -1,7 +1,7 @@ --- title: React Line chart productId: x-charts -components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot, AreaElement, AreaPlot, AnimatedLine, AnimatedArea +components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot, AreaElement, AreaPlot, AnimatedLine, AnimatedArea, ChartsOnAxisClickHandler --- # Charts - Lines @@ -91,6 +91,51 @@ However, it cannot extrapolate the curve before the first non-null data point or {{"demo": "ConnectNulls.js"}} +## Click event + +Line charts provides multiple click handlers: + +- `onAreaClick` for click on a specific area. +- `onLineClick` for click on a specific line. +- `onMarkClick` for click on a specific mark. +- `onAxisClick` for a click anywhere in the chart + +They all provide the following signature. + +```js +const clickHandler = ( + event, // The mouse event. + params, // An object that identifies the clicked elements. +) => {}; +``` + +{{"demo": "LineClickNoSnap.js"}} + +:::info +Their is a slight difference between the `event` of `onAxisClick` and the others: + +- For `onAxisClick` it's a native mouse event emitted by the svg component. +- For others, it's a React synthetic mouse event emitted by the area, line, or mark component. + +::: + +### Composition + +If you're using composition, you can get those click event as follow. +Notice that the `onAxisClick` will handle both bar and line series if you mix them. + +```jsx +import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler'; +// ... + + + {/* ... */} + + + +; +``` + ## Styling ### Interpolation diff --git a/docs/data/charts/pie/PieClickNoSnap.js b/docs/data/charts/pie/PieClickNoSnap.js new file mode 100644 index 0000000000000..9e20f6c90adf2 --- /dev/null +++ b/docs/data/charts/pie/PieClickNoSnap.js @@ -0,0 +1,97 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import IconButton from '@mui/material/IconButton'; +import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; + +import { PieChart } from '@mui/x-charts/PieChart'; + +import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; + +const data1 = [ + { label: 'Group A', value: 400 }, + { label: 'Group B', value: 300 }, + { label: 'Group C', value: 300 }, + { label: 'Group D', value: 200 }, +]; + +const data2 = [ + { label: 'A1', value: 100 }, + { label: 'A2', value: 300 }, + { label: 'B1', value: 100 }, + { label: 'B2', value: 80 }, + { label: 'B3', value: 40 }, + { label: 'B4', value: 30 }, + { label: 'B5', value: 50 }, + { label: 'C1', value: 100 }, + { label: 'C2', value: 200 }, + { label: 'D1', value: 150 }, + { label: 'D2', value: 50 }, +]; +const series = [ + { + innerRadius: 0, + outerRadius: 80, + id: 'series-1', + data: data1, + }, + { + innerRadius: 100, + outerRadius: 120, + id: 'series-2', + data: data2, + }, +]; + +export default function PieClickNoSnap() { + const [itemData, setItemData] = React.useState(); + + return ( + + + setItemData(d)} + />{' '} + + + + + Click on the chart + { + setItemData(null); + }} + > + + + + + + + ); +} diff --git a/docs/data/charts/pie/pie.md b/docs/data/charts/pie/pie.md index e0126a44cfae9..9c2237e68c873 100644 --- a/docs/data/charts/pie/pie.md +++ b/docs/data/charts/pie/pie.md @@ -91,6 +91,20 @@ This value can be negative to reduce arc size. {{"demo": "PieActiveArc.js"}} +## Click event + +Pie Chart provides an `onItemClick` handler for handling clicks on specific pie arcs. +It has the following signature. + +```js +const onItemClick = ( + event, // The mouse event. + params, // An object that identifies the clicked element. +) => {}; +``` + +{{"demo": "PieClickNoSnap.js"}} + ## Animation To skip animation at the creation and update of your chart you can use the `skipAnimation` prop. diff --git a/docs/data/charts/scatter/ScatterClickNoSnap.js b/docs/data/charts/scatter/ScatterClickNoSnap.js new file mode 100644 index 0000000000000..decb628cb1fac --- /dev/null +++ b/docs/data/charts/scatter/ScatterClickNoSnap.js @@ -0,0 +1,121 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import IconButton from '@mui/material/IconButton'; +import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; + +import { ScatterChart } from '@mui/x-charts/ScatterChart'; + +import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; + +const scatterChartsParams = { + series: [ + { + id: 'series-1', + data: [ + { x: 6.5e-2, y: -1.3, id: 0 }, + { x: -2.1, y: -7.0e-1, id: 1 }, + { x: -7.6e-1, y: -6.7e-1, id: 2 }, + { x: -1.5e-2, y: -2.0e-1, id: 3 }, + { x: -1.4, y: -9.9e-1, id: 4 }, + { x: -1.1, y: -1.5, id: 5 }, + { x: -7.0e-1, y: -2.7e-1, id: 6 }, + { x: -5.1e-1, y: -8.8e-1, id: 7 }, + { x: -4.0e-3, y: -1.4, id: 8 }, + { x: -1.3, y: -2.2, id: 9 }, + ], + label: 'A', + highlightScope: { + highlighted: 'item', + }, + }, + { + id: 'series-2', + data: [ + { x: 1.8, y: -1.7e-2, id: 0 }, + { x: 7.1e-1, y: 2.6e-1, id: 1 }, + { x: -1.2, y: 9.8e-1, id: 2 }, + { x: 2.0, y: -2.0e-1, id: 3 }, + { x: 9.4e-1, y: -2.7e-1, id: 4 }, + { x: -4.8e-1, y: -1.6e-1, id: 5 }, + { x: -1.5, y: 1.1, id: 6 }, + { x: 1.3, y: 3.4e-1, id: 7 }, + { x: -4.2e-1, y: 1.0e-1, id: 8 }, + { x: 5.4e-2, y: 4.0e-1, id: 9 }, + ], + label: 'B', + highlightScope: { + highlighted: 'item', + }, + }, + ], + height: 400, +}; + +export default function ScatterClickNoSnap() { + const [data, setData] = React.useState(); + + const { axis, item, ...other } = data ?? {}; + const dataDisplayed = data && { + ...(item + ? { + item: { + dataIndex: item.dataIndex, + series: { + id: item.series.id, + toReplace: '', + }, + }, + } + : undefined), + ...(axis ? { axis } : undefined), + ...other, + }; + return ( + + + setData(d)} + /> + + + + Click on the chart + { + setData(null); + }} + > + + + + + + + ); +} diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md index c66ad53e6079a..084fbed789b85 100644 --- a/docs/data/charts/scatter/scatter.md +++ b/docs/data/charts/scatter/scatter.md @@ -33,6 +33,24 @@ To use this feature with composition, add the `ChartsVoronoiHandler`. ``` +## Click event + +Scatter Chart provides an `onItemClick` handler for handling clicks on specific scatter items. +It has the following signature. + +```js +const onItemClick = ( + event, // The mouse event. + params, // An object that identifies the clicked elements. +) => {}; +``` + +{{"demo": "ScatterClickNoSnap.js"}} + +If `disableVoronoi=true`, users need to click precisely on the scatter element, and the mouse event will come from this element. + +Otherwise, the click behavior will be the same as defined in the [interaction section](#interaction) and the mouse event will come from the svg component. + ## Styling ### CSS 🚧 diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md index c126bf0f45e29..43ba5b298d15f 100644 --- a/docs/data/charts/tooltip/tooltip.md +++ b/docs/data/charts/tooltip/tooltip.md @@ -9,9 +9,9 @@ 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. -## Interactions +## Tooltip trigger The tooltip can be triggered by two kinds of events: @@ -86,7 +86,7 @@ It will remove the header showing the x-axis value from the tooltip. If you're using composition, by default, the axis will be listening for mouse events to get its current x/y values. If you don't need it, you can disable those listeners with the `disableAxisListener` prop. -You need those listeners if you are using [axes highlight](/x/react-charts/tooltip/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#interactions). +You need those listeners if you are using [axes highlight](/x/react-charts/tooltip/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#tooltip-trigger). ```jsx diff --git a/docs/data/data-grid/aggregation/AggregationColDefAggregable.js b/docs/data/data-grid/aggregation/AggregationColDefAggregable.js index dbdfe5da56988..e23410c8e7818 100644 --- a/docs/data/data-grid/aggregation/AggregationColDefAggregable.js +++ b/docs/data/data-grid/aggregation/AggregationColDefAggregable.js @@ -23,7 +23,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx b/docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx index 61b3d5d6cf36e..d67e44cacd711 100644 --- a/docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx +++ b/docs/data/data-grid/aggregation/AggregationColDefAggregable.tsx @@ -23,7 +23,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationColDefNonAggregable.js b/docs/data/data-grid/aggregation/AggregationColDefNonAggregable.js index 43b88020a1aad..b68f392842cf4 100644 --- a/docs/data/data-grid/aggregation/AggregationColDefNonAggregable.js +++ b/docs/data/data-grid/aggregation/AggregationColDefNonAggregable.js @@ -23,7 +23,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationColDefNonAggregable.tsx b/docs/data/data-grid/aggregation/AggregationColDefNonAggregable.tsx index ecc1b1407e1c5..e9facc9195e00 100644 --- a/docs/data/data-grid/aggregation/AggregationColDefNonAggregable.tsx +++ b/docs/data/data-grid/aggregation/AggregationColDefNonAggregable.tsx @@ -23,7 +23,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationControlled.js b/docs/data/data-grid/aggregation/AggregationControlled.js index ea05bd5793108..dd4f26158ebe9 100644 --- a/docs/data/data-grid/aggregation/AggregationControlled.js +++ b/docs/data/data-grid/aggregation/AggregationControlled.js @@ -17,7 +17,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationControlled.tsx b/docs/data/data-grid/aggregation/AggregationControlled.tsx index 9bf1e433d3070..66b4ef4370af0 100644 --- a/docs/data/data-grid/aggregation/AggregationControlled.tsx +++ b/docs/data/data-grid/aggregation/AggregationControlled.tsx @@ -21,7 +21,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationCustomFunction.js b/docs/data/data-grid/aggregation/AggregationCustomFunction.js index 25bda31c3cfc4..7691e12ef11f6 100644 --- a/docs/data/data-grid/aggregation/AggregationCustomFunction.js +++ b/docs/data/data-grid/aggregation/AggregationCustomFunction.js @@ -31,7 +31,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationCustomFunction.tsx b/docs/data/data-grid/aggregation/AggregationCustomFunction.tsx index 044cd70bf6c8e..979ba2b313ab6 100644 --- a/docs/data/data-grid/aggregation/AggregationCustomFunction.tsx +++ b/docs/data/data-grid/aggregation/AggregationCustomFunction.tsx @@ -33,7 +33,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationFiltering.js b/docs/data/data-grid/aggregation/AggregationFiltering.js index 66f67462935bd..44d2db771d0e4 100644 --- a/docs/data/data-grid/aggregation/AggregationFiltering.js +++ b/docs/data/data-grid/aggregation/AggregationFiltering.js @@ -17,7 +17,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationFiltering.tsx b/docs/data/data-grid/aggregation/AggregationFiltering.tsx index d6dbeaddd85d5..9b4e63676084b 100644 --- a/docs/data/data-grid/aggregation/AggregationFiltering.tsx +++ b/docs/data/data-grid/aggregation/AggregationFiltering.tsx @@ -17,7 +17,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationGetAggregationPosition.js b/docs/data/data-grid/aggregation/AggregationGetAggregationPosition.js index c982b38c0e4cf..a3ee72b9c6443 100644 --- a/docs/data/data-grid/aggregation/AggregationGetAggregationPosition.js +++ b/docs/data/data-grid/aggregation/AggregationGetAggregationPosition.js @@ -31,7 +31,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationGetAggregationPosition.tsx b/docs/data/data-grid/aggregation/AggregationGetAggregationPosition.tsx index 286e46bab22d6..a7b8766ec1bb4 100644 --- a/docs/data/data-grid/aggregation/AggregationGetAggregationPosition.tsx +++ b/docs/data/data-grid/aggregation/AggregationGetAggregationPosition.tsx @@ -32,7 +32,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationInitialState.js b/docs/data/data-grid/aggregation/AggregationInitialState.js index 93057744fa732..68ce37b2c22f3 100644 --- a/docs/data/data-grid/aggregation/AggregationInitialState.js +++ b/docs/data/data-grid/aggregation/AggregationInitialState.js @@ -17,7 +17,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationInitialState.tsx b/docs/data/data-grid/aggregation/AggregationInitialState.tsx index 7f6dcf5bd509a..403388b35dfff 100644 --- a/docs/data/data-grid/aggregation/AggregationInitialState.tsx +++ b/docs/data/data-grid/aggregation/AggregationInitialState.tsx @@ -17,7 +17,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationMultipleRowFields.js b/docs/data/data-grid/aggregation/AggregationMultipleRowFields.js index 9432c00a61c74..1ef1ec469957b 100644 --- a/docs/data/data-grid/aggregation/AggregationMultipleRowFields.js +++ b/docs/data/data-grid/aggregation/AggregationMultipleRowFields.js @@ -31,13 +31,13 @@ const COLUMNS = [ type: 'number', width: 70, groupable: false, - valueGetter: ({ row }) => { + valueGetter: (value, row) => { if (!row.gross || !row.budget) { return null; } return calculateProfit(row.gross, row.budget); }, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return null; } @@ -50,7 +50,7 @@ const COLUMNS = [ type: 'number', minWidth: 140, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } @@ -63,7 +63,7 @@ const COLUMNS = [ type: 'number', minWidth: 140, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationMultipleRowFields.tsx b/docs/data/data-grid/aggregation/AggregationMultipleRowFields.tsx index 099439992db7e..07896dfa7290f 100644 --- a/docs/data/data-grid/aggregation/AggregationMultipleRowFields.tsx +++ b/docs/data/data-grid/aggregation/AggregationMultipleRowFields.tsx @@ -7,7 +7,7 @@ import { useGridApiRef, useKeepGroupedColumnsHidden, } from '@mui/x-data-grid-premium'; -import { useMovieData } from '@mui/x-data-grid-generator'; +import { useMovieData, Movie } from '@mui/x-data-grid-generator'; const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', @@ -20,7 +20,7 @@ function calculateProfit(gross: number, budget: number) { return (gross - budget) / budget; } -const COLUMNS: GridColDef[] = [ +const COLUMNS: GridColDef[] = [ { field: 'title', headerName: 'Title', width: 200, groupable: false }, { field: 'company', @@ -33,13 +33,13 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 70, groupable: false, - valueGetter: ({ row }) => { + valueGetter: (value, row) => { if (!row.gross || !row.budget) { return null; } return calculateProfit(row.gross, row.budget); }, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return null; } @@ -52,7 +52,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', minWidth: 140, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } @@ -65,7 +65,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', minWidth: 140, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationRemoveFunctionAllColumns.js b/docs/data/data-grid/aggregation/AggregationRemoveFunctionAllColumns.js index fee7e52de356c..b742e996f35c5 100644 --- a/docs/data/data-grid/aggregation/AggregationRemoveFunctionAllColumns.js +++ b/docs/data/data-grid/aggregation/AggregationRemoveFunctionAllColumns.js @@ -20,7 +20,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationRemoveFunctionAllColumns.tsx b/docs/data/data-grid/aggregation/AggregationRemoveFunctionAllColumns.tsx index 64ab72e7df4ac..4e7d017f270c2 100644 --- a/docs/data/data-grid/aggregation/AggregationRemoveFunctionAllColumns.tsx +++ b/docs/data/data-grid/aggregation/AggregationRemoveFunctionAllColumns.tsx @@ -21,7 +21,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationRemoveFunctionOneColumn.js b/docs/data/data-grid/aggregation/AggregationRemoveFunctionOneColumn.js index a251fe9a9cf0f..31aeef25b95d4 100644 --- a/docs/data/data-grid/aggregation/AggregationRemoveFunctionOneColumn.js +++ b/docs/data/data-grid/aggregation/AggregationRemoveFunctionOneColumn.js @@ -17,7 +17,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationRemoveFunctionOneColumn.tsx b/docs/data/data-grid/aggregation/AggregationRemoveFunctionOneColumn.tsx index 3584dad91db66..eef15e64a31bf 100644 --- a/docs/data/data-grid/aggregation/AggregationRemoveFunctionOneColumn.tsx +++ b/docs/data/data-grid/aggregation/AggregationRemoveFunctionOneColumn.tsx @@ -17,7 +17,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationRowGrouping.js b/docs/data/data-grid/aggregation/AggregationRowGrouping.js index 60406b087f723..34dbd8ad7c2da 100644 --- a/docs/data/data-grid/aggregation/AggregationRowGrouping.js +++ b/docs/data/data-grid/aggregation/AggregationRowGrouping.js @@ -26,7 +26,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationRowGrouping.tsx b/docs/data/data-grid/aggregation/AggregationRowGrouping.tsx index 6d7feee5bedff..4a2a996e49234 100644 --- a/docs/data/data-grid/aggregation/AggregationRowGrouping.tsx +++ b/docs/data/data-grid/aggregation/AggregationRowGrouping.tsx @@ -27,7 +27,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationTreeData.js b/docs/data/data-grid/aggregation/AggregationTreeData.js index f13b2c299d342..460f64c2a2ee7 100644 --- a/docs/data/data-grid/aggregation/AggregationTreeData.js +++ b/docs/data/data-grid/aggregation/AggregationTreeData.js @@ -89,23 +89,23 @@ const columns = [ field: 'size', headerName: 'Size', type: 'number', - valueFormatter: (params) => { - if (params.value == null) { + valueFormatter: (value) => { + if (value == null) { return ''; } - if (params.value < 100) { - return `${params.value} b`; + if (value < 100) { + return `${value} b`; } - if (params.value < 1_000_000) { - return `${Math.floor(params.value / 100) / 10} Kb`; + if (value < 1_000_000) { + return `${Math.floor(value / 100) / 10} Kb`; } - if (params.value < 1_000_000_000) { - return `${Math.floor(params.value / 100_000) / 10} Mb`; + if (value < 1_000_000_000) { + return `${Math.floor(value / 100_000) / 10} Mb`; } - return `${Math.floor(params.value / 100_000_000) / 10} Gb`; + return `${Math.floor(value / 100_000_000) / 10} Gb`; }, }, { @@ -113,12 +113,12 @@ const columns = [ headerName: 'Last modification', type: 'dateTime', width: 200, - valueGetter: (params) => { - if (params.value == null) { + valueGetter: (value) => { + if (value == null) { return null; } - return new Date(params.value); + return new Date(value); }, }, ]; diff --git a/docs/data/data-grid/aggregation/AggregationTreeData.tsx b/docs/data/data-grid/aggregation/AggregationTreeData.tsx index 78c6456f21f39..b5caa5a5a1854 100644 --- a/docs/data/data-grid/aggregation/AggregationTreeData.tsx +++ b/docs/data/data-grid/aggregation/AggregationTreeData.tsx @@ -95,28 +95,28 @@ const rows: GridRowsProp = [ }, ]; -const columns: GridColDef[] = [ +const columns: GridColDef[] = [ { field: 'size', headerName: 'Size', type: 'number', - valueFormatter: (params) => { - if (params.value == null) { + valueFormatter: (value) => { + if (value == null) { return ''; } - if (params.value < 100) { - return `${params.value} b`; + if (value < 100) { + return `${value} b`; } - if (params.value < 1_000_000) { - return `${Math.floor(params.value / 100) / 10} Kb`; + if (value < 1_000_000) { + return `${Math.floor(value / 100) / 10} Kb`; } - if (params.value < 1_000_000_000) { - return `${Math.floor(params.value / 100_000) / 10} Mb`; + if (value < 1_000_000_000) { + return `${Math.floor(value / 100_000) / 10} Mb`; } - return `${Math.floor(params.value / 100_000_000) / 10} Gb`; + return `${Math.floor(value / 100_000_000) / 10} Gb`; }, }, { @@ -124,12 +124,12 @@ const columns: GridColDef[] = [ headerName: 'Last modification', type: 'dateTime', width: 200, - valueGetter: (params) => { - if (params.value == null) { + valueGetter: (value) => { + if (value == null) { return null; } - return new Date(params.value); + return new Date(value); }, }, ]; diff --git a/docs/data/data-grid/aggregation/AggregationValueFormatter.js b/docs/data/data-grid/aggregation/AggregationValueFormatter.js index 568eee480b7cf..955a77b5ec8a2 100644 --- a/docs/data/data-grid/aggregation/AggregationValueFormatter.js +++ b/docs/data/data-grid/aggregation/AggregationValueFormatter.js @@ -25,7 +25,7 @@ const COLUMNS = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/AggregationValueFormatter.tsx b/docs/data/data-grid/aggregation/AggregationValueFormatter.tsx index 10e92d96373a2..1a3f4c5a1c2f9 100644 --- a/docs/data/data-grid/aggregation/AggregationValueFormatter.tsx +++ b/docs/data/data-grid/aggregation/AggregationValueFormatter.tsx @@ -27,7 +27,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return value; } diff --git a/docs/data/data-grid/aggregation/aggregation.md b/docs/data/data-grid/aggregation/aggregation.md index f86b89c8f5f2e..0dad0c32852c2 100644 --- a/docs/data/data-grid/aggregation/aggregation.md +++ b/docs/data/data-grid/aggregation/aggregation.md @@ -228,7 +228,7 @@ In the example below, the values in the `profit` column are derived from the `gr { field: 'profit', type: 'number', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { if (!row.gross || !row.budget) { return null; } 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/ValueFormatterGrid.js b/docs/data/data-grid/column-definition/ValueFormatterGrid.js index f9fd6b171f2e6..4699cc8792f6d 100644 --- a/docs/data/data-grid/column-definition/ValueFormatterGrid.js +++ b/docs/data/data-grid/column-definition/ValueFormatterGrid.js @@ -27,17 +27,17 @@ export default function ValueFormatterGrid() { field: 'taxRate', headerName: 'Tax Rate', width: 150, - valueGetter: (params) => { - if (!params.value) { - return params.value; + valueGetter: (value) => { + if (!value) { + return value; } - return params.value * 100; + return value * 100; }, - valueFormatter: (params) => { - if (params.value == null) { + valueFormatter: (value) => { + if (value == null) { return ''; } - return `${params.value.toLocaleString()} %`; + return `${value.toLocaleString()} %`; }, }, ]} diff --git a/docs/data/data-grid/column-definition/ValueFormatterGrid.tsx b/docs/data/data-grid/column-definition/ValueFormatterGrid.tsx index 24a4e6049fc05..fe540c044cc6a 100644 --- a/docs/data/data-grid/column-definition/ValueFormatterGrid.tsx +++ b/docs/data/data-grid/column-definition/ValueFormatterGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGrid, GridValueFormatterParams } from '@mui/x-data-grid'; +import { DataGrid } from '@mui/x-data-grid'; const rows = [ { @@ -27,17 +27,17 @@ export default function ValueFormatterGrid() { field: 'taxRate', headerName: 'Tax Rate', width: 150, - valueGetter: (params) => { - if (!params.value) { - return params.value; + valueGetter: (value) => { + if (!value) { + return value; } - return params.value * 100; + return value * 100; }, - valueFormatter: (params: GridValueFormatterParams) => { - if (params.value == null) { + valueFormatter: (value?: number) => { + if (value == null) { return ''; } - return `${params.value.toLocaleString()} %`; + return `${value.toLocaleString()} %`; }, }, ]} diff --git a/docs/data/data-grid/column-definition/ValueGetterGrid.js b/docs/data/data-grid/column-definition/ValueGetterGrid.js index 4e45d2d764d58..498e2c4d91a96 100644 --- a/docs/data/data-grid/column-definition/ValueGetterGrid.js +++ b/docs/data/data-grid/column-definition/ValueGetterGrid.js @@ -2,9 +2,17 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { DataGrid } from '@mui/x-data-grid'; -function getFullName(params) { - return `${params.row.firstName || ''} ${params.row.lastName || ''}`; -} +const rows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon' }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, + { id: 4, lastName: 'Stark', firstName: 'Arya' }, + { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, +]; + +const getFullName = (value, row) => { + return `${row.firstName || ''} ${row.lastName || ''}`; +}; const columns = [ { field: 'firstName', headerName: 'First name', width: 130 }, @@ -17,14 +25,6 @@ const columns = [ }, ]; -const rows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon' }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, - { id: 4, lastName: 'Stark', firstName: 'Arya' }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, -]; - export default function ValueGetterGrid() { return ( diff --git a/docs/data/data-grid/column-definition/ValueGetterGrid.tsx b/docs/data/data-grid/column-definition/ValueGetterGrid.tsx index 8035a20486b95..cc4e1ea77c5c5 100644 --- a/docs/data/data-grid/column-definition/ValueGetterGrid.tsx +++ b/docs/data/data-grid/column-definition/ValueGetterGrid.tsx @@ -1,10 +1,21 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'; +import { DataGrid, GridColDef, GridValueGetter } from '@mui/x-data-grid'; -function getFullName(params: GridValueGetterParams) { - return `${params.row.firstName || ''} ${params.row.lastName || ''}`; -} +const rows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon' }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, + { id: 4, lastName: 'Stark', firstName: 'Arya' }, + { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, +]; + +const getFullName: GridValueGetter<(typeof rows)[number], unknown> = ( + value, + row, +) => { + return `${row.firstName || ''} ${row.lastName || ''}`; +}; const columns: GridColDef[] = [ { field: 'firstName', headerName: 'First name', width: 130 }, @@ -17,14 +28,6 @@ const columns: GridColDef[] = [ }, ]; -const rows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon' }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, - { id: 4, lastName: 'Stark', firstName: 'Arya' }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, -]; - export default function ValueGetterGrid() { return ( diff --git a/docs/data/data-grid/column-definition/column-definition.md b/docs/data/data-grid/column-definition/column-definition.md index 59e42a9ac1028..0c1ae990eea6f 100644 --- a/docs/data/data-grid/column-definition/column-definition.md +++ b/docs/data/data-grid/column-definition/column-definition.md @@ -42,12 +42,12 @@ You can use the `valueGetter` attribute of `GridColDef` to: const columns: GridColDef[] = [ { field: 'taxRate', - valueGetter: (params) => { - if (!params.value) { - return params.value; + valueGetter: (value) => { + if (!value) { + return value; } // Convert the decimal value to a percentage - return params.value * 100; + return value * 100; }, }, ]; @@ -59,8 +59,8 @@ You can use the `valueGetter` attribute of `GridColDef` to: const columns: GridColDef[] = [ { field: 'fullName', - valueGetter: (params) => { - return `${params.row.firstName || ''} ${params.row.lastName || ''}`; + valueGetter: (value, row) => { + return `${row.firstName || ''} ${row.lastName || ''}`; }, }, ]; @@ -72,7 +72,7 @@ You can use the `valueGetter` attribute of `GridColDef` to: const columns: GridColDef[] = [ { field: 'profit', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { if (!row.gross || !row.costs) { return null; } @@ -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`. @@ -240,7 +242,7 @@ If for any reason, your data type is not the correct one, you can use `valueGett { field: 'lastLogin', type: 'dateTime', - valueGetter: ({ value }) => value && new Date(value), + valueGetter: (value) => value && new Date(value), } ``` @@ -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-spanning/ColumnSpanningDerived.js b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js index 960cceabb0409..a79a2cb56f110 100644 --- a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js +++ b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js @@ -66,8 +66,8 @@ const slotColumnCommonFields = { hideable: false, minWidth: 140, cellClassName: (params) => params.value, - colSpan: ({ row, field, value }) => { - const index = Number(field); + colSpan: (value, row, column) => { + const index = Number(column.field); let colSpan = 1; for (let i = index + 1; i < row.slots.length; i += 1) { const nextValue = row.slots[i]; @@ -89,49 +89,49 @@ const columns = [ { field: '0', headerName: slotTimesLookup[0], - valueGetter: ({ row }) => row.slots[0], + valueGetter: (value, row) => row.slots[0], ...slotColumnCommonFields, }, { field: '1', headerName: slotTimesLookup[1], - valueGetter: ({ row }) => row.slots[1], + valueGetter: (value, row) => row.slots[1], ...slotColumnCommonFields, }, { field: '2', headerName: slotTimesLookup[2], - valueGetter: ({ row }) => row.slots[2], + valueGetter: (value, row) => row.slots[2], ...slotColumnCommonFields, }, { field: '3', headerName: slotTimesLookup[3], - valueGetter: ({ row }) => row.slots[3], + valueGetter: (value, row) => row.slots[3], ...slotColumnCommonFields, }, { field: '4', headerName: slotTimesLookup[4], - valueGetter: ({ row }) => row.slots[4], + valueGetter: (value, row) => row.slots[4], ...slotColumnCommonFields, }, { field: '5', headerName: slotTimesLookup[5], - valueGetter: ({ row }) => row.slots[5], + valueGetter: (value, row) => row.slots[5], ...slotColumnCommonFields, }, { field: '6', headerName: slotTimesLookup[6], - valueGetter: ({ row }) => row.slots[6], + valueGetter: (value, row) => row.slots[6], ...slotColumnCommonFields, }, { field: '7', headerName: slotTimesLookup[7], - valueGetter: ({ row }) => row.slots[7], + valueGetter: (value, row) => row.slots[7], ...slotColumnCommonFields, }, ]; diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx index a34476e2811c0..653671f61040f 100644 --- a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx +++ b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGridPro, GridColDef, GridCellParams } from '@mui/x-data-grid-pro'; +import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'; const slotTimesLookup = { 0: '09:00 - 10:00', @@ -22,7 +22,9 @@ type Subject = | 'Music' | 'Dance'; -const rows: Array<{ id: number; day: string; slots: Array }> = [ +type Row = { id: number; day: string; slots: Array }; + +const rows: Array = [ { id: 1, day: 'Monday', @@ -75,8 +77,8 @@ const slotColumnCommonFields: Partial = { hideable: false, minWidth: 140, cellClassName: (params) => params.value, - colSpan: ({ row, field, value }: GridCellParams) => { - const index = Number(field); + colSpan: (value, row, column) => { + const index = Number(column.field); let colSpan = 1; for (let i = index + 1; i < row.slots.length; i += 1) { const nextValue = row.slots[i]; @@ -90,7 +92,7 @@ const slotColumnCommonFields: Partial = { }, }; -const columns: GridColDef[] = [ +const columns: GridColDef[] = [ { field: 'day', headerName: 'Day', @@ -98,49 +100,49 @@ const columns: GridColDef[] = [ { field: '0', headerName: slotTimesLookup[0], - valueGetter: ({ row }) => row.slots[0], + valueGetter: (value, row) => row.slots[0], ...slotColumnCommonFields, }, { field: '1', headerName: slotTimesLookup[1], - valueGetter: ({ row }) => row.slots[1], + valueGetter: (value, row) => row.slots[1], ...slotColumnCommonFields, }, { field: '2', headerName: slotTimesLookup[2], - valueGetter: ({ row }) => row.slots[2], + valueGetter: (value, row) => row.slots[2], ...slotColumnCommonFields, }, { field: '3', headerName: slotTimesLookup[3], - valueGetter: ({ row }) => row.slots[3], + valueGetter: (value, row) => row.slots[3], ...slotColumnCommonFields, }, { field: '4', headerName: slotTimesLookup[4], - valueGetter: ({ row }) => row.slots[4], + valueGetter: (value, row) => row.slots[4], ...slotColumnCommonFields, }, { field: '5', headerName: slotTimesLookup[5], - valueGetter: ({ row }) => row.slots[5], + valueGetter: (value, row) => row.slots[5], ...slotColumnCommonFields, }, { field: '6', headerName: slotTimesLookup[6], - valueGetter: ({ row }) => row.slots[6], + valueGetter: (value, row) => row.slots[6], ...slotColumnCommonFields, }, { field: '7', headerName: slotTimesLookup[7], - valueGetter: ({ row }) => row.slots[7], + valueGetter: (value, row) => row.slots[7], ...slotColumnCommonFields, }, ]; diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.js b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.js index d1e7ab69fb180..80ff992b970be 100644 --- a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.js +++ b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.js @@ -27,7 +27,7 @@ const columns = [ headerName: 'Item/Description', ...baseColumnOptions, flex: 3, - colSpan: ({ row }) => { + colSpan: (value, row) => { if (row.id === 'SUBTOTAL' || row.id === 'TOTAL') { return 3; } @@ -36,7 +36,7 @@ const columns = [ } return undefined; }, - valueGetter: ({ value, row }) => { + valueGetter: (value, row) => { if (row.id === 'SUBTOTAL' || row.id === 'TAX' || row.id === 'TOTAL') { return row.label; } @@ -55,7 +55,7 @@ const columns = [ headerName: 'Price', flex: 1, ...baseColumnOptions, - valueGetter: ({ row, value }) => { + valueGetter: (value, row) => { if (row.id === 'TAX') { return `${row.taxRate}%`; } @@ -67,7 +67,7 @@ const columns = [ headerName: 'Total', flex: 1, ...baseColumnOptions, - valueGetter: ({ row }) => { + valueGetter: (value, row) => { if (row.id === 'SUBTOTAL') { return row.subtotal; } diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx index beda4fc1074b4..5f5dcac599db4 100644 --- a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx +++ b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx @@ -50,7 +50,7 @@ const columns: GridColDef[] = [ headerName: 'Item/Description', ...baseColumnOptions, flex: 3, - colSpan: ({ row }) => { + colSpan: (value, row) => { if (row.id === 'SUBTOTAL' || row.id === 'TOTAL') { return 3; } @@ -59,7 +59,7 @@ const columns: GridColDef[] = [ } return undefined; }, - valueGetter: ({ value, row }) => { + valueGetter: (value, row) => { if (row.id === 'SUBTOTAL' || row.id === 'TAX' || row.id === 'TOTAL') { return row.label; } @@ -78,7 +78,7 @@ const columns: GridColDef[] = [ headerName: 'Price', flex: 1, ...baseColumnOptions, - valueGetter: ({ row, value }) => { + valueGetter: (value, row) => { if (row.id === 'TAX') { return `${row.taxRate}%`; } @@ -90,7 +90,7 @@ const columns: GridColDef[] = [ headerName: 'Total', flex: 1, ...baseColumnOptions, - valueGetter: ({ row }) => { + valueGetter: (value, row) => { if (row.id === 'SUBTOTAL') { return row.subtotal; } 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/CustomColumnTypesGrid.js b/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.js index 3b54134e2d274..589e12759a599 100644 --- a/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.js +++ b/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.js @@ -32,7 +32,7 @@ const currencyFormatter = new Intl.NumberFormat('en-US', { const usdPrice = { type: 'number', width: 130, - valueFormatter: ({ value }) => currencyFormatter.format(value), + valueFormatter: (value) => currencyFormatter.format(value), cellClassName: 'font-tabular-nums', }; diff --git a/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.tsx b/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.tsx index 1dd2525169c6a..82e558130be7b 100644 --- a/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.tsx +++ b/docs/data/data-grid/custom-columns/CustomColumnTypesGrid.tsx @@ -32,7 +32,7 @@ const currencyFormatter = new Intl.NumberFormat('en-US', { const usdPrice: GridColTypeDef = { type: 'number', width: 130, - valueFormatter: ({ value }) => currencyFormatter.format(value), + valueFormatter: (value) => currencyFormatter.format(value), cellClassName: 'font-tabular-nums', }; diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js index 3278ebe5189bf..69bdb8343d583 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js @@ -36,12 +36,12 @@ const dateColumnType = { InputComponent: GridFilterDateInput, InputComponentProps: { showTime: false }, })), - valueFormatter: (params) => { - if (typeof params.value === 'string') { - return params.value; + valueFormatter: (value) => { + if (typeof value === 'string') { + return value; } - if (params.value) { - return dateAdapter.format(params.value, 'keyboardDate'); + if (value) { + return dateAdapter.format(value, 'keyboardDate'); } return ''; }, @@ -122,12 +122,12 @@ const dateTimeColumnType = { InputComponent: GridFilterDateInput, InputComponentProps: { showTime: true }, })), - valueFormatter: (params) => { - if (typeof params.value === 'string') { - return params.value; + valueFormatter: (value) => { + if (typeof value === 'string') { + return value; } - if (params.value) { - return dateAdapter.format(params.value, 'keyboardDateTime'); + if (value) { + return dateAdapter.format(value, 'keyboardDateTime'); } return ''; }, diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx index d51f0fea6b871..5942bbb3c31c6 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx @@ -42,12 +42,12 @@ const dateColumnType: GridColTypeDef = { InputComponent: GridFilterDateInput, InputComponentProps: { showTime: false }, })), - valueFormatter: (params) => { - if (typeof params.value === 'string') { - return params.value; + valueFormatter: (value) => { + if (typeof value === 'string') { + return value; } - if (params.value) { - return dateAdapter.format(params.value, 'keyboardDate'); + if (value) { + return dateAdapter.format(value, 'keyboardDate'); } return ''; }, @@ -70,7 +70,7 @@ function GridEditDateCell({ field, value, colDef, -}: GridRenderEditCellParams) { +}: GridRenderEditCellParams) { const apiRef = useGridApiContext(); const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker; @@ -137,12 +137,12 @@ const dateTimeColumnType: GridColTypeDef = { InputComponent: GridFilterDateInput, InputComponentProps: { showTime: true }, })), - valueFormatter: (params) => { - if (typeof params.value === 'string') { - return params.value; + valueFormatter: (value) => { + if (typeof value === 'string') { + return value; } - if (params.value) { - return dateAdapter.format(params.value, 'keyboardDateTime'); + if (value) { + return dateAdapter.format(value, 'keyboardDateTime'); } return ''; }, diff --git a/docs/data/data-grid/custom-columns/SparklineColumn.js b/docs/data/data-grid/custom-columns/SparklineColumn.js index 0150cac14f838..3b6eb6b9016b6 100644 --- a/docs/data/data-grid/custom-columns/SparklineColumn.js +++ b/docs/data/data-grid/custom-columns/SparklineColumn.js @@ -41,14 +41,14 @@ const columns = [ headerName: 'Monthly DLs (bar)', renderCell: (params) => , width: 150, - valueGetter: (params) => params.row.monthlyDownloads, + valueGetter: (value, row) => row.monthlyDownloads, }, { field: 'lastMonthDownloads', headerName: 'Last month DLs', type: 'number', - valueGetter: (params) => - params.row.monthlyDownloads[params.row.monthlyDownloads.length - 1], + valueGetter: (value, row) => + row.monthlyDownloads[row.monthlyDownloads.length - 1], width: 150, }, ]; diff --git a/docs/data/data-grid/custom-columns/SparklineColumn.tsx b/docs/data/data-grid/custom-columns/SparklineColumn.tsx index 7e268946d24b5..b643d30d037d6 100644 --- a/docs/data/data-grid/custom-columns/SparklineColumn.tsx +++ b/docs/data/data-grid/custom-columns/SparklineColumn.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { DataGrid, GridColDef, - GridRowsProp, GridColTypeDef, GridRenderCellParams, GRID_STRING_COL_DEF, @@ -40,7 +39,7 @@ const sparklineColumnType: GridColTypeDef = { renderCell: (params) => , }; -const columns: GridColDef[] = [ +const columns: GridColDef<(typeof rows)[number]>[] = [ { field: 'name', headerName: 'Package name', width: 180 }, { field: 'monthlyDownloads', @@ -54,14 +53,14 @@ const columns: GridColDef[] = [ headerName: 'Monthly DLs (bar)', renderCell: (params) => , width: 150, - valueGetter: (params) => params.row.monthlyDownloads, + valueGetter: (value, row) => row.monthlyDownloads, }, { field: 'lastMonthDownloads', headerName: 'Last month DLs', type: 'number', - valueGetter: (params) => - params.row.monthlyDownloads[params.row.monthlyDownloads.length - 1], + valueGetter: (value, row) => + row.monthlyDownloads[row.monthlyDownloads.length - 1], width: 150, }, ]; @@ -74,7 +73,7 @@ export default function SparklineColumn() { ); } -const rows: GridRowsProp = [ +const rows = [ { name: 'react-datepicker', monthlyDownloads: [ diff --git a/docs/data/data-grid/custom-columns/custom-columns.md b/docs/data/data-grid/custom-columns/custom-columns.md index 6c002afb4b0c3..118a6905b663a 100644 --- a/docs/data/data-grid/custom-columns/custom-columns.md +++ b/docs/data/data-grid/custom-columns/custom-columns.md @@ -10,7 +10,7 @@ The demo below defines a new column type: `usdPrice` that extends the native `nu const usdPrice: GridColTypeDef = { type: 'number', width: 130, - valueFormatter: ({ value }) => valueFormatter.format(Number(value)), + valueFormatter: (value) => valueFormatter.format(Number(value)), cellClassName: 'font-tabular-nums', }; ``` 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/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/editing/ValueParserSetterGrid.js b/docs/data/data-grid/editing/ValueParserSetterGrid.js index f7686a31037f2..0dd07cf48e5cc 100644 --- a/docs/data/data-grid/editing/ValueParserSetterGrid.js +++ b/docs/data/data-grid/editing/ValueParserSetterGrid.js @@ -1,21 +1,17 @@ import * as React from 'react'; import { DataGrid } from '@mui/x-data-grid'; -function getFullName(params) { - return `${params.row.firstName || ''} ${params.row.lastName || ''}`; -} - -function setFullName(params) { - const [firstName, lastName] = params.value.toString().split(' '); - return { ...params.row, firstName, lastName }; -} +const setFullName = (value, row) => { + const [firstName, lastName] = value.toString().split(' '); + return { ...row, firstName, lastName }; +}; -function parseFullName(value) { +const parseFullName = (value) => { return String(value) .split(' ') .map((str) => (str.length > 0 ? str[0].toUpperCase() + str.slice(1) : '')) .join(' '); -} +}; export default function ValueParserSetterGrid() { return ( @@ -25,6 +21,18 @@ export default function ValueParserSetterGrid() { ); } +const defaultRows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon' }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, + { id: 4, lastName: 'Stark', firstName: 'Arya' }, + { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, +]; + +const getFullName = (value, row) => { + return `${row.firstName || ''} ${row.lastName || ''}`; +}; + const columns = [ { field: 'firstName', headerName: 'First name', width: 130, editable: true }, { field: 'lastName', headerName: 'Last name', width: 130, editable: true }, @@ -39,11 +47,3 @@ const columns = [ sortComparator: (v1, v2) => v1.toString().localeCompare(v2.toString()), }, ]; - -const defaultRows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon' }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, - { id: 4, lastName: 'Stark', firstName: 'Arya' }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, -]; diff --git a/docs/data/data-grid/editing/ValueParserSetterGrid.tsx b/docs/data/data-grid/editing/ValueParserSetterGrid.tsx index 6b2658657840b..4ced3f4c3560f 100644 --- a/docs/data/data-grid/editing/ValueParserSetterGrid.tsx +++ b/docs/data/data-grid/editing/ValueParserSetterGrid.tsx @@ -2,25 +2,24 @@ import * as React from 'react'; import { DataGrid, GridColDef, - GridValueGetterParams, - GridValueSetterParams, + GridValueGetter, + GridValueSetter, + GridValueParser, } from '@mui/x-data-grid'; -function getFullName(params: GridValueGetterParams) { - return `${params.row.firstName || ''} ${params.row.lastName || ''}`; -} +type Row = (typeof defaultRows)[number]; -function setFullName(params: GridValueSetterParams) { - const [firstName, lastName] = params.value!.toString().split(' '); - return { ...params.row, firstName, lastName }; -} +const setFullName: GridValueSetter = (value, row) => { + const [firstName, lastName] = value!.toString().split(' '); + return { ...row, firstName, lastName }; +}; -function parseFullName(value: any) { +const parseFullName: GridValueParser = (value) => { return String(value) .split(' ') .map((str) => (str.length > 0 ? str[0].toUpperCase() + str.slice(1) : '')) .join(' '); -} +}; export default function ValueParserSetterGrid() { return ( @@ -30,6 +29,18 @@ export default function ValueParserSetterGrid() { ); } +const defaultRows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon' }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, + { id: 4, lastName: 'Stark', firstName: 'Arya' }, + { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, +]; + +const getFullName: GridValueGetter = (value, row) => { + return `${row.firstName || ''} ${row.lastName || ''}`; +}; + const columns: GridColDef[] = [ { field: 'firstName', headerName: 'First name', width: 130, editable: true }, { field: 'lastName', headerName: 'Last name', width: 130, editable: true }, @@ -44,11 +55,3 @@ const columns: GridColDef[] = [ sortComparator: (v1, v2) => v1!.toString().localeCompare(v2!.toString()), }, ]; - -const defaultRows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon' }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, - { id: 4, lastName: 'Stark', firstName: 'Arya' }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, -]; diff --git a/docs/data/data-grid/editing/editing.md b/docs/data/data-grid/editing/editing.md index ae28abf66188d..2e74600d3fc90 100644 --- a/docs/data/data-grid/editing/editing.md +++ b/docs/data/data-grid/editing/editing.md @@ -212,7 +212,7 @@ You can use the `valueParser` property in the column definition to modify the va ```tsx const columns: GridColDef[] = [ { - valueParser: (value: any, params: GridCellParams) => { + valueParser: (value, row, column, apiRef) => { return value.toLowerCase(); }, }, @@ -227,9 +227,9 @@ If you are already using a `valueGetter` to extract the value from a nested obje ```tsx const columns: GridColDef[] = [ { - valueSetter: (params: GridValueSetterParams) => { - const [firstName, lastName] = params.value!.toString().split(' '); - return { ...params.row, firstName, lastName }; + valueSetter: (value, row) => { + const [firstName, lastName] = value!.toString().split(' '); + return { ...row, firstName, lastName }; }, }, ]; diff --git a/docs/data/data-grid/events/CatalogOfEventsNoSnap.js b/docs/data/data-grid/events/CatalogOfEventsNoSnap.js index af7348a2d469d..a8961cf3d97bd 100644 --- a/docs/data/data-grid/events/CatalogOfEventsNoSnap.js +++ b/docs/data/data-grid/events/CatalogOfEventsNoSnap.js @@ -82,7 +82,7 @@ const COLUMNS = [ headerName: 'Available on', width: 100, align: 'center', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { if (row.projects.includes('x-data-grid')) { return 'x-data-grid'; } diff --git a/docs/data/data-grid/export/export.md b/docs/data/data-grid/export/export.md index 1056d3cc9518a..41145286c6f07 100644 --- a/docs/data/data-grid/export/export.md +++ b/docs/data/data-grid/export/export.md @@ -122,7 +122,7 @@ You can provide a [`valueFormatter`](/x/react-data-grid/column-definition/#value columns={[ { field: 'progress', - valueFormatter: ({ value }) => `${value * 100}%`, + valueFormatter: (value) => `${value * 100}%`, renderCell: ({ value }) => , }, ]} 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() { dateFormatter.format(params.value), + valueFormatter: (value) => dateFormatter.format(value), }, { field: 'singleSelect', diff --git a/docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx b/docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx index 26197a90dbad9..c54fb2e0a141b 100644 --- a/docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx +++ b/docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx @@ -23,7 +23,7 @@ const columns: GridColDef[] = [ field: 'date', type: 'date', width: 150, - valueFormatter: (params) => dateFormatter.format(params.value), + valueFormatter: (value) => dateFormatter.format(value), }, { field: 'singleSelect', diff --git a/docs/data/data-grid/localization/DataGridRTL.js b/docs/data/data-grid/localization/DataGridRTL.js index abd88d606147c..e5b06bc23c837 100644 --- a/docs/data/data-grid/localization/DataGridRTL.js +++ b/docs/data/data-grid/localization/DataGridRTL.js @@ -27,7 +27,7 @@ const columns = [ { field: 'age', headerName: 'عمر', - valueGetter: (params) => `${params.value} سنوات`, + valueGetter: (value) => `${value} سنوات`, width: 150, }, { diff --git a/docs/data/data-grid/localization/DataGridRTL.tsx b/docs/data/data-grid/localization/DataGridRTL.tsx index df697849b2d07..bd14585f52558 100644 --- a/docs/data/data-grid/localization/DataGridRTL.tsx +++ b/docs/data/data-grid/localization/DataGridRTL.tsx @@ -27,7 +27,7 @@ const columns: GridColDef[] = [ { field: 'age', headerName: 'عمر', - valueGetter: (params) => `${params.value} سنوات`, + valueGetter: (value) => `${value} سنوات`, width: 150, }, { 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..a77dcaaebdfba 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. diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.js b/docs/data/data-grid/master-detail/BasicDetailPanels.js index 27441b5dc3956..20da411552c06 100644 --- a/docs/data/data-grid/master-detail/BasicDetailPanels.js +++ b/docs/data/data-grid/master-detail/BasicDetailPanels.js @@ -61,7 +61,7 @@ function DetailPanelContent({ row: rowProp }) { field: 'total', headerName: 'Total', type: 'number', - valueGetter: ({ row }) => row.quantity * row.unitPrice, + valueGetter: (value, row) => row.quantity * row.unitPrice, }, ]} rows={rowProp.products} @@ -83,7 +83,7 @@ const columns = [ field: 'total', type: 'number', headerName: 'Total', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { const subtotal = row.products.reduce( (acc, product) => product.unitPrice * product.quantity, 0, diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx index 44f2287d995f7..b9c17508bd5b5 100644 --- a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx +++ b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx @@ -62,7 +62,7 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) { field: 'total', headerName: 'Total', type: 'number', - valueGetter: ({ row }) => row.quantity * row.unitPrice, + valueGetter: (value, row) => row.quantity * row.unitPrice, }, ]} rows={rowProp.products} @@ -75,7 +75,7 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) { ); } -const columns: GridColDef[] = [ +const columns: GridColDef<(typeof rows)[number]>[] = [ { field: 'id', headerName: 'Order ID' }, { field: 'customer', headerName: 'Customer', width: 200 }, { field: 'date', type: 'date', headerName: 'Placed at' }, @@ -84,7 +84,7 @@ const columns: GridColDef[] = [ field: 'total', type: 'number', headerName: 'Total', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { const subtotal = row.products.reduce( (acc: number, product: any) => product.unitPrice * product.quantity, 0, diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js index 1b2979ef15af7..6819a2be2b18b 100644 --- a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js +++ b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js @@ -69,7 +69,7 @@ function DetailPanelContent({ row: rowProp }) { field: 'total', headerName: 'Total', type: 'number', - valueGetter: ({ row }) => row.quantity * row.unitPrice, + valueGetter: (value, row) => row.quantity * row.unitPrice, }, { field: 'actions', @@ -141,7 +141,7 @@ const columns = [ field: 'total', type: 'number', headerName: 'Total', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { const subtotal = row.products.reduce( (acc, product) => product.unitPrice * product.quantity, 0, diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx index 477b12e3c9aa6..dfe9d815e169f 100644 --- a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx +++ b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx @@ -55,7 +55,7 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) { [apiRef, rowProp], ); - const columns = React.useMemo( + const columns = React.useMemo[]>( () => [ { field: 'name', headerName: 'Product', flex: 1, editable: true }, { @@ -71,7 +71,7 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) { field: 'total', headerName: 'Total', type: 'number', - valueGetter: ({ row }) => row.quantity * row.unitPrice, + valueGetter: (value, row) => row.quantity * row.unitPrice, }, { field: 'actions', @@ -144,7 +144,7 @@ const columns: GridColDef[] = [ field: 'total', type: 'number', headerName: 'Total', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { const subtotal = row.products.reduce( (acc: number, product: any) => product.unitPrice * product.quantity, 0, diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js index dd37ac623ca1e..16bd2837aba38 100644 --- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js +++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js @@ -69,7 +69,7 @@ function DetailPanelContent({ row: rowProp }) { field: 'total', headerName: 'Total', type: 'number', - valueGetter: ({ row }) => row.quantity * row.unitPrice, + valueGetter: (value, row) => row.quantity * row.unitPrice, }, ]} rows={rowProp.products} @@ -92,13 +92,13 @@ const columns = [ { field: 'city', headerName: 'City', - valueGetter: ({ row }) => `${row.city}, ${row.country.label}`, + valueGetter: (value, row) => `${row.city}, ${row.country.label}`, }, { field: 'total', type: 'number', headerName: 'Total', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { const subtotal = row.products.reduce( (acc, product) => product.unitPrice * product.quantity, 0, diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx index 70edba0e00b1e..d2910a6214d20 100644 --- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx +++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx @@ -71,7 +71,7 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) { field: 'total', headerName: 'Total', type: 'number', - valueGetter: ({ row }) => row.quantity * row.unitPrice, + valueGetter: (value, row) => row.quantity * row.unitPrice, }, ]} rows={rowProp.products} @@ -94,13 +94,13 @@ const columns: GridColDef[] = [ { field: 'city', headerName: 'City', - valueGetter: ({ row }) => `${row.city}, ${row.country.label}`, + valueGetter: (value, row) => `${row.city}, ${row.country.label}`, }, { field: 'total', type: 'number', headerName: 'Total', - valueGetter: ({ row }) => { + valueGetter: (value, row) => { const subtotal = row.products.reduce( (acc: number, product: any) => product.unitPrice * product.quantity, 0, diff --git a/docs/data/data-grid/overview/DataGridDemo.js b/docs/data/data-grid/overview/DataGridDemo.js index 7987b9fdb00fc..b9bffd9e02790 100644 --- a/docs/data/data-grid/overview/DataGridDemo.js +++ b/docs/data/data-grid/overview/DataGridDemo.js @@ -29,8 +29,7 @@ const columns = [ description: 'This column has a value getter and is not sortable.', sortable: false, width: 160, - valueGetter: (params) => - `${params.row.firstName || ''} ${params.row.lastName || ''}`, + valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`, }, ]; diff --git a/docs/data/data-grid/overview/DataGridDemo.tsx b/docs/data/data-grid/overview/DataGridDemo.tsx index 5e5f832862749..44a9499bfa196 100644 --- a/docs/data/data-grid/overview/DataGridDemo.tsx +++ b/docs/data/data-grid/overview/DataGridDemo.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'; +import { DataGrid, GridColDef } from '@mui/x-data-grid'; -const columns: GridColDef[] = [ +const columns: GridColDef<(typeof rows)[number]>[] = [ { field: 'id', headerName: 'ID', width: 90 }, { field: 'firstName', @@ -29,8 +29,7 @@ const columns: GridColDef[] = [ description: 'This column has a value getter and is not sortable.', sortable: false, width: 160, - valueGetter: (params: GridValueGetterParams) => - `${params.row.firstName || ''} ${params.row.lastName || ''}`, + valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`, }, ]; diff --git a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js index 6c6ad41c2bcd0..0d09526ce08d2 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js +++ b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js @@ -58,8 +58,9 @@ export default function RowGroupingCustomGroupingColDefCallback() { if (params.fields.includes('director')) { return { headerName: 'Director', - valueFormatter: (valueFormatterParams) => { - const rowNode = apiRef.current.getRowNode(valueFormatterParams.id); + valueFormatter: (value, row) => { + const rowId = apiRef.current.getRowId(row); + const rowNode = apiRef.current.getRowNode(rowId); if ( rowNode?.type === 'group' && rowNode?.groupingField === 'director' diff --git a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx index d55e8a779683d..e8c4da9dab49f 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx @@ -59,10 +59,9 @@ export default function RowGroupingCustomGroupingColDefCallback() { if (params.fields.includes('director')) { return { headerName: 'Director', - valueFormatter: (valueFormatterParams) => { - const rowNode = apiRef.current.getRowNode( - valueFormatterParams.id!, - ); + valueFormatter: (value, row) => { + const rowId = apiRef.current.getRowId(row); + const rowNode = apiRef.current.getRowNode(rowId); if ( rowNode?.type === 'group' && rowNode?.groupingField === 'director' diff --git a/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.js b/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.js index 0516dad488d31..f07843101f27c 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.js +++ b/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.js @@ -16,15 +16,15 @@ export default function RowGroupingGroupingValueGetter() { { field: 'composer', headerName: 'Composer', - valueGetter: (params) => params.value?.name, - groupingValueGetter: (params) => params.value.name, + valueGetter: (value) => value.name, + groupingValueGetter: (value) => value.name, width: 200, }, { field: 'decade', headerName: 'Decade', - valueGetter: (params) => Math.floor(params.row.year / 10) * 10, - groupingValueGetter: (params) => Math.floor(params.row.year / 10) * 10, + valueGetter: (value, row) => Math.floor(row.year / 10) * 10, + groupingValueGetter: (value, row) => Math.floor(row.year / 10) * 10, renderCell: (params) => { if (params.value == null) { return ''; diff --git a/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.tsx b/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.tsx index 2ed31822cf4c1..41b5f2b7ff6b7 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.tsx @@ -17,15 +17,15 @@ export default function RowGroupingGroupingValueGetter() { { field: 'composer', headerName: 'Composer', - valueGetter: (params) => params.value?.name, - groupingValueGetter: (params) => params.value.name, + valueGetter: (value: { name: string }) => value.name, + groupingValueGetter: (value: { name: string }) => value.name, width: 200, - } as GridColDef, + } as GridColDef, { field: 'decade', headerName: 'Decade', - valueGetter: (params) => Math.floor(params.row.year / 10) * 10, - groupingValueGetter: (params) => Math.floor(params.row.year / 10) * 10, + valueGetter: (value, row) => Math.floor(row.year / 10) * 10, + groupingValueGetter: (value, row) => Math.floor(row.year / 10) * 10, renderCell: (params) => { if (params.value == null) { return ''; diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md index de63e20f769f4..2935b2ad9861b 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/docs/data/data-grid/row-grouping/row-grouping.md @@ -212,7 +212,7 @@ If your cell value is more complex, pass a `groupingValueGetter` property to the const columns: GridColDef[] = [ { field: 'composer', - groupingValueGetter: (params) => params.value.name, + groupingValueGetter: (value) => value.name, }, // ... ]; 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/sorting/ExtendedSortComparator.js b/docs/data/data-grid/sorting/ExtendedSortComparator.js index 86acdc0d08ee6..705eb59585e86 100644 --- a/docs/data/data-grid/sorting/ExtendedSortComparator.js +++ b/docs/data/data-grid/sorting/ExtendedSortComparator.js @@ -37,12 +37,11 @@ export default function ExtendedSortComparator() { { field: 'nameAdmin', headerName: 'Name', - valueGetter: (params) => ({ - name: params.row.name, - isAdmin: params.row.isAdmin, + valueGetter: (value, row) => ({ + name: row.name, + isAdmin: row.isAdmin, }), - valueFormatter: (params) => { - const value = params.value; + valueFormatter: (value) => { if (value.isAdmin) { return `${value.name} (admin)`; } diff --git a/docs/data/data-grid/sorting/ExtendedSortComparator.tsx b/docs/data/data-grid/sorting/ExtendedSortComparator.tsx index ddeef60aeb359..5419a57b3eea9 100644 --- a/docs/data/data-grid/sorting/ExtendedSortComparator.tsx +++ b/docs/data/data-grid/sorting/ExtendedSortComparator.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { GridColDef, DataGrid, - GridValueGetterParams, gridNumberComparator, gridStringOrNumberComparator, GridComparatorFn, @@ -50,12 +49,11 @@ export default function ExtendedSortComparator() { { field: 'nameAdmin', headerName: 'Name', - valueGetter: (params: GridValueGetterParams) => ({ - name: params.row.name, - isAdmin: params.row.isAdmin, + valueGetter: (value, row) => ({ + name: row.name, + isAdmin: row.isAdmin, }), - valueFormatter: (params) => { - const value = params.value as NameAdminCellValue; + valueFormatter: (value: NameAdminCellValue) => { if (value.isAdmin) { return `${value.name} (admin)`; } diff --git a/docs/data/data-grid/sorting/FullyCustomSortComparator.js b/docs/data/data-grid/sorting/FullyCustomSortComparator.js index ecd8c8a0112ab..be364bee8b75c 100644 --- a/docs/data/data-grid/sorting/FullyCustomSortComparator.js +++ b/docs/data/data-grid/sorting/FullyCustomSortComparator.js @@ -17,7 +17,7 @@ export default function FullyCustomSortComparator() { () => [ { field: 'dateCreatedCustom', - valueGetter: (params) => params.row.dateCreated, + valueGetter: (value, row) => row.dateCreated, headerName: 'Created on', width: 180, type: 'date', diff --git a/docs/data/data-grid/sorting/FullyCustomSortComparator.tsx b/docs/data/data-grid/sorting/FullyCustomSortComparator.tsx index 22a7ee7441606..1ffd85dad444b 100644 --- a/docs/data/data-grid/sorting/FullyCustomSortComparator.tsx +++ b/docs/data/data-grid/sorting/FullyCustomSortComparator.tsx @@ -18,7 +18,7 @@ export default function FullyCustomSortComparator() { () => [ { field: 'dateCreatedCustom', - valueGetter: (params) => params.row.dateCreated, + valueGetter: (value, row) => row.dateCreated, headerName: 'Created on', width: 180, type: 'date', 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/data-grid/style-recipes/StylingAllCellsButAggregation.js b/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.js index 4ed59c8b462b4..da7be87708494 100644 --- a/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.js +++ b/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.js @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import { DataGridPremium, gridClasses } from '@mui/x-data-grid-premium'; // eliminate rounding errors in aggregation row -const valueFormatter = ({ value }) => `${Math.floor(value * 1000) / 1000} °C`; +const valueFormatter = (value) => `${Math.floor(value * 1000) / 1000} °C`; const columns = [ { field: 'city' }, diff --git a/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.tsx b/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.tsx index 5d0d5c0200c73..f26c378f9e606 100644 --- a/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.tsx +++ b/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.tsx @@ -8,7 +8,7 @@ import { } from '@mui/x-data-grid-premium'; // eliminate rounding errors in aggregation row -const valueFormatter: GridColDef['valueFormatter'] = ({ value }) => +const valueFormatter: GridColDef['valueFormatter'] = (value) => `${Math.floor(value * 1000) / 1000} °C`; const columns: GridColDef[] = [ diff --git a/docs/data/data-grid/style/StylingAllCells.js b/docs/data/data-grid/style/StylingAllCells.js index ebd925f7e3b8e..6760aea754cc5 100644 --- a/docs/data/data-grid/style/StylingAllCells.js +++ b/docs/data/data-grid/style/StylingAllCells.js @@ -4,9 +4,9 @@ import { DataGrid, gridClasses } from '@mui/x-data-grid'; const columns = [ { field: 'city' }, - { field: 'oct', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, - { field: 'nov', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, - { field: 'dec', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, + { field: 'oct', type: 'number', valueFormatter: (value) => `${value} °C` }, + { field: 'nov', type: 'number', valueFormatter: (value) => `${value} °C` }, + { field: 'dec', type: 'number', valueFormatter: (value) => `${value} °C` }, ]; const rows = [ diff --git a/docs/data/data-grid/style/StylingAllCells.tsx b/docs/data/data-grid/style/StylingAllCells.tsx index ef089f4c9a6b6..08d1222d64f82 100644 --- a/docs/data/data-grid/style/StylingAllCells.tsx +++ b/docs/data/data-grid/style/StylingAllCells.tsx @@ -4,9 +4,9 @@ import { GridColDef, DataGrid, GridCellParams, gridClasses } from '@mui/x-data-g const columns: GridColDef[] = [ { field: 'city' }, - { field: 'oct', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, - { field: 'nov', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, - { field: 'dec', type: 'number', valueFormatter: ({ value }) => `${value} °C` }, + { field: 'oct', type: 'number', valueFormatter: (value) => `${value} °C` }, + { field: 'nov', type: 'number', valueFormatter: (value) => `${value} °C` }, + { field: 'dec', type: 'number', valueFormatter: (value) => `${value} °C` }, ]; const rows = [ diff --git a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js index 1a7a7ff8ad46b..873711c2d23f8 100644 --- a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js +++ b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js @@ -146,8 +146,8 @@ const columns = [ { field: 'name', headerName: 'Name', - valueGetter: (params) => { - const hierarchy = params.row.hierarchy; + valueGetter: (value, row) => { + const hierarchy = row.hierarchy; return hierarchy[hierarchy.length - 1]; }, }, diff --git a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.tsx b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.tsx index ca3e81a973cf0..c69ba21dd243d 100644 --- a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.tsx +++ b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.tsx @@ -153,15 +153,15 @@ const rows: GridRowsProp = [ }, ]; -const columns: GridColDef[] = [ +const columns: GridColDef[] = [ { field: 'name', headerName: 'Name', - valueGetter: (params) => { - const hierarchy = params.row.hierarchy; + valueGetter: (value, row) => { + const hierarchy = row.hierarchy; return hierarchy[hierarchy.length - 1]; }, - } as GridColDef, + }, { field: 'jobTitle', headerName: 'Job Title', width: 200 }, { field: 'recruitmentDate', diff --git a/docs/data/data-grid/tree-data/TreeDataWithGap.js b/docs/data/data-grid/tree-data/TreeDataWithGap.js index e482cad77dcb7..4262567ee62a3 100644 --- a/docs/data/data-grid/tree-data/TreeDataWithGap.js +++ b/docs/data/data-grid/tree-data/TreeDataWithGap.js @@ -88,12 +88,14 @@ const columns = [ field: 'isAutoGenerated', headerName: 'Gap', type: 'boolean', - valueGetter: (params) => { - if (params.rowNode.type !== 'group') { + valueGetter: (value, row, column, apiRef) => { + const rowId = apiRef.current.getRowId(row); + const rowNode = apiRef.current.getRowNode(rowId); + if (rowNode?.type !== 'group') { return undefined; } - return params.rowNode.isAutoGenerated; + return rowNode.isAutoGenerated; }, }, ]; diff --git a/docs/data/data-grid/tree-data/TreeDataWithGap.tsx b/docs/data/data-grid/tree-data/TreeDataWithGap.tsx index a7a5d9bea0590..bc3e5e34b4d5e 100644 --- a/docs/data/data-grid/tree-data/TreeDataWithGap.tsx +++ b/docs/data/data-grid/tree-data/TreeDataWithGap.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; -import { - DataGridPro, - GridColDef, - GridRowsProp, - DataGridProProps, -} from '@mui/x-data-grid-pro'; +import { DataGridPro, GridColDef, DataGridProProps } from '@mui/x-data-grid-pro'; -const rows: GridRowsProp = [ +const rows = [ { hierarchy: ['Sarah'], jobTitle: 'Head of Human Resources', @@ -81,7 +76,7 @@ const rows: GridRowsProp = [ }, ]; -const columns: GridColDef[] = [ +const columns: GridColDef<(typeof rows)[number]>[] = [ { field: 'jobTitle', headerName: 'Job Title', width: 200 }, { field: 'recruitmentDate', @@ -93,12 +88,14 @@ const columns: GridColDef[] = [ field: 'isAutoGenerated', headerName: 'Gap', type: 'boolean', - valueGetter: (params) => { - if (params.rowNode.type !== 'group') { + valueGetter: (value, row, column, apiRef) => { + const rowId = apiRef.current.getRowId(row); + const rowNode = apiRef.current.getRowNode(rowId); + if (rowNode?.type !== 'group') { return undefined; } - return params.rowNode.isAutoGenerated; + return rowNode.isAutoGenerated; }, }, ]; 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/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/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..2763c082e4d7d 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/#simpletreeview) + +- 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/fork/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/fork/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. diff --git a/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md b/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md index 7ed8c4c3c7111..3f171622cafb2 100644 --- a/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md +++ b/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md @@ -9,22 +9,22 @@ productId: x-data-grid ## Introduction This is a reference guide for upgrading your site from MUI X v4 to v5. -MUI X v5 is fully compatible with MUI Core (includes Material UI) v5 and can be used with MUI Core v4 with some additional steps. +MUI X v5 is fully compatible with Material UI v5 and MUI System v5 and can be used with Material UI v4 and MUI System v4 with some additional steps. Most breaking changes are renaming of CSS classes or variables to improve the consistency of the data grid. ## Migrating MUI Core from v4 :::warning -We strongly recommend you [migrate MUI Core to v5](/material-ui/migration/migration-v4/) when using MUI X v5. +We strongly recommend you [migrate Material UI to v5](/material-ui/migration/migration-v4/) when using MUI X v5. However, this might not be possible, depending on the complexity of the application. -The alternative is to install MUI Core v5 and configure it to keep MUI Core v4 running alongside. +The alternative is to install Material UI v5 and configure it to keep Material UI v4 running alongside. ::: ### Using MUI Core v4 with v5 -Using MUI Core v4 with v5 can be achieved with the following steps: +Using Material UI v4 with v5 can be achieved with the following steps: -1. First, make sure you have MUI Core v5 installed. If not, install it with these [instructions](/material-ui/getting-started/installation/). +1. First, make sure you have Material UI v5 installed. If not, install it with these [instructions](/material-ui/getting-started/installation/). 1. Add a custom [`createGenerateClassName`](/system/styles/api/#creategenerateclassname-options-class-name-generator) to disable the generation of global class names in JSS. ```jsx @@ -40,7 +40,7 @@ const generateClassName = createGenerateClassName({ }); ``` -3. Create a v5 theme with the same customizations as the v4 theme. This has to be done as the theme is not shared between different MUI Core versions. +3. Create a v5 theme with the same customizations as the v4 theme. This has to be done as the theme is not shared between different Material UI versions. ```jsx import { createMuiTheme as createThemeV4 } from '@material-ui/core/styles'; @@ -87,7 +87,7 @@ export default function DataGridDemo() { } ``` -**Done!** Now, you can render any dependencies that rely on MUI Core v5 without upgrading from v4, and they will both run seamlessly alongside. +**Done!** Now, you can render any dependencies that rely on Material UI v5 without upgrading from v4, and they will both run seamlessly alongside. For example, the following interactive demo shows how these steps tie together with the data grid: {{"demo": "CoreV5WithCoreV4.js", "hideToolbar": true, "bg": true}} 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 f7683fe808231..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. @@ -354,12 +462,8 @@ Here's the list of affected features, colDef flags and props to disable them and ### CSS classes -- Some CSS classes were removed or renamed - - | MUI X v6 classes | MUI X v7 classes | Note | - | :------------------------------------------ | :--------------- | :--------------------- | --- | - | `.Mui-hovered` | `:hover` | For rows | - | `.MuiDataGrid--pinnedColumns-(left\|right)` | Removed | Not applicable anymore | --> | +- 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 @@ -375,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-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/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..cb23941ca7ff7 100644 --- a/docs/data/tree-view/rich-tree-view/items/items.md +++ b/docs/data/tree-view/rich-tree-view/items/items.md @@ -100,7 +100,7 @@ Unlike the `SimpleTreeView` component, the `RichTreeView` component only support ## 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/data/whats-new/WhatsNewLayoutNoSnap.js b/docs/data/whats-new/WhatsNewLayoutNoSnap.js deleted file mode 100644 index 58d0f9b2c82e2..0000000000000 --- a/docs/data/whats-new/WhatsNewLayoutNoSnap.js +++ /dev/null @@ -1,289 +0,0 @@ -import * as React from 'react'; -import Link from '@mui/material/Link'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; -import { alpha } from '@mui/material/styles'; - -const blogs = [ - { - title: 'MUI X v6.18.x', - description: - 'New stable components, polished features, better performance, and more.', - announcementDate: 'Monday, Nov 13, 2023', - url: 'https://mui.com/blog/mui-x-end-v6-features/', - highlightList: [ - { - title: 'Charts - stable version', - url: 'https://mui.com/blog/mui-x-end-v6-features/#charts', - }, - { - title: 'Tree View - stable version', - url: 'https://mui.com/blog/mui-x-end-v6-features/#tree-view', - }, - { - title: 'Clearable date and time fields', - url: 'https://mui.com/blog/mui-x-end-v6-features/#clearable-field', - }, - { - title: 'Customization playgrounds for Date and Time Pickers', - url: 'https://mui.com/blog/mui-x-end-v6-features/#customization-playgrounds', - }, - { - title: 'Data Grid column autosizing', - url: 'https://mui.com/blog/mui-x-end-v6-features/#column-autosizing', - }, - { - title: 'Sparklines on Data Grid ', - url: 'https://mui.com/blog/mui-x-end-v6-features/#sparkline-as-a-column-type', - }, - ], - }, - { - title: 'MUI X v6.11.0', - description: 'A roundup of all new features since v6.0.0.', - announcementDate: 'Monday, Aug 14, 2023', - url: 'https://mui.com/blog/mui-x-mid-v6-features/', - highlightList: [ - { - title: 'Support for timezone on Date and Time Pickers', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#support-for-time-zones', - }, - { - title: 'Digital Clock', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#digital-clock', - }, - { - title: 'Filters on Data Grid column headers', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#filter-on-column-headers', - }, - { - title: 'Copy and Paste on Data Grid', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#copy-and-paste', - }, - { - title: 'Charts Alpha 🧪', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#charts-alpha-version', - }, - { - title: 'TreeView migration from lab', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#tree-view-is-moving-to-mui-x', - }, - ], - }, - { - title: 'MUI X v6.0.0', - description: - 'A new major is available, with many new features and improvements.', - announcementDate: 'Monday, Mar 06, 2023', - url: 'https://mui.com/blog/mui-x-v6/', - highlightList: [ - { - title: 'Date and time fields', - url: 'https://mui.com/blog/mui-x-v6/#fields-the-new-default-input-gt-for-pickers', - }, - { - title: 'Date Range shortcuts', - url: 'https://mui.com/blog/mui-x-v6/#shortcuts-for-picking-specific-dates-in-a-calendar', - }, - { - title: 'Improved layout customization', - url: 'https://mui.com/blog/mui-x-v6/#improved-layout-customization', - }, - { - title: 'Edit ranges with drag and drop', - url: 'https://mui.com/blog/mui-x-v6/#edit-date-ranges-with-drag-and-drop', - }, - { - title: 'New Column menu', - url: 'https://mui.com/blog/mui-x-v6/#improved-column-menu', - }, - { - title: 'ApiRef in community', - url: 'https://mui.com/blog/mui-x-v6/#apiref-moved-to-the-mit-community-version', - }, - { - title: 'Cell selection', - url: 'https://mui.com/blog/mui-x-v6/#cell-selection', - }, - ], - }, - { - title: 'Date Pickers v5.0.0', - description: - 'After some months of polishing in pre-releases, the Date Pickers finally get a stable.', - announcementDate: 'Monday, Sep 22, 2022', - url: 'https://mui.com/blog/date-pickers-stable-v5/', - highlightList: [ - { - title: 'Better APIs', - url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', - }, - { - title: 'Easier customization', - url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', - }, - { - title: 'Integrated localization', - url: 'https://mui.com/blog/date-pickers-stable-v5/#integrated-localization', - }, - ], - }, - { - title: 'Data Grid v5.15', - description: - 'This version brings an amazing set of new supported use cases with the Data Grid Premium.', - announcementDate: 'Monday, Aug 12, 2022', - url: 'https://mui.com/blog/aggregation-functions/', - highlightList: [ - { - title: 'Aggregation in summary rows and row groups', - url: 'https://mui.com/blog/aggregation-functions/#wait-what-is-an-aggregation-function', - }, - { - title: 'Row pinning', - url: 'https://mui.com/blog/aggregation-functions/#row-pinning', - }, - ], - }, - { - title: 'New Premium plan', - description: - 'Premium plan announcement, including the most advanced features for data analysis and management.', - announcementDate: 'Thursday, May 12, 2022', - url: 'https://mui.com/blog/premium-plan-release/', - highlightList: [ - { title: 'Row Grouping', url: '/x/react-data-grid/row-grouping/' }, - { title: 'Excel export', url: '/x/react-data-grid/export/#exported-rows' }, - ], - }, - { - title: 'MUI X v5.0.0', - description: 'A new virtualization engine, and improvements in several APIs.', - announcementDate: 'Monday, Nov 22, 2021', - url: 'https://mui.com/blog/mui-x-v5/', - highlightList: [ - { - title: 'New virtualization engine', - url: 'https://mui.com/blog/mui-x-v5/#a-new-virtualization-engine', - }, - { - title: 'Improved state management', - url: 'https://mui.com/blog/mui-x-v5/#improved-state-management', - }, - { - title: 'Simplified style customization', - url: 'https://mui.com/blog/mui-x-v5/#simplified-style-customization', - }, - ], - }, -]; - -function BlogCard(props) { - return ( - - theme.palette.mode === 'dark' - ? 'rgba(0, 27, 55, 0.2)' - : `${alpha(theme.palette.grey[50], 0.4)}`, - borderColor: 'divider', - [`& .MuiTypography-root`]: { - fontFamily: 'IBM Plex Sans', - }, - }} - component="article" - variant="outlined" - > - - - - {props.blog.announcementDate} - - - {props.blog.title} - - - - - - {props.blog.description} - - - - {props.blog.highlightList.map((item) => ( - - - {item.title} - - - ))} - - - - - - - - ); -} - -export default function WhatsNewLayoutNoSnap() { - return ( - - {blogs.map((blog) => ( - - - - ))} - - ); -} diff --git a/docs/data/whats-new/WhatsNewLayoutNoSnap.tsx b/docs/data/whats-new/WhatsNewLayoutNoSnap.tsx deleted file mode 100644 index 3e293bb688652..0000000000000 --- a/docs/data/whats-new/WhatsNewLayoutNoSnap.tsx +++ /dev/null @@ -1,297 +0,0 @@ -import * as React from 'react'; -import Link from '@mui/material/Link'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; -import { alpha } from '@mui/material/styles'; - -type Blog = { - title: string; - announcementDate: string; - description: string; - url: string; - highlightList: { title: string; url: string }[]; -}; - -const blogs: Blog[] = [ - { - title: 'MUI X v6.18.x', - description: - 'New stable components, polished features, better performance, and more.', - announcementDate: 'Monday, Nov 13, 2023', - url: 'https://mui.com/blog/mui-x-end-v6-features/', - highlightList: [ - { - title: 'Charts - stable version', - url: 'https://mui.com/blog/mui-x-end-v6-features/#charts', - }, - { - title: 'Tree View - stable version', - url: 'https://mui.com/blog/mui-x-end-v6-features/#tree-view', - }, - { - title: 'Clearable date and time fields', - url: 'https://mui.com/blog/mui-x-end-v6-features/#clearable-field', - }, - { - title: 'Customization playgrounds for Date and Time Pickers', - url: 'https://mui.com/blog/mui-x-end-v6-features/#customization-playgrounds', - }, - { - title: 'Data Grid column autosizing', - url: 'https://mui.com/blog/mui-x-end-v6-features/#column-autosizing', - }, - { - title: 'Sparklines on Data Grid ', - url: 'https://mui.com/blog/mui-x-end-v6-features/#sparkline-as-a-column-type', - }, - ], - }, - { - title: 'MUI X v6.11.0', - description: 'A roundup of all new features since v6.0.0.', - announcementDate: 'Monday, Aug 14, 2023', - url: 'https://mui.com/blog/mui-x-mid-v6-features/', - highlightList: [ - { - title: 'Support for timezone on Date and Time Pickers', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#support-for-time-zones', - }, - { - title: 'Digital Clock', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#digital-clock', - }, - { - title: 'Filters on Data Grid column headers', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#filter-on-column-headers', - }, - { - title: 'Copy and Paste on Data Grid', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#copy-and-paste', - }, - { - title: 'Charts Alpha 🧪', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#charts-alpha-version', - }, - { - title: 'TreeView migration from lab', - url: 'https://mui.com/blog/mui-x-mid-v6-features/#tree-view-is-moving-to-mui-x', - }, - ], - }, - { - title: 'MUI X v6.0.0', - description: - 'A new major is available, with many new features and improvements.', - announcementDate: 'Monday, Mar 06, 2023', - url: 'https://mui.com/blog/mui-x-v6/', - highlightList: [ - { - title: 'Date and time fields', - url: 'https://mui.com/blog/mui-x-v6/#fields-the-new-default-input-gt-for-pickers', - }, - { - title: 'Date Range shortcuts', - url: 'https://mui.com/blog/mui-x-v6/#shortcuts-for-picking-specific-dates-in-a-calendar', - }, - { - title: 'Improved layout customization', - url: 'https://mui.com/blog/mui-x-v6/#improved-layout-customization', - }, - { - title: 'Edit ranges with drag and drop', - url: 'https://mui.com/blog/mui-x-v6/#edit-date-ranges-with-drag-and-drop', - }, - { - title: 'New Column menu', - url: 'https://mui.com/blog/mui-x-v6/#improved-column-menu', - }, - { - title: 'ApiRef in community', - url: 'https://mui.com/blog/mui-x-v6/#apiref-moved-to-the-mit-community-version', - }, - { - title: 'Cell selection', - url: 'https://mui.com/blog/mui-x-v6/#cell-selection', - }, - ], - }, - { - title: 'Date Pickers v5.0.0', - description: - 'After some months of polishing in pre-releases, the Date Pickers finally get a stable.', - announcementDate: 'Monday, Sep 22, 2022', - url: 'https://mui.com/blog/date-pickers-stable-v5/', - highlightList: [ - { - title: 'Better APIs', - url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', - }, - { - title: 'Easier customization', - url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', - }, - { - title: 'Integrated localization', - url: 'https://mui.com/blog/date-pickers-stable-v5/#integrated-localization', - }, - ], - }, - { - title: 'Data Grid v5.15', - description: - 'This version brings an amazing set of new supported use cases with the Data Grid Premium.', - announcementDate: 'Monday, Aug 12, 2022', - url: 'https://mui.com/blog/aggregation-functions/', - highlightList: [ - { - title: 'Aggregation in summary rows and row groups', - url: 'https://mui.com/blog/aggregation-functions/#wait-what-is-an-aggregation-function', - }, - { - title: 'Row pinning', - url: 'https://mui.com/blog/aggregation-functions/#row-pinning', - }, - ], - }, - { - title: 'New Premium plan', - description: - 'Premium plan announcement, including the most advanced features for data analysis and management.', - announcementDate: 'Thursday, May 12, 2022', - url: 'https://mui.com/blog/premium-plan-release/', - highlightList: [ - { title: 'Row Grouping', url: '/x/react-data-grid/row-grouping/' }, - { title: 'Excel export', url: '/x/react-data-grid/export/#exported-rows' }, - ], - }, - { - title: 'MUI X v5.0.0', - description: 'A new virtualization engine, and improvements in several APIs.', - announcementDate: 'Monday, Nov 22, 2021', - url: 'https://mui.com/blog/mui-x-v5/', - highlightList: [ - { - title: 'New virtualization engine', - url: 'https://mui.com/blog/mui-x-v5/#a-new-virtualization-engine', - }, - { - title: 'Improved state management', - url: 'https://mui.com/blog/mui-x-v5/#improved-state-management', - }, - { - title: 'Simplified style customization', - url: 'https://mui.com/blog/mui-x-v5/#simplified-style-customization', - }, - ], - }, -]; - -function BlogCard(props: { blog: Blog }) { - return ( - - theme.palette.mode === 'dark' - ? 'rgba(0, 27, 55, 0.2)' - : `${alpha(theme.palette.grey[50], 0.4)}`, - borderColor: 'divider', - [`& .MuiTypography-root`]: { - fontFamily: 'IBM Plex Sans', - }, - }} - component="article" - variant="outlined" - > - - - - {props.blog.announcementDate} - - - {props.blog.title} - - - - - - {props.blog.description} - - - - {props.blog.highlightList.map((item) => ( - - - {item.title} - - - ))} - - - - - - - - ); -} - -export default function WhatsNewLayoutNoSnap() { - return ( - - {blogs.map((blog) => ( - - - - ))} - - ); -} diff --git a/docs/data/whats-new/WhatsNewLayoutNoSnap.tsx.preview b/docs/data/whats-new/WhatsNewLayoutNoSnap.tsx.preview deleted file mode 100644 index b701ffab9b3b5..0000000000000 --- a/docs/data/whats-new/WhatsNewLayoutNoSnap.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - {blogs.map((blog) => ( - - - - ))} - \ No newline at end of file diff --git a/docs/data/whats-new/whats-new.md b/docs/data/whats-new/whats-new.md index 50f506e6dc227..4564264752179 100644 --- a/docs/data/whats-new/whats-new.md +++ b/docs/data/whats-new/whats-new.md @@ -1,5 +1,5 @@ # What's new in MUI X -

Discover what's new in the latest versions.

+

Discover all the latest new features and other highlights.

-{{"demo": "WhatsNewLayoutNoSnap.js", "hideToolbar": true, "bg": "inline"}} +{{"component": "modules/components/WhatsNewLayout.js"}} diff --git a/docs/next.config.js b/docs/next.config.mjs similarity index 77% rename from docs/next.config.js rename to docs/next.config.mjs index a8b59b0b4f737..f2c9f2e325d05 100644 --- a/docs/next.config.js +++ b/docs/next.config.mjs @@ -1,28 +1,44 @@ // @ts-check -const path = require('path'); -// @ts-ignore -const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); -// const withTM = require('next-transpile-modules')(['@mui/monorepo']); +import * as path from 'path'; +import * as url from 'url'; +import * as fs from 'fs'; +import { createRequire } from 'module'; +import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; +// const withTM from 'next-transpile-modules')(['@mui/monorepo']; // @ts-expect-error This expected error should be gone once we update the monorepo -const withDocsInfra = require('@mui/monorepo/docs/nextConfigDocsInfra'); -const pkg = require('../package.json'); -const dataGridPkg = require('../packages/grid/x-data-grid/package.json'); -const datePickersPkg = require('../packages/x-date-pickers/package.json'); -const chartsPkg = require('../packages/x-charts/package.json'); -const treeViewPkg = require('../packages/x-tree-view/package.json'); -const { findPages } = require('./src/modules/utils/find'); -const { LANGUAGES, LANGUAGES_SSR } = require('./config'); +import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js'; +import { findPages } from './src/modules/utils/find.mjs'; +import { LANGUAGES, LANGUAGES_SSR } from './config.js'; +import constants from './constants.js'; -const workspaceRoot = path.join(__dirname, '../'); +const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url)); +const require = createRequire(import.meta.url); -module.exports = withDocsInfra({ +const workspaceRoot = path.join(currentDirectory, '../'); + +/** + * @param {string} pkgPath + * @returns {{version: string}} + */ +function loadPkg(pkgPath) { + const pkgContent = fs.readFileSync(path.resolve(workspaceRoot, pkgPath, 'package.json'), 'utf8'); + return JSON.parse(pkgContent); +} + +const pkg = loadPkg('.'); +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'); + +export default withDocsInfra({ // Avoid conflicts with the other Next.js apps hosted under https://mui.com/ assetPrefix: process.env.DEPLOY_ENV === 'development' ? undefined : '/x', env: { // docs-infra LIB_VERSION: pkg.version, - SOURCE_CODE_REPO: 'https://github.com/mui/mui-x', - SOURCE_GITHUB_BRANCH: 'next', // #default-branch-switch + SOURCE_CODE_REPO: constants.SOURCE_CODE_REPO, + SOURCE_GITHUB_BRANCH: constants.SOURCE_GITHUB_BRANCH, GITHUB_TEMPLATE_DOCS_FEEDBACK: '6.docs-feedback.yml', // MUI X related DATA_GRID_VERSION: dataGridPkg.version, @@ -56,8 +72,8 @@ module.exports = withDocsInfra({ ...config.resolve, alias: { ...config.resolve.alias, - docs: path.resolve(__dirname, '../node_modules/@mui/monorepo/docs'), - docsx: path.resolve(__dirname, '../docs'), + docs: path.resolve(currentDirectory, '../node_modules/@mui/monorepo/docs'), + docsx: path.resolve(currentDirectory, '../docs'), }, }, module: { diff --git a/docs/package.json b/docs/package.json index 6568e6136eeba..f64c94dbc67da 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,12 +27,12 @@ "@emotion/react": "^11.11.3", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@mui/icons-material": "^5.15.6", - "@mui/joy": "^5.0.0-beta.24", - "@mui/lab": "^5.0.0-alpha.162", - "@mui/material": "^5.15.6", - "@mui/styles": "^5.15.6", - "@mui/utils": "^5.15.6", + "@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", "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.202", @@ -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", @@ -92,10 +92,13 @@ "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.23.3", "@babel/preset-typescript": "^7.23.3", + "@mui-internal/docs-utils": "^1.0.0", + "@mui-internal/typescript-to-proptypes": "^1.0.2", "@types/doctrine": "^0.0.9", "@types/stylis": "^4.2.5", + "@types/webpack-bundle-analyzer": "^4.6.3", "cpy-cli": "^5.0.0", "gm": "^1.25.0", - "typescript-to-proptypes": "^2.2.1" + "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/area-plot.json b/docs/pages/x/api/charts/area-plot.json index 30c6fa3f2ce3c..e70a4110d61af 100644 --- a/docs/pages/x/api/charts/area-plot.json +++ b/docs/pages/x/api/charts/area-plot.json @@ -1,5 +1,12 @@ { "props": { + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: React.MouseEvent, lineItemIdentifier: LineItemIdentifier) => void", + "describedArgs": ["event", "lineItemIdentifier"] + } + }, "skipAnimation": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index c95a8d55fe689..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" }, @@ -34,10 +34,24 @@ }, "default": "object Depends on the charts type." }, + "onAxisClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: MouseEvent, data: null | AxisData) => void", + "describedArgs": ["event", "data"] + } + }, + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: React.MouseEvent, barItemIdentifier: BarItemIdentifier) => void", + "describedArgs": ["event", "barItemIdentifier"] + } + }, "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" }, @@ -51,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" }, @@ -59,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 }>" } } }, @@ -79,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 bebcdf0a429d0..a5f557a11a209 100644 --- a/docs/pages/x/api/charts/bar-plot.json +++ b/docs/pages/x/api/charts/bar-plot.json @@ -1,5 +1,12 @@ { "props": { + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: React.MouseEvent, barItemIdentifier: BarItemIdentifier) => void", + "describedArgs": ["event", "barItemIdentifier"] + } + }, "skipAnimation": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { @@ -13,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-on-axis-click-handler.js b/docs/pages/x/api/charts/charts-on-axis-click-handler.js new file mode 100644 index 0000000000000..261a76d5960ca --- /dev/null +++ b/docs/pages/x/api/charts/charts-on-axis-click-handler.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 './charts-on-axis-click-handler.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts/charts-on-axis-click-handler', + false, + /\.\/charts-on-axis-click-handler.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/charts-on-axis-click-handler.json b/docs/pages/x/api/charts/charts-on-axis-click-handler.json new file mode 100644 index 0000000000000..92638d4ee5d01 --- /dev/null +++ b/docs/pages/x/api/charts/charts-on-axis-click-handler.json @@ -0,0 +1,22 @@ +{ + "props": { + "onAxisClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: MouseEvent, data: null | AxisData) => void", + "describedArgs": ["event", "data"] + } + } + }, + "name": "ChartsOnAxisClickHandler", + "imports": [ + "import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';", + "import { ChartsOnAxisClickHandler } from '@mui/x-charts';" + ], + "classes": [], + "muiName": "MuiChartsOnAxisClickHandler", + "filename": "/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} 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/charts-voronoi-handler.json b/docs/pages/x/api/charts/charts-voronoi-handler.json index 72ada4aeea80f..891187ec2bbb7 100644 --- a/docs/pages/x/api/charts/charts-voronoi-handler.json +++ b/docs/pages/x/api/charts/charts-voronoi-handler.json @@ -1,5 +1,14 @@ { - "props": { "voronoiMaxRadius": { "type": { "name": "number" }, "default": "undefined" } }, + "props": { + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void", + "describedArgs": ["event", "scatterItemIdentifier"] + } + }, + "voronoiMaxRadius": { "type": { "name": "number" }, "default": "undefined" } + }, "name": "ChartsVoronoiHandler", "imports": [ "import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler';", 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 1ae374f7c5e72..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" }, @@ -36,10 +36,17 @@ }, "default": "object Depends on the charts type." }, + "onAxisClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: MouseEvent, data: null | AxisData) => void", + "describedArgs": ["event", "data"] + } + }, "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" }, @@ -53,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" }, @@ -61,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 }>" } } }, @@ -95,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/line-plot.json b/docs/pages/x/api/charts/line-plot.json index 695302fba7fa5..b42395b5ed14e 100644 --- a/docs/pages/x/api/charts/line-plot.json +++ b/docs/pages/x/api/charts/line-plot.json @@ -1,5 +1,12 @@ { "props": { + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: React.MouseEvent, lineItemIdentifier: LineItemIdentifier) => void", + "describedArgs": ["event", "lineItemIdentifier"] + } + }, "skipAnimation": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json index e334cc78e61d5..bd8e81555f56a 100644 --- a/docs/pages/x/api/charts/mark-plot.json +++ b/docs/pages/x/api/charts/mark-plot.json @@ -1,5 +1,12 @@ { "props": { + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: React.MouseEvent, lineItemIdentifier: LineItemIdentifier) => void", + "describedArgs": ["event", "lineItemIdentifier"] + } + }, "skipAnimation": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { diff --git a/docs/pages/x/api/charts/pie-arc-plot.json b/docs/pages/x/api/charts/pie-arc-plot.json index bb73132ab4353..2b52c04ea36a5 100644 --- a/docs/pages/x/api/charts/pie-arc-plot.json +++ b/docs/pages/x/api/charts/pie-arc-plot.json @@ -20,7 +20,7 @@ } }, "innerRadius": { "type": { "name": "number" }, "default": "0" }, - "onClick": { + "onItemClick": { "type": { "name": "func" }, "signature": { "type": "function(event: React.MouseEvent, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void", 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/pie-plot.json b/docs/pages/x/api/charts/pie-plot.json index 21d97bf5c3030..4d098050997e0 100644 --- a/docs/pages/x/api/charts/pie-plot.json +++ b/docs/pages/x/api/charts/pie-plot.json @@ -1,6 +1,6 @@ { "props": { - "onClick": { + "onItemClick": { "type": { "name": "func" }, "signature": { "type": "function(event: React.MouseEvent, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void", 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 624f957f297cc..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" }, @@ -29,10 +29,17 @@ }, "default": "object Depends on the charts type." }, + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void", + "describedArgs": ["event", "scatterItemIdentifier"] + } + }, "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" }, @@ -45,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" }, @@ -54,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 }>" } } }, @@ -75,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/scatter-plot.json b/docs/pages/x/api/charts/scatter-plot.json index eb293b3b005da..06c717e800fe6 100644 --- a/docs/pages/x/api/charts/scatter-plot.json +++ b/docs/pages/x/api/charts/scatter-plot.json @@ -1,5 +1,12 @@ { "props": { + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void", + "describedArgs": ["event", "scatterItemIdentifier"] + } + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, diff --git a/docs/pages/x/api/charts/scatter.json b/docs/pages/x/api/charts/scatter.json index fb41b85894338..258a927ce8261 100644 --- a/docs/pages/x/api/charts/scatter.json +++ b/docs/pages/x/api/charts/scatter.json @@ -1,5 +1,13 @@ { - "props": {}, + "props": { + "onItemClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void", + "describedArgs": ["event", "scatterItemIdentifier"] + } + } + }, "name": "Scatter", "imports": [ "import { Scatter } from '@mui/x-charts/ScatterChart';", diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 6ac9a094ae81f..3bc629b180e12 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -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-actions-col-def.md b/docs/pages/x/api/data-grid/grid-actions-col-def.md index af3663b0805c6..81fa4a45606ac 100644 --- a/docs/pages/x/api/data-grid/grid-actions-col-def.md +++ b/docs/pages/x/api/data-grid/grid-actions-col-def.md @@ -29,7 +29,7 @@ import { GridActionsColDef } from '@mui/x-data-grid'; | align? | GridAlignment | | Allows to align the column values in cells. | | availableAggregationFunctions? [](/x/introduction/licensing/#premium-plan) | string[] | | Limit the aggregation function usable on this column.
By default, the column will have all the aggregation functions that are compatible with its type. | | cellClassName? | GridCellClassNamePropType<R, V> | | Class name that will be added in cells for that column. | -| colSpan? | number \| ((params: GridCellParams<R, V, F>) => number \| undefined) | 1 | Number of columns a cell should span. | +| colSpan? | number \| GridColSpanFn<R, V, F> | 1 | Number of columns a cell should span. | | description? | string | | The description of the column rendered as tooltip if the column header name is not fully displayed. | | disableColumnMenu? | boolean | false | If `true`, the column menu is disabled for this column. | | disableExport? | boolean | false | If `true`, this column will not be included in exports. | @@ -42,7 +42,7 @@ import { GridActionsColDef } from '@mui/x-data-grid'; | getActions | (params: GridRowParams<R>) => React.ReactElement<GridActionsCellItemProps>[] | | Function that returns the actions to be shown. | | getApplyQuickFilterFn? | GetApplyQuickFilterFn<R, V> | | The callback that generates a filtering function for a given quick filter value.
This function can return `null` to skip filtering for this value and column. | | groupable? | boolean | true | If `true`, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium. | -| groupingValueGetter? [](/x/introduction/licensing/#premium-plan) | (params: GridGroupingValueGetterParams<R, V>) => GridKeyValue \| null \| undefined | | Function that transforms a complex cell value into a key that be used for grouping the rows. | +| groupingValueGetter? [](/x/introduction/licensing/#premium-plan) | GridGroupingValueGetter<R> | | Function that transforms a complex cell value into a key that be used for grouping the rows. | | headerAlign? | GridAlignment | | Header cell element alignment. | | headerClassName? | GridColumnHeaderClassNamePropType | | Class name that will be added in the column header cell. | | headerName? | string | | The title of the column rendered in the column header cell. | @@ -50,7 +50,7 @@ import { GridActionsColDef } from '@mui/x-data-grid'; | hideSortIcons? | boolean | false | Toggle the visibility of the sort icons. | | maxWidth? | number | Infinity | Sets the maximum width of a column. | | minWidth? | number | 50 | Sets the minimum width of a column. | -| pastedValueParser? [](/x/introduction/licensing/#premium-plan) | (value: string, params: GridCellParams<R, V, F>) => V \| undefined | | Function that takes the clipboard-pasted value and converts it to a value used internally. | +| pastedValueParser? [](/x/introduction/licensing/#premium-plan) | GridPastedValueParser<R, V, F> | | Function that takes the clipboard-pasted value and converts it to a value used internally. | | pinnable? | boolean | true | If `false`, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro. | | preProcessEditCellProps? | (params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps> | | Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state. | | renderCell? | (params: GridRenderCellParams<R, V, F>) => React.ReactNode | | Allows to override the component rendered as cell for this column. | @@ -62,8 +62,8 @@ import { GridActionsColDef } from '@mui/x-data-grid'; | sortComparator? | GridComparatorFn<V> | | A comparator function used to sort rows. | | sortingOrder? | GridSortDirection[] | | The order of the sorting sequence. | | type | 'actions' | 'actions' | The type of the column. | -| valueFormatter? | (params: GridValueFormatterParams<V>) => F | | Function that allows to apply a formatter before rendering its value. | -| valueGetter? | (params: GridValueGetterParams<R, any>) => V | | Function that allows to get a specific data instead of field to render in the cell. | -| valueParser? | (value: F \| undefined, params?: GridCellParams<R, V, F>) => V | | Function that takes the user-entered value and converts it to a value used internally. | -| valueSetter? | (params: GridValueSetterParams<R, V>) => R | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | +| valueFormatter? | GridValueFormatter<R, V, F> | | Function that allows to apply a formatter before rendering its value. | +| valueGetter? | GridValueGetter<R, V, F> | | Function that allows to get a specific data instead of field to render in the cell. | +| valueParser? | GridValueParser<R, V, F> | | Function that takes the user-entered value and converts it to a value used internally. | +| valueSetter? | GridValueSetter<R, V, F> | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | | width? | number | 100 | Set the width of the column. | diff --git a/docs/pages/x/api/data-grid/grid-col-def.md b/docs/pages/x/api/data-grid/grid-col-def.md index c05e09badc9cf..bee228483b219 100644 --- a/docs/pages/x/api/data-grid/grid-col-def.md +++ b/docs/pages/x/api/data-grid/grid-col-def.md @@ -29,7 +29,7 @@ import { GridColDef } from '@mui/x-data-grid'; | align? | GridAlignment | | Allows to align the column values in cells. | | availableAggregationFunctions? [](/x/introduction/licensing/#premium-plan) | string[] | | Limit the aggregation function usable on this column.
By default, the column will have all the aggregation functions that are compatible with its type. | | cellClassName? | GridCellClassNamePropType<R, V> | | Class name that will be added in cells for that column. | -| colSpan? | number \| ((params: GridCellParams<R, V, F>) => number \| undefined) | 1 | Number of columns a cell should span. | +| colSpan? | number \| GridColSpanFn<R, V, F> | 1 | Number of columns a cell should span. | | description? | string | | The description of the column rendered as tooltip if the column header name is not fully displayed. | | disableColumnMenu? | boolean | false | If `true`, the column menu is disabled for this column. | | disableExport? | boolean | false | If `true`, this column will not be included in exports. | @@ -41,7 +41,7 @@ import { GridColDef } from '@mui/x-data-grid'; | flex? | number | | If set, it indicates that a column has fluid width. Range [0, ∞). | | getApplyQuickFilterFn? | GetApplyQuickFilterFn<R, V> | | The callback that generates a filtering function for a given quick filter value.
This function can return `null` to skip filtering for this value and column. | | groupable? | boolean | true | If `true`, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium. | -| groupingValueGetter? [](/x/introduction/licensing/#premium-plan) | (params: GridGroupingValueGetterParams<R, V>) => GridKeyValue \| null \| undefined | | Function that transforms a complex cell value into a key that be used for grouping the rows. | +| groupingValueGetter? [](/x/introduction/licensing/#premium-plan) | GridGroupingValueGetter<R> | | Function that transforms a complex cell value into a key that be used for grouping the rows. | | headerAlign? | GridAlignment | | Header cell element alignment. | | headerClassName? | GridColumnHeaderClassNamePropType | | Class name that will be added in the column header cell. | | headerName? | string | | The title of the column rendered in the column header cell. | @@ -49,7 +49,7 @@ import { GridColDef } from '@mui/x-data-grid'; | hideSortIcons? | boolean | false | Toggle the visibility of the sort icons. | | maxWidth? | number | Infinity | Sets the maximum width of a column. | | minWidth? | number | 50 | Sets the minimum width of a column. | -| pastedValueParser? [](/x/introduction/licensing/#premium-plan) | (value: string, params: GridCellParams<R, V, F>) => V \| undefined | | Function that takes the clipboard-pasted value and converts it to a value used internally. | +| pastedValueParser? [](/x/introduction/licensing/#premium-plan) | GridPastedValueParser<R, V, F> | | Function that takes the clipboard-pasted value and converts it to a value used internally. | | pinnable? | boolean | true | If `false`, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro. | | preProcessEditCellProps? | (params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps> | | Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state. | | renderCell? | (params: GridRenderCellParams<R, V, F>) => React.ReactNode | | Allows to override the component rendered as cell for this column. | @@ -61,8 +61,8 @@ import { GridColDef } from '@mui/x-data-grid'; | sortComparator? | GridComparatorFn<V> | | A comparator function used to sort rows. | | sortingOrder? | GridSortDirection[] | | The order of the sorting sequence. | | type? | GridColType | 'singleSelect' | The type of the column. | -| valueFormatter? | (params: GridValueFormatterParams<V>) => F | | Function that allows to apply a formatter before rendering its value. | -| valueGetter? | (params: GridValueGetterParams<R, any>) => V | | Function that allows to get a specific data instead of field to render in the cell. | -| valueParser? | (value: F \| undefined, params?: GridCellParams<R, V, F>) => V | | Function that takes the user-entered value and converts it to a value used internally. | -| valueSetter? | (params: GridValueSetterParams<R, V>) => R | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | +| valueFormatter? | GridValueFormatter<R, V, F> | | Function that allows to apply a formatter before rendering its value. | +| valueGetter? | GridValueGetter<R, V, F> | | Function that allows to get a specific data instead of field to render in the cell. | +| valueParser? | GridValueParser<R, V, F> | | Function that takes the user-entered value and converts it to a value used internally. | +| valueSetter? | GridValueSetter<R, V, F> | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | | width? | number | 100 | Set the width of the column. | 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-single-select-col-def.md b/docs/pages/x/api/data-grid/grid-single-select-col-def.md index 4b3ce7f21236d..5a20d68d5cdba 100644 --- a/docs/pages/x/api/data-grid/grid-single-select-col-def.md +++ b/docs/pages/x/api/data-grid/grid-single-select-col-def.md @@ -29,7 +29,7 @@ import { GridSingleSelectColDef } from '@mui/x-data-grid'; | align? | GridAlignment | | Allows to align the column values in cells. | | availableAggregationFunctions? [](/x/introduction/licensing/#premium-plan) | string[] | | Limit the aggregation function usable on this column.
By default, the column will have all the aggregation functions that are compatible with its type. | | cellClassName? | GridCellClassNamePropType<R, V> | | Class name that will be added in cells for that column. | -| colSpan? | number \| ((params: GridCellParams<R, V, F>) => number \| undefined) | 1 | Number of columns a cell should span. | +| colSpan? | number \| GridColSpanFn<R, V, F> | 1 | Number of columns a cell should span. | | description? | string | | The description of the column rendered as tooltip if the column header name is not fully displayed. | | disableColumnMenu? | boolean | false | If `true`, the column menu is disabled for this column. | | disableExport? | boolean | false | If `true`, this column will not be included in exports. | @@ -43,7 +43,7 @@ import { GridSingleSelectColDef } from '@mui/x-data-grid'; | getOptionLabel? | (value: ValueOptions) => string | | Used to determine the label displayed for a given value option. | | getOptionValue? | (value: ValueOptions) => any | | Used to determine the value used for a value option. | | groupable? | boolean | true | If `true`, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium. | -| groupingValueGetter? [](/x/introduction/licensing/#premium-plan) | (params: GridGroupingValueGetterParams<R, V>) => GridKeyValue \| null \| undefined | | Function that transforms a complex cell value into a key that be used for grouping the rows. | +| groupingValueGetter? [](/x/introduction/licensing/#premium-plan) | GridGroupingValueGetter<R> | | Function that transforms a complex cell value into a key that be used for grouping the rows. | | headerAlign? | GridAlignment | | Header cell element alignment. | | headerClassName? | GridColumnHeaderClassNamePropType | | Class name that will be added in the column header cell. | | headerName? | string | | The title of the column rendered in the column header cell. | @@ -51,7 +51,7 @@ import { GridSingleSelectColDef } from '@mui/x-data-grid'; | hideSortIcons? | boolean | false | Toggle the visibility of the sort icons. | | maxWidth? | number | Infinity | Sets the maximum width of a column. | | minWidth? | number | 50 | Sets the minimum width of a column. | -| pastedValueParser? [](/x/introduction/licensing/#premium-plan) | (value: string, params: GridCellParams<R, V, F>) => V \| undefined | | Function that takes the clipboard-pasted value and converts it to a value used internally. | +| pastedValueParser? [](/x/introduction/licensing/#premium-plan) | GridPastedValueParser<R, V, F> | | Function that takes the clipboard-pasted value and converts it to a value used internally. | | pinnable? | boolean | true | If `false`, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro. | | preProcessEditCellProps? | (params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps> | | Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state. | | renderCell? | (params: GridRenderCellParams<R, V, F>) => React.ReactNode | | Allows to override the component rendered as cell for this column. | @@ -63,9 +63,9 @@ import { GridSingleSelectColDef } from '@mui/x-data-grid'; | sortComparator? | GridComparatorFn<V> | | A comparator function used to sort rows. | | sortingOrder? | GridSortDirection[] | | The order of the sorting sequence. | | type | 'singleSelect' | 'singleSelect' | The type of the column. | -| valueFormatter? | (params: GridValueFormatterParams<V>) => F | | Function that allows to apply a formatter before rendering its value. | -| valueGetter? | (params: GridValueGetterParams<R, any>) => V | | Function that allows to get a specific data instead of field to render in the cell. | +| valueFormatter? | GridValueFormatter<R, V, F> | | Function that allows to apply a formatter before rendering its value. | +| valueGetter? | GridValueGetter<R, V, F> | | Function that allows to get a specific data instead of field to render in the cell. | | valueOptions? | Array<ValueOptions> \| ((params: GridValueOptionsParams<R>) => Array<ValueOptions>) | | To be used in combination with `type: 'singleSelect'`. This is an array (or a function returning an array) of the possible cell values and labels. | -| valueParser? | (value: F \| undefined, params?: GridCellParams<R, V, F>) => V | | Function that takes the user-entered value and converts it to a value used internally. | -| valueSetter? | (params: GridValueSetterParams<R, V>) => R | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | +| valueParser? | GridValueParser<R, V, F> | | Function that takes the user-entered value and converts it to a value used internally. | +| valueSetter? | GridValueSetter<R, V, F> | | Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing. | | width? | number | 100 | Set the width of the column. | 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 88de3ba970729..43d10d66f14b5 100644 --- a/docs/scripts/createXTypeScriptProjects.ts +++ b/docs/scripts/createXTypeScriptProjects.ts @@ -3,7 +3,7 @@ import { createTypeScriptProject, CreateTypeScriptProjectOptions, TypeScriptProject, -} from '@mui/monorepo/packages/api-docs-builder/utils/createTypeScriptProject'; +} from '@mui-internal/docs-utils'; import { getComponentFilesInFolder } from './utils'; const workspaceRoot = path.resolve(__dirname, '../../'); @@ -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 91a1704529075..4a4473dad12b6 100644 --- a/docs/scripts/generateProptypes.ts +++ b/docs/scripts/generateProptypes.ts @@ -2,14 +2,35 @@ import * as yargs from 'yargs'; import * as path from 'path'; import * as fse from 'fs-extra'; import * as prettier from 'prettier'; -import { - getPropTypesFromFile, - injectPropTypesInFile, -} from '@mui/monorepo/packages/typescript-to-proptypes'; -import { fixBabelGeneratorIssues, fixLineEndings } from '@mui-internal/docs-utilities'; +import { getPropTypesFromFile, injectPropTypesInFile } from '@mui-internal/typescript-to-proptypes'; +import { fixBabelGeneratorIssues, fixLineEndings } from '@mui-internal/docs-utils'; 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, @@ -47,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/src/modules/components/WhatsNewLayout.js b/docs/src/modules/components/WhatsNewLayout.js new file mode 100644 index 0000000000000..f77d437456ac6 --- /dev/null +++ b/docs/src/modules/components/WhatsNewLayout.js @@ -0,0 +1,410 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import Link from '@mui/material/Link'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import Box from '@mui/material/Box'; +import Card from '@mui/material/Card'; +import Divider from '@mui/material/Divider'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Timeline from '@mui/lab/Timeline'; +import TimelineItem from '@mui/lab/TimelineItem'; +import TimelineSeparator from '@mui/lab/TimelineSeparator'; +import TimelineConnector from '@mui/lab/TimelineConnector'; +import TimelineContent from '@mui/lab/TimelineContent'; +import TimelineDot from '@mui/lab/TimelineDot'; +import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; + +const entries = [ + { + title: 'MUI X v7.0.0-beta.0', + description: + 'Featuring new components and multiple enhancements for both developers and end-users.', + date: new Date(2024, 0, 29), + url: 'https://mui.com/blog/mui-x-v7-beta/', + highlightList: [ + { + title: 'Data Grid - Sticky headers', + url: 'https://mui.com/blog/mui-x-v7-beta/#sticky-headers', + }, + { + title: 'Data Grid - Columns management panel', + url: 'https://mui.com/blog/mui-x-v7-beta/#improved-columns-panel-design', + }, + { + title: 'Rich Tree View', + url: 'https://mui.com/blog/mui-x-v7-beta/#richtreeview', + }, + { + title: 'Date Time Range Picker', + url: 'https://mui.com/blog/mui-x-v7-beta/#date-time-range-picker', + }, + { + title: 'Charts - Reference line ', + url: 'https://mui.com/blog/mui-x-v7-beta/#reference-line', + }, + ], + }, + { + title: 'MUI X v6.18.x', + description: 'New stable components, polished features, better performance, and more.', + date: new Date(2023, 10, 13), + url: 'https://mui.com/blog/mui-x-end-v6-features/', + highlightList: [ + { + title: 'Charts goes stable!', + url: 'https://mui.com/blog/mui-x-end-v6-features/#charts', + }, + { + title: 'Tree View goes stable!', + url: 'https://mui.com/blog/mui-x-end-v6-features/#tree-view', + }, + { + title: 'Clearable Date and Time fields', + url: 'https://mui.com/blog/mui-x-end-v6-features/#clearable-field', + }, + { + title: 'Customization playgrounds for Date and Time Pickers', + url: 'https://mui.com/blog/mui-x-end-v6-features/#customization-playgrounds', + }, + { + title: 'Data Grid column autosizing', + url: 'https://mui.com/blog/mui-x-end-v6-features/#column-autosizing', + }, + { + title: 'Sparkline Charts on the Data Grid ', + url: 'https://mui.com/blog/mui-x-end-v6-features/#sparkline-as-a-column-type', + }, + ], + }, + { + title: 'MUI X v6.11.0', + description: 'A roundup of all new features since v6.0.0.', + date: new Date(2023, 7, 14), + url: 'https://mui.com/blog/mui-x-mid-v6-features/', + highlightList: [ + { + title: 'Support for timezone on Date and Time Pickers', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#support-for-time-zones', + }, + { + title: 'Digital Clock', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#digital-clock', + }, + { + title: 'Data Grid: Column header filters', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#filter-on-column-headers', + }, + { + title: 'Data Grid: Copy and paste', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#copy-and-paste', + }, + { + title: 'Charts move to Alpha 🧪', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#charts-alpha-version', + }, + { + title: 'TreeView migration from the lab', + url: 'https://mui.com/blog/mui-x-mid-v6-features/#tree-view-is-moving-to-mui-x', + }, + ], + }, + { + title: 'MUI X v6.0.0', + description: 'A new major is available, with many new features and improvements.', + date: new Date(2023, 2, 6), + url: 'https://mui.com/blog/mui-x-v6/', + highlightList: [ + { + title: 'Date and Time Pickers', + url: 'https://mui.com/blog/mui-x-v6/#fields-the-new-default-input-gt-for-pickers', + }, + { + title: 'Date Range shortcuts', + url: 'https://mui.com/blog/mui-x-v6/#shortcuts-for-picking-specific-dates-in-a-calendar', + }, + { + title: 'Improved layout customization', + url: 'https://mui.com/blog/mui-x-v6/#improved-layout-customization', + }, + { + title: 'Edit ranges with drag and drop', + url: 'https://mui.com/blog/mui-x-v6/#edit-date-ranges-with-drag-and-drop', + }, + { + title: 'New Column menu', + url: 'https://mui.com/blog/mui-x-v6/#improved-column-menu', + }, + { + title: 'ApiRef in the community version', + url: 'https://mui.com/blog/mui-x-v6/#apiref-moved-to-the-mit-community-version', + }, + { + title: 'Cell selection', + url: 'https://mui.com/blog/mui-x-v6/#cell-selection', + }, + ], + }, + { + title: 'Date Pickers v5.0.0', + description: + 'After some months of polishing in pre-releases, the Date Pickers finally get a stable.', + date: new Date(2022, 8, 22), + url: 'https://mui.com/blog/date-pickers-stable-v5/', + highlightList: [ + { + title: 'Better APIs', + url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', + }, + { + title: 'Easier customization', + url: 'https://mui.com/blog/date-pickers-stable-v5/#better-apis-and-improved-customization', + }, + { + title: 'Integrated localization', + url: 'https://mui.com/blog/date-pickers-stable-v5/#integrated-localization', + }, + ], + }, + { + title: 'Data Grid v5.15', + description: + 'This version brings an amazing set of new supported use cases with the Data Grid Premium.', + date: new Date(2022, 7, 12), + url: 'https://mui.com/blog/aggregation-functions/', + highlightList: [ + { + title: 'Aggregation in summary rows and row groups', + url: 'https://mui.com/blog/aggregation-functions/#wait-what-is-an-aggregation-function', + }, + { + title: 'Row pinning', + url: 'https://mui.com/blog/aggregation-functions/#row-pinning', + }, + ], + }, + { + title: 'New Premium plan', + description: + 'Premium plan announcement, including the most advanced features for data analysis and management.', + date: new Date(2022, 4, 12), + url: 'https://mui.com/blog/premium-plan-release/', + highlightList: [ + { title: 'Row Grouping', url: '/x/react-data-grid/row-grouping/' }, + { title: 'Excel export', url: '/x/react-data-grid/export/#exported-rows' }, + ], + }, + { + title: 'MUI X v5.0.0', + description: 'A new Data Grid virtualization engine, and improvements in several APIs.', + date: new Date(2021, 10, 22), + url: 'https://mui.com/blog/mui-x-v5/', + highlightList: [ + { + title: 'New virtualization engine', + url: 'https://mui.com/blog/mui-x-v5/#a-new-virtualization-engine', + }, + { + title: 'Improved state management', + url: 'https://mui.com/blog/mui-x-v5/#improved-state-management', + }, + { + title: 'Simplified style customization', + url: 'https://mui.com/blog/mui-x-v5/#simplified-style-customization', + }, + ], + }, +]; + +function BlogCard({ entry }) { + return ( + + ({ + p: 2.5, + display: 'flex', + flexDirection: { xs: 'column', sm: 'row' }, + justifyContent: 'space-between', + alignItems: 'center', + gap: 3, + background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, + // TODO: Allow to use theme.applyDarkStyles + '.mode-dark &': { + bgcolor: 'primaryDark.900', + background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, + }, + })} + > +
+ + {entry.date.toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + })} + + + {entry.title} + + + {entry.description} + +
+ + + + + {entry.highlightList.map((item) => ( + + + {item.title} + + + ))} + + + ); +} + +BlogCard.propTypes = { + entry: PropTypes.any, +}; + +export default function WhatsNewLayout() { + return ( +
+ + {entries.map((entry) => ( + + + {entry.date.toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + })} + + + + + + + + + + + ))} + +
+ ); +} diff --git a/docs/src/modules/utils/find.js b/docs/src/modules/utils/find.mjs similarity index 86% rename from docs/src/modules/utils/find.js rename to docs/src/modules/utils/find.mjs index 8f912fa149a2e..bdf5ce2240378 100644 --- a/docs/src/modules/utils/find.js +++ b/docs/src/modules/utils/find.mjs @@ -1,5 +1,8 @@ -const fs = require('fs'); -const path = require('path'); +import * as fs from 'fs'; +import * as path from 'path'; +import * as url from 'url'; + +const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url)); const jsRegex = /\.js$/; const blackList = ['/.eslintrc', '/_document', '/_app']; @@ -7,9 +10,9 @@ const blackList = ['/.eslintrc', '/_document', '/_app']; // Returns the Next.js pages available in a nested format. // The output is in the next.js format. // Each pathname is a route you can navigate to. -function findPages( +export function findPages( options = {}, - directory = path.resolve(__dirname, '../../../pages'), + directory = path.resolve(currentDirectory, '../../../pages'), pages = [], ) { fs.readdirSync(directory).forEach((item) => { @@ -71,7 +74,3 @@ function findPages( return pages; } - -module.exports = { - findPages, -}; diff --git a/docs/src/modules/utils/findPages.js b/docs/src/modules/utils/findPages.js deleted file mode 100644 index 8489b12c389fa..0000000000000 --- a/docs/src/modules/utils/findPages.js +++ /dev/null @@ -1,6 +0,0 @@ -import path from 'path'; -import { findPages } from 'docsx/src/modules/utils/find'; - -const pages = findPages({ front: true }, path.resolve(__dirname, '../pages/api-docs')); - -export default pages; diff --git a/docs/translations/api-docs/charts/area-plot/area-plot.json b/docs/translations/api-docs/charts/area-plot/area-plot.json index 44b71c6c124ce..20909993d298d 100644 --- a/docs/translations/api-docs/charts/area-plot/area-plot.json +++ b/docs/translations/api-docs/charts/area-plot/area-plot.json @@ -1,6 +1,13 @@ { "componentDescription": "", "propDescriptions": { + "onItemClick": { + "description": "Callback fired when a line area item is clicked.", + "typeDescriptions": { + "event": "The event source of the callback.", + "lineItemIdentifier": "The line item identifier." + } + }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } 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 52c7ccee6d9e5..2cad135e80714 100644 --- a/docs/translations/api-docs/charts/bar-chart/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart/bar-chart.json @@ -23,6 +23,20 @@ "margin": { "description": "The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: top, bottom, left, and right." }, + "onAxisClick": { + "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.", + "typeDescriptions": { + "event": "The mouse event recorded on the <svg/> element.", + "data": "The data about the clicked axis and items associated with it." + } + }, + "onItemClick": { + "description": "Callback fired when a bar item is clicked.", + "typeDescriptions": { + "event": "The event source of the callback.", + "barItemIdentifier": "The bar item identifier." + } + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, @@ -49,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 b84aa3efd86ae..73f953ae93154 100644 --- a/docs/translations/api-docs/charts/bar-plot/bar-plot.json +++ b/docs/translations/api-docs/charts/bar-plot/bar-plot.json @@ -1,10 +1,17 @@ { "componentDescription": "", "propDescriptions": { + "onItemClick": { + "description": "Callback fired when a bar item is clicked.", + "typeDescriptions": { + "event": "The event source of the callback.", + "barItemIdentifier": "The bar item identifier." + } + }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, "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/charts-on-axis-click-handler/charts-on-axis-click-handler.json b/docs/translations/api-docs/charts/charts-on-axis-click-handler/charts-on-axis-click-handler.json new file mode 100644 index 0000000000000..f9129ff20bdec --- /dev/null +++ b/docs/translations/api-docs/charts/charts-on-axis-click-handler/charts-on-axis-click-handler.json @@ -0,0 +1,13 @@ +{ + "componentDescription": "", + "propDescriptions": { + "onAxisClick": { + "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.", + "typeDescriptions": { + "event": "The mouse event recorded on the <svg/> element.", + "data": "The data about the clicked axis and items associated with it." + } + } + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/charts/charts-voronoi-handler/charts-voronoi-handler.json b/docs/translations/api-docs/charts/charts-voronoi-handler/charts-voronoi-handler.json index 92bf65e12a76e..1e277962d2f42 100644 --- a/docs/translations/api-docs/charts/charts-voronoi-handler/charts-voronoi-handler.json +++ b/docs/translations/api-docs/charts/charts-voronoi-handler/charts-voronoi-handler.json @@ -1,6 +1,13 @@ { "componentDescription": "", "propDescriptions": { + "onItemClick": { + "description": "Callback fired when clicking on a scatter item.", + "typeDescriptions": { + "event": "Mouse event catched at the svg level", + "scatterItemIdentifier": "Identify whihc item got clicked" + } + }, "voronoiMaxRadius": { "description": "Defines the maximal distance between a scatter point and the pointer that triggers the interaction. If undefined, the radius is assumed to be infinite." } 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 a6d9fe50d903f..2091846411120 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -26,6 +26,13 @@ "margin": { "description": "The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: top, bottom, left, and right." }, + "onAxisClick": { + "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.", + "typeDescriptions": { + "event": "The mouse event recorded on the <svg/> element.", + "data": "The data about the clicked axis and items associated with it." + } + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, @@ -54,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/line-plot/line-plot.json b/docs/translations/api-docs/charts/line-plot/line-plot.json index 32105cc21e585..85bdfcd68a9a4 100644 --- a/docs/translations/api-docs/charts/line-plot/line-plot.json +++ b/docs/translations/api-docs/charts/line-plot/line-plot.json @@ -1,6 +1,13 @@ { "componentDescription": "", "propDescriptions": { + "onItemClick": { + "description": "Callback fired when a line item is clicked.", + "typeDescriptions": { + "event": "The event source of the callback.", + "lineItemIdentifier": "The line item identifier." + } + }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } diff --git a/docs/translations/api-docs/charts/mark-plot/mark-plot.json b/docs/translations/api-docs/charts/mark-plot/mark-plot.json index c338ac1652e53..521be58519194 100644 --- a/docs/translations/api-docs/charts/mark-plot/mark-plot.json +++ b/docs/translations/api-docs/charts/mark-plot/mark-plot.json @@ -1,6 +1,13 @@ { "componentDescription": "", "propDescriptions": { + "onItemClick": { + "description": "Callback fired when a line mark item is clicked.", + "typeDescriptions": { + "event": "The event source of the callback.", + "lineItemIdentifier": "The line mark item identifier." + } + }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } diff --git a/docs/translations/api-docs/charts/pie-arc-plot/pie-arc-plot.json b/docs/translations/api-docs/charts/pie-arc-plot/pie-arc-plot.json index 58bfec3d2112b..72d44f2ee1d9d 100644 --- a/docs/translations/api-docs/charts/pie-arc-plot/pie-arc-plot.json +++ b/docs/translations/api-docs/charts/pie-arc-plot/pie-arc-plot.json @@ -12,7 +12,7 @@ "innerRadius": { "description": "The radius between circle center and the begining of the arc." }, - "onClick": { + "onItemClick": { "description": "Callback fired when a pie item is clicked.", "typeDescriptions": { "event": "The event source of the callback.", 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/pie-plot/pie-plot.json b/docs/translations/api-docs/charts/pie-plot/pie-plot.json index bf05960bf8799..2fe4ec8dec4cd 100644 --- a/docs/translations/api-docs/charts/pie-plot/pie-plot.json +++ b/docs/translations/api-docs/charts/pie-plot/pie-plot.json @@ -1,7 +1,7 @@ { "componentDescription": "", "propDescriptions": { - "onClick": { + "onItemClick": { "description": "Callback fired when a pie item is clicked.", "typeDescriptions": { "event": "The event source of the callback.", 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 d23370f5a9a79..7cd50ba39a31e 100644 --- a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json @@ -23,6 +23,13 @@ "margin": { "description": "The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: top, bottom, left, and right." }, + "onItemClick": { + "description": "Callback fired when clicking on a scatter item.", + "typeDescriptions": { + "event": "The mouse event recorded on the <svg/> element if using Voronoi cells. Or the Mouse event from the scatter element, when disableVoronoi=true.", + "scatterItemIdentifier": "The scatter item identifier." + } + }, "rightAxis": { "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, @@ -52,7 +59,7 @@ "axisTick": "", "axisTickLabel": "", "itemContent": "", - "legend": "", + "legend": "Custom rendering of the legend.", "popper": "", "scatter": "" } diff --git a/docs/translations/api-docs/charts/scatter-plot/scatter-plot.json b/docs/translations/api-docs/charts/scatter-plot/scatter-plot.json index f2d38cfd30736..6d95fc6a93fb3 100644 --- a/docs/translations/api-docs/charts/scatter-plot/scatter-plot.json +++ b/docs/translations/api-docs/charts/scatter-plot/scatter-plot.json @@ -1,6 +1,13 @@ { "componentDescription": "", "propDescriptions": { + "onItemClick": { + "description": "Callback fired when clicking on a scatter item.", + "typeDescriptions": { + "event": "Mouse event recorded on the <svg/> element.", + "scatterItemIdentifier": "The scatter item identifier." + } + }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } }, diff --git a/docs/translations/api-docs/charts/scatter/scatter.json b/docs/translations/api-docs/charts/scatter/scatter.json index f93d4cbd8c798..512086dda520e 100644 --- a/docs/translations/api-docs/charts/scatter/scatter.json +++ b/docs/translations/api-docs/charts/scatter/scatter.json @@ -1 +1,13 @@ -{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} } +{ + "componentDescription": "", + "propDescriptions": { + "onItemClick": { + "description": "Callback fired when clicking on a scatter item.", + "typeDescriptions": { + "event": "Mouse event recorded on the <svg/> element.", + "scatterItemIdentifier": "The scatter item identifier." + } + } + }, + "classDescriptions": {} +} 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/docs/tsconfig.json b/docs/tsconfig.json index d5ad1e0aa5831..71d443e218e69 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "../tsconfig.json", "compilerOptions": { + "allowJs": true, "isolatedModules": true, /* files are emitted by babel */ "noEmit": true, @@ -14,7 +15,7 @@ "pages/**/*.ts*", "data/**/*", "src/modules/components/**/*", - "next.config.js", + "next.config.mjs", "../node_modules/@mui/material/themeCssVarsAugmentation", "../node_modules/dayjs/plugin/utc.d.ts", "../node_modules/dayjs/plugin/timezone.d.ts", diff --git a/package.json b/package.json index 279364aaa3fbb..ab07124cc083d 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "version": "7.0.0-beta.0", + "version": "7.0.0-beta.1", "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,10 +84,10 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", - "@mui/icons-material": "^5.15.6", - "@mui/material": "^5.15.6", + "@mui/icons-material": "^5.15.7", + "@mui/material": "^5.15.7", "@mui/monorepo": "https://github.com/mui/material-ui.git#master", - "@mui/utils": "^5.15.6", + "@mui/utils": "^5.15.7", "@next/eslint-plugin-next": "14.0.4", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.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-premium/src/models/gridGroupingValueGetterParams.ts b/packages/grid/x-data-grid-premium/src/models/gridGroupingValueGetterParams.ts deleted file mode 100644 index 38ffa2e91df85..0000000000000 --- a/packages/grid/x-data-grid-premium/src/models/gridGroupingValueGetterParams.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { - GridRowId, - GridRowModel, - GridValidRowModel, - GridGroupNode, - GridColDef, -} from '@mui/x-data-grid-pro'; - -/** - * Parameters passed to `colDef.groupingValueGetter`. - */ -export interface GridGroupingValueGetterParams { - /** - * The grid row id. - */ - id: GridRowId; - /** - * The column field of the cell that triggered the event. - */ - field: string; - /** - * The cell value, does not take `valueGetter` into account. - */ - value: V; - /** - * The row model of the row that the current cell belongs to. - */ - row: GridRowModel; - /** - * The column of the row that the current cell belongs to. - */ - colDef: GridColDef; - /** - * The node of the row that the current cell belongs to. - * It only contains the information available before the actual grouping. - */ - rowNode: Pick; -} 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 5ed752020b0f2..37678d8850cdc 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.0", + "version": "7.0.0-beta.1", "description": "The community edition of the charts components (MUI X).", "author": "MUI Team", "main": "./src/index.js", @@ -40,17 +40,17 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "^5.0.0-beta.33", - "@mui/system": "^5.15.6", - "@mui/utils": "^5.15.6", + "@mui/base": "^5.0.0-beta.34", + "@mui/system": "^5.15.7", + "@mui/utils": "^5.15.7", "@react-spring/rafz": "^9.7.3", "@react-spring/web": "^9.7.3", "clsx": "^2.1.0", "d3-color": "^3.1.0", "d3-delaunay": "^6.0.4", + "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.2.0", - "d3-interpolate": "^3.0.1", "prop-types": "^15.8.1" }, "peerDependencies": { @@ -71,8 +71,8 @@ "devDependencies": { "@types/d3-color": "^3.1.3", "@types/d3-delaunay": "^6.0.4", - "@types/d3-scale": "^4.0.8", "@types/d3-interpolate": "^3.0.4", + "@types/d3-scale": "^4.0.8", "@types/d3-shape": "^3.1.6" }, "exports": { diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index b83f033fdcdd9..8cdf235babe7d 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -25,6 +25,10 @@ import { import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight'; import { ChartsClipPath } from '../ChartsClipPath'; import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis'; +import { + ChartsOnAxisClickHandler, + ChartsOnAxisClickHandlerProps, +} from '../ChartsOnAxisClickHandler'; export interface BarChartSlots extends ChartsAxisSlots, @@ -40,7 +44,8 @@ export interface BarChartSlotProps export interface BarChartProps extends Omit, Omit, - Pick { + Omit, + ChartsOnAxisClickHandlerProps { series: MakeOptional[]; tooltip?: ChartsTooltipProps; /** @@ -99,6 +104,8 @@ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) { rightAxis, bottomAxis, skipAnimation, + onItemClick, + onAxisClick, children, slots, slotProps, @@ -146,11 +153,20 @@ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) { dataset={dataset} sx={sx} disableAxisListener={ - tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' + tooltip?.trigger !== 'axis' && + axisHighlight?.x === 'none' && + axisHighlight?.y === 'none' && + !onAxisClick } > + {onAxisClick && } - + ` element. + * @param {null | AxisData} data The data about the clicked axis and items associated with it. + */ + onAxisClick: PropTypes.func, + /** + * Callback fired when a bar item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {BarItemIdentifier} barItemIdentifier The bar item identifier. + */ + onItemClick: PropTypes.func, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. @@ -310,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, @@ -374,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, @@ -418,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, @@ -426,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, @@ -458,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, @@ -466,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 df1a0dfe483ea..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) { @@ -95,6 +106,7 @@ function BarElement(props: BarElementProps) { slots, slotProps, style, + onClick, ...other } = props; const getInteractionItemProps = useInteractionItemProps(highlightScope); @@ -128,6 +140,8 @@ function BarElement(props: BarElementProps) { ...getInteractionItemProps({ type: 'bar', seriesId: id, dataIndex }), style, className: classes.root, + onClick, + cursor: onClick ? 'pointer' : 'unset', }, ownerState, }); @@ -145,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 d421de7eddd16..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 { BarSeriesType } from '../models'; +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 { /** @@ -56,12 +53,19 @@ export interface BarPlotProps extends Pick} event The event source of the callback. + * @param {BarItemIdentifier} barItemIdentifier The bar item identifier. + */ + onItemClick?: ( + event: React.MouseEvent, + barItemIdentifier: BarItemIdentifier, + ) => void; } interface CompletedBarData { - bottom: number; - top: number; - seriesId: string; + seriesId: SeriesId; dataIndex: number; layout: BarSeriesType['layout']; x: number; @@ -153,23 +157,25 @@ const useAggregatedData = (): CompletedBarData[] => { 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, }; @@ -216,7 +222,7 @@ const getInStyle = ({ x, width, y, height }: CompletedBarData) => ({ */ function BarPlot(props: BarPlotProps) { const completedData = useAggregatedData(); - const { skipAnimation, ...other } = props; + const { skipAnimation, onItemClick, ...other } = props; const transition = useTransition(completedData, { keys: (bar) => `${bar.seriesId}-${bar.dataIndex}`, @@ -235,6 +241,12 @@ function BarPlot(props: BarPlotProps) { highlightScope={highlightScope} color={color} {...other} + onClick={ + onItemClick && + ((event) => { + onItemClick(event, { type: 'bar', seriesId, dataIndex }); + }) + } style={style} /> ))} @@ -247,6 +259,12 @@ BarPlot.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * Callback fired when a bar item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {BarItemIdentifier} barItemIdentifier The bar item identifier. + */ + onItemClick: PropTypes.func, /** * If `true`, animations are skipped. * @default false diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts index 2c7d571fb0772..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 @@ -86,9 +87,7 @@ const formatter: Formatter<'bar'> = (params, dataset) => { return { seriesOrder, stackingGroups, - series: defaultizeValueFormatter(completedSeries, (v) => - v === null ? '' : v.toLocaleString(), - ), + series: defaultizeValueFormatter(completedSeries, (v) => (v == null ? '' : v.toLocaleString())), }; }; 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/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx new file mode 100644 index 0000000000000..3deca39d1810a --- /dev/null +++ b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx @@ -0,0 +1,90 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { SVGContext } from '../context/DrawingProvider'; +import { InteractionContext } from '../context/InteractionProvider'; +import { CartesianContext } from '../context/CartesianContextProvider'; +import { SeriesContext } from '../context/SeriesContextProvider'; + +type AxisData = { + dataIndex: number; + axisValue?: number | Date | string; + seriesValues: Record; +}; + +export interface ChartsOnAxisClickHandlerProps { + /** + * The function called for onClick events. + * The second argument contains information about all line/bar elements at the current mouse position. + * @param {MouseEvent} event The mouse event recorded on the `` element. + * @param {null | AxisData} data The data about the clicked axis and items associated with it. + */ + onAxisClick?: (event: MouseEvent, data: null | AxisData) => void; +} + +function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) { + const { onAxisClick } = props; + + const svgRef = React.useContext(SVGContext); + const series = React.useContext(SeriesContext); + const { axis } = React.useContext(InteractionContext); + const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext); + + React.useEffect(() => { + const element = svgRef.current; + if (element === null || !onAxisClick) { + return () => {}; + } + + const handleMouseClick = (event: MouseEvent) => { + event.preventDefault(); + + const isXaxis = (axis.x && axis.x.index) !== undefined; + const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0]; + const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index; + + if (dataIndex == null) { + return; + } + + const seriesValues: Record = {}; + + Object.keys(series) + .filter((seriesType): seriesType is 'bar' | 'line' => ['bar', 'line'].includes(seriesType)) + .forEach((seriesType) => { + series[seriesType]?.seriesOrder.forEach((seriesId) => { + const seriesItem = series[seriesType]!.series[seriesId]; + const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey; + if (axisKey === undefined || axisKey === USED_AXIS_ID) { + seriesValues[seriesId] = seriesItem.data[dataIndex]; + } + }); + }); + const axisValue = (isXaxis ? xAxis : yAxis)[USED_AXIS_ID].data?.[dataIndex]; + onAxisClick(event, { dataIndex, axisValue, seriesValues }); + }; + + element.addEventListener('click', handleMouseClick); + return () => { + element.removeEventListener('click', handleMouseClick); + }; + }, [axis.x, axis.y, onAxisClick, series, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]); + + // eslint-disable-next-line react/jsx-no-useless-fragment + return ; +} + +ChartsOnAxisClickHandler.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The function called for onClick events. + * The second argument contains information about all line/bar elements at the current mouse position. + * @param {MouseEvent} event The mouse event recorded on the `` element. + * @param {null | AxisData} data The data about the clicked axis and items associated with it. + */ + onAxisClick: PropTypes.func, +} as any; + +export { ChartsOnAxisClickHandler }; diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/index.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/index.tsx new file mode 100644 index 0000000000000..2e389601bf677 --- /dev/null +++ b/packages/x-charts/src/ChartsOnAxisClickHandler/index.tsx @@ -0,0 +1 @@ +export * from './ChartsOnAxisClickHandler'; diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx index 0050830d96f6b..209548aaf14b6 100644 --- a/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx +++ b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx @@ -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/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index 102bb42989ea0..1ea6324818568 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -5,14 +5,11 @@ import { useSlotProps } from '@mui/base/utils'; import { AxisInteractionData } from '../context/InteractionProvider'; import { SeriesContext } from '../context/SeriesContextProvider'; import { CartesianContext } from '../context/CartesianContextProvider'; -import { - CartesianChartSeriesType, - ChartSeriesDefaultized, - ChartSeriesType, -} from '../models/seriesType/config'; +import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config'; import { AxisDefaultized } from '../models/axis'; import { ChartsTooltipClasses } from './chartsTooltipClasses'; import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent'; +import { isCartesianSeriesType } from './utils'; export type ChartsAxisContentProps = { /** @@ -63,19 +60,17 @@ function ChartsAxisTooltipContent(props: { const relevantSeries = React.useMemo(() => { const rep: any[] = []; - ( - Object.keys(series).filter((seriesType) => - ['bar', 'line', 'scatter'].includes(seriesType), - ) as CartesianChartSeriesType[] - ).forEach((seriesType) => { - series[seriesType]!.seriesOrder.forEach((seriesId) => { - const item = series[seriesType]!.series[seriesId]; - const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey; - if (axisKey === undefined || axisKey === USED_AXIS_ID) { - rep.push(series[seriesType]!.series[seriesId]); - } + Object.keys(series) + .filter(isCartesianSeriesType) + .forEach((seriesType) => { + series[seriesType]!.seriesOrder.forEach((seriesId) => { + const item = series[seriesType]!.series[seriesId]; + const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey; + if (axisKey === undefined || axisKey === USED_AXIS_ID) { + rep.push(series[seriesType]!.series[seriesId]); + } + }); }); - }); return rep; }, [USED_AXIS_ID, isXaxis, series]); 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 9a708be0ee29f..c53f431311fcb 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import Typography from '@mui/material/Typography'; -import { ChartSeriesDefaultized } from '../models/seriesType/config'; import { ChartsTooltipCell, ChartsTooltipPaper, @@ -11,6 +10,7 @@ import { ChartsTooltipRow, } from './ChartsTooltipTable'; import type { ChartsAxisContentProps } from './ChartsAxisTooltipContent'; +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 ( @@ -33,8 +38,9 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) { )} - {series.map(({ color, id, label, valueFormatter, data }: ChartSeriesDefaultized) => { - const formattedValue = valueFormatter(data[dataIndex]); + {series.filter(isCartesianSeries).map(({ color, id, label, valueFormatter, data }) => { + // @ts-ignore + const formattedValue = valueFormatter(data[dataIndex] ?? null); if (formattedValue == null) { return null; } 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 a0f8f6addb4bb..2045440db9b10 100644 --- a/packages/x-charts/src/ChartsTooltip/utils.tsx +++ b/packages/x-charts/src/ChartsTooltip/utils.tsx @@ -1,7 +1,11 @@ import * as React from 'react'; import { AxisInteractionData, ItemInteractionData } from '../context/InteractionProvider'; import { SVGContext } from '../context/DrawingProvider'; -import { ChartSeriesType } from '../models/seriesType/config'; +import { + CartesianChartSeriesType, + ChartSeriesDefaultized, + ChartSeriesType, +} from '../models/seriesType/config'; export function generateVirtualElement(mousePosition: { x: number; y: number } | null) { if (mousePosition === null) { @@ -85,3 +89,20 @@ export function getTooltipHasData( return hasAxisXData || hasAxisYData; } + +export function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType { + return ['bar', 'line', 'scatter'].includes(seriesType); +} + +export function isCartesianSeries( + series: ChartSeriesDefaultized, +): 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 3018ce60c6d04..663447bfbae4c 100644 --- a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx +++ b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx @@ -8,6 +8,8 @@ import { SVGContext, DrawingContext } from '../context/DrawingProvider'; 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 = { /** @@ -16,10 +18,16 @@ export type ChartsVoronoiHandlerProps = { * @default undefined */ voronoiMaxRadius?: number | undefined; + /** + * Callback fired when clicking on a scatter item. + * @param {MouseEvent} event Mouse event catched at the svg level + * @param {ScatterItemIdentifier} scatterItemIdentifier Identify whihc item got clicked + */ + onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void; }; function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) { - const { voronoiMaxRadius } = props; + const { voronoiMaxRadius, onItemClick } = props; const svgRef = React.useContext(SVGContext); const { width, height, top, left } = React.useContext(DrawingContext); const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext); @@ -41,6 +49,8 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) { }, [dispatch]); useEnhancedEffect(() => { + // This effect generate and store the Delaunay object that's used to map coordinate to closest point. + if (seriesOrder === undefined || series === undefined) { // If there is no scatter chart series return; @@ -74,66 +84,107 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) { return undefined; } - const handleMouseOut = () => { - dispatch({ type: 'exitChart' }); - }; - // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search. - const handleMouseMove = (event: MouseEvent) => { + function getClosestPoint( + event: MouseEvent, + ): + | { seriesId: SeriesId; dataIndex: number } + | 'outside-chart' + | 'outside-voronoi-max-radius' + | 'no-point-found' { // Get mouse coordinate in global SVG space const svgPoint = getSVGPoint(svgRef.current!, event); const outsideX = svgPoint.x < left || svgPoint.x > left + width; const outsideY = svgPoint.y < top || svgPoint.y > top + height; if (outsideX || outsideY) { - dispatch({ type: 'exitChart' }); - return; + return 'outside-chart'; } if (!voronoiRef.current.delauney) { - return; + return 'no-point-found'; } const closestPointIndex = voronoiRef.current.delauney?.find(svgPoint.x, svgPoint.y); - if (closestPointIndex !== undefined) { - const seriesId = Object.keys(voronoiRef.current).find((id) => { - if (id === 'delauney') { - return false; - } - return ( - 2 * closestPointIndex >= voronoiRef.current[id].startIndex && - 2 * closestPointIndex < voronoiRef.current[id].endIndex - ); - }); - if (seriesId === undefined) { - return; + if (closestPointIndex === undefined) { + return 'no-point-found'; + } + + const seriesId = Object.keys(voronoiRef.current).find((id) => { + if (id === 'delauney') { + return false; } + return ( + 2 * closestPointIndex >= voronoiRef.current[id].startIndex && + 2 * closestPointIndex < voronoiRef.current[id].endIndex + ); + }); + if (seriesId === undefined) { + return 'no-point-found'; + } - const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2; - - if (voronoiMaxRadius !== undefined) { - const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex]; - const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1]; - const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2; - if (dist2 > voronoiMaxRadius ** 2) { - // The closest point is too far to be considered. - dispatch({ type: 'leaveItem', data: { type: 'scatter', seriesId, dataIndex } }); - return; - } + const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2; + + if (voronoiMaxRadius !== undefined) { + const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex]; + const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1]; + const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2; + if (dist2 > voronoiMaxRadius ** 2) { + // The closest point is too far to be considered. + return 'outside-voronoi-max-radius'; } - dispatch({ type: 'enterItem', data: { type: 'scatter', seriesId, dataIndex } }); } + return { seriesId, dataIndex }; + } + + const handleMouseOut = () => { + dispatch({ type: 'exitChart' }); + }; + + const handleMouseMove = (event: MouseEvent) => { + const closestPoint = getClosestPoint(event); + + if (closestPoint === 'outside-chart') { + dispatch({ type: 'exitChart' }); + return; + } + + if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') { + dispatch({ type: 'leaveItem', data: { type: 'scatter' } }); + return; + } + + const { seriesId, dataIndex } = closestPoint; + dispatch({ type: 'enterItem', data: { type: 'scatter', seriesId, dataIndex } }); + }; + + const handleMouseClick = (event: MouseEvent) => { + if (!onItemClick) { + return; + } + const closestPoint = getClosestPoint(event); + + if (typeof closestPoint === 'string') { + // No point fond for any reason + return; + } + + const { seriesId, dataIndex } = closestPoint; + onItemClick(event, { type: 'scatter', seriesId, dataIndex }); }; element.addEventListener('mouseout', handleMouseOut); element.addEventListener('mousemove', handleMouseMove); - + element.addEventListener('click', handleMouseClick); return () => { element.removeEventListener('mouseout', handleMouseOut); element.removeEventListener('mousemove', handleMouseMove); + element.removeEventListener('click', handleMouseClick); }; - }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius]); - return ; // Workaround to fix docs scripts + }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick]); + + // eslint-disable-next-line react/jsx-no-useless-fragment + return ; } ChartsVoronoiHandler.propTypes = { @@ -141,6 +192,12 @@ ChartsVoronoiHandler.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * Callback fired when clicking on a scatter item. + * @param {MouseEvent} event Mouse event catched at the svg level + * @param {ScatterItemIdentifier} scatterItemIdentifier Identify whihc item got clicked + */ + onItemClick: PropTypes.func, /** * Defines the maximal distance between a scatter point and the pointer that triggers the interaction. * If `undefined`, the radius is assumed to be infinite. 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 d8819b94cefe4..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; @@ -65,7 +66,8 @@ export interface AreaElementSlotProps { export interface AreaElementProps extends Omit, - Pick { + Pick, + Omit, 'color' | 'id'> { d: string; highlightScope?: Partial; /** @@ -91,7 +93,17 @@ export interface AreaElementProps * - [AreaElement API](https://mui.com/x/api/charts/area-element/) */ function AreaElement(props: AreaElementProps) { - const { id, classes: innerClasses, color, highlightScope, slots, slotProps, ...other } = props; + const { + id, + classes: innerClasses, + color, + highlightScope, + slots, + slotProps, + onClick, + ...other + } = props; + const getInteractionItemProps = useInteractionItemProps(highlightScope); const { item } = React.useContext(InteractionContext); @@ -117,6 +129,8 @@ function AreaElement(props: AreaElementProps) { ...other, ...getInteractionItemProps({ type: 'line', seriesId: id }), className: classes.root, + onClick, + cursor: onClick ? 'pointer' : 'unset', }, ownerState, }); @@ -136,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/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx index 8d4446ba7ff7a..f441e340e1183 100644 --- a/packages/x-charts/src/LineChart/AreaPlot.tsx +++ b/packages/x-charts/src/LineChart/AreaPlot.tsx @@ -12,6 +12,7 @@ import { import { getValueToPositionMapper } from '../hooks/useScale'; import getCurveFactory from '../internals/getCurve'; import { DEFAULT_X_AXIS_KEY } from '../constants'; +import { LineItemIdentifier } from '../models/seriesType/line'; export interface AreaPlotSlots extends AreaElementSlots {} @@ -19,7 +20,17 @@ export interface AreaPlotSlotProps extends AreaElementSlotProps {} export interface AreaPlotProps extends React.SVGAttributes, - Pick {} + Pick { + /** + * Callback fired when a line area item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {LineItemIdentifier} lineItemIdentifier The line item identifier. + */ + onItemClick?: ( + event: React.MouseEvent, + lineItemIdentifier: LineItemIdentifier, + ) => void; +} const useAggregatedData = () => { const seriesData = React.useContext(SeriesContext).line; @@ -100,7 +111,7 @@ const useAggregatedData = () => { * - [AreaPlot API](https://mui.com/x/api/charts/area-plot/) */ function AreaPlot(props: AreaPlotProps) { - const { slots, slotProps, skipAnimation, ...other } = props; + const { slots, slotProps, onItemClick, skipAnimation, ...other } = props; const completedData = useAggregatedData(); @@ -119,6 +130,7 @@ function AreaPlot(props: AreaPlotProps) { highlightScope={highlightScope} slots={slots} slotProps={slotProps} + onClick={onItemClick && ((event) => onItemClick(event, { type: 'line', seriesId }))} skipAnimation={skipAnimation} /> ), @@ -132,6 +144,12 @@ AreaPlot.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * Callback fired when a line area item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {LineItemIdentifier} lineItemIdentifier The line item identifier. + */ + onItemClick: PropTypes.func, /** * 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 2e0d71190d8ee..5554a34f2b525 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import useId from '@mui/utils/useId'; import PropTypes from 'prop-types'; -import { AreaPlot, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot'; -import { LinePlot, LinePlotSlotProps, LinePlotSlots } from './LinePlot'; +import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot'; +import { LinePlot, LinePlotProps, LinePlotSlotProps, LinePlotSlots } from './LinePlot'; import { ResponsiveChartContainer, ResponsiveChartContainerProps, } from '../ResponsiveChartContainer'; -import { MarkPlot, MarkPlotSlotProps, MarkPlotSlots } from './MarkPlot'; +import { MarkPlot, MarkPlotProps, MarkPlotSlotProps, MarkPlotSlots } from './MarkPlot'; import { ChartsAxis, ChartsAxisProps } from '../ChartsAxis/ChartsAxis'; import { LineSeriesType } from '../models/seriesType/line'; import { MakeOptional } from '../models/helpers'; @@ -32,6 +32,10 @@ import { LineHighlightPlotSlots, LineHighlightPlotSlotProps, } from './LineHighlightPlot'; +import { + ChartsOnAxisClickHandler, + ChartsOnAxisClickHandlerProps, +} from '../ChartsOnAxisClickHandler'; export interface LineChartSlots extends ChartsAxisSlots, @@ -52,7 +56,8 @@ export interface LineChartSlotProps export interface LineChartProps extends Omit, - Omit { + Omit, + ChartsOnAxisClickHandlerProps { series: MakeOptional[]; tooltip?: ChartsTooltipProps; /** @@ -82,6 +87,9 @@ export interface LineChartProps * @default {} */ slotProps?: LineChartSlotProps; + onAreaClick?: AreaPlotProps['onItemClick']; + onLineClick?: LinePlotProps['onItemClick']; + onMarkClick?: MarkPlotProps['onItemClick']; /** * If `true`, animations are skipped. * @default false @@ -111,6 +119,10 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref dataset, sx, tooltip, + onAxisClick, + onAreaClick, + onLineClick, + onMarkClick, axisHighlight = { x: 'line' }, disableLineItemHighlight, legend, @@ -155,12 +167,26 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref dataset={dataset} sx={sx} disableAxisListener={ - tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' + tooltip?.trigger !== 'axis' && + axisHighlight?.x === 'none' && + axisHighlight?.y === 'none' && + !onAxisClick } > + {onAxisClick && } - - + + - + @@ -205,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, @@ -266,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, @@ -319,6 +350,16 @@ LineChart.propTypes = { right: PropTypes.number, top: PropTypes.number, }), + onAreaClick: PropTypes.func, + /** + * The function called for onClick events. + * The second argument contains information about all line/bar elements at the current mouse position. + * @param {MouseEvent} event The mouse event recorded on the `` element. + * @param {null | AxisData} data The data about the clicked axis and items associated with it. + */ + onAxisClick: PropTypes.func, + onLineClick: PropTypes.func, + onMarkClick: PropTypes.func, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. @@ -326,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, @@ -390,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, @@ -434,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, @@ -442,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, @@ -474,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, @@ -482,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 a03e2486c81c6..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; @@ -65,7 +66,8 @@ export interface LineElementSlotProps { export interface LineElementProps extends Omit, - Pick { + Pick, + Omit, 'color' | 'id'> { d: string; highlightScope?: Partial; /** @@ -91,7 +93,16 @@ export interface LineElementProps * - [LineElement API](https://mui.com/x/api/charts/line-element/) */ function LineElement(props: LineElementProps) { - const { id, classes: innerClasses, color, highlightScope, slots, slotProps, ...other } = props; + const { + id, + classes: innerClasses, + color, + highlightScope, + slots, + slotProps, + onClick, + ...other + } = props; const getInteractionItemProps = useInteractionItemProps(highlightScope); const { item } = React.useContext(InteractionContext); @@ -117,6 +128,8 @@ function LineElement(props: LineElementProps) { ...other, ...getInteractionItemProps({ type: 'line', seriesId: id }), className: classes.root, + onClick, + cursor: onClick ? 'pointer' : 'unset', }, ownerState, }); @@ -136,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 987b9d5425b77..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: @@ -75,12 +76,13 @@ function LineHighlightElement(props: LineHighlightElementProps) { return ( ); } @@ -91,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/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx index 1d180d423a323..885f3cc3ee0cc 100644 --- a/packages/x-charts/src/LineChart/LinePlot.tsx +++ b/packages/x-charts/src/LineChart/LinePlot.tsx @@ -12,6 +12,7 @@ import { import { getValueToPositionMapper } from '../hooks/useScale'; import getCurveFactory from '../internals/getCurve'; import { DEFAULT_X_AXIS_KEY } from '../constants'; +import { LineItemIdentifier } from '../models/seriesType/line'; export interface LinePlotSlots extends LineElementSlots {} @@ -19,7 +20,17 @@ export interface LinePlotSlotProps extends LineElementSlotProps {} export interface LinePlotProps extends React.SVGAttributes, - Pick {} + Pick { + /** + * Callback fired when a line item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {LineItemIdentifier} lineItemIdentifier The line item identifier. + */ + onItemClick?: ( + event: React.MouseEvent, + lineItemIdentifier: LineItemIdentifier, + ) => void; +} const useAggregatedData = () => { const seriesData = React.useContext(SeriesContext).line; @@ -97,7 +108,7 @@ const useAggregatedData = () => { * - [LinePlot API](https://mui.com/x/api/charts/line-plot/) */ function LinePlot(props: LinePlotProps) { - const { slots, slotProps, skipAnimation, ...other } = props; + const { slots, slotProps, skipAnimation, onItemClick, ...other } = props; const completedData = useAggregatedData(); @@ -114,6 +125,7 @@ function LinePlot(props: LinePlotProps) { skipAnimation={skipAnimation} slots={slots} slotProps={slotProps} + onClick={onItemClick && ((event) => onItemClick(event, { type: 'line', seriesId }))} /> ); })} @@ -126,6 +138,12 @@ LinePlot.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * Callback fired when a line item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {LineItemIdentifier} lineItemIdentifier The line item identifier. + */ + onItemClick: PropTypes.func, /** * If `true`, animations are skipped. * @default false diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx index de78d5b1e8d8e..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 @@ -121,6 +122,7 @@ function MarkElement(props: MarkElementProps) { shape, dataIndex, highlightScope, + onClick, skipAnimation, ...other } = props; @@ -155,6 +157,8 @@ function MarkElement(props: MarkElementProps) { ownerState={ownerState} className={classes.root} d={d3Symbol(d3SymbolsFill[getSymbol(shape)])()!} + onClick={onClick} + cursor={onClick ? 'pointer' : 'unset'} {...getInteractionItemProps({ type: 'line', seriesId: id, dataIndex })} /> ); @@ -174,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/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx index 69baf3061cbdf..59a78bbb4ab26 100644 --- a/packages/x-charts/src/LineChart/MarkPlot.tsx +++ b/packages/x-charts/src/LineChart/MarkPlot.tsx @@ -5,6 +5,7 @@ import { CartesianContext } from '../context/CartesianContextProvider'; import { MarkElement, MarkElementProps } from './MarkElement'; import { getValueToPositionMapper } from '../hooks/useScale'; import { DEFAULT_X_AXIS_KEY } from '../constants'; +import { LineItemIdentifier } from '../models/seriesType/line'; import { DrawingContext } from '../context/DrawingProvider'; import { cleanId } from '../internals/utils'; @@ -29,6 +30,15 @@ export interface MarkPlotProps * @default {} */ slotProps?: MarkPlotSlotProps; + /** + * Callback fired when a line mark item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier. + */ + onItemClick?: ( + event: React.MouseEvent, + lineItemIdentifier: LineItemIdentifier, + ) => void; } /** @@ -42,7 +52,7 @@ export interface MarkPlotProps * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/) */ function MarkPlot(props: MarkPlotProps) { - const { slots, slotProps, skipAnimation, ...other } = props; + const { slots, slotProps, skipAnimation, onItemClick, ...other } = props; const seriesData = React.useContext(SeriesContext).line; const axisData = React.useContext(CartesianContext); @@ -148,6 +158,11 @@ function MarkPlot(props: MarkPlotProps) { y={y!} // Don't know why TS doesn't get from the filter that y can't be null highlightScope={series[seriesId].highlightScope} skipAnimation={skipAnimation} + onClick={ + onItemClick && + ((event) => + onItemClick(event, { type: 'line', seriesId, dataIndex: index })) + } {...slotProps?.mark} /> ); @@ -165,6 +180,12 @@ MarkPlot.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * Callback fired when a line mark item is clicked. + * @param {React.MouseEvent} event The event source of the callback. + * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier. + */ + onItemClick: PropTypes.func, /** * If `true`, animations are skipped. * @default false diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts index 7734671d42053..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 @@ -83,9 +84,7 @@ const formatter: Formatter<'line'> = (params, dataset) => { return { seriesOrder, stackingGroups, - series: defaultizeValueFormatter(completedSeries, (v) => - v === null ? '' : v.toLocaleString(), - ), + series: defaultizeValueFormatter(completedSeries, (v) => (v == null ? '' : v.toLocaleString())), }; }; diff --git a/packages/x-charts/src/PieChart/PieArc.tsx b/packages/x-charts/src/PieChart/PieArc.tsx index 540352613fc73..7e22b1253d3dd 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,8 +59,8 @@ const PieArcRoot = styled(animated.path, { strokeLinejoin: 'round', })); -export type PieArcProps = PieArcOwnerState & - React.ComponentPropsWithoutRef<'path'> & { +export type PieArcProps = Omit, 'id'> & + PieArcOwnerState & { startAngle: SpringValue; endAngle: SpringValue; innerRadius: SpringValue; @@ -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..aa12ba9db2c7e 100644 --- a/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx +++ b/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx @@ -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 1db0508cc4175..0e3e072ddb89b 100644 --- a/packages/x-charts/src/PieChart/PieArcPlot.tsx +++ b/packages/x-charts/src/PieChart/PieArcPlot.tsx @@ -50,7 +50,7 @@ export interface PieArcPlotProps * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier. * @param {DefaultizedPieValueType} item The pie item. */ - onClick?: ( + onItemClick?: ( event: React.MouseEvent, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType, @@ -75,7 +75,7 @@ function PieArcPlot(props: PieArcPlotProps) { highlighted, faded = { additionalRadius: -5 }, data, - onClick, + onItemClick, skipAnimation, ...other } = props; @@ -136,9 +136,9 @@ function PieArcPlot(props: PieArcPlotProps) { isFaded={item.isFaded} isHighlighted={item.isHighlighted} onClick={ - onClick && + onItemClick && ((event) => { - onClick(event, { type: 'pie', seriesId: id, dataIndex: index }, item); + onItemClick(event, { type: 'pie', seriesId: id, dataIndex: index }, item); }) } {...slotProps?.pieArc} @@ -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 @@ -219,7 +219,7 @@ PieArcPlot.propTypes = { * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier. * @param {DefaultizedPieValueType} item The pie item. */ - onClick: PropTypes.func, + onItemClick: PropTypes.func, /** * The radius between circle center and the end of the arc. */ diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index cb0cd54077d67..30104f724d94c 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -65,8 +65,7 @@ export interface PieChartProps * @deprecated Consider using `slotProps.legend` instead. */ legend?: ChartsLegendProps; - onClick?: PiePlotProps['onClick']; - + onItemClick?: PiePlotProps['onItemClick']; slots?: PieChartSlots; /** * The props used for each component slot. @@ -108,7 +107,7 @@ function PieChart(props: PieChartProps) { children, slots, slotProps, - onClick, + onItemClick, } = props; const margin = { ...defaultMargin, ...marginProps }; @@ -147,7 +146,7 @@ function PieChart(props: PieChartProps) { @@ -174,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, @@ -231,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, @@ -284,7 +283,7 @@ PieChart.propTypes = { right: PropTypes.number, top: PropTypes.number, }), - onClick: PropTypes.func, + onItemClick: PropTypes.func, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. @@ -292,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, @@ -352,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, @@ -396,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, @@ -404,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, @@ -436,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, @@ -444,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/PiePlot.tsx b/packages/x-charts/src/PieChart/PiePlot.tsx index 198ef8accc157..3352b3ed5c331 100644 --- a/packages/x-charts/src/PieChart/PiePlot.tsx +++ b/packages/x-charts/src/PieChart/PiePlot.tsx @@ -10,7 +10,7 @@ export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {} export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {} -export interface PiePlotProps extends Pick { +export interface PiePlotProps extends Pick { /** * Overridable component slots. * @default {} @@ -40,7 +40,7 @@ export interface PiePlotProps extends Pick @@ -154,7 +154,7 @@ PiePlot.propTypes = { * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier. * @param {DefaultizedPieValueType} item The pie item. */ - onClick: PropTypes.func, + onItemClick: PropTypes.func, /** * If `true`, animations are skipped. * @default false 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 75ea2af883541..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 } from '../models/seriesType/scatter'; +import { + DefaultizedScatterSeriesType, + ScatterItemIdentifier, + ScatterValueType, +} from '../models/seriesType/scatter'; import { getValueToPositionMapper } from '../hooks/useScale'; import { getIsFaded, @@ -17,6 +21,15 @@ export interface ScatterProps { yScale: D3Scale; markerSize: number; color: string; + /** + * Callback fired when clicking on a scatter item. + * @param {MouseEvent} event Mouse event recorded on the `` element. + * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. + */ + onItemClick?: ( + event: React.MouseEvent, + scatterItemIdentifier: ScatterItemIdentifier, + ) => void; } /** @@ -30,7 +43,7 @@ export interface ScatterProps { * - [Scatter API](https://mui.com/x/api/charts/scatter/) */ function Scatter(props: ScatterProps) { - const { series, xScale, yScale, color, markerSize } = props; + const { series, xScale, yScale, color, markerSize, onItemClick } = props; const highlightScope: HighlightScope = React.useMemo( () => ({ highlighted: 'item', faded: 'global', ...series.highlightScope }), @@ -53,14 +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]; @@ -81,6 +92,7 @@ function Scatter(props: ScatterProps) { isFaded: !isHighlighted && getIsFaded(item, pointCtx, highlightScope), interactionProps: getInteractionItemProps(pointCtx), id: scatterPoint.id, + dataIndex: i, }); } } @@ -99,6 +111,16 @@ function Scatter(props: ScatterProps) { transform={`translate(${dataPoint.x}, ${dataPoint.y})`} fill={color} opacity={(dataPoint.isFaded && 0.3) || 1} + onClick={ + onItemClick && + ((event) => + onItemClick(event, { + type: 'scatter', + seriesId: series.id, + dataIndex: dataPoint.dataIndex, + })) + } + cursor={onItemClick ? 'pointer' : 'unset'} {...dataPoint.interactionProps} /> ))} @@ -113,6 +135,12 @@ Scatter.propTypes = { // ---------------------------------------------------------------------- color: PropTypes.string.isRequired, markerSize: PropTypes.number.isRequired, + /** + * Callback fired when clicking on a scatter item. + * @param {MouseEvent} event Mouse event recorded on the `` element. + * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. + */ + onItemClick: PropTypes.func, series: PropTypes.object.isRequired, xScale: PropTypes.func.isRequired, yScale: PropTypes.func.isRequired, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 0b718d98ee695..b68b1fb3bc54a 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -1,6 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { ScatterPlot, ScatterPlotSlotProps, ScatterPlotSlots } from './ScatterPlot'; +import { + ScatterPlot, + ScatterPlotProps, + ScatterPlotSlotProps, + ScatterPlotSlots, +} from './ScatterPlot'; import { ResponsiveChartContainer, ResponsiveChartContainerProps, @@ -41,7 +46,7 @@ export interface ScatterChartSlotProps export interface ScatterChartProps extends Omit, Omit, - ChartsVoronoiHandlerProps { + Omit { series: MakeOptional[]; tooltip?: ChartsTooltipProps; axisHighlight?: ChartsAxisHighlightProps; @@ -64,6 +69,12 @@ export interface ScatterChartProps * @default {} */ slotProps?: ScatterChartSlotProps; + /** + * Callback fired when clicking on a scatter item. + * @param {MouseEvent} event The mouse event recorded on the `` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`. + * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. + */ + onItemClick?: ScatterPlotProps['onItemClick'] | ChartsVoronoiHandlerProps['onItemClick']; } /** @@ -95,6 +106,7 @@ const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartP leftAxis, rightAxis, bottomAxis, + onItemClick, children, slots, slotProps, @@ -111,7 +123,13 @@ const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartP yAxis={yAxis} sx={sx} > - {!disableVoronoi && } + {!disableVoronoi && ( + + )} + - + @@ -145,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, @@ -207,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, @@ -260,6 +282,12 @@ ScatterChart.propTypes = { right: PropTypes.number, top: PropTypes.number, }), + /** + * Callback fired when clicking on a scatter item. + * @param {MouseEvent} event The mouse event recorded on the `` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`. + * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. + */ + onItemClick: PropTypes.func, /** * Indicate which axis to display the right of the charts. * Can be a string (the id of the axis) or an object `ChartsYAxisProps`. @@ -267,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, @@ -326,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, @@ -376,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, @@ -384,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, @@ -416,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, @@ -424,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/ScatterChart/ScatterPlot.tsx b/packages/x-charts/src/ScatterChart/ScatterPlot.tsx index 2c27f9d15b622..4f82984741031 100644 --- a/packages/x-charts/src/ScatterChart/ScatterPlot.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterPlot.tsx @@ -12,7 +12,7 @@ export interface ScatterPlotSlotProps { scatter?: Partial; } -export interface ScatterPlotProps { +export interface ScatterPlotProps extends Pick { /** * Overridable component slots. * @default {} @@ -36,7 +36,7 @@ export interface ScatterPlotProps { * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/) */ function ScatterPlot(props: ScatterPlotProps) { - const { slots, slotProps } = props; + const { slots, slotProps, onItemClick } = props; const seriesData = React.useContext(SeriesContext).scatter; const axisData = React.useContext(CartesianContext); @@ -65,6 +65,7 @@ function ScatterPlot(props: ScatterPlotProps) { color={color} markerSize={markerSize ?? 4} series={series[seriesId]} + onItemClick={onItemClick} {...slotProps?.scatter} /> ); @@ -78,6 +79,12 @@ ScatterPlot.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * Callback fired when clicking on a scatter item. + * @param {MouseEvent} event Mouse event recorded on the `` element. + * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier. + */ + onItemClick: PropTypes.func, /** * The props used for each component slot. * @default {} diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 8214bec2e2fe0..aea14b0e94aef 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -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/context/InteractionProvider.tsx b/packages/x-charts/src/context/InteractionProvider.tsx index a8c3f75d37fe9..0e478d13a09a2 100644 --- a/packages/x-charts/src/context/InteractionProvider.tsx +++ b/packages/x-charts/src/context/InteractionProvider.tsx @@ -25,7 +25,7 @@ type InteractionActions = } | { type: 'leaveItem'; - data: ItemInteractionData; + data: Partial>; } | { type: 'exitChart'; diff --git a/packages/x-charts/src/index.ts b/packages/x-charts/src/index.ts index cc46bd9eb7334..750a9107003e6 100644 --- a/packages/x-charts/src/index.ts +++ b/packages/x-charts/src/index.ts @@ -13,6 +13,7 @@ export * from './ChartsTooltip'; export * from './ChartsLegend'; export * from './ChartsAxisHighlight'; export * from './ChartsVoronoiHandler'; +export * from './ChartsOnAxisClickHandler'; export * from './BarChart'; export * from './LineChart'; export * from './PieChart'; 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 90c4bbfc26bd7..2ae6f184020e9 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.0", + "version": "7.0.0-beta.1", "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.33", - "@mui/x-data-grid-premium": "7.0.0-beta.0", + "@mui/base": "^5.0.0-beta.34", + "@mui/x-data-grid-premium": "7.0.0-beta.1", "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 96% 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 index b112b5b6ec4ef..60c9f269b87f1 100644 --- a/packages/grid/x-data-grid-generator/src/columns/commodities.columns.tsx +++ b/packages/x-data-grid-generator/src/columns/commodities.columns.tsx @@ -148,7 +148,7 @@ export const getCommodityColumns = (editable = false): GridColDefGenerator[] => { field: 'subTotal', headerName: 'Sub Total', - valueGetter: ({ row }) => + valueGetter: (value, row) => row.quantity == null || row.unitPrice == null ? null : row.quantity * row.unitPrice, type: 'number', width: 120, @@ -165,7 +165,7 @@ export const getCommodityColumns = (editable = false): GridColDefGenerator[] => { field: 'feeAmount', headerName: 'Fee Amount', - valueGetter: ({ row }) => + valueGetter: (value, row) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate * row.quantity * row.unitPrice, @@ -184,7 +184,7 @@ export const getCommodityColumns = (editable = false): GridColDefGenerator[] => { field: 'totalPrice', headerName: 'Total in USD', - valueGetter: ({ row }) => + valueGetter: (value, row) => row.feeRate == null || row.quantity == null || row.unitPrice == null ? null : row.feeRate + row.quantity * row.unitPrice, @@ -249,8 +249,8 @@ export const getCommodityColumns = (editable = false): GridColDefGenerator[] => return value; }, - valueFormatter: ({ value }) => value?.label, - groupingValueGetter: (params) => params.value.code, + valueFormatter: (value: { label: string }) => value?.label, + groupingValueGetter: (value: { code: string }) => value.code, sortComparator: (v1, v2, param1, param2) => gridStringOrNumberComparator(v1.label, v2.label, param1, param2), editable, 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 93% 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 index 016f30539f599..7a448ca9e0073 100644 --- a/packages/grid/x-data-grid-generator/src/columns/employees.columns.tsx +++ b/packages/x-data-grid-generator/src/columns/employees.columns.tsx @@ -40,10 +40,8 @@ export const getEmployeeColumns = (): GridColDefGenerator[] => [ headerName: 'Avatar', generateData: randomColor, renderCell: renderAvatar, - valueGetter: (params) => - params.row.name == null || params.row.avatar == null - ? null - : { name: params.row.name, color: params.row.avatar }, + valueGetter: (value, row) => + row.name == null || row.avatar == null ? null : { name: row.name, color: row.avatar }, sortable: false, filterable: false, groupable: false, @@ -114,7 +112,7 @@ export const getEmployeeColumns = (): GridColDefGenerator[] => [ headerName: 'Country', type: 'singleSelect', valueOptions: COUNTRY_ISO_OPTIONS_SORTED, - valueFormatter: ({ value }) => value?.label, + valueFormatter: (value: CountryIsoOption) => value?.label, generateData: randomCountry, renderCell: renderCountry, renderEditCell: renderEditCountry, @@ -166,7 +164,7 @@ export const getEmployeeColumns = (): GridColDefGenerator[] => [ headerName: 'Salary', generateData: () => randomInt(30000, 80000), type: 'number', - valueFormatter: ({ value }) => { + valueFormatter: (value?: number) => { if (!value || typeof value !== 'number') { return value; } 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 99% rename from packages/grid/x-data-grid-generator/src/hooks/useMovieData.ts rename to packages/x-data-grid-generator/src/hooks/useMovieData.ts index ba7d8e88aba0a..5ed7504920302 100644 --- a/packages/grid/x-data-grid-generator/src/hooks/useMovieData.ts +++ b/packages/x-data-grid-generator/src/hooks/useMovieData.ts @@ -28,7 +28,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 150, groupable: false, - valueFormatter: ({ value }) => { + valueFormatter: (value) => { if (!value) { return ''; } 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 98% rename from packages/grid/x-data-grid-generator/src/hooks/useQuery.ts rename to packages/x-data-grid-generator/src/hooks/useQuery.ts index d864e2601a826..c888d14faa0e6 100644 --- a/packages/grid/x-data-grid-generator/src/hooks/useQuery.ts +++ b/packages/x-data-grid-generator/src/hooks/useQuery.ts @@ -18,10 +18,10 @@ import { } from './useDemoData'; import { randomInt } from '../services/random-generator'; +const apiRef = {} as any; + const simplifiedValueGetter = (field: string, colDef: GridColDef) => (row: GridRowModel) => { - const params = { id: row.id, row, field, rowNode: {} }; - // @ts-ignore - return colDef.valueGetter?.(params) || row[field]; + return colDef.valueGetter?.(row[row.id] as never, row, colDef, apiRef) || row[field]; }; const getRowComparator = ( 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 a2c2b531db695..df520f4d6245a 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.0", + "version": "7.0.0-beta.1", "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.6", - "@mui/utils": "^5.15.6", - "@mui/x-data-grid": "7.0.0-beta.0", - "@mui/x-data-grid-pro": "7.0.0-beta.0", - "@mui/x-license-pro": "7.0.0-beta.0", + "@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": "7.0.0-beta.0", "@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 99% rename from packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx rename to packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx index 706c5f66d1dee..c1d5bf49973a6 100644 --- a/packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx @@ -147,7 +147,7 @@ export const useDataGridPremiumComponent = ( useGridRowPinning(apiRef, props); useGridColumns(apiRef, props); useGridRows(apiRef, props); - useGridParamsApi(apiRef, props); + useGridParamsApi(apiRef); useGridDetailPanel(apiRef, props); useGridColumnSpanning(apiRef); useGridColumnGrouping(apiRef, props); 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 92% 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 index 680a2d723a527..b7030fb5b9c08 100644 --- 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 @@ -45,17 +45,18 @@ const getAggregationValueWrappedValueGetter: ColumnPropertyWrapper<'valueGetter' value: valueGetter, getCellAggregationResult, }) => { - const wrappedValueGetter: GridBaseColDef['valueGetter'] = (params) => { - const cellAggregationResult = getCellAggregationResult(params.id, params.field); + const wrappedValueGetter: GridBaseColDef['valueGetter'] = (value, row, column, apiRef) => { + const rowId = apiRef.current.getRowId(row); + const cellAggregationResult = getCellAggregationResult(rowId, column.field); if (cellAggregationResult != null) { return cellAggregationResult?.value ?? null; } if (valueGetter) { - return valueGetter(params); + return valueGetter(value, row, column, apiRef); } - return params.row[params.field]; + return row[column.field]; }; return wrappedValueGetter; @@ -72,19 +73,25 @@ const getAggregationValueWrappedValueFormatter: ColumnPropertyWrapper<'valueForm return valueFormatter; } - const wrappedValueFormatter: GridBaseColDef['valueFormatter'] = (params) => { - if (params.id != null) { - const cellAggregationResult = getCellAggregationResult(params.id, params.field); + const wrappedValueFormatter: GridBaseColDef['valueFormatter'] = (value, row, column, apiRef) => { + const rowId = apiRef.current.getRowId(row); + if (rowId != null) { + const cellAggregationResult = getCellAggregationResult(rowId, column.field); if (cellAggregationResult != null) { - return aggregationRule.aggregationFunction.valueFormatter!(params); + return aggregationRule.aggregationFunction.valueFormatter?.({ + id: rowId, + field: column.field, + value, + api: apiRef.current, + }); } } if (valueFormatter) { - return valueFormatter(params); + return valueFormatter(value, row, column, apiRef); } - return params.value; + return value; }; return wrappedValueFormatter; 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 99% 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 index 7d3d888d5d265..5877bfe51094c 100644 --- 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 @@ -22,6 +22,7 @@ import { gridClasses, gridFocusCellSelector, GridCellParams, + GRID_REORDER_COL_DEF, } from '@mui/x-data-grid-pro'; import { gridCellSelectionStateSelector } from './gridCellSelectionSelector'; import { GridCellSelectionApi } from './gridCellSelectionInterfaces'; @@ -221,6 +222,10 @@ export const useGridCellSelection = ( return; } + if (params.field === GRID_REORDER_COL_DEF.field) { + return; + } + const focusedCell = gridFocusCellSelector(apiRef); if (hasClickedValidCellForRangeSelection(params) && event.shiftKey && focusedCell) { event.preventDefault(); 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 96% 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 13a5609086533..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 @@ -130,14 +130,12 @@ class CellValueUpdater { return; } - const cellParams = apiRef.current.getCellParams(rowId, field); - let parsedValue = pastedCellValue; if (colDef.pastedValueParser) { - parsedValue = colDef.pastedValueParser(pastedCellValue, cellParams); + parsedValue = colDef.pastedValueParser(pastedCellValue, row, colDef, apiRef); } else if (colDef.valueParser) { - parsedValue = colDef.valueParser(parsedValue, cellParams); + parsedValue = colDef.valueParser(parsedValue, row, colDef, apiRef); } if (parsedValue === undefined) { @@ -146,7 +144,7 @@ class CellValueUpdater { let rowCopy = { ...row }; if (typeof colDef.valueSetter === 'function') { - rowCopy = colDef.valueSetter({ value: parsedValue, row: rowCopy }); + rowCopy = colDef.valueSetter(parsedValue, rowCopy, colDef, apiRef); } else { rowCopy[field] = parsedValue; } @@ -306,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 98% 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 index 2cda4e8eedd7d..ba4439cc4da9f 100644 --- 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 @@ -2,11 +2,11 @@ import type * as Excel from 'exceljs'; import { GridRowId, GridColDef, - GridValueFormatterParams, GridApi, ValueOptions, GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF, + GridValidRowModel, } from '@mui/x-data-grid-pro'; import { buildWarning, @@ -35,6 +35,7 @@ const warnInvalidFormattedValue = buildWarning([ const getFormattedValueOptions = ( colDef: GridSingleSelectColDef, + row: GridValidRowModel, valueOptions: ValueOptions[], api: GridApi, ) => { @@ -49,8 +50,7 @@ const getFormattedValueOptions = ( return option; } - const params: GridValueFormatterParams = { field: colDef.field, api, value: option }; - return String(colDef.valueFormatter!(params)); + return String(colDef.valueFormatter!(option as never, row, colDef, { current: api })); }); } return valueOptionsFormatted.map((option) => @@ -111,7 +111,12 @@ export const serializeRow = ( row, field: cellParams.field, }); - const formattedValueOptions = getFormattedValueOptions(castColumn, valueOptions, api); + const formattedValueOptions = getFormattedValueOptions( + castColumn, + row, + valueOptions, + api, + ); dataValidation[castColumn.field] = { type: 'list', allowBlank: true, @@ -304,6 +309,7 @@ export async function getDataForValueOptionsSheet( const singleSelectColumn = column as GridSingleSelectColDef; const formattedValueOptions = getFormattedValueOptions( singleSelectColumn, + {}, singleSelectColumn.valueOptions as Array, api, ); 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 93% 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 index e15c252b29fcb..fd0573c80f842 100644 --- 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 @@ -6,6 +6,7 @@ import { GridRenderCellParams, GridGroupingColDefOverride, GridGroupNode, + GridTreeNodeWithRender, } from '@mui/x-data-grid-pro'; import { GridColumnRawLookup, isSingleSelectColDef } from '@mui/x-data-grid-pro/internals'; import { GridApiPremium } from '../../../models/gridApiPremium'; @@ -178,25 +179,23 @@ export const createGroupingColDefForOneGroupingCriteria = ({ return ''; }, - valueGetter: (params) => { - if ( - !params.rowNode || - params.rowNode.type === 'footer' || - params.rowNode.type === 'pinnedRow' - ) { + valueGetter: (value, row, column, apiRef) => { + const rowId = apiRef.current.getRowId(row); + const rowNode = apiRef.current.getRowNode(rowId); + if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') { return undefined; } - if (params.rowNode.type === 'leaf') { + if (rowNode.type === 'leaf') { if (leafColDef) { - return params.api.getCellValue(params.id, leafField!); + return apiRef.current.getCellValue(rowId, leafField!); } return undefined; } - if (params.rowNode.groupingField === groupingCriteria) { - return params.rowNode.groupingKey; + if (rowNode.groupingField === groupingCriteria) { + return rowNode.groupingKey; } return undefined; @@ -305,24 +304,22 @@ export const createGroupingColDefForAllGroupingCriteria = ({ /> ); }, - valueGetter: (params) => { - if ( - !params.rowNode || - params.rowNode.type === 'footer' || - params.rowNode.type === 'pinnedRow' - ) { + valueGetter: (value, row) => { + const rowId = apiRef.current.getRowId(row); + const rowNode = apiRef.current.getRowNode(rowId); + if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') { return undefined; } - if (params.rowNode.type === 'leaf') { + if (rowNode.type === 'leaf') { if (leafColDef) { - return params.api.getCellValue(params.id, leafField!); + return apiRef.current.getCellValue(rowId, leafField!); } return undefined; } - return params.rowNode.groupingKey; + return rowNode.groupingKey; }, }; 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 94% 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 index 64ca76ee5e549..361c76b069c51 100644 --- 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 @@ -17,7 +17,6 @@ import { GridColumnRawLookup, } from '@mui/x-data-grid-pro/internals'; import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps'; -import { GridGroupingValueGetterParams } from '../../../models/gridGroupingValueGetterParams'; import { GridGroupingRule, GridGroupingRules, @@ -209,29 +208,18 @@ export const setStrategyAvailability = ( export const getCellGroupingCriteria = ({ row, - id, colDef, groupingRule, + apiRef, }: { row: GridRowModel; - id: GridRowId; colDef: GridColDef; groupingRule: GridGroupingRule; + apiRef: React.MutableRefObject; }) => { let key: GridKeyValue | null | undefined; if (groupingRule.groupingValueGetter) { - const groupingValueGetterParams: GridGroupingValueGetterParams = { - colDef, - field: groupingRule.field, - value: row[groupingRule.field], - id, - row, - rowNode: { - isAutoGenerated: false, - id, - }, - }; - key = groupingRule.groupingValueGetter(groupingValueGetterParams); + key = groupingRule.groupingValueGetter(row[groupingRule.field] as never, row, colDef, apiRef); } else { key = row[groupingRule.field] as GridKeyValue | null | undefined; } 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 99% 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 index f134c040d14e9..2fa403ec72d5e 100644 --- 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 @@ -153,9 +153,9 @@ export const useGridRowGroupingPreProcessors = ( .map((groupingRule) => getCellGroupingCriteria({ row, - id: rowId, groupingRule, colDef: columnsLookup[groupingRule.field], + apiRef, }), ) .filter((cell) => cell.key != null) as RowTreeBuilderGroupingCriterion[]; 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/x-data-grid-premium/src/models/gridGroupingValueGetter.ts b/packages/x-data-grid-premium/src/models/gridGroupingValueGetter.ts new file mode 100644 index 0000000000000..aaa20b7f73a13 --- /dev/null +++ b/packages/x-data-grid-premium/src/models/gridGroupingValueGetter.ts @@ -0,0 +1,12 @@ +import { GridValidRowModel, GridColDef, GridKeyValue } from '@mui/x-data-grid-pro'; +import { GridApiPremium } from './gridApiPremium'; + +export type GridGroupingValueGetter< + R extends GridValidRowModel = GridValidRowModel, + TValue = never, +> = ( + value: TValue, + row: R, + column: GridColDef, + apiRef: React.MutableRefObject, +) => GridKeyValue | null | undefined; diff --git a/packages/x-data-grid-premium/src/models/gridPastedValueParser.ts b/packages/x-data-grid-premium/src/models/gridPastedValueParser.ts new file mode 100644 index 0000000000000..e20efa8a0c530 --- /dev/null +++ b/packages/x-data-grid-premium/src/models/gridPastedValueParser.ts @@ -0,0 +1,13 @@ +import { GridColDef, GridValidRowModel } from '@mui/x-data-grid'; +import { GridApiPremium } from './gridApiPremium'; + +export type GridPastedValueParser< + R extends GridValidRowModel = GridValidRowModel, + V = any, + F = V, +> = ( + value: string, + row: R, + column: GridColDef, + apiRef: React.MutableRefObject, +) => V | undefined; 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 52% rename from packages/grid/x-data-grid-premium/src/models/index.ts rename to packages/x-data-grid-premium/src/models/index.ts index 03a21344b06bb..790f91cf4f468 100644 --- a/packages/grid/x-data-grid-premium/src/models/index.ts +++ b/packages/x-data-grid-premium/src/models/index.ts @@ -1,3 +1,4 @@ -export * from './gridGroupingValueGetterParams'; +export * from './gridGroupingValueGetter'; export * from './gridPremiumIconSlotsComponent'; export * from './gridPremiumSlotsComponent'; +export * from './gridPastedValueParser'; 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 95% 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 index e7c53357b2e83..8f76012552efb 100644 --- a/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx +++ b/packages/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx @@ -11,7 +11,7 @@ function ColumnPropTest() { { field: 'firstName', // @ts-expect-error - groupingValueGetter: (params) => params.row.lastName, + groupingValueGetter: (value, row) => row.lastName, }, ]} /> @@ -21,7 +21,7 @@ function ColumnPropTest() { columns={[ { field: 'firstName', - groupingValueGetter: (params) => params.row.firstName, + groupingValueGetter: (value, row) => row.firstName, }, ]} /> @@ -32,7 +32,7 @@ function ColumnPropTest() { { field: 'firstName', // @ts-expect-error - groupingValueGetter: (params) => params.row.lastName, + groupingValueGetter: (value, row) => row.lastName, }, ]} /> @@ -42,7 +42,7 @@ function ColumnPropTest() { columns={[ { field: 'firstName', - groupingValueGetter: (params) => params.row.firstName, + groupingValueGetter: (value, row) => row.firstName, }, ]} /> 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 99% 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 index 19bebd3b4e57b..a950d6f5d3824 100644 --- 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 @@ -130,7 +130,7 @@ describe(' - Aggregation', () => { { field: 'idBis', type: 'number', - valueGetter: (params) => params.row.id, + valueGetter: (valuem, row) => row.id, aggregable: false, }, ]} @@ -622,7 +622,7 @@ describe(' - Aggregation', () => { { field: 'id', type: 'number', - valueFormatter: (params) => `- ${params.value}`, + valueFormatter: (value) => `- ${value}`, }, ]} />, @@ -652,7 +652,7 @@ describe(' - Aggregation', () => { { field: 'id', type: 'number', - valueFormatter: (params) => `- ${params.value}`, + valueFormatter: (value) => `- ${value}`, }, ]} />, 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 98% 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 index ccf2a87d78f2f..a1aa7d15b88a6 100644 --- 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 @@ -471,17 +471,17 @@ describe(' - Clipboard', () => { it('should use valueSetter if the column has one', async () => { const processRowUpdateSpy = spy((newRow) => newRow); - const columns: GridColDef[] = [ + const columns: GridColDef<(typeof rows)[number]>[] = [ { field: 'firstName' }, { field: 'lastName' }, { field: 'fullName', - valueGetter: (params) => { - return `${params.row.firstName} ${params.row.lastName}`; + valueGetter: (value, row) => { + return `${row.firstName} ${row.lastName}`; }, - valueSetter: (params) => { - const [firstName, lastName] = params.value!.toString().split(' '); - return { ...params.row, firstName, lastName }; + valueSetter: (value, row) => { + const [firstName, lastName] = value!.toString().split(' '); + return { ...row, firstName, lastName }; }, editable: true, }, @@ -985,10 +985,10 @@ describe(' - Clipboard', () => { field: 'size', type: 'singleSelect', valueOptions: sizes, - valueGetter: (params) => params.value.size, - valueSetter: (params) => { - const value = sizes.find((option) => option.size === params.value); - return { ...params.row, size: value }; + valueGetter: (value: { size: number }) => value.size, + valueSetter: (value: string, row) => { + const size = sizes.find((option) => option.size === value); + return { ...row, size }; }, getOptionValue: (option: any) => option.size, getOptionLabel: (option: any) => option.size, 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 98% 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 index 854f9d3636138..1a9740d208265 100644 --- 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 @@ -22,7 +22,6 @@ import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, GridApi, - GridGroupingValueGetterParams, GridPreferencePanelsValue, GridRowsProp, useGridApiRef, @@ -785,12 +784,12 @@ describe(' - Row grouping', () => { { field: 'id', type: 'number', - valueFormatter: (params) => { - if (params.value == null) { + valueFormatter: (value) => { + if (value == null) { return null; } - return `#${params.value}`; + return `#${value}`; }, }, { @@ -923,8 +922,9 @@ describe(' - Row grouping', () => { initialState={{ rowGrouping: { model: ['category1', 'category2'] } }} defaultGroupingExpansionDepth={1} groupingColDef={{ - valueFormatter: (params) => { - const node = apiRef.current.getRowNode(params.id!)!; + valueFormatter: (value, row) => { + const rowId = apiRef.current.getRowId(row); + const node = apiRef.current.getRowNode(rowId)!; if (node.type !== 'group') { return ''; } @@ -951,8 +951,9 @@ describe(' - Row grouping', () => { initialState={{ rowGrouping: { model: ['category1', 'category2'] } }} defaultGroupingExpansionDepth={1} groupingColDef={() => ({ - valueFormatter: (params) => { - const node = apiRef.current.getRowNode(params.id!)!; + valueFormatter: (value, row) => { + const rowId = apiRef.current.getRowId(row); + const node = apiRef.current.getRowNode(rowId)!; if (node.type !== 'group') { return ''; } @@ -1168,12 +1169,12 @@ describe(' - Row grouping', () => { { field: 'id', type: 'number', - valueFormatter: (params) => { - if (params.value == null) { + valueFormatter: (value) => { + if (value == null) { return null; } - return `#${params.value}`; + return `#${value}`; }, }, { @@ -1338,8 +1339,9 @@ describe(' - Row grouping', () => { rowGroupingColumnMode="multiple" defaultGroupingExpansionDepth={1} groupingColDef={{ - valueFormatter: (params) => { - const node = apiRef.current.getRowNode(params.id!)!; + valueFormatter: (value, row) => { + const rowId = apiRef.current.getRowId(row); + const node = apiRef.current.getRowNode(rowId)!; if (node.type !== 'group') { return ''; } @@ -1380,8 +1382,9 @@ describe(' - Row grouping', () => { } return { - valueFormatter: (params) => { - const node = apiRef.current.getRowNode(params.id!)!; + valueFormatter: (value, row) => { + const rowId = apiRef.current.getRowId(row); + const node = apiRef.current.getRowNode(rowId)!; if (node.type !== 'group') { return ''; } @@ -1503,7 +1506,7 @@ describe(' - Row grouping', () => { }, { field: 'category1', - groupingValueGetter: (params) => `groupingValue ${params.value}`, + groupingValueGetter: (value) => `groupingValue ${value}`, }, ]} initialState={{ rowGrouping: { model: ['category1'] } }} @@ -1531,7 +1534,7 @@ describe(' - Row grouping', () => { }, { field: 'modulo', - groupingValueGetter: (params) => params.row.id % 2, + groupingValueGetter: (value, row) => row.id % 2, }, ]} initialState={{ rowGrouping: { model: ['modulo'] } }} @@ -1545,7 +1548,7 @@ describe(' - Row grouping', () => { apiRef.current.updateColumns([ { field: 'modulo', - groupingValueGetter: (params) => params.row.id % 3, + groupingValueGetter: (value, row) => row.id % 3, }, ]), ); @@ -1563,7 +1566,7 @@ describe(' - Row grouping', () => { }, { field: 'category1', - valueGetter: (params) => `value ${params.row.category1}`, + valueGetter: (value, row) => `value ${row.category1}`, }, ]} initialState={{ rowGrouping: { model: ['category1'] } }} @@ -1586,9 +1589,9 @@ describe(' - Row grouping', () => { }, { field: 'category1', - valueGetter: (params) => `value ${params.row.category1}`, - groupingValueGetter: (params: GridGroupingValueGetterParams) => - `groupingValue ${params.row.category1}`, + valueGetter: (value, row) => `value ${row.category1}`, + groupingValueGetter: (value, row: { category1: string }) => + `groupingValue ${row.category1}`, }, ]} defaultGroupingExpansionDepth={-1} 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 85% rename from packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts rename to packages/x-data-grid-premium/src/typeOverloads/modules.ts index 91b926ee9d793..c71fd5b99bc36 100644 --- a/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts +++ b/packages/x-data-grid-premium/src/typeOverloads/modules.ts @@ -1,10 +1,10 @@ -import { GridCellParams, GridKeyValue, GridValidRowModel } from '@mui/x-data-grid-pro'; +import { GridValidRowModel } from '@mui/x-data-grid-pro'; import type { GridControlledStateEventLookupPro, GridApiCachesPro, GridEventLookupPro, } from '@mui/x-data-grid-pro/typeOverloads'; -import type { GridGroupingValueGetterParams } from '../models'; +import type { GridGroupingValueGetter, GridPastedValueParser } from '../models'; import type { GridRowGroupingModel, GridAggregationModel, @@ -58,19 +58,14 @@ export interface GridColDefPremium, - ) => GridKeyValue | null | undefined; + groupingValueGetter?: GridGroupingValueGetter; /** * Function that takes the clipboard-pasted value and converts it to a value used internally. - * @param {string} value The pasted value. - * @param {GridCellParams} params The cell params. * @returns {V} The converted value. */ - pastedValueParser?: (value: string, params: GridCellParams) => V | undefined; + pastedValueParser?: GridPastedValueParser; } // eslint-disable-next-line @typescript-eslint/no-unused-vars 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 6e4ffcf65dc7b..2fc393113dece 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.0", + "version": "7.0.0-beta.1", "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.6", - "@mui/utils": "^5.15.6", - "@mui/x-data-grid": "7.0.0-beta.0", - "@mui/x-license-pro": "7.0.0-beta.0", + "@mui/system": "^5.15.7", + "@mui/utils": "^5.15.7", + "@mui/x-data-grid": "7.0.0-beta.1", + "@mui/x-license": "7.0.0-beta.0", "@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 99% rename from packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx rename to packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx index 933153b306c11..b89f14923492f 100644 --- a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx @@ -133,7 +133,7 @@ export const useDataGridProComponent = ( useGridRowPinning(apiRef, props); useGridColumns(apiRef, props); useGridRows(apiRef, props); - useGridParamsApi(apiRef, props); + useGridParamsApi(apiRef); useGridDetailPanel(apiRef, props); useGridColumnSpanning(apiRef); useGridColumnGrouping(apiRef, props); 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 ( { - const expandedRowIds = gridDetailPanelExpandedRowIdsSelector((params.api as GridApiPro).state); - return expandedRowIds.includes(params.id); + valueGetter: (value, row, column, apiRef) => { + const rowId = apiRef.current.getRowId(row); + const expandedRowIds = gridDetailPanelExpandedRowIdsSelector( + (apiRef.current as GridApiPro).state, + ); + return expandedRowIds.includes(rowId); }, renderCell: (params) => , renderHeader: () => null, diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/index.ts b/packages/x-data-grid-pro/src/hooks/features/detailPanel/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/index.ts rename to packages/x-data-grid-pro/src/hooks/features/detailPanel/index.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts rename to packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelCache.ts b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelCache.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelCache.ts rename to packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelCache.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts rename to packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/index.ts b/packages/x-data-grid-pro/src/hooks/features/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/index.ts rename to packages/x-data-grid-pro/src/hooks/features/index.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts b/packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts rename to packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts rename to packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoader.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.tsx rename to packages/x-data-grid-pro/src/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.tsx diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/gridRowPinningInterface.ts b/packages/x-data-grid-pro/src/hooks/features/rowPinning/gridRowPinningInterface.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/gridRowPinningInterface.ts rename to packages/x-data-grid-pro/src/hooks/features/rowPinning/gridRowPinningInterface.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/gridRowPinningSelector.ts b/packages/x-data-grid-pro/src/hooks/features/rowPinning/gridRowPinningSelector.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/gridRowPinningSelector.ts rename to packages/x-data-grid-pro/src/hooks/features/rowPinning/gridRowPinningSelector.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/index.ts b/packages/x-data-grid-pro/src/hooks/features/rowPinning/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/index.ts rename to packages/x-data-grid-pro/src/hooks/features/rowPinning/index.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts b/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts rename to packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinning.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts b/packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts rename to packages/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/gridRowReorderColDef.tsx b/packages/x-data-grid-pro/src/hooks/features/rowReorder/gridRowReorderColDef.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/gridRowReorderColDef.tsx rename to packages/x-data-grid-pro/src/hooks/features/rowReorder/gridRowReorderColDef.tsx diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/index.tsx b/packages/x-data-grid-pro/src/hooks/features/rowReorder/index.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/index.tsx rename to packages/x-data-grid-pro/src/hooks/features/rowReorder/index.tsx diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx rename to packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts b/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts rename to packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorderPreProcessors.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts b/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts similarity index 73% rename from packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts rename to packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts index b7b20847e4557..4fe1addd677f4 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts +++ b/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts @@ -12,10 +12,11 @@ export const GRID_TREE_DATA_GROUPING_COL_DEF: Omit - params.rowNode.type === 'group' || params.rowNode.type === 'leaf' - ? params.rowNode.groupingKey - : undefined, + valueGetter: (value, row, column, apiRef) => { + const rowId = apiRef.current.getRowId(row); + const rowNode = apiRef.current.getRowNode(rowId); + return rowNode?.type === 'group' || rowNode?.type === 'leaf' ? rowNode.groupingKey : undefined; + }, }; export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__'; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts b/packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts rename to packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/index.ts b/packages/x-data-grid-pro/src/hooks/features/treeData/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/treeData/index.ts rename to packages/x-data-grid-pro/src/hooks/features/treeData/index.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx rename to packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeData.tsx diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx b/packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx rename to packages/x-data-grid-pro/src/hooks/features/treeData/useGridTreeDataPreProcessors.tsx diff --git a/packages/grid/x-data-grid-pro/src/hooks/index.ts b/packages/x-data-grid-pro/src/hooks/index.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/index.ts rename to packages/x-data-grid-pro/src/hooks/index.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/utils/useGridApiContext.ts b/packages/x-data-grid-pro/src/hooks/utils/useGridApiContext.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/utils/useGridApiContext.ts rename to packages/x-data-grid-pro/src/hooks/utils/useGridApiContext.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/utils/useGridApiRef.ts b/packages/x-data-grid-pro/src/hooks/utils/useGridApiRef.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/utils/useGridApiRef.ts rename to packages/x-data-grid-pro/src/hooks/utils/useGridApiRef.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/utils/useGridPrivateApiContext.ts b/packages/x-data-grid-pro/src/hooks/utils/useGridPrivateApiContext.ts similarity index 100% rename from packages/grid/x-data-grid-pro/src/hooks/utils/useGridPrivateApiContext.ts rename to packages/x-data-grid-pro/src/hooks/utils/useGridPrivateApiContext.ts diff --git a/packages/grid/x-data-grid-pro/src/hooks/utils/useGridRootProps.ts b/packages/x-data-grid-pro/src/hooks/utils/useGridRootProps.ts similarity index 68% rename from packages/grid/x-data-grid-pro/src/hooks/utils/useGridRootProps.ts rename to packages/x-data-grid-pro/src/hooks/utils/useGridRootProps.ts index e9d7e2c7ce28a..414094e1c0ad3 100644 --- a/packages/grid/x-data-grid-pro/src/hooks/utils/useGridRootProps.ts +++ b/packages/x-data-grid-pro/src/hooks/utils/useGridRootProps.ts @@ -1,4 +1,4 @@ import { useGridRootProps as useCommunityGridRootProps } from '@mui/x-data-grid'; -import { DataGridProProcessedProps } from '../../models/dataGridProProps'; +import type { DataGridProProcessedProps } from '../../models/dataGridProProps'; export const useGridRootProps = useCommunityGridRootProps as () => 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 95% 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 index 23cf358dbb1a5..381641537a0e1 100644 --- a/packages/grid/x-data-grid-pro/src/tests/DataGridPro.spec.tsx +++ b/packages/x-data-grid-pro/src/tests/DataGridPro.spec.tsx @@ -15,7 +15,7 @@ function ColumnPropTest() { { field: 'firstName', // @ts-expect-error - valueGetter: (params) => params.row.lastName, + valueGetter: (value, row) => row.lastName, }, ]} /> @@ -25,7 +25,7 @@ function ColumnPropTest() { columns={[ { field: 'firstName', - valueGetter: (params) => params.row.firstName, + valueGetter: (value, row) => row.firstName, }, ]} /> @@ -36,7 +36,7 @@ function ColumnPropTest() { { field: 'firstName', // @ts-expect-error - valueGetter: (params) => params.row.lastName, + valueGetter: (value, row) => row.lastName, }, ]} /> @@ -46,7 +46,7 @@ function ColumnPropTest() { columns={[ { field: 'firstName', - valueGetter: (params) => params.row.firstName, + valueGetter: (value, row) => row.firstName, }, ]} /> 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 99% 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 index f601a5473bcce..d8f8c1505cd95 100644 --- 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 @@ -7,7 +7,7 @@ import { useGridApiRef, DataGridPro, GridRenderEditCellParams, - GridValueSetterParams, + GridValueSetter, GridPreProcessEditCellProps, GridCellProps, GridCellModes, @@ -107,10 +107,11 @@ describe(' - Cell editing', () => { }); it('should pass to renderEditCell the row with the value updated', async () => { - columnProps.valueSetter = ({ value, row }: GridValueSetterParams) => ({ + const valueSetter: GridValueSetter = (value: string, row) => ({ ...row, currencyPair: value.trim(), }); + columnProps.valueSetter = valueSetter; render(); act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]); @@ -551,7 +552,10 @@ describe(' - Cell editing', () => { }); it('should pass the new value through the value setter before calling processRowUpdate', async () => { - columnProps.valueSetter = spy(({ value, row }) => ({ ...row, _currencyPair: value })); + columnProps.valueSetter = spy((value, row) => ({ + ...row, + _currencyPair: value, + })); const processRowUpdate = spy(() => new Promise(() => {})); render(); act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); @@ -564,10 +568,8 @@ describe(' - Cell editing', () => { currencyPair: 'USDGBP', _currencyPair: 'USD GBP', }); - expect(columnProps.valueSetter.lastCall.args[0]).to.deep.equal({ - value: 'USD GBP', - row: defaultData.rows[0], - }); + expect(columnProps.valueSetter.lastCall.args[0]).to.equal('USD GBP'); + expect(columnProps.valueSetter.lastCall.args[1]).to.deep.equal(defaultData.rows[0]); }); it('should move focus to the cell below when cellToFocusAfter=below', async () => { 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 89% 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 index 06391336b3c80..ea6a2ad592826 100644 --- 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 @@ -79,9 +79,9 @@ describe(' - Column spanning', () => { describe('key navigation', () => { const columns: GridColDef[] = [ - { field: 'brand', colSpan: ({ row }) => (row.brand === 'Nike' ? 2 : 1) }, - { field: 'category', colSpan: ({ row }) => (row.brand === 'Adidas' ? 2 : 1) }, - { field: 'price', colSpan: ({ row }) => (row.brand === 'Puma' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, + { field: 'category', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, + { field: 'price', colSpan: (value, row) => (row.brand === 'Puma' ? 2 : 1) }, { field: 'rating' }, ]; @@ -120,9 +120,9 @@ describe(' - Column spanning', () => { apiRef={apiRef} {...baselineProps} columns={[ - { field: 'brand', colSpan: ({ row }) => (row.brand === 'Nike' ? 2 : 1) }, - { field: 'category', colSpan: ({ row }) => (row.brand === 'Adidas' ? 2 : 1) }, - { field: 'price', colSpan: ({ row }) => (row.brand === 'Puma' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, + { field: 'category', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, + { field: 'price', colSpan: (value, row) => (row.brand === 'Puma' ? 2 : 1) }, { field: 'rating' }, ]} disableVirtualization={isJSDOM} @@ -184,9 +184,9 @@ describe(' - Column spanning', () => { it('should apply `colSpan` correctly on GridApiRef setRows', () => { const columns: GridColDef[] = [ - { field: 'brand', colSpan: ({ row }) => (row.brand === 'Nike' ? 2 : 1) }, - { field: 'category', colSpan: ({ row }) => (row.brand === 'Adidas' ? 2 : 1) }, - { field: 'price', colSpan: ({ row }) => (row.brand === 'Puma' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, + { field: 'category', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, + { field: 'price', colSpan: (value, row) => (row.brand === 'Puma' ? 2 : 1) }, { field: 'rating' }, ]; 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 98% 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 index f596ed6ad2a16..62f2fde968c28 100644 --- 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 @@ -47,8 +47,8 @@ describe(' - Events params', () => { { field: 'age' }, { field: 'firstAge', - valueGetter: (params) => `${params.row.first}_${params.row.age}`, - valueFormatter: (params) => `${params.value} yrs`, + valueGetter: (value, row) => `${row.first}_${row.age}`, + valueFormatter: (value) => `${value} yrs`, }, ], }; 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 99% 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 index 22ecc4d010f9b..a9868210ced84 100644 --- 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 @@ -112,7 +112,7 @@ describe(' - Export', () => { { field: 'brand', headerName: 'Brand', - valueFormatter: (params) => (params.value === 'Nike' ? 'Jordan' : params.value), + valueFormatter: (value) => (value === 'Nike' ? 'Jordan' : value), }, ]} rows={[ 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 98% 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 index e6256208a2b6c..6904e424877cf 100644 --- 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 @@ -7,7 +7,7 @@ import { useGridApiRef, DataGridPro, GridRenderEditCellParams, - GridValueSetterParams, + GridValueSetter, GridPreProcessEditCellProps, GridRowModes, } from '@mui/x-data-grid-pro'; @@ -157,10 +157,11 @@ describe(' - Row editing', () => { }); it('should pass to renderEditCell the row with the values updated', async () => { - column1Props.valueSetter = ({ value, row }: GridValueSetterParams) => ({ + const valueSetter: GridValueSetter = (value, row) => ({ ...row, currencyPair: value.trim(), }); + column1Props.valueSetter = valueSetter; render(); act(() => apiRef.current.startRowEditMode({ id: 0 })); expect(renderEditCell1.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]); @@ -610,8 +611,14 @@ describe(' - Row editing', () => { }); it('should pass the new value through all value setters before calling processRowUpdate', async () => { - column1Props.valueSetter = spy(({ value, row }) => ({ ...row, _currencyPair: value })); - column2Props.valueSetter = spy(({ value, row }) => ({ ...row, _price1M: value })); + column1Props.valueSetter = spy((value, row) => ({ + ...row, + _currencyPair: value, + })); + column2Props.valueSetter = spy((value, row) => ({ + ...row, + _price1M: value, + })); const processRowUpdate = spy((newRow) => newRow); render(); act(() => apiRef.current.startRowEditMode({ id: 0 })); @@ -627,13 +634,15 @@ describe(' - Row editing', () => { price1M: 1, _price1M: 1, }); - expect(column1Props.valueSetter.lastCall.args[0]).to.deep.equal({ - value: 'USD GBP', - row: defaultData.rows[0], - }); - expect(column2Props.valueSetter.lastCall.args[0]).to.deep.equal({ - value: 1, - row: { ...defaultData.rows[0], currencyPair: 'USDGBP', _currencyPair: 'USD GBP' }, // Ensure that the row contains the values from the previous setter + expect(column1Props.valueSetter.lastCall.args[0]).to.equal('USD GBP'); + expect(column1Props.valueSetter.lastCall.args[1]).to.deep.equal(defaultData.rows[0]); + + expect(column2Props.valueSetter.lastCall.args[0]).to.equal(1); + expect(column2Props.valueSetter.lastCall.args[1]).to.deep.equal({ + // Ensure that the row contains the values from the previous setter); + ...defaultData.rows[0], + currencyPair: 'USDGBP', + _currencyPair: 'USD GBP', }); }); 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 100% 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 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 99% 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 index f21003436f85e..69068db8f6f25 100644 --- 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 @@ -37,7 +37,7 @@ const columns: GridColDef[] = [ { field: 'idBis', type: 'number', - valueGetter: (params) => params.row.id, + valueGetter: (value, row) => row.id, }, { field: 'category', 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 99% 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 index 0e3fd7e32d15f..259c2f7a44092 100644 --- 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 @@ -341,7 +341,7 @@ describe(' - Tree data', () => { it('should support valueFormatter', () => { render( `> ${value}` }} + groupingColDef={{ valueFormatter: (value) => `> ${value}` }} defaultGroupingExpansionDepth={-1} />, ); 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/tsconfig.json b/packages/x-data-grid-pro/tsconfig.json similarity index 68% rename from packages/grid/x-data-grid/tsconfig.json rename to packages/x-data-grid-pro/tsconfig.json index 79824ab245468..6a8e1ed5b14fc 100644 --- a/packages/grid/x-data-grid/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 ba2eeb5264344..032be292419d3 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.0", + "version": "7.0.0-beta.1", "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.6", - "@mui/utils": "^5.15.6", + "@mui/system": "^5.15.7", + "@mui/utils": "^5.15.7", "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 99% rename from packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx rename to packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx index 411f9d82b41c0..7de0ea67c93c6 100644 --- a/packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx +++ b/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx @@ -88,7 +88,7 @@ export const useDataGridComponent = ( useGridRowSelection(apiRef, props); useGridColumns(apiRef, props); useGridRows(apiRef, props); - useGridParamsApi(apiRef, props); + useGridParamsApi(apiRef); useGridColumnSpanning(apiRef); useGridColumnGrouping(apiRef, props); useGridEditing(apiRef, props); 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 79% rename from packages/grid/x-data-grid/src/colDef/gridBooleanColDef.tsx rename to packages/x-data-grid/src/colDef/gridBooleanColDef.tsx index 7c2abdc9416e8..a032fc6451d9e 100644 --- a/packages/grid/x-data-grid/src/colDef/gridBooleanColDef.tsx +++ b/packages/x-data-grid/src/colDef/gridBooleanColDef.tsx @@ -1,16 +1,15 @@ import { GRID_STRING_COL_DEF } from './gridStringColDef'; -import { GridColTypeDef } from '../models/colDef/gridColDef'; +import { GridColTypeDef, GridValueFormatter } from '../models/colDef/gridColDef'; import { renderBooleanCell } from '../components/cell/GridBooleanCell'; import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell'; import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils'; import { getGridBooleanOperators } from './gridBooleanOperators'; -import { GridValueFormatterParams } from '../models/params/gridCellParams'; -function gridBooleanFormatter({ value, api }: GridValueFormatterParams) { +const gridBooleanFormatter: GridValueFormatter = (value, row, column, apiRef) => { return value - ? api.getLocaleText('booleanCellTrueLabel') - : api.getLocaleText('booleanCellFalseLabel'); -} + ? apiRef.current.getLocaleText('booleanCellTrueLabel') + : apiRef.current.getLocaleText('booleanCellFalseLabel'); +}; const stringToBoolean = (value: string) => { switch (value.toLowerCase().trim()) { 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 82% rename from packages/grid/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx rename to packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx index 5b6d1d78150fd..69ab4c9a5e344 100644 --- a/packages/grid/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx +++ b/packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx @@ -21,9 +21,10 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF: GridColDef = { disableReorder: true, disableExport: true, getApplyQuickFilterFn: undefined, - valueGetter: (params) => { - const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId); - return selectionLookup[params.id] !== undefined; + valueGetter: (value, row, column, apiRef) => { + const selectionLookup = selectedIdsLookupSelector(apiRef); + const rowId = apiRef.current.getRowId(row); + return selectionLookup[rowId] !== undefined; }, renderHeader: (params) => , renderCell: (params) => , diff --git a/packages/grid/x-data-grid/src/colDef/gridDateColDef.ts b/packages/x-data-grid/src/colDef/gridDateColDef.ts similarity index 73% rename from packages/grid/x-data-grid/src/colDef/gridDateColDef.ts rename to packages/x-data-grid/src/colDef/gridDateColDef.ts index 46888646bec84..314c31869f6f3 100644 --- a/packages/grid/x-data-grid/src/colDef/gridDateColDef.ts +++ b/packages/x-data-grid/src/colDef/gridDateColDef.ts @@ -1,9 +1,8 @@ import { gridDateComparator } from '../hooks/features/sorting/gridSortingUtils'; import { getGridDateOperators } from './gridDateOperators'; import { GRID_STRING_COL_DEF } from './gridStringColDef'; -import { GridColTypeDef } from '../models/colDef/gridColDef'; +import { GridColTypeDef, GridValueFormatter } from '../models/colDef/gridColDef'; import { renderEditDateCell } from '../components/cell/GridEditDateCell'; -import { GridValueFormatterParams } from '../models/params/gridCellParams'; function throwIfNotDateObject({ value, @@ -27,21 +26,28 @@ function throwIfNotDateObject({ } } -export function gridDateFormatter({ value, field, id }: GridValueFormatterParams) { +export const gridDateFormatter: GridValueFormatter = (value: Date, row, column, apiRef): string => { if (!value) { return ''; } - throwIfNotDateObject({ value, columnType: 'date', rowId: id, field }); + const rowId = apiRef.current.getRowId(row); + throwIfNotDateObject({ value, columnType: 'date', rowId, field: column.field }); return value.toLocaleDateString(); -} +}; -export function gridDateTimeFormatter({ value, field, id }: GridValueFormatterParams) { +export const gridDateTimeFormatter: GridValueFormatter = ( + value: Date, + row, + column, + apiRef, +): string => { if (!value) { return ''; } - throwIfNotDateObject({ value, columnType: 'dateTime', rowId: id, field }); + const rowId = apiRef.current.getRowId(row); + throwIfNotDateObject({ value, columnType: 'dateTime', rowId, field: column.field }); return value.toLocaleString(); -} +}; export const GRID_DATE_COL_DEF: GridColTypeDef = { ...GRID_STRING_COL_DEF, 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 88% rename from packages/grid/x-data-grid/src/colDef/gridNumericColDef.ts rename to packages/x-data-grid/src/colDef/gridNumericColDef.ts index cca2a740ff04a..1551315d19571 100644 --- a/packages/grid/x-data-grid/src/colDef/gridNumericColDef.ts +++ b/packages/x-data-grid/src/colDef/gridNumericColDef.ts @@ -11,7 +11,7 @@ export const GRID_NUMERIC_COL_DEF: GridColTypeDef (value === '' ? null : Number(value)), - valueFormatter: ({ value }) => (isNumber(value) ? value.toLocaleString() : value || ''), + valueFormatter: (value?: number) => (isNumber(value) ? value.toLocaleString() : value || ''), filterOperators: getGridNumericOperators(), getApplyQuickFilterFn: getGridNumericQuickFilterFn, }; 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 86% rename from packages/grid/x-data-grid/src/colDef/gridSingleSelectColDef.tsx rename to packages/x-data-grid/src/colDef/gridSingleSelectColDef.tsx index 44f13cc779524..859e4f0a3525a 100644 --- a/packages/grid/x-data-grid/src/colDef/gridSingleSelectColDef.tsx +++ b/packages/x-data-grid/src/colDef/gridSingleSelectColDef.tsx @@ -25,15 +25,15 @@ export const GRID_SINGLE_SELECT_COL_DEF: Omit = type: 'singleSelect', getOptionLabel: defaultGetOptionLabel, getOptionValue: defaultGetOptionValue, - valueFormatter(params) { - const { id, field, value, api } = params; - const colDef = params.api.getColumn(field); + valueFormatter(value, row, colDef, apiRef) { + // const { id, field, value, api } = params; + const rowId = apiRef.current.getRowId(row); if (!isSingleSelectColDef(colDef)) { return ''; } - const valueOptions = getValueOptions(colDef, { id, row: id ? api.getRow(id) : null }); + const valueOptions = getValueOptions(colDef, { id: rowId, row }); if (value == null) { return ''; } @@ -52,8 +52,8 @@ export const GRID_SINGLE_SELECT_COL_DEF: Omit = renderEditCell: renderEditSingleSelectCell, filterOperators: getGridSingleSelectOperators(), // @ts-ignore - pastedValueParser: (value, params) => { - const colDef = params.colDef as GridSingleSelectColDef; + pastedValueParser: (value, row, column) => { + const colDef = column as GridSingleSelectColDef; const valueOptions = getValueOptions(colDef) || []; const getOptionValue = (colDef as GridSingleSelectColDef).getOptionValue!; const valueOption = valueOptions.find((option) => { 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 97% rename from packages/grid/x-data-grid/src/components/GridPagination.tsx rename to packages/x-data-grid/src/components/GridPagination.tsx index 92c2717b2eae8..f7a45091220cb 100644 --- a/packages/grid/x-data-grid/src/components/GridPagination.tsx +++ b/packages/x-data-grid/src/components/GridPagination.tsx @@ -26,7 +26,7 @@ const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({ }, })) as typeof TablePagination; -export const GridPagination = React.forwardRef>( +export const GridPagination = React.forwardRef>( function GridPagination(props, ref) { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); 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..457218861b733 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/x-data-grid/src/components/GridRow.tsx @@ -389,7 +389,7 @@ const GridRow = React.forwardRef(function GridRow( width={width} contentWidth={contentWidth} field={column.field} - align={column.align} + align={column.align ?? 'left'} /> ); } 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 100% rename from packages/grid/x-data-grid/src/components/GridScrollbarFillerCell.tsx rename to packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx 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 99% rename from packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx rename to packages/x-data-grid/src/components/cell/GridEditInputCell.tsx index 4dfad75a898f9..104f90d489cac 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx +++ b/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx @@ -94,7 +94,7 @@ const GridEditInputCell = 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 100% rename from packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts rename to packages/x-data-grid/src/components/containers/GridRootStyles.ts 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 100% rename from packages/grid/x-data-grid/src/constants/gridClasses.ts rename to packages/x-data-grid/src/constants/gridClasses.ts 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 96% 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 index b82e985f90aea..94941c8e405ec 100644 --- a/packages/grid/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts +++ b/packages/x-data-grid/src/hooks/features/columns/useGridColumnSpanning.ts @@ -80,10 +80,12 @@ function calculateCellColSpan(params: { const columnsLength = columns.length; const column = columns[columnIndex]; + const row = apiRef.current.getRow(rowId); + const value = apiRef.current.getRowValue(row, column); const colSpan = typeof column.colSpan === 'function' - ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) + ? column.colSpan(value, row, column, apiRef) : column.colSpan; if (!colSpan || colSpan === 1) { 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 98% 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 index bad1f0b5c0035..25c7cfdb5775f 100644 --- a/packages/grid/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts @@ -436,7 +436,7 @@ export const useGridCellEditing = ( let parsedValue = value; if (column.valueParser && !skipValueParser) { - parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field)); + parsedValue = column.valueParser(value, row, column, apiRef); } let editingState = gridEditRowsStateSelector(apiRef.current.state); @@ -490,7 +490,9 @@ export const useGridCellEditing = ( } const { value } = editingState[id][field]; - return column.valueSetter ? column.valueSetter({ value, row }) : { ...row, [field]: value }; + return column.valueSetter + ? column.valueSetter(value, row, column, apiRef) + : { ...row, [field]: value }; }, [apiRef], ); 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 99% 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 index 2c47685f1a067..1998dab6c7c53 100644 --- a/packages/grid/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts +++ b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts @@ -545,7 +545,7 @@ export const useGridRowEditing = ( let parsedValue = value; if (column.valueParser && !skipValueParser) { - parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field)); + parsedValue = column.valueParser(value, row, column, apiRef); } let editingState = gridEditRowsStateSelector(apiRef.current.state); @@ -668,10 +668,7 @@ export const useGridRowEditing = ( Object.entries(editingState[id]).forEach(([field, fieldProps]) => { const column = apiRef.current.getColumn(field); if (column.valueSetter) { - rowUpdate = column.valueSetter({ - value: fieldProps.value, - row: rowUpdate, - }); + rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef); } else { rowUpdate[field] = fieldProps.value; } 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 99% 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 index a62fb232a04bb..20d021178b453 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts +++ b/packages/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts @@ -172,8 +172,8 @@ const getFilterCallbackFromItem = ( if (column.valueParser) { const parser = column.valueParser; parsedValue = Array.isArray(filterItem.value) - ? filterItem.value?.map((x) => parser(x)) - : parser(filterItem.value); + ? filterItem.value?.map((x) => parser(x, undefined, column, apiRef)) + : parser(filterItem.value, undefined, column, apiRef); } else { parsedValue = filterItem.value; } 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 70% 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 index 9130fb075c6e6..ae7b518d64e8e 100644 --- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts @@ -1,16 +1,13 @@ import * as React from 'react'; import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; import { GridParamsApi } from '../../../models/api/gridParamsApi'; -import { GridRowId, GridTreeNodeWithRender } from '../../../models/gridRows'; -import { GridCellParams, GridValueGetterParams } from '../../../models/params/gridCellParams'; +import { GridCellParams } from '../../../models/params/gridCellParams'; import { GridRowParams } from '../../../models/params/gridRowParams'; -import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement, } from '../../../utils/domUtils'; -import { GRID_ID_AUTOGENERATED } from './gridRowsUtils'; import { useGridApiMethod } from '../../utils/useGridApiMethod'; import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector'; @@ -24,12 +21,7 @@ export class MissingRowIdError extends Error {} * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi */ -export function useGridParamsApi( - apiRef: React.MutableRefObject, - props: Pick, -) { - const { getRowId } = props; - +export function useGridParamsApi(apiRef: React.MutableRefObject) { const getColumnHeaderParams = React.useCallback( (field) => ({ field, @@ -56,36 +48,6 @@ export function useGridParamsApi( [apiRef], ); - const getBaseCellParams = React.useCallback( - (id: GridRowId, field: string) => { - const row = apiRef.current.getRow(id); - const rowNode = apiRef.current.getRowNode(id); - - if (!row || !rowNode) { - throw new MissingRowIdError(`No row with id #${id} found`); - } - - const cellFocus = gridFocusCellSelector(apiRef); - const cellTabIndex = gridTabIndexCellSelector(apiRef); - - const params: GridValueGetterParams = { - id, - field, - row, - rowNode, - value: row[field], - colDef: apiRef.current.getColumn(field), - cellMode: apiRef.current.getCellMode(id, field), - api: apiRef.current, - hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id, - tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1, - }; - - return params; - }, - [apiRef], - ); - const getCellParams = React.useCallback( (id, field) => { const colDef = apiRef.current.getColumn(field); @@ -114,12 +76,7 @@ export function useGridParamsApi( isEditable: false, }; if (colDef && colDef.valueFormatter) { - params.formattedValue = colDef.valueFormatter({ - id, - field: params.field, - value: params.value, - api: apiRef.current, - }); + params.formattedValue = colDef.valueFormatter(value as never, row, colDef, apiRef); } params.isEditable = colDef && apiRef.current.isCellEditable(params); @@ -142,24 +99,28 @@ export function useGridParamsApi( return rowModel[field]; } - return colDef.valueGetter(getBaseCellParams(id, field)); + const row = apiRef.current.getRow(id); + if (!row) { + throw new MissingRowIdError(`No row with id #${id} found`); + } + const value = row[colDef.field]; + return colDef.valueGetter(value as never, row, colDef, apiRef); }, - [apiRef, getBaseCellParams], + [apiRef], ); const getRowValue = React.useCallback( (row, colDef) => { - const id = - GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : getRowId?.(row) ?? row.id; const field = colDef.field; if (!colDef || !colDef.valueGetter) { return row[field]; } - return colDef.valueGetter(getBaseCellParams(id, field)); + const value = row[colDef.field]; + return colDef.valueGetter(value as never, row, colDef, apiRef); }, - [getBaseCellParams, getRowId], + [apiRef], ); const getRowFormattedValue = React.useCallback( @@ -170,17 +131,9 @@ export function useGridParamsApi( return value; } - const id = (getRowId ? getRowId(row) : row.id) ?? row[GRID_ID_AUTOGENERATED]; - const field = colDef.field; - - return colDef.valueFormatter({ - id, - field, - value, - api: apiRef.current, - }); + return colDef.valueFormatter(value as never, row, colDef, apiRef); }, - [apiRef, getRowId, getRowValue], + [apiRef, getRowValue], ); const getColumnHeaderElement = React.useCallback( 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 100% 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 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 100% 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 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 100% rename from packages/grid/x-data-grid/src/internals/utils/propValidation.ts rename to packages/x-data-grid/src/internals/utils/propValidation.ts 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 88% rename from packages/grid/x-data-grid/src/models/colDef/gridColDef.ts rename to packages/x-data-grid/src/models/colDef/gridColDef.ts index f925f7d4714af..2f221d6d347fb 100644 --- a/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/x-data-grid/src/models/colDef/gridColDef.ts @@ -3,12 +3,8 @@ import { GridCellClassNamePropType } from '../gridCellClass'; import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass'; import type { GridFilterOperator } from '../gridFilterOperator'; import { - GridCellParams, GridRenderCellParams, GridRenderEditCellParams, - GridValueFormatterParams, - GridValueGetterParams, - GridValueSetterParams, GridPreProcessEditCellProps, } from '../params/gridCellParams'; import { GridColumnHeaderParams } from '../params/gridColumnHeaderParams'; @@ -45,6 +41,51 @@ export type GetApplyQuickFilterFn, ) => null | GridApplyQuickFilter; +export type GridValueGetter< + R extends GridValidRowModel = GridValidRowModel, + V = any, + F = V, + TValue = never, +> = ( + value: TValue, + row: R, + column: GridColDef, + apiRef: React.MutableRefObject, +) => V; + +export type GridValueFormatter< + R extends GridValidRowModel = GridValidRowModel, + V = any, + F = V, + TValue = never, +> = ( + value: TValue, + row: R, + column: GridColDef, + apiRef: React.MutableRefObject, +) => F; + +export type GridValueSetter = ( + value: V, + row: R, + column: GridColDef, + apiRef: React.MutableRefObject, +) => R; + +export type GridValueParser = ( + value: F | undefined, + row: R | undefined, + column: GridColDef, + apiRef: React.MutableRefObject, +) => V; + +export type GridColSpanFn = ( + value: V, + row: R, + column: GridColDef, + apiRef: React.MutableRefObject, +) => number | undefined; + /** * Column Definition base interface. */ @@ -134,34 +175,23 @@ export interface GridBaseColDef} params Object containing parameters for the getter. - * @returns {V} The cell value. */ - valueGetter?: (params: GridValueGetterParams) => V; + valueGetter?: GridValueGetter; /** * Function that allows to customize how the entered value is stored in the row. * It only works with cell/row editing. - * @template R, V - * @param {GridValueSetterParams} params Object containing parameters for the setter. * @returns {R} The row with the updated field. */ - valueSetter?: (params: GridValueSetterParams) => R; + valueSetter?: GridValueSetter; /** * Function that allows to apply a formatter before rendering its value. - * @template V, F - * @param {GridValueFormatterParams} params Object containing parameters for the formatter. - * @returns {F} The formatted value. */ - valueFormatter?: (params: GridValueFormatterParams) => F; + valueFormatter?: GridValueFormatter; /** * Function that takes the user-entered value and converts it to a value used internally. - * @template R, V, F - * @param {F | undefined} value The user-entered value. - * @param {GridCellParams} params The params when called before saving the value. * @returns {V} The converted value to use internally. */ - valueParser?: (value: F | undefined, params?: GridCellParams) => V; + valueParser?: GridValueParser; /** * Class name that will be added in cells for that column. */ @@ -245,7 +275,7 @@ export interface GridBaseColDef) => number | undefined); + colSpan?: number | GridColSpanFn; } /** 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 76% rename from packages/grid/x-data-grid/src/models/colDef/index.ts rename to packages/x-data-grid/src/models/colDef/index.ts index da8753ee10322..3b0ffa6535524 100644 --- a/packages/grid/x-data-grid/src/models/colDef/index.ts +++ b/packages/x-data-grid/src/models/colDef/index.ts @@ -9,6 +9,11 @@ export type { GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, + GridValueGetter, + GridValueFormatter, + GridValueSetter, + GridValueParser, + GridColSpanFn, } from './gridColDef'; // Other types 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 82% rename from packages/grid/x-data-grid/src/models/params/gridCellParams.ts rename to packages/x-data-grid/src/models/params/gridCellParams.ts index 56d393921cb53..f0b18838440e1 100644 --- a/packages/grid/x-data-grid/src/models/params/gridCellParams.ts +++ b/packages/x-data-grid/src/models/params/gridCellParams.ts @@ -108,38 +108,6 @@ export interface GridRenderEditCellParams< api: GridApiCommunity; } -/** - * Parameters passed to `colDef.valueGetter`. - */ -export interface GridValueGetterParams< - R extends GridValidRowModel = any, - V = any, - N extends GridTreeNodeWithRender = GridTreeNodeWithRender, -> extends Omit, 'formattedValue' | 'isEditable'> { - /** - * GridApi that let you manipulate the grid. - */ - api: GridApiCommunity; - /** - * The default value for the cell that the `valueGetter` is overriding. - */ - value: GridCellParams['value']; -} - -/** - * Object passed as parameter in the column [[GridColDef]] value setter callback. - */ -export interface GridValueSetterParams { - /** - * The new cell value. - */ - value: V; - /** - * The row that is being edited. - */ - row: R; -} - /** * Object passed as parameter in the column [[GridColDef]] value formatter callback. */ 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..03b56f5f67792 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; } 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 91% rename from packages/grid/x-data-grid/src/tests/DataGrid.spec.tsx rename to packages/x-data-grid/src/tests/DataGrid.spec.tsx index 04037c69002f7..c82da0c7f74e6 100644 --- a/packages/grid/x-data-grid/src/tests/DataGrid.spec.tsx +++ b/packages/x-data-grid/src/tests/DataGrid.spec.tsx @@ -79,12 +79,12 @@ function ColumnPropTest() { { field: 'firstName', // @ts-expect-error - valueGetter: (params) => params.row.lastName, + valueGetter: (value, row) => row.lastName, // @ts-expect-error - valueParser: (value, params) => params!.row.lastName, - valueSetter: (params) => { + valueParser: (value, row) => row!.lastName, + valueSetter: (value, row) => { // @ts-expect-error - const lastName = params.row.lastName; + const lastName = row.lastName; return {} as any; }, // @ts-expect-error @@ -98,10 +98,10 @@ function ColumnPropTest() { columns={[ { field: 'firstName', - valueGetter: (params) => params.row.firstName, - valueParser: (value, params) => params!.row.firstName, - valueSetter: (params) => { - const firstName = params.row.firstName; + valueGetter: (value, row) => row.firstName, + valueParser: (value, row) => row!.firstName, + valueSetter: (value, row) => { + const firstName = row.firstName; return {} as any; }, renderCell: (params) => params.row.firstName, @@ -115,12 +115,12 @@ function ColumnPropTest() { { field: 'firstName', // @ts-expect-error - valueGetter: (params) => params.row.lastName, + valueGetter: (value, row) => row.lastName, // @ts-expect-error - valueParser: (value, params) => params!.row.lastName, - valueSetter: (params) => { + valueParser: (value, row) => row!.lastName, + valueSetter: (value, row) => { // @ts-expect-error - const lastName = params.row.lastName; + const lastName = row.lastName; return {} as any; }, // @ts-expect-error @@ -134,10 +134,10 @@ function ColumnPropTest() { columns={[ { field: 'firstName', - valueGetter: (params) => params.row.firstName, - valueParser: (value, params) => params!.row.firstName, - valueSetter: (params) => { - const firstName = params.row.firstName; + valueGetter: (value, row) => row.firstName, + valueParser: (value, row) => row!.firstName, + valueSetter: (value, row) => { + const firstName = row.firstName; return {} as any; }, renderCell: (params) => params.row.firstName, 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 93% 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 index b34cba0ec831b..263db67e04b85 100644 --- a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { createRenderer, fireEvent, userEvent } from '@mui-internal/test-utils'; import { expect } from 'chai'; -import { DataGrid } from '@mui/x-data-grid'; +import { DataGrid, GridValueFormatter } from '@mui/x-data-grid'; import { getCell } from 'test/utils/helperFn'; import { getBasicGridData } from '@mui/x-data-grid-generator'; @@ -145,7 +145,9 @@ describe(' - Cells', () => { }); it('should call the valueFormatter with the correct params', () => { - const valueFormatter = spy(({ value }) => (value ? 'Yes' : 'No')); + const valueFormatter = spy>((value) => + value ? 'Yes' : 'No', + ); render(
- Cells', () => {
, ); expect(getCell(0, 0)).to.have.text('Yes'); - expect(valueFormatter.lastCall.args[0]).to.have.keys('id', 'field', 'value', 'api'); - expect(valueFormatter.lastCall.args[0].id).to.equal(0); - expect(valueFormatter.lastCall.args[0].field).to.equal('isActive'); - expect(valueFormatter.lastCall.args[0].value).to.equal(true); + // expect(valueFormatter.lastCall.args[0]).to.have.keys('id', 'field', 'value', 'api'); + expect(valueFormatter.lastCall.args[0]).to.equal(true); + expect(valueFormatter.lastCall.args[1]).to.deep.equal({ id: 0, isActive: true }); + expect(valueFormatter.lastCall.args[2].field).to.equal('isActive'); }); it('should throw when focusing cell without updating the state', () => { 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 94% 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 index 36165bbcff92a..57f591f6f573b 100644 --- a/packages/grid/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx @@ -62,9 +62,9 @@ describe(' - Column spanning', () => { (row.brand === 'Nike' ? 2 : 1) }, - { field: 'category', colSpan: ({ row }) => (row.brand === 'Adidas' ? 2 : 1) }, - { field: 'price', colSpan: ({ row }) => (row.brand === 'Puma' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, + { field: 'category', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, + { field: 'price', colSpan: (value, row) => (row.brand === 'Puma' ? 2 : 1) }, { field: 'rating' }, ]} disableVirtualization={isJSDOM} @@ -112,9 +112,9 @@ describe(' - Column spanning', () => { describe('key navigation', () => { const columns: GridColDef[] = [ - { field: 'brand', colSpan: ({ row }) => (row.brand === 'Nike' ? 2 : 1) }, - { field: 'category', colSpan: ({ row }) => (row.brand === 'Adidas' ? 2 : 1) }, - { field: 'price', colSpan: ({ row }) => (row.brand === 'Puma' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, + { field: 'category', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, + { field: 'price', colSpan: (value, row) => (row.brand === 'Puma' ? 2 : 1) }, { field: 'rating' }, ]; @@ -307,7 +307,7 @@ describe(' - Column spanning', () => {
(row.brand === 'Adidas' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, { field: 'category' }, { field: 'price' }, ]} @@ -370,7 +370,7 @@ describe(' - Column spanning', () => { (row.brand === 'Nike' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, { field: 'category' }, { field: 'price' }, { field: 'rating' }, @@ -492,9 +492,9 @@ describe(' - Column spanning', () => { (row.brand === 'Nike' ? 2 : 1) }, - { field: 'category', colSpan: ({ row }) => (row.brand === 'Adidas' ? 2 : 1) }, - { field: 'price', colSpan: ({ row }) => (row.brand === 'Puma' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, + { field: 'category', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, + { field: 'price', colSpan: (value, row) => (row.brand === 'Puma' ? 2 : 1) }, { field: 'rating' }, ]} rows={[ @@ -571,9 +571,9 @@ describe(' - Column spanning', () => { (row.brand === 'Nike' ? 2 : 1) }, - { field: 'category', colSpan: ({ row }) => (row.brand === 'Adidas' ? 2 : 1) }, - { field: 'price', colSpan: ({ row }) => (row.brand === 'Puma' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, + { field: 'category', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, + { field: 'price', colSpan: (value, row) => (row.brand === 'Puma' ? 2 : 1) }, { field: 'rating' }, ]} /> @@ -667,9 +667,9 @@ describe(' - Column spanning', () => { ]; const columns: GridColDef[] = [ - { field: 'brand', colSpan: ({ row }) => (row.brand === 'Nike' ? 2 : 1) }, - { field: 'category', colSpan: ({ row }) => (row.brand === 'Adidas' ? 2 : 1) }, - { field: 'price', colSpan: ({ row }) => (row.brand === 'Puma' ? 2 : 1) }, + { field: 'brand', colSpan: (value, row) => (row.brand === 'Nike' ? 2 : 1) }, + { field: 'category', colSpan: (value, row) => (row.brand === 'Adidas' ? 2 : 1) }, + { field: 'price', colSpan: (value, row) => (row.brand === 'Puma' ? 2 : 1) }, { field: 'rating' }, ]; @@ -732,7 +732,7 @@ describe(' - Column spanning', () => {
(value === '1-0' ? 3 : 1) }, + { field: 'col0', width: 100, colSpan: (value) => (value === '1-0' ? 3 : 1) }, { field: 'col1', width: 100 }, { field: 'col2', width: 100 }, { field: 'col3', width: 100 }, @@ -787,7 +787,7 @@ describe(' - Column spanning', () => {
(value === '1-0' ? 3 : 1) }, + { field: 'col0', width: 100, colSpan: (value) => (value === '1-0' ? 3 : 1) }, { field: 'col1', width: 100 }, { field: 'col2', width: 100 }, { field: 'col3', width: 100 }, @@ -855,7 +855,7 @@ describe(' - Column spanning', () => { pageSizeOptions={[3]} initialState={{ pagination: { paginationModel: { pageSize: 3 } } }} columns={[ - { field: 'col0', width: 100, colSpan: ({ value }) => (value === '4-0' ? 3 : 1) }, + { field: 'col0', width: 100, colSpan: (value) => (value === '4-0' ? 3 : 1) }, { field: 'col1', width: 100 }, { field: 'col2', width: 100 }, { field: 'col3', width: 100 }, 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 94% 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 index 44db4a17cc263..20726bc89195c 100644 --- a/packages/grid/x-data-grid/src/tests/columns.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/columns.DataGrid.test.tsx @@ -75,7 +75,7 @@ describe(' - Columns', () => { it('should not persist valueFormatter on column type change', () => { const { setProps } = render( `$${value}` }]} + columns={[{ field: 'price', type: 'number', valueFormatter: (value) => `$${value}` }]} rows={[{ id: 0, price: 1 }]} />, ); @@ -93,8 +93,8 @@ describe(' - Columns', () => { field: 'id', type: 'string', width: 200, - valueFormatter: (params) => { - return `formatted: ${params.value}`; + valueFormatter: (value) => { + return `formatted: ${value}`; }, }, { field: 'idBis' }, @@ -110,8 +110,8 @@ describe(' - Columns', () => { field: 'id', type: 'number', width: 200, - valueFormatter: (params) => { - return `formatted: ${params.value}`; + valueFormatter: (value) => { + return `formatted: ${value}`; }, }, { field: 'idBis' }, 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 58% rename from packages/grid/x-data-grid/src/tests/columns.spec.tsx rename to packages/x-data-grid/src/tests/columns.spec.tsx index ac5a5ddc14235..63e214fa6022d 100644 --- a/packages/grid/x-data-grid/src/tests/columns.spec.tsx +++ b/packages/x-data-grid/src/tests/columns.spec.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { DataGrid, GridRenderCellParams } from '@mui/x-data-grid'; +import type { Expect, Equal } from 'test/utils/typeUtils'; import { GridCellParams } from '../models/params/gridCellParams'; import { GridColDef, GridRowParams } from '../models'; @@ -156,3 +157,132 @@ const constEmptyRows = [] as const; function ConstProps() { return ; } + +function ValueGetter() { + const oldSignatureValueGetter: GridColDef[] = [ + { + field: 'brand', + valueGetter: (params) => { + type Test = Expect>; + return ''; + }, + }, + { + field: 'brand', + valueGetter: ({ value, row }) => { + type Tests = [Expect>, Expect>]; + return ''; + }, + }, + ]; + + const currentSignatureValueGetter: GridColDef[] = [ + { + field: 'brand', + valueGetter: (value) => { + type Test = Expect>; + return value; + }, + }, + { + field: 'brand', + valueGetter: (value: number) => { + type Test = Expect>; + return value; + }, + }, + { + field: 'brand', + valueGetter: (value: 'foo' | 'bar') => { + type Test = Expect>; + return value; + }, + }, + ]; +} + +function ValueFormatter() { + const oldSignatureValueFormatter: GridColDef[] = [ + { + field: 'brand', + valueFormatter: (params) => { + type Test = Expect>; + return ''; + }, + }, + { + field: 'brand', + valueFormatter: ({ value, row }) => { + type Tests = [Expect>, Expect>]; + return ''; + }, + }, + ]; + + const currentSignatureValueFormatter: GridColDef[] = [ + { + field: 'brand', + valueFormatter: (value) => { + type Test = Expect>; + return value; + }, + }, + { + field: 'brand', + valueFormatter: (value: number) => { + type Test = Expect>; + return value; + }, + }, + { + field: 'brand', + valueFormatter: (value: 'foo' | 'bar') => { + type Test = Expect>; + return value; + }, + }, + ]; +} + +function GroupingValueGetter() { + const oldSignatureGroupingValueGetter: GridColDef[] = [ + { + field: 'brand', + groupingValueGetter: (params) => { + type Test = Expect>; + return ''; + }, + }, + { + field: 'brand', + groupingValueGetter: ({ value, row }) => { + type Tests = [Expect>, Expect>]; + return ''; + }, + }, + ]; + + const currentSignatureGroupingValueGetter: GridColDef[] = [ + { + field: 'brand', + groupingValueGetter: (value) => { + type Test = Expect>; + return value; + }, + }, + { + field: 'brand', + groupingValueGetter: (value: number) => { + type Test = Expect>; + return value; + }, + }, + { + field: 'brand', + groupingValueGetter: (value: 'foo' | 'bar') => { + type Test = Expect>; + return value; + }, + }, + ]; +} 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 ef87d1fa8ba4a..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'; @@ -525,7 +526,7 @@ describe(' - Filter', () => { field: 'year', type: 'number', // Avoid the localization of the number to simplify the checks - valueFormatter: (params) => params.value, + valueFormatter: (value) => value, }, ]} />, @@ -650,7 +651,7 @@ describe(' - Filter', () => { field: 'date', type: 'date', // Avoid the localization of the date to simplify the checks - valueFormatter: ({ value }) => { + valueFormatter: (value?: Date | string) => { if (value === null) { return 'null'; } @@ -817,7 +818,7 @@ describe(' - Filter', () => { field: 'date', type: 'dateTime', // Avoid the localization of the date to simplify the checks - valueFormatter: ({ value }) => { + valueFormatter: (value?: Date | string) => { if (value === null) { return 'null'; } @@ -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 99% 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 index d0df981e57a96..52b7342ccb617 100644 --- a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -178,7 +178,7 @@ describe(' - Layout & warnings', () => { { field: 'lastName' }, { field: 'fullName', - valueGetter: (params) => `${params.row.firstName || ''} ${params.row.lastName || ''}`, + valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`, }, ]; 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 100% 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 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 99% 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 index 4075f42489e73..6c8bd95121ec1 100644 --- a/packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx @@ -422,7 +422,7 @@ describe(' - Quick filter', () => { { field: 'phone', type: 'string', - valueFormatter: ({ value }) => `+${value.slice(0, 2)} ${value.slice(2)}`, + valueFormatter: (value: string) => `+${value.slice(0, 2)} ${value.slice(2)}`, }, ]} />, @@ -534,7 +534,7 @@ describe(' - Quick filter', () => { field: 'year', type: 'number', // Avoid the localization of the number to simplify the checks - valueFormatter: (params) => params.value, + valueFormatter: (value) => value, }, ]} />, 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 100% 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 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-premium/tsconfig.json b/packages/x-data-grid/tsconfig.json similarity index 68% rename from packages/grid/x-data-grid-premium/tsconfig.json rename to packages/x-data-grid/tsconfig.json index 79824ab245468..6a8e1ed5b14fc 100644 --- a/packages/grid/x-data-grid-premium/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 a0290c6382e46..8e4e528ce50f3 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.0", + "version": "7.0.0-beta.1", "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.33", - "@mui/system": "^5.15.6", - "@mui/utils": "^5.15.6", - "@mui/x-date-pickers": "7.0.0-beta.0", - "@mui/x-license-pro": "7.0.0-beta.0", + "@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": "7.0.0-beta.0", "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 66513995ed30d..3052bea9aaac9 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.0", + "version": "7.0.0-beta.1", "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.33", - "@mui/system": "^5.15.6", - "@mui/utils": "^5.15.6", + "@mui/base": "^5.0.0-beta.34", + "@mui/system": "^5.15.7", + "@mui/utils": "^5.15.7", "@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 93% rename from packages/x-license-pro/package.json rename to packages/x-license/package.json index 239c2994cc858..989bb92c6f762 100644 --- a/packages/x-license-pro/package.json +++ b/packages/x-license/package.json @@ -1,5 +1,5 @@ { - "name": "@mui/x-license-pro", + "name": "@mui/x-license", "version": "7.0.0-beta.0", "description": "MUI X License verification", "author": "MUI Team", @@ -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.6" + "@mui/utils": "^5.15.7" }, "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 1cf6e981ef448..be02940081368 100644 --- a/packages/x-tree-view/package.json +++ b/packages/x-tree-view/package.json @@ -44,9 +44,9 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "^5.0.0-beta.33", - "@mui/system": "^5.15.6", - "@mui/utils": "^5.15.6", + "@mui/base": "^5.0.0-beta.34", + "@mui/system": "^5.15.7", + "@mui/utils": "^5.15.7", "@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.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 83ac00cc87c17..dc4222f689288 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, }); /** 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..bd9cd16776fc8 100644 --- a/scripts/copyFiles.mjs +++ b/scripts/copyFiles.mjs @@ -157,12 +157,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 6bb5e90d0bcac..bd21115264581 100644 --- a/scripts/l10n.ts +++ b/scripts/l10n.ts @@ -9,7 +9,10 @@ import * as yargs from 'yargs'; import { Octokit } from '@octokit/rest'; import { retry } from '@octokit/plugin-retry'; import localeNames from './localeNames'; -import nextConfig from '../docs/next.config'; +import { + SOURCE_CODE_REPO as DOCS_SOURCE_CODE_REPO, + SOURCE_GITHUB_BRANCH as DOCS_SOURCE_GITHUB_BRANCH, +} from '../docs/constants'; const MyOctokit = Octokit.plugin(retry); @@ -23,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', }, { @@ -344,7 +347,7 @@ const generateDocReport = async ( localeName, missingKeysCount: infoPerPackage[packageKey].missingKeys.length, totalKeysCount: baseTranslationsNumber[packageKey], - githubLink: `${nextConfig.env.SOURCE_CODE_REPO}/blob/${nextConfig.env.SOURCE_GITHUB_BRANCH}/${info.path}`, + githubLink: `${DOCS_SOURCE_CODE_REPO}/blob/${DOCS_SOURCE_GITHUB_BRANCH}/${info.path}`, }); }); 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 49a150ddaa4b9..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" }, @@ -73,6 +75,8 @@ { "name": "ChartsLegendRootOwnerState", "kind": "TypeAlias" }, { "name": "ChartsLegendSlotProps", "kind": "Interface" }, { "name": "ChartsLegendSlots", "kind": "Interface" }, + { "name": "ChartsOnAxisClickHandler", "kind": "Function" }, + { "name": "ChartsOnAxisClickHandlerProps", "kind": "Interface" }, { "name": "ChartsPieSorting", "kind": "TypeAlias" }, { "name": "ChartsReferenceLine", "kind": "Function" }, { "name": "ChartsReferenceLineClasses", "kind": "Interface" }, @@ -106,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" }, @@ -197,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 25b7aa594284b..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" }, @@ -137,6 +139,7 @@ { "name": "GridClearIcon", "kind": "Variable" }, { "name": "GridCloseIcon", "kind": "Variable" }, { "name": "GridColDef", "kind": "TypeAlias" }, + { "name": "GridColSpanFn", "kind": "TypeAlias" }, { "name": "GridColType", "kind": "TypeAlias" }, { "name": "GridColTypeDef", "kind": "TypeAlias" }, { "name": "GridColumnApi", "kind": "Interface" }, @@ -238,8 +241,8 @@ { "name": "GridDataPinnedRowNode", "kind": "Interface" }, { "name": "gridDataRowIdsSelector", "kind": "Variable" }, { "name": "gridDateComparator", "kind": "Variable" }, - { "name": "gridDateFormatter", "kind": "Function" }, - { "name": "gridDateTimeFormatter", "kind": "Function" }, + { "name": "gridDateFormatter", "kind": "Variable" }, + { "name": "gridDateTimeFormatter", "kind": "Variable" }, { "name": "GridDeleteForeverIcon", "kind": "Variable" }, { "name": "GridDeleteIcon", "kind": "Variable" }, { "name": "GridDensity", "kind": "TypeAlias" }, @@ -356,7 +359,7 @@ { "name": "GridGroupingColDefOverrideParams", "kind": "Interface" }, { "name": "GridGroupingRule", "kind": "Interface" }, { "name": "GridGroupingRules", "kind": "TypeAlias" }, - { "name": "GridGroupingValueGetterParams", "kind": "Interface" }, + { "name": "GridGroupingValueGetter", "kind": "TypeAlias" }, { "name": "GridGroupNode", "kind": "TypeAlias" }, { "name": "GridGroupWorkIcon", "kind": "Variable" }, { "name": "GridHeader", "kind": "Function" }, @@ -417,6 +420,7 @@ { "name": "GridPanelWrapper", "kind": "Variable" }, { "name": "GridPanelWrapperProps", "kind": "Interface" }, { "name": "GridParamsApi", "kind": "Interface" }, + { "name": "GridPastedValueParser", "kind": "TypeAlias" }, { "name": "GridPinnedColumnFields", "kind": "Interface" }, { "name": "GridPinnedColumnPosition", "kind": "Enum" }, { "name": "GridPinnedColumns", "kind": "Interface" }, @@ -527,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" }, @@ -575,10 +581,12 @@ { "name": "GridTypeFilterInputValueProps", "kind": "TypeAlias" }, { "name": "GridUpdateAction", "kind": "TypeAlias" }, { "name": "GridValidRowModel", "kind": "TypeAlias" }, + { "name": "GridValueFormatter", "kind": "TypeAlias" }, { "name": "GridValueFormatterParams", "kind": "Interface" }, - { "name": "GridValueGetterParams", "kind": "Interface" }, + { "name": "GridValueGetter", "kind": "TypeAlias" }, { "name": "GridValueOptionsParams", "kind": "Interface" }, - { "name": "GridValueSetterParams", "kind": "Interface" }, + { "name": "GridValueParser", "kind": "TypeAlias" }, + { "name": "GridValueSetter", "kind": "TypeAlias" }, { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, @@ -606,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" }, @@ -617,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 0540bef175505..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" }, @@ -113,6 +115,7 @@ { "name": "GridClearIcon", "kind": "Variable" }, { "name": "GridCloseIcon", "kind": "Variable" }, { "name": "GridColDef", "kind": "TypeAlias" }, + { "name": "GridColSpanFn", "kind": "TypeAlias" }, { "name": "GridColType", "kind": "TypeAlias" }, { "name": "GridColTypeDef", "kind": "TypeAlias" }, { "name": "GridColumnApi", "kind": "Interface" }, @@ -212,8 +215,8 @@ { "name": "GridDataPinnedRowNode", "kind": "Interface" }, { "name": "gridDataRowIdsSelector", "kind": "Variable" }, { "name": "gridDateComparator", "kind": "Variable" }, - { "name": "gridDateFormatter", "kind": "Function" }, - { "name": "gridDateTimeFormatter", "kind": "Function" }, + { "name": "gridDateFormatter", "kind": "Variable" }, + { "name": "gridDateTimeFormatter", "kind": "Variable" }, { "name": "GridDeleteForeverIcon", "kind": "Variable" }, { "name": "GridDeleteIcon", "kind": "Variable" }, { "name": "GridDensity", "kind": "TypeAlias" }, @@ -482,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" }, @@ -530,10 +535,12 @@ { "name": "GridTypeFilterInputValueProps", "kind": "TypeAlias" }, { "name": "GridUpdateAction", "kind": "TypeAlias" }, { "name": "GridValidRowModel", "kind": "TypeAlias" }, + { "name": "GridValueFormatter", "kind": "TypeAlias" }, { "name": "GridValueFormatterParams", "kind": "Interface" }, - { "name": "GridValueGetterParams", "kind": "Interface" }, + { "name": "GridValueGetter", "kind": "TypeAlias" }, { "name": "GridValueOptionsParams", "kind": "Interface" }, - { "name": "GridValueSetterParams", "kind": "Interface" }, + { "name": "GridValueParser", "kind": "TypeAlias" }, + { "name": "GridValueSetter", "kind": "TypeAlias" }, { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, @@ -559,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" }, @@ -569,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 0813d4b722ed9..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" }, @@ -103,6 +105,7 @@ { "name": "GridClearIcon", "kind": "Variable" }, { "name": "GridCloseIcon", "kind": "Variable" }, { "name": "GridColDef", "kind": "TypeAlias" }, + { "name": "GridColSpanFn", "kind": "TypeAlias" }, { "name": "GridColType", "kind": "TypeAlias" }, { "name": "GridColTypeDef", "kind": "TypeAlias" }, { "name": "GridColumnApi", "kind": "Interface" }, @@ -193,8 +196,8 @@ { "name": "GridDataPinnedRowNode", "kind": "Interface" }, { "name": "gridDataRowIdsSelector", "kind": "Variable" }, { "name": "gridDateComparator", "kind": "Variable" }, - { "name": "gridDateFormatter", "kind": "Function" }, - { "name": "gridDateTimeFormatter", "kind": "Function" }, + { "name": "gridDateFormatter", "kind": "Variable" }, + { "name": "gridDateTimeFormatter", "kind": "Variable" }, { "name": "GridDeleteForeverIcon", "kind": "Variable" }, { "name": "GridDeleteIcon", "kind": "Variable" }, { "name": "GridDensity", "kind": "TypeAlias" }, @@ -437,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" }, @@ -484,10 +489,12 @@ { "name": "GridTypeFilterInputValueProps", "kind": "TypeAlias" }, { "name": "GridUpdateAction", "kind": "TypeAlias" }, { "name": "GridValidRowModel", "kind": "TypeAlias" }, + { "name": "GridValueFormatter", "kind": "TypeAlias" }, { "name": "GridValueFormatterParams", "kind": "Interface" }, - { "name": "GridValueGetterParams", "kind": "Interface" }, + { "name": "GridValueGetter", "kind": "TypeAlias" }, { "name": "GridValueOptionsParams", "kind": "Interface" }, - { "name": "GridValueSetterParams", "kind": "Interface" }, + { "name": "GridValueParser", "kind": "TypeAlias" }, + { "name": "GridValueSetter", "kind": "TypeAlias" }, { "name": "GridViewColumnIcon", "kind": "Variable" }, { "name": "GridViewHeadlineIcon", "kind": "Variable" }, { "name": "GridViewStreamIcon", "kind": "Variable" }, @@ -512,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" }, @@ -522,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 - +