diff --git a/.browserslistrc b/.browserslistrc index 2a733ab5c32d..729c34746e4b 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -36,27 +36,6 @@ opera 76 safari 14 samsung 13.0 -# Same as `stable` but with IE 11 - -[legacy] -ie 11 -and_chr 91 -and_ff 89 -and_qq 10.4 -and_uc 12.12 -android 91 -baidu 7.12 -chrome 90 -edge 91 -firefox 78 -ios_saf 12.2 -kaios 2.5 -op_mini all -op_mob 73 -opera 76 -safari 14 -samsung 13.0 - # snapshot of `npx browserslist "maintained node versions"` # On update check all #stable-snapshot markers diff --git a/.circleci/config.yml b/.circleci/config.yml index 7c86ac5d08a2..9936d6febdf7 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -18,7 +18,7 @@ parameters: type: string default: '' -defaults: &defaults +default-job: &default-job parameters: react-dist-tag: description: The dist-tag of react to be used @@ -46,13 +46,17 @@ defaults: &defaults # restore_cache: # key: v1-repo-{{ .Branch }}-{{ .Revision }} +default-context: &default-context + context: + - org-global + commands: install_js: parameters: browsers: type: boolean default: false - description: 'Set to true if you intend to any browser (e.g. with playwright).' + description: 'Set to true if you intend to any browser (for example with playwright).' steps: - run: @@ -114,7 +118,7 @@ commands: jobs: checkout: - <<: *defaults + <<: *default-job steps: - checkout - install_js @@ -125,10 +129,13 @@ jobs: name: Check for duplicated packages command: yarn deduplicate test_unit: - <<: *defaults + <<: *default-job steps: - checkout - install_js + - run: + name: Tests charts + command: yarn test:charts:unit # Run special test for charts due to ESM compatibility issue - run: name: Tests fake browser command: yarn test:coverage @@ -146,7 +153,7 @@ jobs: chmod +x codecov ./codecov -t ${CODECOV_TOKEN} -Z -F "$REACT_DIST_TAG-jsdom" test_lint: - <<: *defaults + <<: *default-job steps: - checkout - install_js @@ -160,7 +167,7 @@ jobs: name: Lint Markdown command: yarn markdownlint test_static: - <<: *defaults + <<: *default-job steps: - checkout - install_js @@ -191,9 +198,9 @@ jobs: yarn docs:link-check git add -A && git diff --exit-code --staged test_browser: - <<: *defaults + <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -208,7 +215,7 @@ jobs: path: /tmp/_karma_webpack_ destination: artifact-file test_types: - <<: *defaults + <<: *default-job steps: - checkout - install_js @@ -224,9 +231,9 @@ jobs: environment: NODE_OPTIONS: --max-old-space-size=3072 test_e2e: - <<: *defaults + <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -237,9 +244,9 @@ jobs: name: Run e2e tests command: yarn test:e2e test_e2e_website: - <<: *defaults + <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -252,9 +259,9 @@ jobs: environment: PLAYWRIGHT_TEST_BASE_URL: << parameters.e2e-base-url >> test_regressions: - <<: *defaults + <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -268,9 +275,9 @@ jobs: name: Upload screenshots to Argos CI command: yarn test:argos run_danger: - <<: *defaults + <<: *default-job docker: - - image: mcr.microsoft.com/playwright:v1.41.1-focal + - image: mcr.microsoft.com/playwright:v1.41.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -288,36 +295,46 @@ workflows: when: equal: [pipeline, << pipeline.parameters.workflow >>] jobs: - - checkout + - checkout: + <<: *default-context - test_unit: + <<: *default-context requires: - checkout - test_lint: + <<: *default-context requires: - checkout - test_static: + <<: *default-context requires: - checkout - test_browser: + <<: *default-context requires: - checkout - test_types: + <<: *default-context requires: - checkout - test_e2e: + <<: *default-context requires: - checkout - test_regressions: + <<: *default-context requires: - checkout - run_danger: + <<: *default-context requires: - checkout e2e-website: when: equal: [e2e-website, << pipeline.parameters.workflow >>] jobs: - - checkout + - checkout: + <<: *default-context - test_e2e_website: requires: - checkout diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index f067fef9c95e..e08318b0ba92 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -3,31 +3,27 @@ "installCommand": "install:codesandbox", "node": "18", "packages": [ - "packages/x-license-pro", - "packages/grid/x-data-grid", - "packages/grid/x-data-grid-pro", - "packages/grid/x-data-grid-premium", - "packages/grid/x-data-grid-generator", + "packages/x-license", + "packages/x-data-grid", + "packages/x-data-grid-pro", + "packages/x-data-grid-premium", + "packages/x-data-grid-generator", "packages/x-date-pickers", "packages/x-date-pickers-pro", "packages/x-charts", "packages/x-tree-view" ], "publishDirectory": { - "@mui/x-license-pro": "packages/x-license-pro/build", - "@mui/x-data-grid": "packages/grid/x-data-grid/build", - "@mui/x-data-grid-pro": "packages/grid/x-data-grid-pro/build", - "@mui/x-data-grid-premium": "packages/grid/x-data-grid-premium/build", - "@mui/x-data-grid-generator": "packages/grid/x-data-grid-generator/build", + "@mui/x-license": "packages/x-license/build", + "@mui/x-data-grid": "packages/x-data-grid/build", + "@mui/x-data-grid-pro": "packages/x-data-grid-pro/build", + "@mui/x-data-grid-premium": "packages/x-data-grid-premium/build", + "@mui/x-data-grid-generator": "packages/x-data-grid-generator/build", "@mui/x-date-pickers": "packages/x-date-pickers/build", "@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build", "@mui/x-charts": "packages/x-charts/build", "@mui/x-tree-view": "packages/x-tree-view/build" }, - "sandboxes": [ - "new", - "github/mui/material-ui/tree/master/examples/create-react-app", - "github/mui/material-ui/tree/master/examples/create-react-app-with-typescript" - ], + "sandboxes": ["/bug-reproductions/x-data-grid"], "silent": true } diff --git a/.eslintignore b/.eslintignore index 332d95470b5e..828357acf4a9 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 4eecaad75bf5..99d1462f8f7d 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'], @@ -146,12 +157,12 @@ module.exports = { }, }, buildPackageRestrictedImports('@mui/x-charts', 'x-charts'), - buildPackageRestrictedImports('@mui/x-data-grid', 'grid/x-data-grid'), - buildPackageRestrictedImports('@mui/x-data-grid-pro', 'grid/x-data-grid-pro'), - buildPackageRestrictedImports('@mui/x-data-grid-premium', 'grid/x-data-grid-premium'), - buildPackageRestrictedImports('@mui/x-data-grid-generator', 'grid/x-data-grid-generator'), + buildPackageRestrictedImports('@mui/x-data-grid', 'x-data-grid'), + buildPackageRestrictedImports('@mui/x-data-grid-pro', 'x-data-grid-pro'), + buildPackageRestrictedImports('@mui/x-data-grid-premium', 'x-data-grid-premium'), + buildPackageRestrictedImports('@mui/x-data-grid-generator', '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 61517d69ed6e..24e3b54a8b5a 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 3e20ea94fc92..c3ef5d1a3e07 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 106fabecf04d..fb927c7619eb 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 d7f67770bd6c..f902b8ed2f40 100644 --- a/.github/ISSUE_TEMPLATE/5.priority-support.yml +++ b/.github/ISSUE_TEMPLATE/5.priority-support.yml @@ -26,10 +26,7 @@ body: attributes: label: The problem in depth description: | - **If you're reporting a bug, please provide a live example for your report.** - If you don't have one, you can use one of these options: - - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx) - - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png) + Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case. - type: textarea attributes: label: Your environment diff --git a/.github/styles/Blog/BrandName.yml b/.github/styles/Blog/BrandName.yml deleted file mode 100644 index b95387c58510..000000000000 --- a/.github/styles/Blog/BrandName.yml +++ /dev/null @@ -1,16 +0,0 @@ -# Without a non-breaking space, brand names can be split in the middle, with the start and end on two different lines. -extends: substitution -message: Use a non-breaking space for brand name ('%s' instead of '%s') -level: error -ignorecase: true -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - Material UI: Material UI - MUI X: MUI X - Base UI: Base UI - MUI System: MUI System - MUI Store: MUI Store - MUI Core: MUI Core - MUI Toolpad: MUI Toolpad - MUI Connect: MUI Connect diff --git a/.github/styles/Blog/ComponentNaming.yml b/.github/styles/Blog/ComponentNaming.yml deleted file mode 100644 index 138f7c303a72..000000000000 --- a/.github/styles/Blog/ComponentNaming.yml +++ /dev/null @@ -1,24 +0,0 @@ -extends: substitution -message: Unless you're referring to the general concept, consider using '%s' instead of '%s'. -level: suggestion -ignorecase: false -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - # Capitalize - data grid: Data Grid - date picker: Date Picker - Data grid: Data Grid - Date picker: Date Picker - Time picker: Time Picker - Date [t|T]ime picker: Date Time Picker - Date [r|R]ange picker: Date Range Picker - Time [r|R]ange picker: Time Range Picker - Date [t|T]ime [r|R]ange picker: Date Time Range Picker - time picker: Time Picker - date time picker: Date Time Picker - date range picker: Date Range Picker - time range picker: Time Range Picker - date time range picker: Date Time Range Picker - # use Data Grid instead of grid - the grid: the Data Grid diff --git a/.github/styles/Blog/ComposedWords.yml b/.github/styles/Blog/ComposedWords.yml deleted file mode 100644 index 149dc0bd6ab3..000000000000 --- a/.github/styles/Blog/ComposedWords.yml +++ /dev/null @@ -1,13 +0,0 @@ -extends: substitution -message: To be consistent with the rest of the documentation, consider using '%s' instead of '%s'. -level: error -ignorecase: true -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - sub-component: subcomponent - sub-components: subcomponents - 'sub component': subcomponent - 'sub components': subcomponents - 'use-case': 'use case' - 'usecase': 'use case' diff --git a/.github/styles/Blog/NamingConventions.yml b/.github/styles/Blog/NamingConventions.yml deleted file mode 100644 index c843c9ca2aa6..000000000000 --- a/.github/styles/Blog/NamingConventions.yml +++ /dev/null @@ -1,17 +0,0 @@ -extends: substitution -message: To be consistent with capitalization, consider using '%s' instead of '%s'. -level: error -ignorecase: false -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - api: API - Api: API - typescript: TypeScript - Typescript: TypeScript - ts: TypeScript - TS: TypeScript - javascript: JavaScript - Javascript: JavaScript - css: CSS - Css: CSS diff --git a/.github/styles/Blog/NoCompanyName.yml b/.github/styles/Blog/NoCompanyName.yml deleted file mode 100644 index dacecf36f4a8..000000000000 --- a/.github/styles/Blog/NoCompanyName.yml +++ /dev/null @@ -1,13 +0,0 @@ -extends: existence -message: We avoid referencing the company name '%s'. Instead you can reference a product or the team. -level: warning -ignorecase: false -tokens: - - 'MUI \w+' -exceptions: - - 'MUI X' - - 'MUI System' - - 'MUI Store' - - 'MUI Core' - - 'MUI Toolpad' - - 'MUI Connect' diff --git a/.github/styles/Blog/Typos.yml b/.github/styles/Blog/Typos.yml deleted file mode 100644 index 9397f6153250..000000000000 --- a/.github/styles/Blog/Typos.yml +++ /dev/null @@ -1,11 +0,0 @@ -extends: substitution -message: Do you mean '%s' instead of '%s'? -level: error -ignorecase: true -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - bellow: below - eg: e.g. - eg.: e.g. - 'e.g ': 'e.g. ' diff --git a/.github/styles/Vocab/accept.txt b/.github/styles/Vocab/accept.txt deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/.github/styles/Vocab/reject.txt b/.github/styles/Vocab/reject.txt deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/.github/workflows/closed-issue-message.yaml b/.github/workflows/closed-issue-message.yaml new file mode 100644 index 000000000000..9dddd9cfa32b --- /dev/null +++ b/.github/workflows/closed-issue-message.yaml @@ -0,0 +1,35 @@ +name: Add comment + +on: + issues: + types: + - closed + +permissions: {} + +jobs: + add-comment: + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + GH_REPO: ${{ github.repository }} + NUMBER: ${{ github.event.issue.number }} + BODY: | + :warning: **This issue has been closed.** + If you have a similar problem, please open a [new issue](https://github.com/mui/mui-x/issues/new/choose) and provide details about your specific problem. + If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment. + APPENDIX: | + + **How did we do @${{ github.event.issue.user.login }}?** + Your experience with our support team matters to us. If you have a moment, please share your thoughts through our [brief survey](https://tally.so/r/w4r5Mk?issue=${{ github.event.issue.number }}). + + if: github.event.issue.state_reason != 'inactivity' + runs-on: ubuntu-latest + permissions: + issues: write + steps: + - name: Add comment for outside contributors + if: github.event.issue.author_association != 'MEMBER' && github.event.issue.author_association != 'OWNER' + run: gh issue comment "$NUMBER" --body "$BODY $APPENDIX" + - name: Add comment for maintainers + if: github.event.issue.author_association == 'MEMBER' || github.event.issue.author_association == 'OWNER' + run: gh issue comment "$NUMBER" --body "$BODY" diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 01d8fd919710..93bcb4210384 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@b7bf0a3ed3ecfa44160715d7c442788f65f0f923 # v3.23.2 + uses: github/codeql-action/init@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6 with: languages: typescript # If you wish to specify custom queries, you can do so here or in a config file. @@ -29,4 +29,4 @@ jobs: # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs # queries: security-extended,security-and-quality - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@b7bf0a3ed3ecfa44160715d7c442788f65f0f923 # v3.23.2 + uses: github/codeql-action/analyze@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6 diff --git a/.github/workflows/l10n.yml b/.github/workflows/l10n.yml index 64adb63bc4de..a1efe0794c60 100644 --- a/.github/workflows/l10n.yml +++ b/.github/workflows/l10n.yml @@ -19,7 +19,7 @@ jobs: - run: echo "${{ github.actor }}" - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js 20.x - uses: actions/setup-node@b39b52d1213e96004bfcb1c61a8a6fa8ab84f3e8 # v4.0.1 + uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2 with: node-version: 20 cache: 'yarn' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies diff --git a/.github/workflows/mark-duplicate.yml b/.github/workflows/mark-duplicate.yml index 15e82efe76c2..bb3b4df5b23a 100644 --- a/.github/workflows/mark-duplicate.yml +++ b/.github/workflows/mark-duplicate.yml @@ -14,7 +14,7 @@ jobs: issues: write steps: - name: mark-duplicate - uses: actions-cool/issues-helper@5457ae8d7c1dc20597a753501d30183ed8043c8b # v3.5.2 + uses: actions-cool/issues-helper@a610082f8ac0cf03e357eb8dd0d5e2ba075e017e # v3.6.0 with: actions: 'mark-duplicate' token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml index aabc9edc6f07..1c97b2f528c6 100644 --- a/.github/workflows/no-response.yml +++ b/.github/workflows/no-response.yml @@ -8,8 +8,10 @@ on: issue_comment: types: [created] schedule: - # Schedule for five minutes after the hour, every hour - - cron: '5 * * * *' + # These runs in our repos are spread evenly throughout the day to avoid hitting rate limits. + # If you change this schedule, consider changing the remaining repositories as well. + # Runs at 3 am, 3 pm + - cron: '0 3,15 * * *' permissions: {} @@ -20,7 +22,7 @@ jobs: contents: read issues: write steps: - - uses: MBilalShafi/no-response-add-label@629add01d7b6f8e120811f978c42703736098947 + - uses: MBilalShafi/no-response-add-label@8336c12292902f27b931154c34ba4670cb9899a2 with: token: ${{ secrets.GITHUB_TOKEN }} # Number of days of inactivity before an Issue is closed for lack of response @@ -32,4 +34,3 @@ jobs: # Comment to post when closing an Issue for lack of response. Set to `false` to disable closeComment: > The issue has been inactive for 7 days and has been automatically closed. - If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion. diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 43dd2dc1075f..c32bf3cf5b8e 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -44,6 +44,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: Upload to code-scanning - uses: github/codeql-action/upload-sarif@b7bf0a3ed3ecfa44160715d7c442788f65f0f923 # v3.23.2 + uses: github/codeql-action/upload-sarif@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6 with: sarif_file: results.sarif diff --git a/.github/workflows/support-stackoverflow.yml b/.github/workflows/support-stackoverflow.yml index 9ccd75e549dc..c9d8069a636f 100644 --- a/.github/workflows/support-stackoverflow.yml +++ b/.github/workflows/support-stackoverflow.yml @@ -29,7 +29,7 @@ jobs: For support, please check out https://mui.com/x/introduction/support/. Thanks! - If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. + If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened. close-issue: true lock-issue: false diff --git a/.github/workflows/vale-action.yml b/.github/workflows/vale-action.yml index 61078d7162ee..dc6d9faaf213 100644 --- a/.github/workflows/vale-action.yml +++ b/.github/workflows/vale-action.yml @@ -13,7 +13,7 @@ jobs: pull-requests: write steps: - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - - uses: errata-ai/vale-action@c4213d4de3d5f718b8497bd86161531c78992084 # v2.0.1 + - uses: errata-ai/vale-action@38bf078c328061f59879b347ca344a718a736018 # v2.1.0 with: reporter: github-pr-review files: docs/data diff --git a/.gitignore b/.gitignore index a0f281bd1819..a10ee92e04cf 100644 --- a/.gitignore +++ b/.gitignore @@ -20,5 +20,7 @@ dist node_modules size-snapshot.json performance-snapshot.json +# vale downloaded config .github/styles/Google -.github/styles/write-good \ No newline at end of file +.github/styles/MUI +.github/styles/.vale-config diff --git a/.mocharc.js b/.mocharc.js index 3f1b312f2f7c..f53ea7795363 100644 --- a/.mocharc.js +++ b/.mocharc.js @@ -7,6 +7,8 @@ module.exports = { // Mocha seems to ignore .next anyway (maybe because dotfiles?). // We're leaving this to make sure. 'docs/.next/**', + // x-charts requires 'tsx/cjs' which conflict with the babel date-fns override for picker tests + 'packages/x-charts/**', ], recursive: true, timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs. diff --git a/.vale.ini b/.vale.ini index b22f6236cfd3..217e3d4d501a 100644 --- a/.vale.ini +++ b/.vale.ini @@ -1,33 +1,27 @@ -# Config vale. More information at https://docs.errata.ai/vale/config +# Vale config. More information at https://vale.sh/docs/topics/config/ StylesPath = .github/styles -MinAlertLevel = suggestion +MinAlertLevel = error -Packages = Google +# To update mui-vale package: +# 1. Go to the docs folder in the material-ui repo +# 2. Update/create YAML files +# 3. Run `pnpm docs:zipRules` to generate the zip files +# 4. You can test locally by replacing the url with the file path of the generated zip +Packages = Google, https://github.com/mui/material-ui/raw/HEAD/docs/mui-vale.zip [*.md] -# Ignore code injection which start with {{... +# Ignore code injections that start with {{... BlockIgnores = {{.* -# Custom syle -# BasedOnStyles = Blog +BasedOnStyles = MUI -Blog.ComposedWords = YES -Blog.NamingConventions = YES -Blog.Typos = YES -Blog.BrandName = YES -Blog.NoCompanyName = YES +# Google errors: +Google.GenderBias = YES # No Gender bias +# Google warings: +Google.FirstPerson = YES # Avoid first-person +Google.We = YES # Avoid first-person plural +Google.Will = YES # Avoid future tense +Google.OxfordComma = YES # Prefer Oxford comma -# Google: -Google.FirstPerson = YES # Avoid first-person pronouns such as I, me, ...'. -Google.GenderBias = YES # Avoid gendered profession -Google.OxfordComma = YES -Google.Quotes = YES # Commas and periods go inside quotation marks. -Google.Spelling = YES # In general, use American spelling (word ending with 'nised' or 'logue') -Google.We = YES # Try to avoid using first-person plural - -# Those rules are not repected a lot -# Google.Passive = YES # In general, use active voice instead of passive voice. -# Google.Will = YES # Avoid using will - -# False positives with "1st" nearly no use in our doc -# Google.Units = YES # Put a nonbreaking space between the number and the unit \ No newline at end of file +[CHANGELOG*.md] +MUI.CorrectReferenceAllCases = NO diff --git a/CHANGELOG.md b/CHANGELOG.md index 0886f83e7f00..b0499f734d2d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,11 +3,755 @@ 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.7 + +_Mar 14, 2024_ + +We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨: + +- 🦥 The Lazy loading feature is now stable and the `lazyLoading` feature flag was removed from the `experimentalFeatures` prop. +- 🌍 Improve Japanese (ja-JP) locale for the Data Grid +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### Breaking changes + +- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`. +- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility. +- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to. + The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers. + +#### `@mui/x-data-grid@7.0.0-beta.7` + +- [DataGrid] Fix focus visible style on scrollbar (#12402) @oliviertassinari +- [DataGrid] Fix the issue where pressing the Delete key resets various cell values to an empty string. (#12216) @sooster910 +- [DataGrid] Make `rowCount` part of the state (#12381) @MBilalShafi +- [DataGrid] Make column resizing and autosizing available in Community plan (#12420) @cherniavskii +- [DataGrid] Remove `baseSwitch` slot (#12439) @romgrk +- [l10n] Improve Japanese (ja-JP) locale (#12398) @makoto14 + +#### `@mui/x-data-grid-pro@7.0.0-beta.7` [![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.7`, plus: + +- [DataGridPro] Add `inputRef` to the props passed to `colDef.renderHeaderFilter` (#12328) @vovarudomanenko +- [DataGridPro] Fix filler rendered for no reason when there are pinned columns (#12440) @cherniavskii +- [DataGridPro] Make lazy loading feature stable (#12421) @cherniavskii +- [DataGridPro] Render pinned and non-pinned column headers in one row (#12376) @cherniavskii + +#### `@mui/x-data-grid-premium@7.0.0-beta.7` [![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.7`, plus: + +- [DataGridPremium] Fix auto-scroll not working when selecting cell range (#12267) @cherniavskii + +### Date and Time Pickers + +#### `@mui/x-date-pickers@7.0.0-beta.7` + +- [fields] Fix `tabIndex` on accessible field DOM structure (#12311) @flaviendelangle +- [fields] Fix items alignment on multi input range fields (#12312) @flaviendelangle +- [pickers] Improve the customization of the range picker calendar header (#11988) @flaviendelangle +- [pickers] Keep the existing time when looking for closest enabled date (#12377) @LukasTy + +#### `@mui/x-date-pickers-pro@7.0.0-beta.7` [![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.7`. + +### Charts + +#### `@mui/x-charts@7.0.0-beta.7` + +- [charts] Fix axis highlight when axis is reversed (#12407) @alexfauquette + +### Tree View + +#### Breaking changes + +The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency: + +```diff + +``` + +#### `@mui/x-tree-view@7.0.0-beta.7` + +- [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte +- [TreeView] Introduce a new `TreeItem2` component and a new `useTreeItem2` hook (#11721) @flaviendelangle +- [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte + +### Docs + +- [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy +- [docs] Add missing luxon `Info` import (#12427) @LukasTy +- [docs] Improve slots definitions for charts (#12408) @alexfauquette +- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari +- [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari +- [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy + +### Core + +- [core] Fix CI (#12414) @flaviendelangle +- [core] Fix PR deploy link for Tree View doc pages (#12411) @flaviendelangle + +## 7.0.0-beta.6 + +_Mar 8, 2024_ + +We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨: + +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@7.0.0-beta.6` + +- [DataGrid] Fix crashing of demos on rating change (#12315) @sai6855 +- [DataGrid] Fix double border below header (#12349) @joespeargresham +- [DataGrid] Fix empty sort being saved in the `sortModel` (#12325) @MBilalShafi +- [DataGrid] Remove unnecessary `stopCellMode` event in `renderEditRating` component (#12335) @sai6855 +- [DataGrid] Small performance optimizations (#12346) @romgrk + +#### `@mui/x-data-grid-pro@7.0.0-beta.6` [![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.6`, plus: + +- [DataGridPro] Rework `onRowsScrollEnd` to use `IntersectionObserver` (#8672) @DanailH + +#### `@mui/x-data-grid-premium@7.0.0-beta.6` [![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.6`. + +### Charts + +#### `@mui/x-charts@7.0.0-beta.6` + +- [charts] Add context to axis value formatter (#12172) @alexfauquette +- [charts] Customize tick position for band scale (#12316) @alexfauquette +- [charts] Fix RTL legend (#12175) @alexfauquette + +### Tree View + +#### Breaking changes + +- The component used to animate the item children is now defined as a slot on the `TreeItem` component. + + If you were passing a `TransitionComponent` or `TransitionProps` to your `TreeItem` component, + you need to use the new `groupTransition` slot on this component: + + ```diff + + + + ``` + +- The `group` class of the `TreeItem` component has been renamed to `groupTransition` to match with its new slot name. + + ```diff + const StyledTreeItem = styled(TreeItem)({ + - [`& .${treeItemClasses.group}`]: { + + [`& .${treeItemClasses.groupTransition}`]: { + marginLeft: 20, + }, + }); + ``` + +#### `@mui/x-tree-view@7.0.0-beta.6` + +- [TreeView] Fix invalid nodes state when updating `props.items` (#12359) @flaviendelangle +- [TreeView] In the `RichTreeView`, do not use the item id as the HTML id attribute (#12319) @flaviendelangle +- [TreeView] New instance and publicAPI method: `getItem` (#12251) @flaviendelangle +- [TreeView] Replace `TransitionComponent` and `TransitionProps` with a `groupTransition` slot (#12336) @flaviendelangle + +### Docs + +- [docs] Add a note about `z-index` usage in SVG (#12337) @alexfauquette +- [docs] `RichTreeView` customization docs (#12231) @noraleonte + +### Core + +- [test] Add `Charts` test (#11551) @alexfauquette + +## 7.0.0-beta.5 + +_Mar 1, 2024_ + +We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: + +- 🎁 Add `getSortComparator` for more advanced sorting behaviors (#12215) @cherniavskii +- 🚀 Add `use client` directive to the Grid packages (#11803) @MBilalShafi +- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@7.0.0-beta.5` + +- [DataGrid] Add `getSortComparator` for more advanced sorting behaviors (#12215) @cherniavskii +- [DataGrid] Add `use client` directive to the Grid packages (#11803) @MBilalShafi +- [DataGrid] Fix `disableResetButton` and `disableShowHideToggle` flags to not exclude each other (#12169) @adyry +- [DataGrid] Fix cell range classnames (#12230) @romgrk +- [DataGrid] Fix wrong offset for right-pinned columns when toggling dark/light modes (#12233) @cherniavskii +- [DataGrid] Improve row virtualization and rendering performance (#12247) @romgrk +- [DataGrid] Improve performance by removing `querySelector` call (#12229) @romgrk +- [DataGrid] Fix `onColumnWidthChange` called before autosize affects column width (#12140) @shaharyar-shamshi +- [DataGrid] Fix boolean "is" filter (#12117) @shaharyar-shamshi +- [DataGrid] Fix `upsertFilterItems` removing filters that are not part of the update (#11954) @gitstart +- [DataGrid] Render scrollbars only if there is scroll (#12265) @cherniavskii + +#### `@mui/x-data-grid-pro@7.0.0-beta.5` [![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.5`, plus: + +- [DataGridPro] Fix column resize errors on MacOS with automatic scrollbars enabled (#12217) @cherniavskii +- [DataGridPro] Fix lazy-loading crash (#12080) @romgrk +- [DataGridPro] Fix useGridRows not giving error on reversed data (#10821) @martijn-basesoft + +#### `@mui/x-data-grid-premium@7.0.0-beta.5` [![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.5`, plus: + +- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12235) @MBilalShafi + +### Date and Time Pickers + +#### `@mui/x-date-pickers@7.0.0-beta.5` + +- [pickers] Fix toolbar components props handling (#12211) @LukasTy +- [l10n] Improve Chinese (zh-CN) locale (#12245) @headironc +- [l10n] Improve Korean (ko-KR) locale (#12192) @Luzi + +#### `@mui/x-date-pickers-pro@7.0.0-beta.5` [![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.5`. + +- [DateTimeRangePicker] Fix validation behavior (#12243) @LukasTy + +### Charts / `@mui/x-charts@7.0.0-beta.5` + +- [charts] Fix grid duplicated key (#12208) @alexfauquette + +### Tree View / `@mui/x-tree-view@7.0.0-beta.5` + +- [TreeView] Add public API and expose focus method (#12143) @noraleonte + +### Docs + +- [docs] Fix image layout shift when loading @oliviertassinari +- [docs] Match Material UI repo comment for redirections @oliviertassinari +- [docs] Non breaking spaces @oliviertassinari +- [docs] Polish the Date Picker playground (#11869) @zanivan +- [docs] Standardize WAI-ARIA references @oliviertassinari + +### Core + +- [core] Allow local docs next.js settings (#12227) @romgrk +- [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle +- [core] Remove `window.` reference for common globals @oliviertassinari +- [core] Use runtime agnostic setTimeout type @oliviertassinari +- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari +- [docs-infra] Fix missing non breaking spaces @oliviertassinari +- [infra] Update `no-response` workflow (#12193) @MBilalShafi +- [infra] Fix missing permission reset @oliviertassinari + +## 7.0.0-beta.4 + +_Feb 23, 2024_ + +We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨: + +- 🎁 Introduce a new DOM structure for the field components that provides a better accessibility +- 🚀 Simplify Data Grid DOM structure for improved performance (#12013) @romgrk +- 🕥 The support for IE11 has been removed (#12151) @flaviendelangle +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Breaking changes + +- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included. + +### Data Grid + +#### Breaking changes + +- The cell inner wrapper `.MuiDataGrid-cellContent` has been removed, use `.MuiDataGrid-cell` to style the cells. + +#### `@mui/x-data-grid@7.0.0-beta.4` + +- [DataGrid] Simplify cell DOM structure (#12013) @romgrk +- [DataGrid] Fix values labels in `is any of` filter operator (#11939) @gitstart + +#### `@mui/x-data-grid-pro@7.0.0-beta.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@7.0.0-beta.4`. + +#### `@mui/x-data-grid-premium@7.0.0-beta.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`. + +### Date and Time Pickers + +#### Breaking changes + +- The `selectedSections` prop no longer accepts start and end indexes. + When selecting several — but not all — sections, the field components were not behaving correctly, you can now only select one or all sections: + + ```diff + + ``` + +- The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`. + This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure). + + When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM: + + ```diff + function MyCustomTextField(props) { + const { + + // Should be ignored + + enableAccessibleFieldDOMStructure, + // ... rest of the props you are using + } = props; + + return ( /* Some UI to edit the date */ ) + } + + function MyCustomField(props) { + const fieldResponse = useDateField({ + ...props, + + // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application + + enableAccessibleFieldDOMStructure: false, + }); + + return ; + } + + function App() { + return ; + } + ``` + +- The following internal types were exported by mistake and have been removed from the public API: + + - `UseDateFieldDefaultizedProps` + - `UseTimeFieldDefaultizedProps` + - `UseDateTimeFieldDefaultizedProps` + - `UseSingleInputDateRangeFieldComponentProps` + - `UseSingleInputTimeRangeFieldComponentProps` + - `UseSingleInputDateTimeRangeFieldComponentProps` + +#### `@mui/x-date-pickers@7.0.0-beta.4` + +- [fields] Add a11y support to multi-HTML field (#12173) @LukasTy +- [fields] Use the `PickersTextField` component in the fields (#10649) @flaviendelangle +- [pickers] Fix styling props propagation to `DateTimePickerTabs` (#12096) @LukasTy + +#### `@mui/x-date-pickers-pro@7.0.0-beta.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@7.0.0-beta.4`. + +### Charts / `@mui/x-charts@7.0.0-beta.4` + +#### Breaking changes + +These components are no longer exported from `@mui/x-charts`: + +- `CartesianContextProvider` +- `DrawingProvider` + +#### `@mui/x-charts@7.0.0-beta.4` + +- [charts] Don't display text if no value is provided (#12127) @alexfauquette +- [charts] Remove export of context providers (#12123) @oliviertassinari + +### Tree View / `@mui/x-tree-view@7.0.0-beta.4` + +- [TreeView] Stop using custom `findIndex` to support IE11 (#12129) @flaviendelangle + +### Docs + +- [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen +- [docs] Add small improvements to the Gauge page (#12076) @danilo-leal +- [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette +- [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy +- [docs] Fix "Licensing" page link (#12156) @LukasTy +- [docs] Fix the Treemap illustration (#12185) @danilo-leal +- [docs] Fix error raised by Grammarly on the page @oliviertassinari +- [docs] Improve performance on Charts entry point @oliviertassinari +- [docs] Link to React Transition Group with https @oliviertassinari +- [docs] Move Heatmap to `pro` plan (#12047) @alexfauquette +- [docs] Reduce number of Vale errors @oliviertassinari +- [docs] Remove default value set to `undefined` (#12128) @alexfauquette + +### Core + +- [core] Fix docs link check (#12135) @LukasTy +- [core] Fix missing context display names (#12124) @oliviertassinari +- [core] Fix shortcuts when Caps Lock enabled (#12121) @oliviertassinari +- [core] Remove IE 11 compat logic (#12119) @oliviertassinari +- [core] Simplify key utils (#12120) @oliviertassinari +- [core] Use the @mui/internal-scripts package (#12142) @michaldudak +- [all components] Remove legacy IE 11 bundle (#12151) @flaviendelangle +- [code-infra] Bump monorepo (#11880) @Janpot +- [code-infra] Use `experimental.cpus` to control amount of export workers in Next.js (#12095) @Janpot +- [docs-infra] Remove randomized API page layout (#11876) @alexfauquette +- [test] Create local wrapper over `describeConformance` (#12130) @michaldudak + +## 7.0.0-beta.3 + +_Feb 16, 2024_ + +We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨: + +- 🎁 Charts get a [built in grid](https://next.mui.com/x/react-charts/axis/#grid) + + Charts Grid + +- 🎛️ Charts get a [Gauge component](https://next.mui.com/x/react-charts/gauge/). + + Guage Chart + +- 🐞 Bugfixes + +- 📚 Documentation improvements + +### Data Grid + +#### Breaking changes + +- The `rowEditCommit` event and the related prop `onRowEditCommit` was removed. The [`processRowUpdate`](https://next.mui.com/x/react-data-grid/editing/#the-processrowupdate-callback) prop can be used in place. + +#### `@mui/x-data-grid@7.0.0-beta.3` + +- [DataGrid] Performance: avoid style invalidation (#12019) @romgrk +- [DataGrid] Remove legacy editing API event: `rowEditCommit` (#12073) @MBilalShafi +- [DataGrid] Fix styling grid filter input single select (#11520) @FreakDroid + +#### `@mui/x-data-grid-pro@7.0.0-beta.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@7.0.0-beta.3`. + +#### `@mui/x-data-grid-premium@7.0.0-beta.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@7.0.0-beta.3`. + +### Charts / `@mui/x-charts@7.0.0-beta.3` + +- [charts] Add Gauge component (#11996) @alexfauquette +- [charts] Add a `ChartsGrid` component (#11034) @alexfauquette + +### Tree View / `@mui/x-tree-view@7.0.0-beta.3` + +- [TreeView] Remove instance existence checks (#12066) @flaviendelangle + +### Docs + +- [docs] Complete charts API pages (#12038) @alexfauquette +- [docs] Add more illustrations to the charts overview page (#12041) @danilo-leal +- [docs] Fix 301 redirection to StackBlitz @oliviertassinari +- [docs] Fix Tree space to match the reset of the docs @oliviertassinari +- [docs] Fix `dayOfWeekFormatter` typo in the pickers v6 to v7 migration document (#12043) @StylesTrip +- [docs] Fix redirection @oliviertassinari +- [docs] Fix typo for `AdapterDateFnsV3` (#12036) @flaviendelangle +- [docs] Removed `focused` prop from demo (#12092) @michelengelen + +### Core + +- [core] Fix CodeSandbox CI template @oliviertassinari +- [core] Sort prop asc (#12033) @oliviertassinari +- [core] Bump monorepo (#12055) @alexfauquette + +## 7.0.0-beta.2 + +_Feb 9, 2024_ + +We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: + +- 🚀 Add slot typings on the Data Grid components (#11795) @romgrk +- 🎁 Support UTC date formatting in Charts tooltip (#11943) @shaharyar-shamshi +- 🌍 Improve Danish (da-DK) locale Data Grid (#11877) @ShahrazH +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@7.0.0-beta.2` + +- [DataGrid] Add `removeAllFilterItems` as a reason of `onFilterModelChange` callback (#11911) @shaharyar-shamshi +- [DataGrid] Add slot typings (#11795) @romgrk +- [DataGrid] Add support for dialogs in menu actions (#11909) @cherniavskii +- [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11609) @pcorpet +- [DataGrid] Fix incorrect computation of `lastPage` in `GridPagination` (#11958) @MBilalShafi +- [DataGrid] Improve vertical scrolling performance (#11924) @romgrk +- [l10n] Improve Danish (da-DK) locale (#11877) @ShahrazH + +#### `@mui/x-data-grid-pro@7.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@v7.0.0-beta.2`. + +#### `@mui/x-data-grid-premium@v7.0.0-beta.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.2`, plus: + +- [DataGridPremium] Fix autosize grouping cell (#11870) @romgrk +- [DataGridPremium] Fix clipboard paste not working with Caps Lock enabled (#11965) @shaharyar-shamshi + +### Date and Time Pickers + +#### `@mui/x-date-pickers@7.0.0-beta.2` + +- [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11936) @LukasTy +- [pickers] Limit the valid values of `TDate` (#11791) @flaviendelangle + +#### `@mui/x-date-pickers-pro@7.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@7.0.0-beta.2`. + +### Charts / `@mui/x-charts@7.0.0-beta.2` + +- [charts] Add `reverse` property to axes (#11899) @alexfauquette +- [charts] Allow series ids to be numbers (#11941) @alexfauquette +- [charts] Support UTC date formatting in tooltip (#11943) @shaharyar-shamshi + +### Tree View / `@mui/x-tree-view@7.0.0-beta.2` + +- [TreeView] Correctly detect if an item is expandable (#11963) @swalker326 +- [TreeView] Polish the default design & revise the simple version pages (#11529) @danilo-leal + +### License + +#### Breaking changes + +- If you're using the [commercial license](https://next.mui.com/x/introduction/licensing), you need to update the import path: + + ```diff + -import { LicenseInfo } from '@mui/x-license-pro'; + +import { LicenseInfo } from '@mui/x-license'; + ``` + +`@mui/x-license@7.0.0-beta.2` + +- [license] Rename `@mui/x-license-pro` to `@mui/x-license` (#11938) @cherniavskii + +### Docs + +- [docs] Add a note about `AdapterDateFnsV3` on the Getting Started page (#11985) @flaviendelangle +- [docs] Add missing `Charts` breaking change steps (#11971) @alexfauquette +- [docs] Fix `ChartsTooltip` typo (#11961) @thisisharsh7 +- [docs] Refactor `Localization` documentation sections (#11989) @LukasTy +- [docs] Use "cannot" instead of "can't" or "can not" (#11986) @flaviendelangle +- [docs] Add quick fixes to the migration guide (#11806) @danilo-leal +- [docs] Avoid use of shorthand (#12000) @oliviertassinari +- [docs] Avoid the use of MUI Core @oliviertassinari +- [docs] Fix image size and dark mode @oliviertassinari +- [docs] Follow blank line convention with use client @oliviertassinari +- [docs] Stable layout between light and dark mode @oliviertassinari + +### Core + +- [core] Add `docs:serve` script (#11935) @cherniavskii +- [core] Bump monorepo (#12001) @cherniavskii +- [core] Deprecate `LicenseInfo` re-exports (#11956) @cherniavskii +- [core] Fix `test_types` failing on the `next` branch (#11944) @cherniavskii +- [core] Fix failing `test_static` on the next branch (#11977) @cherniavskii +- [core] Flatten grid packages folder (#11946) @cherniavskii +- [core] Improve license info deprecation message (#11974) @cherniavskii +- [core] Integrate changes from Core #40842 PR (#11801) @michaldudak +- [core] Move next config to ESM (#11882) @Janpot +- [core] Add auto-message on closed issues (#11805) @michelengelen +- [core] Simplify bug reproduction (#11849) @oliviertassinari +- [core] Fix npm reference @oliviertassinari +- [core] Normalize issue template @oliviertassinari + +## 7.0.0-beta.1 + +_Feb 1, 2024_ + +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 and Time 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_ -We are glad to announce MUI X v7 beta! +We are glad to announce MUI X v7 beta! This version has several improvements, bug fixes, and exciting features 🎉. We want to offer a big thanks to the 7 contributors who made this release possible ✨: @@ -65,7 +809,7 @@ Same changes as in `@mui/x-data-grid@7.0.0-beta.0`. Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@7.0.0-beta.0` @@ -204,7 +948,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.9`, plus: - [DataGridPremium] Allow aggregation to be applied for non-aggregable columns (#11574) @MBilalShafi - [DataGridPremium] Allow programmatically grouping non-groupable columns (#11539) @MBilalShafi -### Date Pickers +### Date and Time Pickers #### Breaking changes @@ -231,7 +975,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`. - [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11689) @alexfauquette - [charts] Fix default `stackOffset` for `LineChart` (#11647) @alexfauquette -- [charts] Remove a TS ignore (#11688) @alexfauquette +- [charts] Remove a TypeScript ignore (#11688) @alexfauquette ### Tree View @@ -489,7 +1233,7 @@ Same changes as in `@mui/x-data-grid@7.0.0-alpha.8`. Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.8`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@7.0.0-alpha.8` @@ -579,7 +1323,7 @@ Same changes as in `@mui/x-data-grid@7.0.0-alpha.7`. Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.7`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@7.0.0-alpha.7` @@ -660,7 +1404,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.7`. - [core] Fix release changelog (#11496) @romgrk - [core] Fix use of ::before & ::after (#11515) @oliviertassinari - [core] Localize the issue template to MUI X (#11511) @oliviertassinari -- [core] Regen api files (#11542) @flaviendelangle +- [core] Regenerate API files (#11542) @flaviendelangle - [core] Remove issue emoji @oliviertassinari - [core] Sync the release instructions with MUI Core @oliviertassinari - [core] Yaml format match most common convention @oliviertassinari @@ -703,7 +1447,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss - The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types. The `filterModel` still accepts strings as values for `date` and `dateTime` column types, - but all updates to the `filterModel` coming from the UI (e.g. filter panel) will set the value as a `Date` object. + but all updates to the `filterModel` coming from the UI (for example filter panel) will set the value as a `Date` object. #### `@mui/x-data-grid@7.0.0-alpha.6` @@ -721,7 +1465,7 @@ Same changes as in `@mui/x-data-grid@7.0.0-alpha.6`. Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.6`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@7.0.0-alpha.6` @@ -789,7 +1533,7 @@ Same changes as in `@mui/x-data-grid@7.0.0-alpha.5`. Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`. -### Date Pickers +### Date and Time Pickers #### Breaking changes @@ -914,7 +1658,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus: ### Core - [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi -- [github] Update `no-response` workflow (#11369) @MBilalShafi +- [infra] Update `no-response` workflow (#11369) @MBilalShafi - [test] Fix flaky screenshots (#11388) @cherniavskii ## 7.0.0-alpha.4 @@ -973,7 +1717,7 @@ Same changes as in `@mui/x-data-grid@7.0.0-alpha.4`, plus: Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.4`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@7.0.0-alpha.4` @@ -1024,7 +1768,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos - The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are no longer prefixed with `unstable_`. -- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#DataGrid-prop-filterDebounceMs) prop to customize filter debounce time. +- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#data-grid-prop-filterDebounceMs) prop to customize filter debounce time. - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead. @@ -1073,7 +1817,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.3`, plus: - [DataGridPremium] Make Cell selection feature stable (#11246) @MBilalShafi - [DataGridPremium] Make Clipboard paste feature stable (#11248) @MBilalShafi -### Date Pickers +### Date and Time Pickers #### Breaking changes @@ -1083,7 +1827,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.3`, plus: The Firefox browser currently does not support this behavior because the [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) API is not yet implemented. ```ts - import { Settings } from 'luxon'; + import { Settings, Info } from 'luxon'; Settings.defaultWeekSettings = { firstDay: 1, @@ -1152,7 +1896,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`. - [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11144) @michelengelen - [charts] Apply `labelStyle` and `tickLabelStyle` props on `` (#11180) @akamfoad -- [charts] Fix TS config (#11259) @alexfauquette +- [charts] Fix TypeScript config (#11259) @alexfauquette - [charts] Fix error with empty dataset (#11063) @alexfauquette - [charts] Fix export strategy (#11235) @alexfauquette - [charts] Remove outdated prop-types (#11045) @alexfauquette @@ -1210,7 +1954,7 @@ Same changes as in `@mui/x-data-grid@7.0.0-alpha.2`. Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.2`. -### Date Pickers +### Date and Time Pickers #### Breaking changes @@ -1316,7 +2060,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss - 🐞 Bugfixes - 📚 Documentation improvements -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@7.0.0-alpha.1` / `@mui/x-date-pickers-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') @@ -1812,7 +2556,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.0`, plus: - [DataGridPremium] Render aggregation label when `renderHeader` is used (#10936) @cherniavskii -### Date Pickers +### Date and Time Pickers #### Breaking changes @@ -1873,6 +2617,268 @@ 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.7 + +_Mar 14, 2024_ + +We'd like to offer a big thanks to @LukasTy who made this release possible. + +### Date Pickers + +#### `@mui/x-date-pickers@6.19.7` + +- [pickers] Keep the existing time when looking for closest enabled date (#12410) @LukasTy + +#### `@mui/x-date-pickers-pro@6.19.7` [![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.7`. + +### Docs + +- [docs] Add Pickers custom start of week section (#12425) @LukasTy + +## 6.19.6 + +_Mar 1, 2024_ + +We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨: + +- 🌍 Improve Korean (ko-KR) and Chinese (zh-CN) locales on the Pickers +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.19.6` + +- [DataGrid] Fix error when existing rows are passed to `replaceRows` (@martijn-basesoft) + +#### `@mui/x-data-grid-pro@6.19.6` [![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.6`. + +#### `@mui/x-data-grid-premium@6.19.6` [![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.6`, plus: + +- [DataGridPremium] Make clipboard copy respect the sorting during cell selection (#12255) @MBilalShafi + +### Date and Time Pickers + +#### `@mui/x-date-pickers@6.19.6` + +- [l10n] Improve Chinese (zh-CN) locale (#12250) @headironc +- [l10n] Improve Korean (ko-KR) locale (#12186) @Luzi + +#### `@mui/x-date-pickers-pro@6.19.6` [![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.6`. + +### Docs + +- [docs] Update lazy loading demo to show skeleton rows during initial rows fetch (#12062) @cherniavskii + +## 6.19.5 + +_Feb 23, 2024_ + +We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨: + +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.19.5` + +- [DataGrid] Fix styling grid filter input single select (#12079) @FreakDroid + +#### `@mui/x-data-grid-pro@6.19.5` [![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.5`. + +#### `@mui/x-data-grid-premium@6.19.5` [![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.5`. + +### Date and Time Pickers + +#### `@mui/x-date-pickers@6.19.5` + +- [pickers] Fix `referenceDate` day calendar focus (#12136) @LukasTy +- [pickers] Fix styling props propagation to `DateTimePickerTabs` (#12131) @LukasTy + +#### `@mui/x-date-pickers-pro@6.19.5` [![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.5`. + +### Charts / `@mui/x-charts@6.19.5` + +- [charts] Allow to skip animation on sparkline bar (#12160) @alexfauquette + +### Docs + +- [docs] Clarify Pickers 'Component composition' section (#12147) @LukasTy +- [docs] Fix 301 redirection to StackBlitz @oliviertassinari +- [docs] Fix 301 to Material UI @oliviertassinari +- [docs] Fix 301 to Material UI @oliviertassinari +- [docs] Fix 404 links to translation source @oliviertassinari +- [docs] Fix dead link to translations @oliviertassinari +- [docs] Fix the Treemap illustration (#12189) @danilo-leal +- [docs] Fix typo for `AdapterDateFnsV3` (#12037) @flaviendelangle +- [docs] Improve performance on Charts entry point @oliviertassinari +- [docs] Move Heatmap to pro (#12170) @alexfauquette +- [docs] Remove Charts installation next tag call-out (#12133) @LukasTy +- [docs] Removed `focused` prop from demo (#12126) @michelengelen +- [docs] Add missing Heatmap pro icon @oliviertassinari +- [docs] Add more illustrations to the Overview page (#12041) @danilo-leal +- [docs] Avoid use of shorthand (#12009) @oliviertassinari + +### Core + +- [core] Fix CI @oliviertassinari +- [core] Fix docs link check (#12137) @LukasTy + +## 6.19.4 + +_Feb 9, 2024_ + +We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨: + +- 🌍 Improve Danish (da-DK) locale on the Data Grid (#11972) @ShahrazH +- 🐞 Bugfixes +- 📚 Documentation improvements + +### Data Grid + +#### `@mui/x-data-grid@6.19.4` + +- [DataGrid] Add support for dialogs in menu actions (#11937) @cherniavskii +- [DataGrid] Allow passing readonly arrays to `pageSizeOptions` prop (#11992) @pcorpet +- [DataGrid] Fix row reorder with cell selection (#11878) @PEsteves8 +- [DataGrid] Replace `eval` with `new Function` (#11962) @cherniavskii +- [l10n] Improve Danish (da-DK) locale (#11972) @ShahrazH + +#### `@mui/x-data-grid-pro@6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-data-grid@6.19.4`. + +#### `@mui/x-data-grid-premium@6.19.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan') + +Same changes as in `@mui/x-data-grid-pro@6.19.4`, plus: + +- [DataGridPremium] Fix autosize grouping cell (#11990) @romgrk +- [DataGridPremium] Fix error after closing print export (#11889) @cherniavskii + +### Date and Time Pickers + +#### `@mui/x-date-pickers@6.19.4` + +- [pickers] Avoid relying on locale in Luxon `isWithinRange` method (#11940) @LukasTy + +#### `@mui/x-date-pickers-pro@6.19.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan') + +Same changes as in `@mui/x-date-pickers@6.19.4`. + +### Charts / `@mui/x-charts@6.19.4` + +- [charts] Add `reverse` property to axes (#11959) @alexfauquette +- [charts] Allow series ids to be numbers (#11960) @alexfauquette +- [charts] Fix Proptypes error by supporting string values for axes (#11953) @alexfauquette + +### Docs + +- [docs] Add a note about `AdapterDateFnsV3` on the Getting Started page (#11987) @flaviendelangle +- [docs] Avoid the use of MUI Core @oliviertassinari +- [docs] Fix API links (#11930) @alexfauquette +- [docs] Fix `ChartsTooltip` typo (#11967) @thisisharsh7 +- [docs] Refactor `Localization` documentation sections (#11997) @LukasTy +- [code] Simplify bug reproduction (#11932) @alexfauquette + +## 6.19.3 + +_Feb 1, 2024_ + +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 and Time 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 and Time 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_ @@ -1921,7 +2927,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss import { de } from 'date-fns/locale/de'; ``` -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.19.0` @@ -1968,7 +2974,7 @@ Same changes as in `@mui/x-data-grid@6.18.7`. Same changes as in `@mui/x-data-grid-pro@6.18.7`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.18.7` @@ -2010,7 +3016,7 @@ Same changes as in `@mui/x-data-grid@6.18.6`. Same changes as in `@mui/x-data-grid-pro@6.18.6`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.18.6` @@ -2059,7 +3065,7 @@ Same changes as in `@mui/x-data-grid@6.18.5`. Same changes as in `@mui/x-data-grid-pro@6.18.5`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.18.5` @@ -2102,7 +3108,7 @@ Same changes as in `@mui/x-data-grid@6.18.4`. Same changes as in `@mui/x-data-grid-pro@6.18.4`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.18.4` @@ -2148,7 +3154,7 @@ Same changes as in `@mui/x-data-grid-pro@6.18.3`, plus: - [DataGridPremium] Fix aggregated column ignoring column definition changes (#11176) @cherniavskii - [DataGridPremium] Fix custom filter operators not working on aggregated column (#11201) @cherniavskii -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.18.3` @@ -2204,7 +3210,7 @@ Same changes as in `@mui/x-data-grid@6.18.2`. Same changes as in `@mui/x-data-grid-pro@6.18.2`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.18.2` @@ -2261,7 +3267,7 @@ Same changes as in `@mui/x-data-grid-pro@6.18.1`, plus: - [DataGridPremium] Render aggregation label when `renderHeader` is used (#10961) @cherniavskii -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.18.1` @@ -2320,7 +3326,7 @@ Same changes as in `@mui/x-data-grid@6.18.0`. Same changes as in `@mui/x-data-grid-pro@6.18.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.18.0` @@ -2385,7 +3391,7 @@ Same changes as in `@mui/x-data-grid-pro@6.17.0`, plus: - [DataGridPremium] Fix `sum` aggregation to ignore non-numeric values (#10730) @cherniavskii - [DataGridPremium] Fix cell selection throwing index error on second page and beyond (#10784) @MBilalShafi -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.17.0` @@ -2439,7 +3445,7 @@ Same changes as in `@mui/x-data-grid@6.16.3`. Same changes as in `@mui/x-data-grid-pro@6.16.3`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.16.3` @@ -2515,7 +3521,7 @@ Same changes as in `@mui/x-data-grid@6.16.2`, plus: Same changes as in `@mui/x-data-grid-pro@6.16.2`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.16.2` @@ -2610,7 +3616,7 @@ Same changes as in `@mui/x-data-grid@6.16.1`. Same changes as in `@mui/x-data-grid-pro@6.16.1`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.16.1` @@ -2686,7 +3692,7 @@ Same changes as in `@mui/x-data-grid@6.16.0`, plus: Same changes as in `@mui/x-data-grid-pro@6.16.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.16.0` @@ -2765,7 +3771,7 @@ Same changes as in `@mui/x-data-grid@6.15.0`, plus: Same changes as in `@mui/x-data-grid-pro@6.15.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.15.0` @@ -2844,7 +3850,7 @@ Same changes as in `@mui/x-data-grid-pro@6.14.0`, plus: - [DataGridPremium] Fix clipboard import cutting off at 100 rows (#9930) @gitstart -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.14.0` @@ -2925,7 +3931,7 @@ Same changes as in `@mui/x-data-grid-pro@6.13.0`, plus: - [DataGridPremium] Fix aggregated column resizing (#10079) @cherniavskii -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.13.0` @@ -2997,7 +4003,7 @@ Same changes as in `@mui/x-data-grid@6.12.1`. Same changes as in `@mui/x-data-grid-pro@6.12.1`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.12.1` @@ -3053,7 +4059,7 @@ Same changes as in `@mui/x-data-grid@6.12.0`. Same changes as in `@mui/x-data-grid-pro@6.12.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.12.0` @@ -3124,7 +4130,7 @@ Same changes as in `@mui/x-data-grid@6.11.2`. Same changes as in `@mui/x-data-grid-pro@6.11.2`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.11.2` @@ -3175,7 +4181,7 @@ Same changes as in `@mui/x-data-grid@6.11.1`. Same changes as in `@mui/x-data-grid-pro@6.11.1`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.11.1` @@ -3244,7 +4250,7 @@ Same changes as in `@mui/x-data-grid@6.11.0`. Same changes as in `@mui/x-data-grid-pro@6.11.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.11.0` @@ -3332,7 +4338,7 @@ Same changes as in `@mui/x-data-grid-pro@6.10.2`, plus: - [DataGridPremium] Allow to customize grouping cell offset (#9417) @cherniavskii -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.10.2` @@ -3401,7 +4407,7 @@ Same changes as in `@mui/x-data-grid@6.10.1`, plus: Same changes as in `@mui/x-data-grid-pro@6.10.1`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.10.1` @@ -3467,7 +4473,7 @@ Same changes as in `@mui/x-data-grid@6.10.0`. Same changes as in `@mui/x-data-grid-pro@6.10.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.10.0` @@ -3537,7 +4543,7 @@ Same changes as in `@mui/x-data-grid-pro@6.9.2`, plus: - [DataGridPremium] Auto-scroll when making range selection (#8661) @m4theushw -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.9.2` @@ -3584,7 +4590,7 @@ We'd like to offer a big thanks to the 13 contributors who made this release pos #### `@mui/x-data-grid@6.9.1` -- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii +- [DataGrid] Add Joy UI `tooltip` and `loadingOverlay` slots (#9028) @cherniavskii - [DataGrid] Add section about enabling pagination on Pro and Premium (#8759) @joserodolfofreitas - [DataGrid] Don't forward `editCellState` prop to DOM element (#9501) @m4theushw - [DataGrid] Add experimental API for faster filtering performance (#9254) @romgrk @@ -3603,7 +4609,7 @@ Same changes as in `@mui/x-data-grid@6.9.1`, plus: Same changes as in `@mui/x-data-grid-pro@6.9.1`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.9.1` @@ -3685,7 +4691,7 @@ Same changes as in `@mui/x-data-grid@6.9.0`. Same changes as in `@mui/x-data-grid-pro@6.9.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.9.0` @@ -3715,7 +4721,7 @@ Same changes as in `@mui/x-date-pickers@6.9.0`. - [docs] Fix random screenshot generation (#9364) @cherniavskii - [docs] Remove random generation from chart doc example (#9343) @flaviendelangle - [docs] Sync h1 with sidenav link (#9252) @oliviertassinari -- [docs] Use the mui-x Stack Overflow tag (#9352) @oliviertassinari +- [docs] Use the mui-x Stack Overflow tag (#9352) @oliviertassinari ### Core @@ -3761,7 +4767,7 @@ Same changes as in `@mui/x-data-grid@6.8.0`. Same changes as in `@mui/x-data-grid-pro@6.8.0`. -### Date Pickers +### Date and Time Pickers #### `@mui/x-date-pickers@6.8.0` @@ -4042,8 +5048,8 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos - [DataGrid] Fix DataGrid rendering in JSDOM (#8968) @cherniavskii - [DataGrid] Fix layout when rendered inside a parent with `display: grid` (#8577) @cherniavskii -- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp -- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii +- [DataGrid] Add Joy UI icon slots (#8940) @siriwatknp +- [DataGrid] Add Joy UI pagination slot (#8871) @cherniavskii - [DataGrid] Extract `baseChip` slot (#8748) @cherniavskii - [DataGridPremium] Implement Clipboard import (#7389) @cherniavskii - [l10n] Improve French (fr-FR) locale (#8825) @allereaugabriel @@ -4093,7 +5099,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss - [DataGrid] Fix falsy filter values not showing in filter button tooltip (#8550) @ithrforu - [DataGrid] Fix missing watermark in Pro and Premium packages (#8797) @cherniavskii - [DataGrid] Remove unwarranted warning log (#8847) @romgrk -- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii +- [DataGrid] Add Joy UI slots (`Select`, `SelectOption`, `InputLabel`, `FormControl`) (#8747) @cherniavskii - [DataGridPremium] Fix expanded groups being collapsed after calling `updateRows` (#8823) @cherniavskii ### `@mui/x-date-pickers@6.3.1` / `@mui/x-date-pickers-pro@6.3.1` @@ -4144,7 +5150,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos - [DataGrid] Add overlay classes to `gridClasses` (#8686) @lindapaiste - [DataGrid] Avoid passing `api` prop to div (#8679) @someden - [DataGrid] Fix 'ResizeObserver loop limit exceeded' error (#8744) @m4theushw -- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp +- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp - [DataGrid] Fix aggregation label alignment (#8694) @joserodolfofreitas - [DataGridPremium] Fix infinite loop when updating grouped rows (#8693) @cherniavskii - [DataGridPro] Fix error after updating `columns` and `columnGroupingModel` at once (#8730) @cherniavskii @@ -4206,7 +5212,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss #### Changes - [DataGrid] Add `getTogglableColumns` to `Hide all` and `Show all` actions (#8496) @MBilalShafi -- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii +- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii - [DataGrid] Fix print style when rendering inside Shadow DOM (#8656) @Bwatermelon - [DataGrid] Replace `GridAutoSizer` with `ResizeObserver` (#8091) @m4theushw - [DataGrid] Use stable ID for the placeholder filter item (#8603) @m4theushw @@ -6876,7 +7882,7 @@ You can find more information about the new api, including how to set those tran - [core] Add link to the security page on the `README` (#6073) @oliviertassinari - [core] Fix scroll restoration in the docs (#5938) @oliviertassinari - [core] Remove the Storybook (#6099) @flaviendelangle -- [core] Tag release as `next` in NPM (#6256) @m4theushw +- [core] Tag release as `next` in npm (#6256) @m4theushw - [core] Update monorepo (#6180) @flaviendelangle - [core] Use the `next` branch for Prettier (#6097) @flaviendelangle - [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari diff --git a/README.md b/README.md index 5e751d42d69b..3bbfeb09f669 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ From community guidance to critical business support, we're here to help. Read t Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes. Contributing to MUI X is about more than just issues and pull requests! -There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. +There are many other ways to [support MUI X](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. ## Changelog @@ -103,7 +103,7 @@ The [changelog](https://github.com/mui/mui-x/releases) is regularly updated to r ## Roadmap -Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/x/introduction/roadmap/). +Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/x/introduction/roadmap/). ## Security diff --git a/babel.config.js b/babel.config.js index 1019a75c3810..e57e327f19ee 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,25 +7,22 @@ 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'), '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'), - '@mui/markdown': '@mui/monorepo/packages/markdown', '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src', '@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'), @@ -36,7 +33,7 @@ const productionPlugins = [ ]; module.exports = function getBabelConfig(api) { - const useESModules = api.env(['legacy', 'modern', 'stable', 'rollup']); + const useESModules = api.env(['modern', 'stable', 'rollup']); const presets = [ [ @@ -157,12 +154,6 @@ module.exports = function getBabelConfig(api) { ], ], }, - legacy: { - plugins: [ - // IE11 support - '@babel/plugin-transform-object-assign', - ], - }, test: { sourceMaps: 'both', plugins: [ 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 569a43b6fb60..8178d76e1228 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 000000000000..b92e86f27e04 --- /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 10cc6a348fe1..5417a65f93e8 100644 --- a/templates/x-data-grid/src/demo.tsx +++ b/bug-reproductions/x-data-grid/src/demo.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGridPro } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; +import { DataGrid } from '@mui/x-data-grid'; -export default function DataGridProDemo() { +export default function Demo() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 100000, @@ -12,7 +12,7 @@ export default function DataGridProDemo() { return ( - diff --git a/templates/x-data-grid/template.json b/bug-reproductions/x-data-grid/template.json similarity index 100% rename from templates/x-data-grid/template.json rename to bug-reproductions/x-data-grid/template.json diff --git a/templates/x-data-grid/tsconfig.json b/bug-reproductions/x-data-grid/tsconfig.json similarity index 100% rename from templates/x-data-grid/tsconfig.json rename to bug-reproductions/x-data-grid/tsconfig.json diff --git a/changelogOld/CHANGELOG.v4.md b/changelogOld/CHANGELOG.v4.md index af9cc92f160a..662652efd208 100644 --- a/changelogOld/CHANGELOG.v4.md +++ b/changelogOld/CHANGELOG.v4.md @@ -310,8 +310,8 @@ Big thanks to the 8 contributors who made this release possible. Here are some h - [docs] Add missing API docs (#2167) @ZeeshanTamboli - [docs] Describe how to export custom rendered cells (#2194) @m4theushw -- [docs] Generate api doc for the GridExportCSVOptions interface (#2102) @flaviendelangle -- [docs] Handle generics in api doc generation (#2210) @flaviendelangle +- [docs] Generate API doc for the GridExportCSVOptions interface (#2102) @flaviendelangle +- [docs] Handle generics in API doc generation (#2210) @flaviendelangle ### Core @@ -1260,7 +1260,7 @@ Big thanks to the 8 contributors who made this release possible. Here are some h - [DataGrid] Rename `GridBaseComponentProps` type to `GridSlotComponentProps` (#1252) @DanailH - [DataGrid] Rename `useGridBaseComponentProps` hook to `useGridSlotComponentProps` (#1252) @DanailH - [DataGrid] Rename modules (#1292) @DanailH -- [DataGrid] Rename all events related to column reordering, e.g. `GRID_COL_REORDER_START` -> `GRID_COLUMN_REORDER_START` (#1299) @m4theushw +- [DataGrid] Rename all events related to column reordering, for example `GRID_COL_REORDER_START` -> `GRID_COLUMN_REORDER_START` (#1299) @m4theushw - [DataGrid] Methods `onColItemDragStart`, `onColHeaderDragOver`, `onColItemDragOver`, `onColItemDragEnter` removed from the grid API. Prefer listening to [column reordering events](https://mui.com/x/react-data-grid/column-ordering/) (#1299) @m4theushw - [DataGrid] Calling `apiRef.current.getColumnHeaderParams` returns a `GridColumnHeaderParams` instead of `GridColParams` (#1299) @m4theushw - [DataGrid] Events that follow the pattern `GRID_COLUMN_HEADER_xxx` will be called with a `GridColumnHeaderParams` instead of `GridColParams` (#1299) @m4theushw @@ -1475,7 +1475,7 @@ Big thanks to the 4 contributors who made this release possible. Here are some h - [DataGrid] Fix process is not defined (EXPERIMENTAL_ENABLED) (#1027) @leontastic - [DataGrid] Fix scrollbar size on windows (#1061) @dtassone - [DataGrid] Fix warning with v5 (#1038) @oliviertassinari -- [DataGrid] Resolve the api ref at the same time as any other ref (#990) @oliviertassinari +- [DataGrid] Resolve the apiRef at the same time as any other ref (#990) @oliviertassinari - [DataGrid] Use the disableDensitySelector to disable the DensitySelector (#1031) @DanailH - [DataGrid] Fix passing [] or undefined in sortModel prop (#1035) @dtassone - [XGrid] Fix server-side multi filters (#1029) @dtassone @@ -1501,7 +1501,7 @@ _Feb 5, 2021_ Big thanks to the 5 contributors who made this release possible. Here are some highlights ✨: - 🎁 Add getRowId prop (#972) @dtassone -- 🚀 Add streaming delete row api (#980) @dtassone +- 🚀 Add streaming delete row API (#980) @dtassone - 💅 Fix autoHeight (#940) @oliviertassinari - 🙌 Enable the data grid to work under strict mode (#933) @dtassone - ⚡️ Add component slots for toolbar and preference panel (#971) @DanailH @@ -1511,7 +1511,7 @@ Big thanks to the 5 contributors who made this release possible. Here are some h - [DataGrid] Add component slots for toolbar and preference panel (#971) @DanailH - [DataGrid] Add getRowId prop (#972) @dtassone -- [DataGrid] Add streaming delete row api (#980) @dtassone +- [DataGrid] Add streaming delete row API (#980) @dtassone - [DataGrid] Fix autoHeight (#940) @oliviertassinari - [DataGrid] Fix column reorder instability (#950) @dtassone - [DataGrid] Fix footer visual regression (#932) @dtassone @@ -1525,7 +1525,7 @@ Big thanks to the 5 contributors who made this release possible. Here are some h ### docs - [docs] Add sorting page in datagrid docs (#931) @dtassone -- [docs] Api page update with component slots (#969) @dtassone +- [docs] API page update with component slots (#969) @dtassone - [docs] Catch leaks ahread of time (#979) @oliviertassinari - [docs] Fix immutability with filter operator demos (#975) @dtassone - [docs] Improve docs of DataGrid about filter operators (#973) @SaskiaKeil @@ -1728,7 +1728,7 @@ Big thanks to the 4 contributors who made this release possible. Here are some h ### Docs -- [docs] Add missing props to DataGrid and XGrid api pages (#721) @DanailH +- [docs] Add missing props to DataGrid and XGrid API pages (#721) @DanailH - [docs] Fix wrong link anchor @oliviertassinari - [docs] Proxy production version @oliviertassinari @@ -1853,7 +1853,7 @@ _Nov 20, 2020_ ### Core -- [core] Prepare work for a future public state api (#533) @dtassone +- [core] Prepare work for a future public state API (#533) @dtassone - [core] Fix yarn prettier write @oliviertassinari - [test] Share karma setup (#576) @oliviertassinari @@ -1974,7 +1974,7 @@ You can find the documentation at this address: https://mui.com/x/react-data-gri ### @material-ui/x-grid@v4.0.0-alpha.1 / @material-ui/data-grid@v4.0.0-alpha.1 -- [DataGrid] Add api pages for data-grid and x-grid (#289) @dtassone +- [DataGrid] Add API pages for data-grid and x-grid (#289) @dtassone - [DataGrid] Add dark mode scrollbar (#282) @dtassone - [DataGrid] Better explain the limits of MIT vs commercial (#225) @oliviertassinari - [DataGrid] First v4 alpha version (#291) @dtassone diff --git a/changelogOld/CHANGELOG.v5.md b/changelogOld/CHANGELOG.v5.md index 90e58e28abf4..a544c6b2c162 100644 --- a/changelogOld/CHANGELOG.v5.md +++ b/changelogOld/CHANGELOG.v5.md @@ -295,7 +295,7 @@ We'd like to offer a big thanks to the 4 contributors who made this release poss ### Docs -- [docs] Fix the nested import on the api pages (#7134) @flaviendelangle +- [docs] Fix the nested import on the API pages (#7134) @flaviendelangle - [docs] Keep track of the localization completion (#7099) @alexfauquette - [docs] Update localization doc to use existing locale (#7104) @LukasTy @@ -495,7 +495,7 @@ We'd like to offer a big thanks to the 5 contributors who made this release poss - [CalendarPicker] Don't move to closest enabled date when `props.date` contains a disabled date (#6537) @flaviendelangle - [DateRangePicker] Fix calendar day outside of month layout shifting on hover (pick #6448) (#6538) @alexfauquette -- [pickers] Fix Typescript issues (#6510) @flaviendelangle +- [pickers] Fix TypeScript issues (#6510) @flaviendelangle ### Docs @@ -599,7 +599,7 @@ We'd like to offer a big thanks to the 5 contributors who made this release poss - [pickers] Add Finnish (fi-FI) locale to pickers (#6219) (#6230) @PetroSilenius - [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia -- [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle +- [pickers] Fix usage with TypeScript 4.8 (#6229) @flaviendelangle - [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette ### Docs @@ -641,7 +641,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss ### Core -- [core] Update to Typescript 4.8.3 (#6136) @flaviendelangle +- [core] Update to TypeScript 4.8.3 (#6136) @flaviendelangle - [core] Update RFC template (#6100) @bytasv ## 5.17.2 @@ -832,7 +832,7 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos ### Core - [core] Clarify the scope of the license key used for tests and documentation (#5824) @oliviertassinari -- [core] Fix Typescript error on field hooks (#5892) @flaviendelangle +- [core] Fix TypeScript error on field hooks (#5892) @flaviendelangle - [core] Memoize `columns` in `useDemoData` hook (#5848) @cherniavskii - [core] Remove Firefox from the BrowserStack list (#5874) @DanailH - [core] Small changes to the release script (#5840) @m4theushw @@ -874,7 +874,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss ### Core - [core] Upgrade monorepo (#5771, #5797) @cherniavskii -- [core] Various TS improvements (#5556) @flaviendelangle +- [core] Various TypeScript improvements (#5556) @flaviendelangle - [license] Give more context in the missing license (#5731) @oliviertassinari - [license] Only log an error type once (#5730) @oliviertassinari - [test] Increase timeout to take print screenshot (#5799) @m4theushw @@ -1140,7 +1140,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos - [DataGrid] Add Romanian (ro-RO) locale (#5345) @rolule - [DataGrid] Export Norwegian (nb-NO) locale (#5407) @cherniavskii - [DataGrid] Fix broken "start editing" integration with Japanese (#5414) @mnajdova -- [DataGrid] Fix "stop editing" integration with IME e.g. Japanese (#5257) @Gumichocopengin8 +- [DataGrid] Fix "stop editing" integration with IME, for example Japanese (#5257) @Gumichocopengin8 - [DataGrid] Fix dimensions computation with `autoHeight` and scroll x (#5401) @flaviendelangle - [DataGrid] Improve Slovak (sk-SK) locale (#5332) @msidlo - [DataGrid] Mention Premium plan in error messages and docs warnings (#5328) @cherniavskii @@ -1390,7 +1390,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos - [core] Avoid Order ID to refer to GitHub issues/PRs (#5005) @oliviertassinari - [core] Improve the workflow for incomplete issues (#5012) @mnajdova - [core] Remove dead code on row grouping tree creation (#4945) @flaviendelangle -- [core] Use new cache api for the row grouping last model tracking (#4980) @flaviendelangle +- [core] Use new cache API for the row grouping last model tracking (#4980) @flaviendelangle - [core] Ensure that PRs have atleast 1 label (#5011) @DanailH - [core] Fix trailing-space @oliviertassinari - [core] Stop Renovate PR updates when PR is on hold (#5020) @cherniavskii @@ -1624,7 +1624,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos - [core] Fix naming collision (#4853) @alexfauquette - [core] Prevent out-of-memory when type-checking in CI (#4697) @flaviendelangle - [core] Remove `rowsCache` from state (#4480) @m4theushw -- [core] Rework `DayPicker` api (#4783) @flaviendelangle +- [core] Rework `DayPicker` API (#4783) @flaviendelangle - [core] Update `x-license-pro` license to handle premium package (#4315) @DanailH - [core] Update monorepo & version (#4789) @oliviertassinari - [core] Update monorepo (#4772) @flaviendelangle @@ -1743,7 +1743,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss - [core] Fix npm page description mistake (#4364) @oliviertassinari - [core] Fix typos and JSDoc (#4406) @flaviendelangle - [core] Move away for the event system to trigger pipe processings (#4378) @flaviendelangle -- [core] Small fixes TS on pickers (#4461) @flaviendelangle +- [core] Small fixes TypeScript on pickers (#4461) @flaviendelangle - [core] Unify tests (#4368) @flaviendelangle - [core] Enforce `noImplicitAny` in `docs` folder (#4412) @cherniavskii @@ -1994,7 +1994,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos - [DataGrid] Allow to navigate between cells with keyboard once inside an `actions` column (#3375) @m4theushw - [DataGrid] Fix desynchronization between rows and header when sorting (#4058) @alexfauquette - [DataGrid] Clean and document the columns selector (#4010) @flaviendelangle -- [DataGrid] Deprecate and stop typing the api params of `GridCellParams`/`GridValueGetterParams` and affiliated (#4089) @ flaviendelangle +- [DataGrid] Deprecate and stop typing the API params of `GridCellParams`/`GridValueGetterParams` and affiliated (#4089) @ flaviendelangle - [DataGrid] Differentiate the Pro and Community versions of `GridState`, `GridApi` and `GridApiRef` (#3648) @flaviendelangle - [DataGrid] Fix column selection for print export (#3917) @alexfauquette - [DataGrid] Fix horizontal scroll not working on empty grid (#3821) @cherniavskii @@ -2386,7 +2386,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some - [DataGrid] Close other actions menus when opening a new one (#3492) @m4theushw - [DataGrid] Deprecate `getValue` param from the cell and row params (#3369) @flaviendelangle - [DataGrid] Fix value parsing in date input (#3307) @alexfauquette -- [DataGrid] Fix can't enter 0 on numeric column (#3491) @m4theushw +- [DataGrid] Fix cannot enter 0 on numeric column (#3491) @m4theushw - [DataGrid] Fix scrolling bug when an action is focused (#3483) @alexfauquette - [DataGrid] Remove `line-height` from `GridCell` (#3446) @DanailH - [DataGridPro] Block edition for auto-generated rows (#3547) @flaviendelangle @@ -2527,7 +2527,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some - [core] Fix `yarn prettier` script (#3292) @oliviertassinari - [core] Improve tests for Tree Data (#3366) @flaviendelangle - [core] Never import directly from the `__modules__` folder in the `x-data-grid-generator` package (#3379) @flaviendelangle -- [core] Transition to a new Stack Overflow tag (#3308) @oliviertassinari +- [core] Transition to a new Stack Overflow tag (#3308) @oliviertassinari - [core] Update monorepo (#3370) @flaviendelangle - [core] Use pre-processors for sorting and filtering (#3318) @flaviendelangle - [test] Replace `useFakeTimers` (#3323) @m4theushw @@ -3001,7 +3001,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some - [DataGrid] Remove the `state` prop and use the `initialState` prop (#2848) @flaviendelangle Note that `initialState` only allows the `preferencePanel`, `filter.filterModel` and `sort.sortModel` keys. - To fully control the state, use the feature's model prop and change callback (e.g. `filterModel` and `onFilterModelChange`). + To fully control the state, use the feature's model prop and change callback (for example `filterModel` and `onFilterModelChange`). ```diff `${value}mm`; + +export default function FormatterDemoNoSnap() { + return ( + + context.location === 'tick' + ? `${month.slice(0, 3)} \n2023` + : `${month} 2023`, + }, + ]} + series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]} + {...otherSetting} + /> + ); +} diff --git a/docs/data/charts/axis/FormatterDemoNoSnap.tsx b/docs/data/charts/axis/FormatterDemoNoSnap.tsx new file mode 100644 index 000000000000..13ecee9dcaab --- /dev/null +++ b/docs/data/charts/axis/FormatterDemoNoSnap.tsx @@ -0,0 +1,123 @@ +import * as React from 'react'; +import { axisClasses } from '@mui/x-charts/ChartsAxis'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const otherSetting = { + height: 300, + yAxis: [{ label: 'rainfall (mm)' }], + grid: { horizontal: true }, + sx: { + [`& .${axisClasses.left} .${axisClasses.label}`]: { + transform: 'translateX(-10px)', + }, + }, +}; + +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'January', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'February', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'March', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'April', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'August', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'September', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'October', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'November', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'December', + }, +]; + +const valueFormatter = (value: number | null) => `${value}mm`; + +export default function FormatterDemoNoSnap() { + return ( + + context.location === 'tick' + ? `${month.slice(0, 3)} \n2023` + : `${month} 2023`, + }, + ]} + series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]} + {...otherSetting} + /> + ); +} diff --git a/docs/data/charts/axis/FormatterDemoNoSnap.tsx.preview b/docs/data/charts/axis/FormatterDemoNoSnap.tsx.preview new file mode 100644 index 000000000000..2184f51b947f --- /dev/null +++ b/docs/data/charts/axis/FormatterDemoNoSnap.tsx.preview @@ -0,0 +1,15 @@ + + context.location === 'tick' + ? `${month.slice(0, 3)} \n2023` + : `${month} 2023`, + }, + ]} + series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]} + {...otherSetting} +/> \ No newline at end of file diff --git a/docs/data/charts/axis/GridDemo.js b/docs/data/charts/axis/GridDemo.js new file mode 100644 index 000000000000..b3eb264c092d --- /dev/null +++ b/docs/data/charts/axis/GridDemo.js @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { axisClasses } from '@mui/x-charts/ChartsAxis'; +import { chartsGridClasses } from '@mui/x-charts/ChartsGrid'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const chartSetting = { + yAxis: [{ label: 'rainfall (mm)' }], + height: 300, +}; +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'Jan', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'Fev', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'Mar', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'Apr', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'Aug', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'Sept', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'Oct', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'Nov', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'Dec', + }, +]; + +const valueFormatter = (value) => `${value}mm`; + +export default function GridDemo() { + return ( + + ); +} diff --git a/docs/data/charts/axis/GridDemo.tsx b/docs/data/charts/axis/GridDemo.tsx new file mode 100644 index 000000000000..056caeacb573 --- /dev/null +++ b/docs/data/charts/axis/GridDemo.tsx @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { axisClasses } from '@mui/x-charts/ChartsAxis'; +import { chartsGridClasses } from '@mui/x-charts/ChartsGrid'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const chartSetting = { + yAxis: [{ label: 'rainfall (mm)' }], + height: 300, +}; +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'Jan', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'Fev', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'Mar', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'Apr', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'Aug', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'Sept', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'Oct', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'Nov', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'Dec', + }, +]; + +const valueFormatter = (value: number | null) => `${value}mm`; + +export default function GridDemo() { + return ( + + ); +} diff --git a/docs/data/charts/axis/GridDemo.tsx.preview b/docs/data/charts/axis/GridDemo.tsx.preview new file mode 100644 index 000000000000..36f5c429855e --- /dev/null +++ b/docs/data/charts/axis/GridDemo.tsx.preview @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/docs/data/charts/axis/ReverseExampleNoSnap.js b/docs/data/charts/axis/ReverseExampleNoSnap.js new file mode 100644 index 000000000000..4a948a496aab --- /dev/null +++ b/docs/data/charts/axis/ReverseExampleNoSnap.js @@ -0,0 +1,104 @@ +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'; +import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; +import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; + +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 a86cb8622a27..71cbc5d78c6e 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -41,6 +41,7 @@ Those demonstrations use the defaultized values. The axis type is specified by its property `scaleType` which expect one of the following values: - `'band'`: Split the axis in equal band. Mostly used for bar charts. +- `'point'`: Split the axis in equally spaced points. Mostly used for line charts on categories. - `'linear'`, `'log'`, `'sqrt'`: Map numerical values to the space available for the chart. `'linear'` is the default behavior. - `'time'`, `'utc'`: Map JavaScript `Date()` object to the space available for the chart. @@ -51,13 +52,25 @@ Which expects an array of value coherent with the `scaleType`: - For `'linear'`, `'log'`, or `'sqrt'` it should contain numerical values - For `'time'` or `'utc'` it should contain `Date()` objects -- For `'band'` it can contain `string`, or numerical values +- For `'band'` or `'point'` it can contain `string`, or numerical values Some series types also require specific axis attributes: - line plots require an `xAxis` to have `data` provided - bar plots require an `xAxis` with `scaleType='band'` and some `data` provided. +### Axis formatter + +Axis data can be displayed in the axes ticks and the tooltip. +To modify how data is displayed use the `valueFormatter` property. + +The second argument of `valueFormatter` provides some rendering context for advanced use cases. + +In the next demo, `valueFormatter` is used to shorten months and introduce a breaking space for ticks only. +To distinguish tick and tooltip, it uses the `context.location`. + +{{"demo": "FormatterDemoNoSnap.js"}} + ### Axis sub domain By default, the axis domain is computed such that all your data is visible. @@ -74,6 +87,32 @@ 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"}} + +## Grid + +You can add a grid in the background of the cartesian chart with the `grid` prop. + +It accepts an object with `vertical` and `horizontal` properties. +Setting those properties to `true` will display the grid lines. + +If you use composition you can pass those properties to the `` component. + +```jsx + + + + + +``` + +{{"demo": "GridDemo.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 000000000000..da4a899c22ab --- /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/GridDemo.js b/docs/data/charts/bars/GridDemo.js new file mode 100644 index 000000000000..b6861f237d03 --- /dev/null +++ b/docs/data/charts/bars/GridDemo.js @@ -0,0 +1,113 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const chartSetting = { + xAxis: [ + { + label: 'rainfall (mm)', + }, + ], + width: 500, + height: 400, +}; +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'Jan', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'Fev', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'Mar', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'Apr', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'Aug', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'Sept', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'Oct', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'Nov', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'Dec', + }, +]; + +const valueFormatter = (value) => `${value}mm`; + +export default function GridDemo() { + return ( + + ); +} diff --git a/docs/data/charts/bars/GridDemo.tsx b/docs/data/charts/bars/GridDemo.tsx new file mode 100644 index 000000000000..a063c4a8d9cc --- /dev/null +++ b/docs/data/charts/bars/GridDemo.tsx @@ -0,0 +1,113 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; + +const chartSetting = { + xAxis: [ + { + label: 'rainfall (mm)', + }, + ], + width: 500, + height: 400, +}; +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'Jan', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'Fev', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'Mar', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'Apr', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'Aug', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'Sept', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'Oct', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'Nov', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'Dec', + }, +]; + +const valueFormatter = (value: number | null) => `${value}mm`; + +export default function GridDemo() { + return ( + + ); +} diff --git a/docs/data/charts/bars/GridDemo.tsx.preview b/docs/data/charts/bars/GridDemo.tsx.preview new file mode 100644 index 000000000000..16f5e9ea3a1e --- /dev/null +++ b/docs/data/charts/bars/GridDemo.tsx.preview @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/docs/data/charts/bars/TickPlacementBars.js b/docs/data/charts/bars/TickPlacementBars.js new file mode 100644 index 000000000000..df201e0c5943 --- /dev/null +++ b/docs/data/charts/bars/TickPlacementBars.js @@ -0,0 +1,184 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Radio from '@mui/material/Radio'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { axisClasses } from '@mui/x-charts/ChartsAxis'; + +function TickParamsSelector({ + tickPlacement, + tickLabelPlacement, + setTickPlacement, + setTickLabelPlacement, +}) { + return ( + + + + tickPlacement + + setTickPlacement(event.target.value)} + > + } label="start" /> + } label="end" /> + } label="middle" /> + } + label="extremities" + /> + + + + + tickLabelPlacement + + setTickLabelPlacement(event.target.value)} + > + } label="tick" /> + } label="middle" /> + + + + ); +} + +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'Jan', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'Fev', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'Mar', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'Apr', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'Aug', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'Sept', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'Oct', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'Nov', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'Dec', + }, +]; + +const valueFormatter = (value) => `${value}mm`; + +const chartSetting = { + yAxis: [ + { + label: 'rainfall (mm)', + }, + ], + series: [{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }], + height: 300, + sx: { + [`& .${axisClasses.directionY} .${axisClasses.label}`]: { + transform: 'translateX(-10px)', + }, + }, +}; + +export default function TickPlacementBars() { + const [tickPlacement, setTickPlacement] = React.useState('middle'); + const [tickLabelPlacement, setTickLabelPlacement] = React.useState('middle'); + + return ( +
+ + +
+ ); +} diff --git a/docs/data/charts/bars/TickPlacementBars.tsx b/docs/data/charts/bars/TickPlacementBars.tsx new file mode 100644 index 000000000000..b30b6ff39500 --- /dev/null +++ b/docs/data/charts/bars/TickPlacementBars.tsx @@ -0,0 +1,203 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Radio from '@mui/material/Radio'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { axisClasses } from '@mui/x-charts/ChartsAxis'; + +type TickParamsSelectorProps = { + tickPlacement: 'end' | 'start' | 'middle' | 'extremities'; + tickLabelPlacement: 'tick' | 'middle'; + setTickPlacement: React.Dispatch< + React.SetStateAction<'end' | 'start' | 'middle' | 'extremities'> + >; + setTickLabelPlacement: React.Dispatch>; +}; + +function TickParamsSelector({ + tickPlacement, + tickLabelPlacement, + setTickPlacement, + setTickLabelPlacement, +}: TickParamsSelectorProps) { + return ( + + + + tickPlacement + + + setTickPlacement( + event.target.value as 'start' | 'end' | 'middle' | 'extremities', + ) + } + > + } label="start" /> + } label="end" /> + } label="middle" /> + } + label="extremities" + /> + + + + + tickLabelPlacement + + + setTickLabelPlacement(event.target.value as 'tick' | 'middle') + } + > + } label="tick" /> + } label="middle" /> + + + + ); +} + +const dataset = [ + { + london: 59, + paris: 57, + newYork: 86, + seoul: 21, + month: 'Jan', + }, + { + london: 50, + paris: 52, + newYork: 78, + seoul: 28, + month: 'Fev', + }, + { + london: 47, + paris: 53, + newYork: 106, + seoul: 41, + month: 'Mar', + }, + { + london: 54, + paris: 56, + newYork: 92, + seoul: 73, + month: 'Apr', + }, + { + london: 57, + paris: 69, + newYork: 92, + seoul: 99, + month: 'May', + }, + { + london: 60, + paris: 63, + newYork: 103, + seoul: 144, + month: 'June', + }, + { + london: 59, + paris: 60, + newYork: 105, + seoul: 319, + month: 'July', + }, + { + london: 65, + paris: 60, + newYork: 106, + seoul: 249, + month: 'Aug', + }, + { + london: 51, + paris: 51, + newYork: 95, + seoul: 131, + month: 'Sept', + }, + { + london: 60, + paris: 65, + newYork: 97, + seoul: 55, + month: 'Oct', + }, + { + london: 67, + paris: 64, + newYork: 76, + seoul: 48, + month: 'Nov', + }, + { + london: 61, + paris: 70, + newYork: 103, + seoul: 25, + month: 'Dec', + }, +]; + +const valueFormatter = (value: number | null) => `${value}mm`; + +const chartSetting = { + yAxis: [ + { + label: 'rainfall (mm)', + }, + ], + series: [{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }], + height: 300, + sx: { + [`& .${axisClasses.directionY} .${axisClasses.label}`]: { + transform: 'translateX(-10px)', + }, + }, +}; + +export default function TickPlacementBars() { + const [tickPlacement, setTickPlacement] = React.useState< + 'start' | 'end' | 'middle' | 'extremities' + >('middle'); + const [tickLabelPlacement, setTickLabelPlacement] = React.useState< + 'middle' | 'tick' + >('middle'); + + return ( +
+ + +
+ ); +} diff --git a/docs/data/charts/bars/TickPlacementBars.tsx.preview b/docs/data/charts/bars/TickPlacementBars.tsx.preview new file mode 100644 index 000000000000..27adae0d5804 --- /dev/null +++ b/docs/data/charts/bars/TickPlacementBars.tsx.preview @@ -0,0 +1,13 @@ + + \ No newline at end of file diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md index 2603d5f2d1b0..8c74fde88ac7 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, ChartsGrid, ChartsOnAxisClickHandler --- # Charts - Bars @@ -59,11 +59,74 @@ For more information, see [stacking docs](/x/react-charts/stacking/). ## Layout +### Bar direction + Bar charts can be rendered with a horizontal layout by providing the `layout="horizontal"` prop. If you're using [composition](/x/react-charts/composition/), you should set the property `layout: 'horizontal'` to each bar series object. {{"demo": "HorizontalBars.js"}} +### Tick placement + +When using a `"band"` scale, the axis has some additional customization properties about the tick position. + +- `tickPlacement` for the position of ticks +- `tickLabelPlacement` for the position of the label associated with the tick + +You can test all configuration options in the following demo: + +{{"demo": "TickPlacementBars.js"}} + +### Grid + +You can add a grid in the background of the chart with the `grid` prop. + +See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information. + +{{"demo": "GridDemo.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/components/components.md b/docs/data/charts/components/components.md index 6cb3134cd554..1501c39b63b1 100644 --- a/docs/data/charts/components/components.md +++ b/docs/data/charts/components/components.md @@ -1,7 +1,7 @@ --- title: Charts - Custom components productId: x-charts -components: ChartsClipPath, ChartsSurface, CartesianContextProvider, DrawingProvider, HighlightProvider, InteractionProvider, SeriesContextProvider +components: ChartsClipPath, ChartsSurface --- # Charts - Custom components diff --git a/docs/data/charts/composition/composition.md b/docs/data/charts/composition/composition.md index 136efbbbaa3f..362e8f2bc6c2 100644 --- a/docs/data/charts/composition/composition.md +++ b/docs/data/charts/composition/composition.md @@ -2,7 +2,7 @@ title: React Chart composition productId: x-charts githubLabel: 'component: charts' -components: ChartContainer, ResponsiveChartContainer +components: ChartContainer, ResponsiveChartContainer, ChartsGrid packageName: '@mui/x-charts' --- @@ -95,6 +95,12 @@ By modifying the series `type` property, you can switch between rendering a line ## Subcomponents +:::info +The CSS `z-index` property does not exist on SVG elements. +Elements rendered after overlap on top of elements rendered before. +The order of elements in composition is the only way to define how they overlap. +::: + ### Plotting To display data, you have components named `` such as ``, ``, ``, ``, etc. @@ -106,6 +112,12 @@ To add axes, you can use `` and `` as defined in t It takes an `axisId` prop that indicates which axis, defined in the container, should be rendered. If `axisId` is not provided it will pick the first one. +### Grid + +To add a grid, you can use the `` component. + +See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information. + ### Additional information To add a legend to your chart, you can use ``. diff --git a/docs/data/charts/gauge/ArcDesign.js b/docs/data/charts/gauge/ArcDesign.js new file mode 100644 index 000000000000..48a4633df62e --- /dev/null +++ b/docs/data/charts/gauge/ArcDesign.js @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; + +const settings = { + width: 200, + height: 200, + value: 60, +}; + +export default function ArcDesign() { + return ( + ({ + [`& .${gaugeClasses.valueText}`]: { + fontSize: 40, + }, + [`& .${gaugeClasses.valueArc}`]: { + fill: '#52b202', + }, + [`& .${gaugeClasses.referenceArc}`]: { + fill: theme.palette.text.disabled, + }, + })} + /> + ); +} diff --git a/docs/data/charts/gauge/ArcDesign.tsx b/docs/data/charts/gauge/ArcDesign.tsx new file mode 100644 index 000000000000..48a4633df62e --- /dev/null +++ b/docs/data/charts/gauge/ArcDesign.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; + +const settings = { + width: 200, + height: 200, + value: 60, +}; + +export default function ArcDesign() { + return ( + ({ + [`& .${gaugeClasses.valueText}`]: { + fontSize: 40, + }, + [`& .${gaugeClasses.valueArc}`]: { + fill: '#52b202', + }, + [`& .${gaugeClasses.referenceArc}`]: { + fill: theme.palette.text.disabled, + }, + })} + /> + ); +} diff --git a/docs/data/charts/gauge/ArcDesign.tsx.preview b/docs/data/charts/gauge/ArcDesign.tsx.preview new file mode 100644 index 000000000000..281808d62fc7 --- /dev/null +++ b/docs/data/charts/gauge/ArcDesign.tsx.preview @@ -0,0 +1,15 @@ + ({ + [`& .${gaugeClasses.valueText}`]: { + fontSize: 40, + }, + [`& .${gaugeClasses.valueArc}`]: { + fill: '#52b202', + }, + [`& .${gaugeClasses.referenceArc}`]: { + fill: theme.palette.text.disabled, + }, + })} +/> \ No newline at end of file diff --git a/docs/data/charts/gauge/ArcPlaygroundNoSnap.js b/docs/data/charts/gauge/ArcPlaygroundNoSnap.js new file mode 100644 index 000000000000..f1bc45e892ba --- /dev/null +++ b/docs/data/charts/gauge/ArcPlaygroundNoSnap.js @@ -0,0 +1,90 @@ +import * as React from 'react'; +import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; +import Box from '@mui/material/Box'; +import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; + +export default function ArcPlaygroundNoSnap() { + return ( + ( + + + + )} + getCode={({ props }) => { + const { innerRadius, outerRadius, ...numberProps } = props; + return [ + `import { Gauge } from '@mui/x-charts/Gauge';`, + '', + ` ` ${name}={${value}}`, + ), + ...Object.entries({ innerRadius, outerRadius }).map( + ([name, value]) => ` ${name}="${value}%"`, + ), + ` // ...`, + '/>', + ].join('\n'); + }} + /> + ); +} diff --git a/docs/data/charts/gauge/BasicGauges.js b/docs/data/charts/gauge/BasicGauges.js new file mode 100644 index 000000000000..ce8503b6ca11 --- /dev/null +++ b/docs/data/charts/gauge/BasicGauges.js @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { Gauge } from '@mui/x-charts/Gauge'; + +export default function BasicGauges() { + return ( + + + + + ); +} diff --git a/docs/data/charts/gauge/BasicGauges.tsx b/docs/data/charts/gauge/BasicGauges.tsx new file mode 100644 index 000000000000..ce8503b6ca11 --- /dev/null +++ b/docs/data/charts/gauge/BasicGauges.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { Gauge } from '@mui/x-charts/Gauge'; + +export default function BasicGauges() { + return ( + + + + + ); +} diff --git a/docs/data/charts/gauge/BasicGauges.tsx.preview b/docs/data/charts/gauge/BasicGauges.tsx.preview new file mode 100644 index 000000000000..7edb64600ff6 --- /dev/null +++ b/docs/data/charts/gauge/BasicGauges.tsx.preview @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/docs/data/charts/gauge/CompositionExample.js b/docs/data/charts/gauge/CompositionExample.js new file mode 100644 index 000000000000..764a6cf60b46 --- /dev/null +++ b/docs/data/charts/gauge/CompositionExample.js @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { + GaugeContainer, + GaugeValueArc, + GaugeReferenceArc, + useGaugeState, +} from '@mui/x-charts/Gauge'; + +function GaugePointer() { + const { valueAngle, outerRadius, cx, cy } = useGaugeState(); + + if (valueAngle === null) { + // No value to display + return null; + } + + const target = { + x: cx + outerRadius * Math.sin(valueAngle), + y: cy - outerRadius * Math.cos(valueAngle), + }; + return ( + + + + + ); +} + +export default function CompositionExample() { + return ( + + + + + + ); +} diff --git a/docs/data/charts/gauge/CompositionExample.tsx b/docs/data/charts/gauge/CompositionExample.tsx new file mode 100644 index 000000000000..764a6cf60b46 --- /dev/null +++ b/docs/data/charts/gauge/CompositionExample.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { + GaugeContainer, + GaugeValueArc, + GaugeReferenceArc, + useGaugeState, +} from '@mui/x-charts/Gauge'; + +function GaugePointer() { + const { valueAngle, outerRadius, cx, cy } = useGaugeState(); + + if (valueAngle === null) { + // No value to display + return null; + } + + const target = { + x: cx + outerRadius * Math.sin(valueAngle), + y: cy - outerRadius * Math.cos(valueAngle), + }; + return ( + + + + + ); +} + +export default function CompositionExample() { + return ( + + + + + + ); +} diff --git a/docs/data/charts/gauge/CompositionExample.tsx.preview b/docs/data/charts/gauge/CompositionExample.tsx.preview new file mode 100644 index 000000000000..2675af81dc02 --- /dev/null +++ b/docs/data/charts/gauge/CompositionExample.tsx.preview @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/docs/data/charts/gauge/GaugeValueRangeNoSnap.js b/docs/data/charts/gauge/GaugeValueRangeNoSnap.js new file mode 100644 index 000000000000..d6be879022e9 --- /dev/null +++ b/docs/data/charts/gauge/GaugeValueRangeNoSnap.js @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { Gauge } from '@mui/x-charts/Gauge'; + +export default function GaugeValueRangeNoSnap() { + return ( + + + + + ); +} diff --git a/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx b/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx new file mode 100644 index 000000000000..d6be879022e9 --- /dev/null +++ b/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import { Gauge } from '@mui/x-charts/Gauge'; + +export default function GaugeValueRangeNoSnap() { + return ( + + + + + ); +} diff --git a/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx.preview b/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx.preview new file mode 100644 index 000000000000..bd671b68b19b --- /dev/null +++ b/docs/data/charts/gauge/GaugeValueRangeNoSnap.tsx.preview @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/docs/data/charts/gauge/TextPlaygroundNoSnap.js b/docs/data/charts/gauge/TextPlaygroundNoSnap.js new file mode 100644 index 000000000000..347be09681fa --- /dev/null +++ b/docs/data/charts/gauge/TextPlaygroundNoSnap.js @@ -0,0 +1,91 @@ +import * as React from 'react'; +import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo'; +import Box from '@mui/material/Box'; +import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; + +export default function TextPlaygroundNoSnap() { + return ( + ( + + `${value} / ${valueMax}`} + /> + + )} + getCode={({ props }) => { + return [ + `import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';`, + '', + ` `${value} / ${valueMax}`', + ' }', + '/>', + ].join('\n'); + }} + /> + ); +} diff --git a/docs/data/charts/gauge/gauge.md b/docs/data/charts/gauge/gauge.md index ffa248998caf..6826a74780f9 100644 --- a/docs/data/charts/gauge/gauge.md +++ b/docs/data/charts/gauge/gauge.md @@ -1,15 +1,140 @@ --- title: React Gauge chart productId: x-charts +components: Gauge, GaugeContainer +packageName: '@mui/x-charts' +githubLabel: 'component: charts' +waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/meter/ --- -# Charts - Gauge 🚧 +# Charts - Gauge

Gauge charts let the user evaluate metrics.

-:::warning -The Gauge Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/2903) to see it arrive sooner. +{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} -Don't hesitate to leave a comment there to influence what gets built. -Especially if you already have a use case for this component, or if you're facing a pain point with your current solution. +## Basics + +The Gauge displays a numeric value that varies within a defined range. + +{{"demo": "BasicGauges.js"}} + +## Value range + +The Gauge's value is provided through the `value` props, which accept a value range between 0 and 100. +To modify it, use the `valueMin` and `valueMax` props. + +{{"demo": "GaugeValueRangeNoSnap.js"}} + +## Arcs configuration + +Modify the arc shape with the following props: + +- `startAngle` and `endAngle`: The angle range provided in degrees +- `innerRadius` and `outerRadius`: The arc's radii. It can be a fixed number of pixels or a percentage string, which will be a percent of the maximal available radius +- `cornerRadius`: It can be a fixed number of pixels or a percentage string, which will be a percent of the maximal available radius + +{{"demo": "ArcPlaygroundNoSnap.js", "bg": "playground", "hideToolbar": true }} + +:::success +Notice that the arc position is computed to let the Gauge take as much space as possible in the drawing area. + +Use the `cx` and/or `cy` props to fix the coordinate of the arc center. ::: + +## Text configuration + +By default, the Gauge displays the value in the center of the arc. +To modify it, use the `text` prop. + +This prop can be a string, or a formatter. +In the second case, the formatter argument contains the `value`, `valueMin` and `valueMax`. + +To modify the text's layout, use the `gaugeClasses.valueText` class name. + +{{"demo": "TextPlaygroundNoSnap.js", "bg": "playground", "hideToolbar": true}} + +## Arc design + +To customize the Gauge styles, use the `chartsGaugeClasses` export to pull class names from different parts of the component, such as `valueText`, `valueArc`, and `referenceArc`. + +For a full reference list, visit the [API page](/x/api/charts/gauge/#classes). + +{{"demo": "ArcDesign.js"}} + +## Adding elements + +### Using the default Gauge + +To insert more elements into the Gauge, the first option would be to add them as children, which means they will be stacked on top of the default rendering. + +```tsx +import { Gauge } from '@mui/x-charts/Gauge'; + + + +; +``` + +### Using the Gauge container + +The second option is to make use of the following elements that are available within the Gauge module: + +- Gauge Reference Arc +- Gauge Value Arc +- Gauge Value Text + +```tsx +import { + GaugeContainer, + Gauge, + GaugeReferenceArc, + GaugeValueArc, +} from '@mui/x-charts/Gauge'; + + + + + +; +``` + +### Creating your components + +To create your own components, use the `useGaugeState` hook which provides all you need about the gauge configuration: + +- information about the value: `value`, `valueMin`, `valueMax` +- information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy` +- computed values: + - `maxRadius`: the maximal radius that can fit the drawing area + - `valueAngle`: the angle associated with the current value + +{{"demo": "CompositionExample.js"}} + +## Accessibility + +The MUI X Gauge is compliant with the [Meter ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/), which includes the addition of the `meter` role to the parent container and correct usage of the `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes. + +### Label + +If a visible label is available, reference it by adding `aria-labelledby` attribute. +Otherwise, the label can be manually provided by `aria-label`. + +### Presentation + +Assistive technologies often present the value as a percentage. +This can be modified by providing `aria-valuetext` attribute. + +For example, a battery level indicator is better with an hour-long duration. + +```jsx +

+ Battery level +

+ +``` diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md index df422ab76da8..86abdd2fddfc 100644 --- a/docs/data/charts/getting-started/getting-started.md +++ b/docs/data/charts/getting-started/getting-started.md @@ -13,26 +13,23 @@ packageName: '@mui/x-charts' Run one of the following commands to add the MUI X Charts to your project: + + ```bash npm -npm install @mui/x-charts@next +npm install @mui/x-charts ``` ```bash yarn -yarn add @mui/x-charts@next +yarn add @mui/x-charts ``` ```bash pnpm -pnpm add @mui/x-charts@next +pnpm add @mui/x-charts ``` -:::info -The `next` tag is used to download the latest, **pre-release**, v7 version. -Remove it to get the current stable version. -::: - The Charts package has a peer dependency on `@mui/material`. If you are not already using it in your project, you can install it with: @@ -78,7 +75,7 @@ pnpm add @mui/styled-engine-sc styled-components -Take a look at the [Styled engine guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine. +Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. ### Usage with Next.js diff --git a/docs/data/charts/heat-map/heat-map.md b/docs/data/charts/heat-map/heat-map.md index a09a0369129b..6d6413b064b8 100644 --- a/docs/data/charts/heat-map/heat-map.md +++ b/docs/data/charts/heat-map/heat-map.md @@ -1,14 +1,14 @@ --- -title: React Heat map chart +title: React Heatmap chart productId: x-charts --- -# Charts - Heat map 🚧 +# Charts - Heatmap [](/x/introduction/licensing/#pro-plan 'Pro plan')🚧 -

Heat map charts allow to highlight correlation between categories.

+

Heatmap charts allow to highlight correlation between categories.

:::warning -The Heat map Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7926) to see it arrive sooner. +The Heatmap Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7926) to see it arrive sooner. Don't hesitate to leave a comment there to influence what gets built. Especially if you already have a use case for this component, or if you're facing a pain point with your current solution. diff --git a/docs/data/charts/legend/legend.md b/docs/data/charts/legend/legend.md index edecb80ab591..5c560a3f8592 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/GridDemo.js b/docs/data/charts/lines/GridDemo.js new file mode 100644 index 000000000000..0f5641f5b2a9 --- /dev/null +++ b/docs/data/charts/lines/GridDemo.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function GridDemo() { + return ( + + ); +} diff --git a/docs/data/charts/lines/GridDemo.tsx b/docs/data/charts/lines/GridDemo.tsx new file mode 100644 index 000000000000..0f5641f5b2a9 --- /dev/null +++ b/docs/data/charts/lines/GridDemo.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; + +export default function GridDemo() { + return ( + + ); +} diff --git a/docs/data/charts/lines/GridDemo.tsx.preview b/docs/data/charts/lines/GridDemo.tsx.preview new file mode 100644 index 000000000000..2157ca6ba9a1 --- /dev/null +++ b/docs/data/charts/lines/GridDemo.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/data/charts/lines/LineClickNoSnap.js b/docs/data/charts/lines/LineClickNoSnap.js new file mode 100644 index 000000000000..f60adf562389 --- /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/LineDataset.js b/docs/data/charts/lines/LineDataset.js index 0e05117c0494..34f6f21b7bb3 100644 --- a/docs/data/charts/lines/LineDataset.js +++ b/docs/data/charts/lines/LineDataset.js @@ -541,7 +541,7 @@ export default function LineDataset() { xAxis={[ { dataKey: 'year', - valueFormatter: (v) => v.toString(), + valueFormatter: (value) => value.toString(), min: 1985, max: 2022, }, diff --git a/docs/data/charts/lines/LineDataset.tsx b/docs/data/charts/lines/LineDataset.tsx index 00588a9035f9..4efe4d2281e4 100644 --- a/docs/data/charts/lines/LineDataset.tsx +++ b/docs/data/charts/lines/LineDataset.tsx @@ -542,7 +542,7 @@ export default function LineDataset() { xAxis={[ { dataKey: 'year', - valueFormatter: (v) => v.toString(), + valueFormatter: (value) => value.toString(), min: 1985, max: 2022, }, diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md index 37a1250e87f8..5b949e9b4a4a 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, ChartsGrid --- # Charts - Lines @@ -91,8 +91,61 @@ 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 +### Grid + +You can add a grid in the background of the chart with the `grid` prop. + +See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information. + +{{"demo": "GridDemo.js"}} + ### Interpolation The interpolation between data points can be customized by the `curve` property. diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md index 26b8942a704e..e3347418beb6 100644 --- a/docs/data/charts/overview/overview.md +++ b/docs/data/charts/overview/overview.md @@ -16,7 +16,7 @@ packageName: '@mui/x-charts' The `@mui/x-charts` is an MIT library for rendering charts relying on [D3.js](https://d3js.org/) for data manipulation and SVG for rendering. And, like other MUI X components, charts are production-ready components that integrate smoothly into your app. -With a high level of customization, MUI X Charts provides on three levels of customization layers: **single components** with great defaults, extensive **configuration props**, and **subcomponents** for flexible composition. +With a high level of customization, MUI X Charts provides three levels of customization layers: **single components** with great defaults, extensive **configuration props**, and **subcomponents** for flexible composition. Additionally, you can also use all the [MUI System](https://mui.com/system/getting-started/) tools, such as the theme override or the `sx` prop. {{"demo": "ChartsOverviewDemo.js", "defaultCodeOpen": true}} diff --git a/docs/data/charts/pie/PieClickNoSnap.js b/docs/data/charts/pie/PieClickNoSnap.js new file mode 100644 index 000000000000..9e20f6c90adf --- /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 e0126a44cfae..9c2237e68c87 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/GridDemo.js b/docs/data/charts/scatter/GridDemo.js new file mode 100644 index 000000000000..fe5ae3e8823c --- /dev/null +++ b/docs/data/charts/scatter/GridDemo.js @@ -0,0 +1,186 @@ +import * as React from 'react'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; + +const data = [ + { + id: 'data-0', + x1: 329.39, + x2: 391.29, + y1: 443.28, + y2: 153.9, + }, + { + id: 'data-1', + x1: 96.94, + x2: 139.6, + y1: 110.5, + y2: 217.8, + }, + { + id: 'data-2', + x1: 336.35, + x2: 282.34, + y1: 175.23, + y2: 286.32, + }, + { + id: 'data-3', + x1: 159.44, + x2: 384.85, + y1: 195.97, + y2: 325.12, + }, + { + id: 'data-4', + x1: 188.86, + x2: 182.27, + y1: 351.77, + y2: 144.58, + }, + { + id: 'data-5', + x1: 143.86, + x2: 360.22, + y1: 43.253, + y2: 146.51, + }, + { + id: 'data-6', + x1: 202.02, + x2: 209.5, + y1: 376.34, + y2: 309.69, + }, + { + id: 'data-7', + x1: 384.41, + x2: 258.93, + y1: 31.514, + y2: 236.38, + }, + { + id: 'data-8', + x1: 256.76, + x2: 70.571, + y1: 231.31, + y2: 440.72, + }, + { + id: 'data-9', + x1: 143.79, + x2: 419.02, + y1: 108.04, + y2: 20.29, + }, + { + id: 'data-10', + x1: 103.48, + x2: 15.886, + y1: 321.77, + y2: 484.17, + }, + { + id: 'data-11', + x1: 272.39, + x2: 189.03, + y1: 120.18, + y2: 54.962, + }, + { + id: 'data-12', + x1: 23.57, + x2: 456.4, + y1: 366.2, + y2: 418.5, + }, + { + id: 'data-13', + x1: 219.73, + x2: 235.96, + y1: 451.45, + y2: 181.32, + }, + { + id: 'data-14', + x1: 54.99, + x2: 434.5, + y1: 294.8, + y2: 440.9, + }, + { + id: 'data-15', + x1: 134.13, + x2: 383.8, + y1: 121.83, + y2: 273.52, + }, + { + id: 'data-16', + x1: 12.7, + x2: 270.8, + y1: 287.7, + y2: 346.7, + }, + { + id: 'data-17', + x1: 176.51, + x2: 119.17, + y1: 134.06, + y2: 74.528, + }, + { + id: 'data-18', + x1: 65.05, + x2: 78.93, + y1: 104.5, + y2: 150.9, + }, + { + id: 'data-19', + x1: 162.25, + x2: 63.707, + y1: 413.07, + y2: 26.483, + }, + { + id: 'data-20', + x1: 68.88, + x2: 150.8, + y1: 74.68, + y2: 333.2, + }, + { + id: 'data-21', + x1: 95.29, + x2: 329.1, + y1: 360.6, + y2: 422.0, + }, + { + id: 'data-22', + x1: 390.62, + x2: 10.01, + y1: 330.72, + y2: 488.06, + }, +]; + +export default function GridDemo() { + return ( + ({ x: v.x1, y: v.y1, id: v.id })), + }, + { + label: 'Series B', + data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), + }, + ]} + grid={{ vertical: true, horizontal: true }} + /> + ); +} diff --git a/docs/data/charts/scatter/GridDemo.tsx b/docs/data/charts/scatter/GridDemo.tsx new file mode 100644 index 000000000000..fe5ae3e8823c --- /dev/null +++ b/docs/data/charts/scatter/GridDemo.tsx @@ -0,0 +1,186 @@ +import * as React from 'react'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; + +const data = [ + { + id: 'data-0', + x1: 329.39, + x2: 391.29, + y1: 443.28, + y2: 153.9, + }, + { + id: 'data-1', + x1: 96.94, + x2: 139.6, + y1: 110.5, + y2: 217.8, + }, + { + id: 'data-2', + x1: 336.35, + x2: 282.34, + y1: 175.23, + y2: 286.32, + }, + { + id: 'data-3', + x1: 159.44, + x2: 384.85, + y1: 195.97, + y2: 325.12, + }, + { + id: 'data-4', + x1: 188.86, + x2: 182.27, + y1: 351.77, + y2: 144.58, + }, + { + id: 'data-5', + x1: 143.86, + x2: 360.22, + y1: 43.253, + y2: 146.51, + }, + { + id: 'data-6', + x1: 202.02, + x2: 209.5, + y1: 376.34, + y2: 309.69, + }, + { + id: 'data-7', + x1: 384.41, + x2: 258.93, + y1: 31.514, + y2: 236.38, + }, + { + id: 'data-8', + x1: 256.76, + x2: 70.571, + y1: 231.31, + y2: 440.72, + }, + { + id: 'data-9', + x1: 143.79, + x2: 419.02, + y1: 108.04, + y2: 20.29, + }, + { + id: 'data-10', + x1: 103.48, + x2: 15.886, + y1: 321.77, + y2: 484.17, + }, + { + id: 'data-11', + x1: 272.39, + x2: 189.03, + y1: 120.18, + y2: 54.962, + }, + { + id: 'data-12', + x1: 23.57, + x2: 456.4, + y1: 366.2, + y2: 418.5, + }, + { + id: 'data-13', + x1: 219.73, + x2: 235.96, + y1: 451.45, + y2: 181.32, + }, + { + id: 'data-14', + x1: 54.99, + x2: 434.5, + y1: 294.8, + y2: 440.9, + }, + { + id: 'data-15', + x1: 134.13, + x2: 383.8, + y1: 121.83, + y2: 273.52, + }, + { + id: 'data-16', + x1: 12.7, + x2: 270.8, + y1: 287.7, + y2: 346.7, + }, + { + id: 'data-17', + x1: 176.51, + x2: 119.17, + y1: 134.06, + y2: 74.528, + }, + { + id: 'data-18', + x1: 65.05, + x2: 78.93, + y1: 104.5, + y2: 150.9, + }, + { + id: 'data-19', + x1: 162.25, + x2: 63.707, + y1: 413.07, + y2: 26.483, + }, + { + id: 'data-20', + x1: 68.88, + x2: 150.8, + y1: 74.68, + y2: 333.2, + }, + { + id: 'data-21', + x1: 95.29, + x2: 329.1, + y1: 360.6, + y2: 422.0, + }, + { + id: 'data-22', + x1: 390.62, + x2: 10.01, + y1: 330.72, + y2: 488.06, + }, +]; + +export default function GridDemo() { + return ( + ({ x: v.x1, y: v.y1, id: v.id })), + }, + { + label: 'Series B', + data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), + }, + ]} + grid={{ vertical: true, horizontal: true }} + /> + ); +} diff --git a/docs/data/charts/scatter/GridDemo.tsx.preview b/docs/data/charts/scatter/GridDemo.tsx.preview new file mode 100644 index 000000000000..58e97c3183ec --- /dev/null +++ b/docs/data/charts/scatter/GridDemo.tsx.preview @@ -0,0 +1,15 @@ + ({ x: v.x1, y: v.y1, id: v.id })), + }, + { + label: 'Series B', + data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), + }, + ]} + grid={{ vertical: true, horizontal: true }} +/> \ No newline at end of file diff --git a/docs/data/charts/scatter/ScatterClickNoSnap.js b/docs/data/charts/scatter/ScatterClickNoSnap.js new file mode 100644 index 000000000000..decb628cb1fa --- /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 c66ad53e6079..75e038b43e04 100644 --- a/docs/data/charts/scatter/scatter.md +++ b/docs/data/charts/scatter/scatter.md @@ -1,7 +1,7 @@ --- title: React Scatter chart productId: x-charts -components: Scatter, ScatterChart, ScatterPlot, ChartsVoronoiHandler +components: Scatter, ScatterChart, ScatterPlot, ChartsVoronoiHandler, ChartsGrid --- # Charts - Scatter @@ -33,8 +33,34 @@ 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 +### Grid + +You can add a grid in the background of the chart with the `grid` prop. + +See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information. + +{{"demo": "GridDemo.js"}} + ### CSS 🚧 ### Shape 🚧 diff --git a/docs/data/charts/sparkline/sparkline.md b/docs/data/charts/sparkline/sparkline.md index 000a69cbea7b..5480d69e8982 100644 --- a/docs/data/charts/sparkline/sparkline.md +++ b/docs/data/charts/sparkline/sparkline.md @@ -25,7 +25,7 @@ To modify the curve interpolation, use the `curve` prop. Read the full documenta ## Interaction -Compared to line and bar charts, the sparkline chart has some additional props to simplify interaction configuration. +Compared to line and bar charts, the sparkline has some additional props to simplify interaction configuration. You can use `showTooltip` and `showHighlight` to display the default tooltip and highlight in your sparkline. Those are helpers. diff --git a/docs/data/charts/tooltip/Formatting.js b/docs/data/charts/tooltip/Formatting.js index 10dc1544a795..e9ff77e25254 100644 --- a/docs/data/charts/tooltip/Formatting.js +++ b/docs/data/charts/tooltip/Formatting.js @@ -87,8 +87,8 @@ export default function Formatting() { ({ - ...s, + series={lineChartsParams.series.map((serie) => ({ + ...serie, valueFormatter: currencyFormatter, }))} /> diff --git a/docs/data/charts/tooltip/Formatting.tsx b/docs/data/charts/tooltip/Formatting.tsx index 91c2e822604a..6384957f71a6 100644 --- a/docs/data/charts/tooltip/Formatting.tsx +++ b/docs/data/charts/tooltip/Formatting.tsx @@ -87,8 +87,8 @@ export default function Formatting() { ({ - ...s, + series={lineChartsParams.series.map((serie) => ({ + ...serie, valueFormatter: currencyFormatter, }))} /> diff --git a/docs/data/charts/tooltip/Formatting.tsx.preview b/docs/data/charts/tooltip/Formatting.tsx.preview index 78b79ddf0b6b..0c659b2551fb 100644 --- a/docs/data/charts/tooltip/Formatting.tsx.preview +++ b/docs/data/charts/tooltip/Formatting.tsx.preview @@ -1,8 +1,8 @@ ({ - ...s, + series={lineChartsParams.series.map((serie) => ({ + ...serie, valueFormatter: currencyFormatter, }))} /> \ No newline at end of file diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md index c126bf0f45e2..0c94979395de 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: @@ -81,12 +81,38 @@ It will remove the header showing the x-axis value from the tooltip. /> ``` +### Overriding content + +To modify the tooltip content, use `slots.itemContent` or `slots.axisContent`. +The first one is rendered when tooltip trigger is set to `"item"`. +The second one when trigger is set to `"axis"`. + +```jsx +// With single component + + +// With composition + + // ... + + +``` + ## Composition 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/charts/tree-map/tree-map.md b/docs/data/charts/tree-map/tree-map.md index 183da035025d..02935a5faa03 100644 --- a/docs/data/charts/tree-map/tree-map.md +++ b/docs/data/charts/tree-map/tree-map.md @@ -1,5 +1,5 @@ --- -title: React Tree map chart +title: React Treemap chart productId: x-charts --- @@ -8,7 +8,7 @@ productId: x-charts

Treemap allows to display data with a hierarchical structure.

:::warning -The Treemap Chart component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7924) to see it arrive sooner. +The Treemap component isn't available yet, but you can upvote [**this GitHub issue**](https://github.com/mui/mui-x/issues/7924) to see it arrive sooner. Don't hesitate to leave a comment there to influence what gets built. Especially if you already have a use case for this component, or if you're facing a pain point with your current solution. diff --git a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js index d9d61b7c7433..9fe1c320f95b 100644 --- a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js +++ b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.js @@ -15,6 +15,8 @@ function CustomToolbar() { } export default function DensitySelectorSmallGrid() { + const [density, setDensity] = React.useState('compact'); + const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 4, @@ -25,7 +27,11 @@ export default function DensitySelectorSmallGrid() {
{ + console.info(`Density updated to: ${newDensity}`); + setDensity(newDensity); + }} slots={{ toolbar: CustomToolbar, }} diff --git a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx index d9d61b7c7433..d7d04073e942 100644 --- a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx +++ b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx @@ -3,6 +3,7 @@ import { DataGrid, GridToolbarContainer, GridToolbarDensitySelector, + GridDensity, } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; @@ -15,6 +16,8 @@ function CustomToolbar() { } export default function DensitySelectorSmallGrid() { + const [density, setDensity] = React.useState('compact'); + const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 4, @@ -25,7 +28,11 @@ export default function DensitySelectorSmallGrid() {
{ + console.info(`Density updated to: ${newDensity}`); + setDensity(newDensity); + }} slots={{ toolbar: CustomToolbar, }} diff --git a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview index 9d198ee8add6..cd87eee43b44 100644 --- a/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview +++ b/docs/data/data-grid/accessibility/DensitySelectorSmallGrid.tsx.preview @@ -1,6 +1,10 @@ { + console.info(`Density updated to: ${newDensity}`); + setDensity(newDensity); + }} slots={{ toolbar: CustomToolbar, }} diff --git a/docs/data/data-grid/accessibility/accessibility.md b/docs/data/data-grid/accessibility/accessibility.md index 817bf14988e4..afb47c68a23a 100644 --- a/docs/data/data-grid/accessibility/accessibility.md +++ b/docs/data/data-grid/accessibility/accessibility.md @@ -16,28 +16,62 @@ WCAG 2.1 has three levels of conformance: A, AA, and AAA. Level AA meets the most commonly encountered conformance guidelines. This is the most common target for organizations so what we aims to support very well. -The [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a data grid. +The [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a data grid. ## Density You can change the density of the rows and the column header. -### Density selector +### Density selection from the toolbar -To enable the density selector, create a toolbar containing the `GridToolbarDensitySelector` component and apply it using the `toolbar` property in the Data Grid's `slots` prop. -The user can then change the density of the Data Grid by using the density selector from the toolbar, as the following demo illustrates: +To enable the density selection from the toolbar, you can do one of the following: + +1. Enable the default toolbar component by passing the `slots.toolbar` prop to the Data Grid. +2. Create a specific toolbar containing only the `GridToolbarDensitySelector` component and apply it using the `toolbar` property in the Data Grid's `slots` prop. + +The user can then change the density of the Data Grid by using the density selection menu from the toolbar, as the following demo illustrates: {{"demo": "DensitySelectorGrid.js", "bg": "inline"}} -To hide the density selector, add the `disableDensitySelector` prop to the Data Grid. +To disable the density selection menu, pass the `disableDensitySelector` prop to the Data Grid. + +### Set the density programmatically + +The Data Grid exposes the `density` prop which supports the following values: + +- `standard` (default) +- `compact` +- `comfortable` + +You can set the density programmatically in one of the following ways: + +1. Uncontrolled – initialize the density with the `initialState.density` prop. + + ```tsx + + ``` + +2. Controlled – pass the `density` and `onDensityChange` props. For more advanced use cases, you can also subscribe to the `densityChange` grid event. + + ```tsx + const [density, setDensity] = React.useState('compact'); -### Density prop + return ( + setDensity(newDensity)} + /> + ); + ``` -Set the vertical density of the Data Grid using the `density` prop. -This prop applies the values determined by the `rowHeight` and `columnHeaderHeight` props, if supplied. +The `density` prop applies the values determined by the `rowHeight` and `columnHeaderHeight` props, if supplied. The user can override this setting with the optional toolbar density selector. -The following demo shows a Data Grid with the default density set to `compact`: +The following demo shows a Data Grid with the controlled density set to `compact` and outputs the current density to the console when the user changes it using the density selector from the toolbar: {{"demo": "DensitySelectorSmallGrid.js", "bg": "inline"}} @@ -47,7 +81,7 @@ The Data Grid listens for keyboard interactions from the user and emits events i ### Tab sequence -According to [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), only one of the focusable elements contained by a composite widget should be included in the page tab sequence. +According to [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), only one of the focusable elements contained by a composite widget should be included in the page tab sequence. For an element to be included in the tab sequence, it needs to have a `tabIndex` value of zero or greater. When a user focuses on a Data Grid cell, the first inner element with `tabIndex={0}` receives the focus. diff --git a/docs/data/data-grid/aggregation/AggregationColDefAggregable.js b/docs/data/data-grid/aggregation/AggregationColDefAggregable.js index dbdfe5da5698..e23410c8e781 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 61b3d5d6cf36..d67e44cacd71 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 43b88020a1aa..b68f392842cf 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 ecc1b1407e1c..e9facc9195e0 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 ea05bd579310..dd4f26158ebe 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 9bf1e433d307..66b4ef4370af 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 25bda31c3cfc..7691e12ef11f 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 044cd70bf6c8..979ba2b313ab 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 66f67462935b..44d2db771d0e 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 d6dbeaddd85d..9b4e63676084 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 c982b38c0e4c..a3ee72b9c644 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 286e46bab22d..a7b8766ec1bb 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 93057744fa73..68ce37b2c22f 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 7f6dcf5bd509..403388b35dff 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 9432c00a61c7..1ef1ec469957 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 099439992db7..07896dfa7290 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 fee7e52de356..b742e996f35c 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 64ab72e7df4a..4e7d017f270c 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 a251fe9a9cf0..31aeef25b95d 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 3584dad91db6..eef15e64a31b 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/AggregationRenderCell.js b/docs/data/data-grid/aggregation/AggregationRenderCell.js index 4f034261d423..1bf1c1bcc7b3 100644 --- a/docs/data/data-grid/aggregation/AggregationRenderCell.js +++ b/docs/data/data-grid/aggregation/AggregationRenderCell.js @@ -11,6 +11,7 @@ const COLUMNS = [ type: 'number', width: 180, availableAggregationFunctions: ['min', 'max', 'avg', 'size'], + display: 'flex', // Imdb rating is on a scale from 0 to 10, the MUI rating component is on a scale from 0 to 5 renderCell: (params) => { if (params.aggregation && !params.aggregation.hasCellUnit) { diff --git a/docs/data/data-grid/aggregation/AggregationRenderCell.tsx b/docs/data/data-grid/aggregation/AggregationRenderCell.tsx index 11f653668ba1..a0de64c3ee69 100644 --- a/docs/data/data-grid/aggregation/AggregationRenderCell.tsx +++ b/docs/data/data-grid/aggregation/AggregationRenderCell.tsx @@ -11,6 +11,7 @@ const COLUMNS: GridColDef[] = [ type: 'number', width: 180, availableAggregationFunctions: ['min', 'max', 'avg', 'size'], + display: 'flex', // Imdb rating is on a scale from 0 to 10, the MUI rating component is on a scale from 0 to 5 renderCell: (params) => { if (params.aggregation && !params.aggregation.hasCellUnit) { diff --git a/docs/data/data-grid/aggregation/AggregationRowGrouping.js b/docs/data/data-grid/aggregation/AggregationRowGrouping.js index 60406b087f72..34dbd8ad7c2d 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 6d7feee5bedf..4a2a996e4923 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 f13b2c299d34..460f64c2a2ee 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 78c6456f21f3..b5caa5a5a185 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 568eee480b7c..955a77b5ec8a 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 10e92d96373a..1a3f4c5a1c2f 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 f86b89c8f5f2..0dad0c32852c 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/api-object/api-object.md b/docs/data/data-grid/api-object/api-object.md index 9c0e091826ea..1c436192c83e 100644 --- a/docs/data/data-grid/api-object/api-object.md +++ b/docs/data/data-grid/api-object/api-object.md @@ -62,7 +62,7 @@ If you try to use it in the first render of the component, it will crash because ### Access the disabled column features -You can control the disabled features of a column (e.g. hiding, sorting, filtering, pinning, grouping, etc) programmatically using `initialState`, controlled models, or the API object. +You can control the disabled features of a column (for example hiding, sorting, filtering, pinning, grouping, etc) programmatically using `initialState`, controlled models, or the API object. In the example below, API object is used to build a custom sorting for the _firstName_ column which is not sortable by the default grid UI (i.e `colDef.sortable` property is set to `false`). diff --git a/docs/data/data-grid/clipboard/ClipboardPasteEvents.js b/docs/data/data-grid/clipboard/ClipboardPasteEvents.js index 299a2ea33c05..a755c662bc73 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteEvents.js +++ b/docs/data/data-grid/clipboard/ClipboardPasteEvents.js @@ -1,6 +1,12 @@ import * as React from 'react'; import { DataGridPremium } from '@mui/x-data-grid-premium'; import { useDemoData } from '@mui/x-data-grid-generator'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import Button from '@mui/material/Button'; export default function ClipboardPasteEvents() { const { data } = useDemoData({ @@ -28,6 +34,19 @@ export default function ClipboardPasteEvents() { }, }; + const confirm = useConfirm(); + const confirmPaste = React.useCallback(() => { + return new Promise((resolve, reject) => { + confirm.open((confirmed) => { + if (confirmed) { + resolve(); + } else { + reject(); + } + }); + }); + }, [confirm]); + return (
setLoading(true)} onClipboardPasteEnd={() => setLoading(false)} ignoreValueFormatterDuringExport + disableRowSelectionOnClick /> + + + {'Are you sure you want to paste?'} + + + + This will overwrite the selected cells. + + + + + + +
); } + +const useConfirm = () => { + const [isOpen, setIsOpen] = React.useState(false); + const callbackRef = React.useRef(null); + + const open = React.useCallback((callback) => { + setIsOpen(true); + callbackRef.current = callback; + }, []); + + const cancel = React.useCallback(() => { + setIsOpen(false); + callbackRef.current?.(false); + callbackRef.current = null; + }, []); + + const confirm = React.useCallback(() => { + setIsOpen(false); + callbackRef.current?.(true); + callbackRef.current = null; + }, []); + + return { + open, + isOpen, + cancel, + confirm, + }; +}; diff --git a/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx b/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx index 0139a1fc0429..3c3b16913c61 100644 --- a/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx +++ b/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; import { DataGridPremium, DataGridPremiumProps } from '@mui/x-data-grid-premium'; import { useDemoData } from '@mui/x-data-grid-generator'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import Button from '@mui/material/Button'; export default function ClipboardPasteEvents() { const { data } = useDemoData({ @@ -30,6 +36,19 @@ export default function ClipboardPasteEvents() { }, }; + const confirm = useConfirm(); + const confirmPaste = React.useCallback<() => Promise>(() => { + return new Promise((resolve, reject) => { + confirm.open((confirmed) => { + if (confirmed) { + resolve(); + } else { + reject(); + } + }); + }); + }, [confirm]); + return (
setLoading(true)} onClipboardPasteEnd={() => setLoading(false)} ignoreValueFormatterDuringExport + disableRowSelectionOnClick /> + + + + {'Are you sure you want to paste?'} + + + + This will overwrite the selected cells. + + + + + + +
); } + +const useConfirm = () => { + const [isOpen, setIsOpen] = React.useState(false); + const callbackRef = React.useRef<((confirmed: boolean) => void) | null>(null); + + const open = React.useCallback((callback: (confirmed: boolean) => void) => { + setIsOpen(true); + callbackRef.current = callback; + }, []); + + const cancel = React.useCallback(() => { + setIsOpen(false); + callbackRef.current?.(false); + callbackRef.current = null; + }, []); + + const confirm = React.useCallback(() => { + setIsOpen(false); + callbackRef.current?.(true); + callbackRef.current = null; + }, []); + + return { + open, + isOpen, + cancel, + confirm, + }; +}; diff --git a/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx.preview b/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx.preview deleted file mode 100644 index 0c6f364b0155..000000000000 --- a/docs/data/data-grid/clipboard/ClipboardPasteEvents.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - setLoading(true)} - onClipboardPasteEnd={() => setLoading(false)} - ignoreValueFormatterDuringExport -/> \ No newline at end of file diff --git a/docs/data/data-grid/clipboard/clipboard.md b/docs/data/data-grid/clipboard/clipboard.md index c9a922c10b10..78f953a88986 100644 --- a/docs/data/data-grid/clipboard/clipboard.md +++ b/docs/data/data-grid/clipboard/clipboard.md @@ -87,7 +87,22 @@ For convenience, you can also listen to these events using their respective prop - `onClipboardPasteStart` - `onClipboardPasteEnd` -The demo below shows how to use these events to display a loading indicator while the clipboard paste operation is in progress: +Additionally, there is the `onBeforeClipboardPasteStart` prop, which is called before the clipboard paste operation starts +and can be used to cancel or confirm the paste operation: + +```tsx +const onBeforeClipboardPasteStart = async () => { + const confirmed = window.confirm('Are you sure you want to paste?'); + if (!confirmed) { + throw new Error('Paste operation cancelled'); + } +}; + +; +``` + +The demo below uses the [`Dialog`](/material-ui/react-dialog/) component for paste confirmation. +If confirmed, the Data Grid displays a loading indicator during the paste operation. {{"demo": "ClipboardPasteEvents.js", "bg": "inline"}} 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 000000000000..7a29da11924c --- /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 000000000000..e32fd666d9b7 --- /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 000000000000..6f326f7a9cd1 --- /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/RenderExpandCellGrid.js b/docs/data/data-grid/column-definition/RenderExpandCellGrid.js index 0f6317890149..598c8d14e4a8 100644 --- a/docs/data/data-grid/column-definition/RenderExpandCellGrid.js +++ b/docs/data/data-grid/column-definition/RenderExpandCellGrid.js @@ -38,8 +38,7 @@ const GridCellExpand = React.memo(function GridCellExpand(props) { } function handleKeyDown(nativeEvent) { - // IE11, Edge (prior to using Bink?) use 'Esc' - if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') { + if (nativeEvent.key === 'Escape') { setShowFullCell(false); } } diff --git a/docs/data/data-grid/column-definition/RenderExpandCellGrid.tsx b/docs/data/data-grid/column-definition/RenderExpandCellGrid.tsx index 945137a179c8..43420b5fc9c6 100644 --- a/docs/data/data-grid/column-definition/RenderExpandCellGrid.tsx +++ b/docs/data/data-grid/column-definition/RenderExpandCellGrid.tsx @@ -45,8 +45,7 @@ const GridCellExpand = React.memo(function GridCellExpand( } function handleKeyDown(nativeEvent: KeyboardEvent) { - // IE11, Edge (prior to using Bink?) use 'Esc' - if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') { + if (nativeEvent.key === 'Escape') { setShowFullCell(false); } } diff --git a/docs/data/data-grid/column-definition/ValueFormatterGrid.js b/docs/data/data-grid/column-definition/ValueFormatterGrid.js index f9fd6b171f2e..4699cc8792f6 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 24a4e6049fc0..fe540c044cc6 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 4e45d2d764d5..498e2c4d91a9 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 8035a20486b9..cc4e1ea77c5c 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 59e42a9ac102..d86945322506 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; } @@ -93,13 +93,13 @@ The value returned by `valueGetter` is used for: ### Value formatter The value formatter allows you to convert the value before displaying it. -Common use cases include converting a JavaScript `Date` object to a date string or a `Number` into a formatted number (e.g. "1,000.50"). +Common use cases include converting a JavaScript `Date` object to a date string or a `Number` into a formatted number (for example "1,000.50"). Note, that the value returned by `valueFormatter` is only used for rendering purposes. Filtering and sorting are based on the raw value (`row[field]`) or the value returned by [`valueGetter`](/x/react-data-grid/column-definition/#value-getter). -In the following demo, `valueGetter` is used to convert the tax rate (e.g. `0.2`) to a decimal value (e.g. `20`), -and `valueFormatter` is used to display it as a percentage (e.g. `20%`). +In the following demo, `valueGetter` is used to convert the tax rate (for example `0.2`) to a decimal value (for example `20`), +and `valueFormatter` is used to display it as a percentage (for example `20%`). {{"demo": "ValueFormatterGrid.js", "bg": "inline"}} @@ -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-dimensions/ColumnAutosizing.js b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js index 030c4d0534d9..05f0c627be1f 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizing.js +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js @@ -5,8 +5,11 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Rating from '@mui/material/Rating'; import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; -import { useGridApiRef } from '@mui/x-data-grid'; -import { DataGridPro, DEFAULT_GRID_AUTOSIZE_OPTIONS } from '@mui/x-data-grid-pro'; +import { + DataGrid, + useGridApiRef, + DEFAULT_GRID_AUTOSIZE_OPTIONS, +} from '@mui/x-data-grid'; import { randomRating, randomTraderName } from '@mui/x-data-grid-generator'; function renderRating(params) { @@ -36,7 +39,12 @@ function useData(length) { { field: 'id', headerName: 'Brand ID' }, { field: 'brand', headerName: 'Brand name' }, { field: 'rep', headerName: 'Representative' }, - { field: 'rating', headerName: 'Rating', renderCell: renderRating }, + { + field: 'rating', + headerName: 'Rating', + renderCell: renderRating, + display: 'flex', + }, ]; return { rows, columns }; @@ -122,7 +130,7 @@ export default function ColumnAutosizing() { />
- (); + const apiRef = useGridApiRef(); const data = useData(100); const [includeHeaders, setIncludeHeaders] = React.useState( @@ -125,7 +129,7 @@ export default function ColumnAutosizing() { />
- { - return ReactDOM.flushSync(() => { + ReactDOM.flushSync(() => { setIsLoading(false); apiRef.current.updateRows(data.rows); }); }) + // `sleep`/`setTimeout` is required because `.updateRows` is an + // async function throttled to avoid choking on frequent changes. + .then(() => sleep(0)) .then(() => apiRef.current.autosizeColumns({ includeHeaders: true, @@ -99,3 +106,9 @@ export default function ColumnAutosizingAsync() {
); } + +function sleep(ms) { + return new Promise((resolve) => { + setTimeout(resolve, ms); + }); +} diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx index 2140a5e5ae3b..650f0e1bced9 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; import Rating from '@mui/material/Rating'; import Stack from '@mui/material/Stack'; -import { useGridApiRef } from '@mui/x-data-grid'; -import { DataGridPro, GridApiPro } from '@mui/x-data-grid-pro'; +import { DataGridPro, useGridApiRef, GridColDef } from '@mui/x-data-grid-pro'; import { randomInt, randomRating, @@ -12,11 +11,16 @@ import { import * as ReactDOM from 'react-dom'; import { GridData } from 'docsx/data/data-grid/virtualization/ColumnVirtualizationGrid'; -const columns = [ +const columns: GridColDef[] = [ { field: 'id', headerName: 'Brand ID' }, { field: 'brand', headerName: 'Brand name' }, { field: 'rep', headerName: 'Representative' }, - { field: 'rating', headerName: 'Rating', renderCell: renderRating }, + { + field: 'rating', + headerName: 'Rating', + renderCell: renderRating, + display: 'flex', + }, ]; function renderRating(params: any) { @@ -48,7 +52,7 @@ function getFakeData(length: number): Promise<{ rows: GridData['rows'] }> { } export default function ColumnAutosizingAsync() { - const apiRef = useGridApiRef(); + const apiRef = useGridApiRef(); const [isLoading, setIsLoading] = React.useState(false); const [rows] = React.useState([]); @@ -56,11 +60,14 @@ export default function ColumnAutosizingAsync() { setIsLoading(true); getFakeData(100) .then((data) => { - return ReactDOM.flushSync(() => { + ReactDOM.flushSync(() => { setIsLoading(false); apiRef.current.updateRows(data.rows); }); }) + // `sleep`/`setTimeout` is required because `.updateRows` is an + // async function throttled to avoid choking on frequent changes. + .then(() => sleep(0)) .then(() => apiRef.current.autosizeColumns({ includeHeaders: true, @@ -99,3 +106,9 @@ export default function ColumnAutosizingAsync() {
); } + +function sleep(ms: number) { + return new Promise((resolve) => { + setTimeout(resolve, ms); + }); +} diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js index 4101807c03e9..fd239b3db5a2 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Button from '@mui/material/Button'; -import { DataGridPro, gridClasses, useGridApiRef } from '@mui/x-data-grid-pro'; +import { DataGrid, gridClasses, useGridApiRef } from '@mui/x-data-grid'; import { randomInt, randomArrayItem } from '@mui/x-data-grid-generator'; const lines = [ @@ -46,7 +46,7 @@ export default function ColumnAutosizingDynamicRowHeight() { Autosize Columns
-
- - - ](/x/introduction/licensing/#pro-plan 'Pro plan') +## Resizing -By default, `DataGridPro` allows all columns to be resized by dragging the right portion of the column separator. +By default, Data Grid allows all columns to be resized by dragging the right portion of the column separator. To prevent the resizing of a column, set `resizable: false` in the `GridColDef`. Alternatively, to disable all columns resize, set the prop `disableColumnResize={true}`. @@ -58,9 +58,9 @@ To capture changes in the width of a column there are two callbacks that are cal - `onColumnResize`: Called while a column is being resized. - `onColumnWidthChange`: Called after the width of a column is changed, but not during resizing. -## Autosizing [](/x/introduction/licensing/#pro-plan 'Pro plan') +## Autosizing -`DataGridPro` allows to autosize the columns' dimensions based on their content. Autosizing is enabled by default. To turn it off, pass the `disableAutosize` prop to the datagrid. +Data Grid allows to autosize the columns' dimensions based on their content. Autosizing is enabled by default. To turn it off, pass the `disableAutosize` prop to the Data Grid. Autosizing can be used by one of the following methods: @@ -75,7 +75,7 @@ Note that for the separator double-click method, the `autosizeOptions.columns` w In all the cases, the `colDef.minWidth` and `colDef.maxWidth` options will be respected. ```tsx -](/x/introduction/licensing/#pro-plan 'Pro plan') +### Autosizing asynchronously The `autosizeColumns` method from the `apiRef` can be used as well to adjust the column size on specified events, for example when receiving row data from the server. diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.js b/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.js index 8a6b0adb3e03..be2e0a466ac8 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.js @@ -34,7 +34,7 @@ function PlanIcon(props) { diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.tsx b/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.tsx index fcb48c1c4527..d3ac326a2a29 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.tsx +++ b/docs/data/data-grid/column-menu/ColumnMenuGridReferencesNoSnap.tsx @@ -38,7 +38,7 @@ function PlanIcon(props: { plan?: string }) { diff --git a/docs/data/data-grid/column-pinning/column-pinning.md b/docs/data/data-grid/column-pinning/column-pinning.md index ed27f0ae3c1b..40451599150e 100644 --- a/docs/data/data-grid/column-pinning/column-pinning.md +++ b/docs/data/data-grid/column-pinning/column-pinning.md @@ -73,7 +73,7 @@ To disable the pinning of a single column, set the `pinnable` property in `GridC ### Pin non-pinnable columns programmatically -It may be desirable to allow one or more columns to be pinned or unpinned programmatically that can not be pinned or unpinned on the UI (i.e. columns for which prop `disableColumnPinning = true` or `colDef.pinnable = false`). +It may be desirable to allow one or more columns to be pinned or unpinned programmatically that cannot be pinned or unpinned on the UI (that is columns for which prop `disableColumnPinning = true` or `colDef.pinnable = false`). This can be done in one of the following ways. - (A) Initializing the pinned columns diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js index 960cceabb040..a79a2cb56f11 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 a34476e2811c..653671f61040 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 d1e7ab69fb18..80ff992b970b 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 beda4fc1074b..5f5dcac599db 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 70275eb92d00..9a0a7fa8d4f3 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 fef9a8145a76..c278f02c68a4 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. +The grid exposes two hooks to help you access the data grid data while overriding component slots. They can be used as below: -- `useGridApiContext`: returns the `apiRef` object (more details in the [API object page](/x/react-data-grid/api-object/#inside-the-data-grid)). -- `useGridSelector`: returns the result of a selector on the current state (more details in the [State page](/x/react-data-grid/state/#access-the-state)). +- `useGridApiContext`: returns the `apiRef` object (more details on the [API object page](/x/react-data-grid/api-object/#inside-the-data-grid)). +- `useGridSelector`: returns the result of a selector on the current state (more details on the [State page](/x/react-data-grid/state/#access-the-state)). ```tsx function CustomPagination() { @@ -52,7 +64,7 @@ function CustomPagination() { ## Component slots -The full list of overridable components slots can be found on the [`GridSlotsComponent`](/x/api/data-grid/data-grid/#slots) API page. +The full list of overridable component slots can be found on the [`GridSlotsComponent`](/x/api/data-grid/data-grid/#slots) API page. ### Column menu @@ -67,7 +79,8 @@ This demo showcases how this can be achieved. {{"demo": "ToolbarGrid.js", "bg": "inline"}} -You can also compose your own toolbar. Each button in the toolbar is wrapped with a tooltip component. In order to override some of the props corresponding to the toolbar buttons, you can use the `slotProps` prop. +You can also compose your own toolbar. Each button in the toolbar is wrapped with a tooltip component. +In order to override some of the props corresponding to the toolbar buttons, you can use the `slotProps` prop. The following demo shows how to override the tooltip title of the density selector and the variant of the export button. @@ -170,7 +183,8 @@ To override default props or pass custom props to slot components, use the `slot ### Custom slot props with TypeScript -If the custom component requires additional props to work properly, TypeScript may throw type errors. To prevent, use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to enhance the props interface. +If the custom component requires additional props to work properly, TypeScript may throw type errors. +To solve these type errors, use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to enhance the props interface. The naming of overridable interfaces uses a pattern like this: @@ -180,7 +194,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 that 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 3b54134e2d27..589e12759a59 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 1dd2525169c6..82e558130be7 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 3278ebe5189b..3418d179a1c7 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js @@ -36,12 +36,9 @@ const dateColumnType = { InputComponent: GridFilterDateInput, InputComponentProps: { showTime: false }, })), - valueFormatter: (params) => { - if (typeof params.value === 'string') { - return params.value; - } - if (params.value) { - return dateAdapter.format(params.value, 'keyboardDate'); + valueFormatter: (value) => { + if (value) { + return dateAdapter.format(value, 'keyboardDate'); } return ''; }, @@ -53,7 +50,7 @@ const GridEditDateInput = styled(InputBase)({ }); function WrappedGridEditDateInput(props) { - const { InputProps, ...other } = props; + const { InputProps, focused, ...other } = props; return ; } @@ -122,12 +119,9 @@ const dateTimeColumnType = { InputComponent: GridFilterDateInput, InputComponentProps: { showTime: true }, })), - valueFormatter: (params) => { - if (typeof params.value === 'string') { - return params.value; - } - if (params.value) { - return dateAdapter.format(params.value, 'keyboardDateTime'); + valueFormatter: (value) => { + 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 d51f0fea6b87..a381b48b922b 100644 --- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx +++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx @@ -42,12 +42,9 @@ const dateColumnType: GridColTypeDef = { InputComponent: GridFilterDateInput, InputComponentProps: { showTime: false }, })), - valueFormatter: (params) => { - if (typeof params.value === 'string') { - return params.value; - } - if (params.value) { - return dateAdapter.format(params.value, 'keyboardDate'); + valueFormatter: (value) => { + if (value) { + return dateAdapter.format(value, 'keyboardDate'); } return ''; }, @@ -59,7 +56,7 @@ const GridEditDateInput = styled(InputBase)({ }); function WrappedGridEditDateInput(props: TextFieldProps) { - const { InputProps, ...other } = props; + const { InputProps, focused, ...other } = props; return ( ); @@ -70,7 +67,7 @@ function GridEditDateCell({ field, value, colDef, -}: GridRenderEditCellParams) { +}: GridRenderEditCellParams) { const apiRef = useGridApiContext(); const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker; @@ -137,12 +134,9 @@ const dateTimeColumnType: GridColTypeDef = { InputComponent: GridFilterDateInput, InputComponentProps: { showTime: true }, })), - valueFormatter: (params) => { - if (typeof params.value === 'string') { - return params.value; - } - if (params.value) { - return dateAdapter.format(params.value, 'keyboardDateTime'); + valueFormatter: (value) => { + 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 0150cac14f83..f2a38c1813cf 100644 --- a/docs/data/data-grid/custom-columns/SparklineColumn.js +++ b/docs/data/data-grid/custom-columns/SparklineColumn.js @@ -24,6 +24,7 @@ const sparklineColumnType = { sortable: false, editable: false, groupable: false, + display: 'flex', renderCell: (params) => , }; @@ -41,14 +42,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 7e268946d24b..cf646189b49f 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, @@ -37,10 +36,11 @@ const sparklineColumnType: GridColTypeDef = { sortable: false, editable: false, groupable: false, + display: 'flex', renderCell: (params) => , }; -const columns: GridColDef[] = [ +const columns: GridColDef<(typeof rows)[number]>[] = [ { field: 'name', headerName: 'Package name', width: 180 }, { field: 'monthlyDownloads', @@ -54,14 +54,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 +74,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 6c002afb4b0c..118a6905b663 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/demo/FullFeaturedDemo.js b/docs/data/data-grid/demo/FullFeaturedDemo.js index ef0717f61f40..3fc0fb9d27ed 100644 --- a/docs/data/data-grid/demo/FullFeaturedDemo.js +++ b/docs/data/data-grid/demo/FullFeaturedDemo.js @@ -301,7 +301,6 @@ export default function FullFeaturedDemo() { loading={loading} checkboxSelection disableRowSelectionOnClick - rowThreshold={0} initialState={{ ...data.initialState, pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_FIELD, 'desk'] }, diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.tsx b/docs/data/data-grid/demo/FullFeaturedDemo.tsx index bb11d7539038..2928393ef60e 100644 --- a/docs/data/data-grid/demo/FullFeaturedDemo.tsx +++ b/docs/data/data-grid/demo/FullFeaturedDemo.tsx @@ -341,7 +341,6 @@ export default function FullFeaturedDemo() { loading={loading} checkboxSelection disableRowSelectionOnClick - rowThreshold={0} initialState={{ ...data.initialState, pinnedColumns: { left: [GRID_CHECKBOX_SELECTION_FIELD, 'desk'] }, diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js index b30a71abeae7..d0ed4e20b075 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.js +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.js @@ -368,6 +368,7 @@ const columns = [ flex: 0.2, minWidth: 100, groupable: false, + display: 'flex', renderCell: (params) => { if (params.aggregation) { return ; @@ -430,6 +431,7 @@ const columns = [ flex: 0.3, type: 'singleSelect', valueOptions: ['Premium', 'Pro', 'Community'], + display: 'flex', renderCell: (params) => { if (params.aggregation) { return ; @@ -519,7 +521,8 @@ export default function PopularFeaturesDemo() { }} sx={{ fontFamily: 'IBM Plex Sans', - [`& .${gridClasses.cell}`]: { + // Do not target cells in nested grids + [`& > div > div > div > div > div > .${gridClasses.cell}`]: { py: 1.5, }, [`& .${gridClasses.columnHeaderTitle}`]: { diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx index 982e81055f7e..907662d1d38a 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx @@ -383,6 +383,7 @@ const columns: GridColDef[] = [ flex: 0.2, minWidth: 100, groupable: false, + display: 'flex', renderCell: (params) => { if (params.aggregation) { return ; @@ -445,6 +446,7 @@ const columns: GridColDef[] = [ flex: 0.3, type: 'singleSelect', valueOptions: ['Premium', 'Pro', 'Community'], + display: 'flex', renderCell: (params: GridRenderCellParams) => { if (params.aggregation) { return ; @@ -540,7 +542,8 @@ export default function PopularFeaturesDemo() { }} sx={{ fontFamily: 'IBM Plex Sans', - [`& .${gridClasses.cell}`]: { + // Do not target cells in nested grids + [`& > div > div > div > div > div > .${gridClasses.cell}`]: { py: 1.5, }, [`& .${gridClasses.columnHeaderTitle}`]: { diff --git a/docs/data/data-grid/editing/AskConfirmationBeforeSave.js b/docs/data/data-grid/editing/AskConfirmationBeforeSave.js index 0ef962fe2744..82806abcca1c 100644 --- a/docs/data/data-grid/editing/AskConfirmationBeforeSave.js +++ b/docs/data/data-grid/editing/AskConfirmationBeforeSave.js @@ -78,7 +78,7 @@ export default function AskConfirmationBeforeSave() { resolve(response); setPromiseArguments(null); } catch (error) { - setSnackbar({ children: "Name can't be empty", severity: 'error' }); + setSnackbar({ children: 'Name cannot be empty', severity: 'error' }); reject(oldRow); setPromiseArguments(null); } diff --git a/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx b/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx index 669db71ae1af..618f7fc07178 100644 --- a/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx +++ b/docs/data/data-grid/editing/AskConfirmationBeforeSave.tsx @@ -95,7 +95,7 @@ export default function AskConfirmationBeforeSave() { resolve(response); setPromiseArguments(null); } catch (error) { - setSnackbar({ children: "Name can't be empty", severity: 'error' }); + setSnackbar({ children: 'Name cannot be empty', severity: 'error' }); reject(oldRow); setPromiseArguments(null); } diff --git a/docs/data/data-grid/editing/CustomEditComponent.js b/docs/data/data-grid/editing/CustomEditComponent.js index d5d5cd3596fd..bdacf3318440 100644 --- a/docs/data/data-grid/editing/CustomEditComponent.js +++ b/docs/data/data-grid/editing/CustomEditComponent.js @@ -58,6 +58,7 @@ const columns = [ { field: 'rating', headerName: 'Rating', + display: 'flex', renderCell: renderRating, renderEditCell: renderRatingEditInputCell, editable: true, diff --git a/docs/data/data-grid/editing/CustomEditComponent.tsx b/docs/data/data-grid/editing/CustomEditComponent.tsx index 63d036378717..d0fb1bde9c10 100644 --- a/docs/data/data-grid/editing/CustomEditComponent.tsx +++ b/docs/data/data-grid/editing/CustomEditComponent.tsx @@ -65,6 +65,7 @@ const columns: GridColDef[] = [ { field: 'rating', headerName: 'Rating', + display: 'flex', renderCell: renderRating, renderEditCell: renderRatingEditInputCell, editable: true, diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx b/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx index a3f845377b15..ea0680357f04 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 b060ee3cfc32..269309309210 100644 --- a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview +++ b/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview @@ -7,7 +7,7 @@ onRowEditStop={handleRowEditStop} processRowUpdate={processRowUpdate} slots={{ - toolbar: EditToolbar, + toolbar: EditToolbar as GridSlots['toolbar'], }} slotProps={{ toolbar: { setRows, setRowModesModel }, diff --git a/docs/data/data-grid/editing/ServerSidePersistence.js b/docs/data/data-grid/editing/ServerSidePersistence.js index 55490d8b23a7..5bd968a078d3 100644 --- a/docs/data/data-grid/editing/ServerSidePersistence.js +++ b/docs/data/data-grid/editing/ServerSidePersistence.js @@ -14,7 +14,7 @@ const useFakeMutation = () => { new Promise((resolve, reject) => { setTimeout(() => { if (user.name?.trim() === '') { - reject(new Error("Error while saving user: name can't be empty.")); + reject(new Error('Error while saving user: name cannot be empty.')); } else { resolve({ ...user, name: user.name?.toUpperCase() }); } diff --git a/docs/data/data-grid/editing/ServerSidePersistence.tsx b/docs/data/data-grid/editing/ServerSidePersistence.tsx index fe16dc37194a..22be81606f61 100644 --- a/docs/data/data-grid/editing/ServerSidePersistence.tsx +++ b/docs/data/data-grid/editing/ServerSidePersistence.tsx @@ -28,7 +28,7 @@ const useFakeMutation = () => { new Promise>((resolve, reject) => { setTimeout(() => { if (user.name?.trim() === '') { - reject(new Error("Error while saving user: name can't be empty.")); + reject(new Error('Error while saving user: name cannot be empty.')); } else { resolve({ ...user, name: user.name?.toUpperCase() }); } diff --git a/docs/data/data-grid/editing/StartEditButtonGrid.tsx b/docs/data/data-grid/editing/StartEditButtonGrid.tsx index 6397547acaac..98f848fd4e14 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/ValidateServerNameGrid.tsx b/docs/data/data-grid/editing/ValidateServerNameGrid.tsx index 0fa47993d171..5b460c759370 100644 --- a/docs/data/data-grid/editing/ValidateServerNameGrid.tsx +++ b/docs/data/data-grid/editing/ValidateServerNameGrid.tsx @@ -25,7 +25,7 @@ const StyledBox = styled('div')(({ theme }) => ({ }, })); -let promiseTimeout: any; +let promiseTimeout: ReturnType; function validateName(username: string): Promise { const existingUsers = rows.map((row) => row.name.toLowerCase()); diff --git a/docs/data/data-grid/editing/ValueParserSetterGrid.js b/docs/data/data-grid/editing/ValueParserSetterGrid.js index f7686a31037f..0dd07cf48e5c 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 6b2658657840..4ced3f4c3560 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 ae28abf66188..fcf48175f9a4 100644 --- a/docs/data/data-grid/editing/editing.md +++ b/docs/data/data-grid/editing/editing.md @@ -41,7 +41,7 @@ To enable this behavior, set the `editMode` prop on the Data Grid to `"row"`. No ``` The following demo illustrates how row editing works. -The user can [start](#start-editing) and [stop](#stop-editing) editing a row using the same actions as those provided for cell editing (e.g. double-clicking a cell). +The user can [start](#start-editing) and [stop](#stop-editing) editing a row using the same actions as those provided for cell editing (for example double-clicking a cell). {{"demo": "BasicRowEditingGrid.js", "bg": "inline", "defaultCodeOpen": false}} @@ -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 af7348a2d469..a8961cf3d97b 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/events/events.json b/docs/data/data-grid/events/events.json index 0ff032511df7..64c820e1c397 100644 --- a/docs/data/data-grid/events/events.json +++ b/docs/data/data-grid/events/events.json @@ -202,6 +202,13 @@ "event": "MuiEvent<{}>", "componentProp": "onResize" }, + { + "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], + "name": "densityChange", + "description": "Fired when the density changes.", + "params": "GridDensity", + "event": "MuiEvent<{}>" + }, { "projects": ["x-data-grid-premium"], "name": "excelExportStateChange", @@ -292,6 +299,13 @@ "event": "MuiEvent>", "componentProp": "onRowClick" }, + { + "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], + "name": "rowCountChange", + "description": "Fired when the row count change.", + "params": "number", + "event": "MuiEvent<{}>" + }, { "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], "name": "rowDoubleClick", @@ -300,14 +314,6 @@ "event": "MuiEvent>", "componentProp": "onRowDoubleClick" }, - { - "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], - "name": "rowEditCommit", - "description": "Fired when the props of the edit input are committed.", - "params": "GridRowId", - "event": "MuiEvent", - "componentProp": "onRowEditCommit" - }, { "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"], "name": "rowEditStart", diff --git a/docs/data/data-grid/events/events.md b/docs/data/data-grid/events/events.md index 5e380ee8b56f..170c71790af7 100644 --- a/docs/data/data-grid/events/events.md +++ b/docs/data/data-grid/events/events.md @@ -48,7 +48,7 @@ useGridApiEventHandler(apiRef, 'rowClick', handleEvent); ``` :::warning -This hook can only be used inside the scope of the Data Grid (i.e. inside component slots or cell renderers). +This hook can only be used inside the scope of the Data Grid (that is inside component slots or cell renderers). ::: The following demo shows how to subscribe to the `rowClick` event using `useGridApiEventHandler`—try it out by clicking on any row: diff --git a/docs/data/data-grid/export/export.md b/docs/data/data-grid/export/export.md index 1056d3cc9518..41145286c6f0 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/faq/faq.md b/docs/data/data-grid/faq/faq.md index aabf157af76c..823b9a6d1f7d 100644 --- a/docs/data/data-grid/faq/faq.md +++ b/docs/data/data-grid/faq/faq.md @@ -103,9 +103,9 @@ See more about the `renderCell` method in the [rendering cells](/x/react-data-gr It is a function that allows you to derive the cell value from the row data. It is the most performant way to customize the cell content. It is also the only way to customize the cell value without changing the row data. It should be used when you need to derive the cell value from the row data. Common use cases are: -- Transforming the value (e.g. convert a decimal value to a percentage value) -- Deriving the value from multiple fields (e.g. concatenating first name and last name) -- Deriving the value from a nested field (e.g. `user.address.city`) +- Transforming the value (for example convert a decimal value to a percentage value) +- Deriving the value from multiple fields (for example concatenating first name and last name) +- Deriving the value from a nested field (for example `user.address.city`) This value is also used internally in the Grid to filter, sort, and render (if no `renderCell` or `valueFormatter` is provided). You can learn more about it in the [value getter](/x/react-data-grid/column-definition/#value-getter) section. diff --git a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx b/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx index 65f85ed66171..2f686357b240 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() { ({ field, operator: 'is' }); -function AdminFilter(props: GridHeaderFilterCellProps) { +function AdminFilter(props: GridRenderHeaderFilterProps) { const { colDef } = props; const apiRef = useGridApiContext(); const filterModel = useGridSelector(apiRef, gridFilterModelSelector); @@ -76,7 +76,7 @@ export default function CustomHeaderFilterSingleDataGridPro() { return { ...colDef, width: 200, - renderHeaderFilter: (params: GridHeaderFilterCellProps) => ( + renderHeaderFilter: (params: GridRenderHeaderFilterProps) => ( ), }; diff --git a/docs/data/data-grid/filtering/QuickFilteringCustomLogic.js b/docs/data/data-grid/filtering/QuickFilteringCustomLogic.js index 168fd37a2b20..69003cef4005 100644 --- a/docs/data/data-grid/filtering/QuickFilteringCustomLogic.js +++ b/docs/data/data-grid/filtering/QuickFilteringCustomLogic.js @@ -20,7 +20,7 @@ const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; const getApplyQuickFilterFnSameYear = (value) => { if (!value || value.length !== 4 || !/\d{4}/.test(value)) { - // If the value is not a 4 digit string, it can not be a year so applying this filter is useless + // If the value is not a 4-digit string, it cannot be a year so applying this filter is useless return null; } return (cellValue) => { diff --git a/docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx b/docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx index 930e29b1c161..5baf7a7ab05d 100644 --- a/docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx +++ b/docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx @@ -26,7 +26,7 @@ const getApplyQuickFilterFnSameYear: GetApplyQuickFilterFn = ( value, ) => { if (!value || value.length !== 4 || !/\d{4}/.test(value)) { - // If the value is not a 4 digit string, it can not be a year so applying this filter is useless + // If the value is not a 4-digit string, it cannot be a year so applying this filter is useless return null; } return (cellValue) => { diff --git a/docs/data/data-grid/filtering/QuickFilteringDiacritics.js b/docs/data/data-grid/filtering/QuickFilteringDiacritics.js index 72466794f200..a5562cff2a68 100644 --- a/docs/data/data-grid/filtering/QuickFilteringDiacritics.js +++ b/docs/data/data-grid/filtering/QuickFilteringDiacritics.js @@ -19,7 +19,7 @@ const columns = [ 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/filtering/QuickFilteringDiacritics.tsx b/docs/data/data-grid/filtering/QuickFilteringDiacritics.tsx index 26197a90dbad..c54fb2e0a141 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/filtering/index.md b/docs/data/data-grid/filtering/index.md index 5fbdc9077dca..48f73b927bd8 100644 --- a/docs/data/data-grid/filtering/index.md +++ b/docs/data/data-grid/filtering/index.md @@ -36,7 +36,7 @@ A filter item represents a filtering rule and is composed of several elements: - `filterItem.field`: the field on which the rule applies. - `filterItem.value`: the value to look for. -- `filterItem.operator`: name of the operator method to use (e.g. _contains_), matches the `value` key of the operator object. +- `filterItem.operator`: name of the operator method to use (for example _contains_), matches the `value` key of the operator object. - `filterItem.id` ([](/x/introduction/licensing/#pro-plan 'Pro plan')): required when multiple filter items are used. :::info @@ -119,7 +119,7 @@ Filters are enabled by default, but you can easily disable this feature by setti To disable the filter of a single column, set the `filterable` property in `GridColDef` to `false`. -In the example below, the _rating_ column can not be filtered. +In the example below, the _rating_ column cannot be filtered. ```js diff --git a/docs/data/data-grid/filtering/quick-filter.md b/docs/data/data-grid/filtering/quick-filter.md index 280cd5a3e32d..fb43ebab0de8 100644 --- a/docs/data/data-grid/filtering/quick-filter.md +++ b/docs/data/data-grid/filtering/quick-filter.md @@ -82,7 +82,7 @@ In the example below, a custom filter is created for the `date` column to check ```ts const getApplyQuickFilterFn: GetApplyQuickFilterFn = (value) => { if (!value || value.length !== 4 || !/\d{4}/.test(value)) { - // If the value is not a 4 digit string, it can not be a year so applying this filter is useless + // If the value is not a 4 digit string, it cannot be a year so applying this filter is useless return null; } return (cellValue) => { diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md index 1a14adb1b347..466ff5502429 100644 --- a/docs/data/data-grid/getting-started/getting-started.md +++ b/docs/data/data-grid/getting-started/getting-started.md @@ -8,10 +8,6 @@ Using your favorite package manager, install `@mui/x-data-grid-pro` or `@mui/x-d -:::warning -The `next` tag is used to download the latest v7 **pre-release** version. -::: - {{"component": "modules/components/DataGridInstallationInstructions.js"}} The Data Grid package has a peer dependency on `@mui/material`. @@ -63,7 +59,7 @@ pnpm add @mui/styled-engine-sc styled-components :::info -Take a look at the [Styled Components guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine. +Take a look at the [Styled Components guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. ::: ## Quickstart diff --git a/docs/data/data-grid/joy-ui/joy-ui.md b/docs/data/data-grid/joy-ui/joy-ui.md index ad263c6ee6e2..864e37191ecf 100644 --- a/docs/data/data-grid/joy-ui/joy-ui.md +++ b/docs/data/data-grid/joy-ui/joy-ui.md @@ -1,5 +1,5 @@ -# Data Grid - Joy UI +# Data Grid - Joy UI -

Using the data grid with Joy UI components

+

Using the data grid with Joy UI components

{{"demo": "GridJoyUISlots.js", "bg": "inline"}} diff --git a/docs/data/data-grid/localization/DataGridRTL.js b/docs/data/data-grid/localization/DataGridRTL.js index abd88d606147..e5b06bc23c83 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 df697849b2d0..bd14585f5255 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 343c85085279..3ee05aff82c5 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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/packages/x-data-grid/src/locales/huHU.ts" }, { "languageTag": "it-IT", @@ -133,15 +133,15 @@ "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/master/packages/x-data-grid/src/locales/itIT.ts" }, { "languageTag": "ja-JP", "importName": "jaJP", "localeName": "Japanese", - "missingKeysCount": 3, + "missingKeysCount": 0, "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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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/master/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 0a2aa44e6753..117d8792a96d 100644 --- a/docs/data/data-grid/localization/localization.md +++ b/docs/data/data-grid/localization/localization.md @@ -7,7 +7,7 @@ The default locale of MUI X is English (United States). If you want to use othe ## Translation keys You can use the `localeText` prop to pass in your own text and translations. -You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/-/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) +You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/-/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository. In the following example, the labels of the density selector are customized. @@ -99,7 +99,7 @@ import { nlNL } from '@mui/x-data-grid/locales'; {{"demo": "DataGridLocalisationTableNoSnap.js", "hideToolbar": true, "bg": "inline"}} -You can [find the source](https://github.com/mui/mui-x/tree/HEAD/packages/grid/x-data-grid/src/locales) in the GitHub repository. +You can [find the source](https://github.com/mui/mui-x/tree/HEAD/packages/x-data-grid/src/locales) in the GitHub repository. To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. Note that these translations of the Data Grid component depend on the [Localization strategy](/material-ui/guides/localization/) of the whole library. @@ -107,7 +107,7 @@ Note that these translations of the Data Grid component depend on the [Localizat ## RTL Support Right-to-left languages such as Arabic, Persian, or Hebrew are supported. -Follow [this guide](/material-ui/guides/right-to-left/) to use them. +Follow [this guide](/material-ui/customization/right-to-left/) to use them. The example below demonstrates how to use an RTL language (Arabic) with the data grid. diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.js b/docs/data/data-grid/master-detail/BasicDetailPanels.js index 27441b5dc395..172e2c73444a 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, @@ -175,7 +175,6 @@ export default function BasicDetailPanels() { diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx index 44f2287d995f..e34bdf986196 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, @@ -177,7 +177,6 @@ export default function BasicDetailPanels() { diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview index ea6bfcbf5f28..ac41382b6e51 100644 --- a/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview +++ b/docs/data/data-grid/master-detail/BasicDetailPanels.tsx.preview @@ -1,7 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.js b/docs/data/data-grid/master-detail/ControlMasterDetail.js index ac0e5159d101..bebc52b7b177 100644 --- a/docs/data/data-grid/master-detail/ControlMasterDetail.js +++ b/docs/data/data-grid/master-detail/ControlMasterDetail.js @@ -29,7 +29,6 @@ export default function ControlMasterDetail() { ( {`Order #${row.id}`} )} diff --git a/docs/data/data-grid/master-detail/ControlMasterDetail.tsx b/docs/data/data-grid/master-detail/ControlMasterDetail.tsx index 77c09b13a4e4..611e8f8dd434 100644 --- a/docs/data/data-grid/master-detail/ControlMasterDetail.tsx +++ b/docs/data/data-grid/master-detail/ControlMasterDetail.tsx @@ -37,7 +37,6 @@ export default function ControlMasterDetail() { ( {`Order #${row.id}`} )} diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js index af60da408ca7..0f9a8b1b1f64 100644 --- a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js +++ b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.js @@ -30,7 +30,6 @@ export default function CustomizeDetailPanelToggle() { diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx index 4692667b60d5..47a78a7af50a 100644 --- a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx +++ b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx @@ -34,7 +34,6 @@ export default function CustomizeDetailPanelToggle() { diff --git a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview index 953b7b32aa50..d89161b50e8d 100644 --- a/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview +++ b/docs/data/data-grid/master-detail/CustomizeDetailPanelToggle.tsx.preview @@ -1,7 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js index 1b2979ef15af..cc6d34bac823 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, @@ -228,7 +228,6 @@ export default function DetailPanelAutoHeight() { diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx index 477b12e3c9aa..ed845bdc8f50 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, @@ -234,7 +234,6 @@ export default function DetailPanelAutoHeight() { diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview index ea6bfcbf5f28..ac41382b6e51 100644 --- a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview +++ b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx.preview @@ -1,7 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.js b/docs/data/data-grid/master-detail/FormDetailPanel.js index ce6831835d53..a09c4b6ab2e2 100644 --- a/docs/data/data-grid/master-detail/FormDetailPanel.js +++ b/docs/data/data-grid/master-detail/FormDetailPanel.js @@ -131,7 +131,6 @@ export default function FormDetailPanel() { diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.tsx b/docs/data/data-grid/master-detail/FormDetailPanel.tsx index f202ae9ba07e..12d6f209fc9b 100644 --- a/docs/data/data-grid/master-detail/FormDetailPanel.tsx +++ b/docs/data/data-grid/master-detail/FormDetailPanel.tsx @@ -139,7 +139,6 @@ export default function FormDetailPanel() { diff --git a/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview b/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview index ea6bfcbf5f28..ac41382b6e51 100644 --- a/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview +++ b/docs/data/data-grid/master-detail/FormDetailPanel.tsx.preview @@ -1,7 +1,6 @@ \ No newline at end of file diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js index dd37ac623ca1..c7aed919254c 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, @@ -201,7 +201,6 @@ export default function FullWidthDetailPanel() { 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, @@ -205,7 +205,6 @@ export default function FullWidthDetailPanel() { { ... }, []); ``` -Depending on the height of the detail panel, you may see a blank space when scrolling. -This is caused by the data grid using a lazy approach to update the rendered rows. -Set `rowThreshold` to 0 to force new rows to be rendered more often to fill the blank space. -Note that this may reduce the performance. - -```tsx - -``` - ::: ## Infer height from the content @@ -111,7 +102,7 @@ If this is not sufficient, the entire toggle component can be overridden. To fully customize it, add another column with `field: GRID_DETAIL_PANEL_TOGGLE_FIELD` to your set of columns. The grid will detect that there is already a toggle column defined and it will not add another toggle in the default position. The new toggle component can be provided via [`renderCell`](/x/react-data-grid/column-definition/#rendering-cells) in the same as any other column. -By only setting the `field`, is up to you to configure the remaining options (e.g. disable the column menu, filtering, sorting). +By only setting the `field`, is up to you to configure the remaining options (for example disable the column menu, filtering, sorting). To already start with a few suggested options configured, spread `GRID_DETAIL_PANEL_TOGGLE_COL_DEF` when defining the column. ```tsx diff --git a/docs/data/data-grid/overview/DataGridDemo.js b/docs/data/data-grid/overview/DataGridDemo.js index 7987b9fdb00f..b9bffd9e0279 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 5e5f83286274..44a9499bfa19 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/overview/overview.md b/docs/data/data-grid/overview/overview.md index f25f826b0a48..cec6d0fa1ed2 100644 --- a/docs/data/data-grid/overview/overview.md +++ b/docs/data/data-grid/overview/overview.md @@ -51,7 +51,7 @@ import { DataGridPro } from '@mui/x-data-grid-pro'; ### Premium plan [](/x/introduction/licensing/#premium-plan 'Premium plan') -The Premium version includes everything from Pro, as well as advanced features for data analysis and large dataset management, like row grouping with aggregation functions (e.g., Sum) and the ability to export to Excel files. +The Premium version includes everything from Pro, as well as advanced features for data analysis and large dataset management, like row grouping with aggregation functions (for example "Sum") and the ability to export to Excel files. You can visit the [showcase page](/x/react-data-grid/demo/) for a comprehensible overview of all features exclusive to this plan. @@ -74,6 +74,8 @@ Please see [the Licensing page](/x/introduction/licensing/) for details. - Built with and exclusively for React ⚛️ - High performance 🚀 - [Column groups](/x/react-data-grid/column-groups/) +- [Column resizing](/x/react-data-grid/column-dimensions/#resizing) +- [Column autosizing](/x/react-data-grid/column-dimensions/#autosizing) - [Filtering](/x/react-data-grid/filtering/), [multi-filters](/x/react-data-grid/filtering/multi-filters/) , and [header filters](/x/react-data-grid/filtering/header-filters/) - [Pagination](/x/react-data-grid/pagination/) - [Row & Cell editing](/x/react-data-grid/editing/) @@ -86,7 +88,6 @@ Please see [the Licensing page](/x/introduction/licensing/) for details. - [Excel export](/x/react-data-grid/export/#excel-export) - [Tree data](/x/react-data-grid/tree-data/) - [Master detail](/x/react-data-grid/master-detail/) -- [Resizable columns](/x/react-data-grid/column-dimensions/#resizing) - [100% customizable](/x/react-data-grid/style/) - Server-side data - [Column hiding](/x/react-data-grid/column-visibility/) @@ -109,9 +110,9 @@ You can find more details on, the [feature comparison](/x/react-data-grid/gettin Here are some resources you might be interested in to learn more about the data grid: -- The [source on GitHub](https://github.com/mui/mui-x/blob/-/packages/) +- The [source on GitHub](https://github.com/mui/mui-x/tree/HEAD/packages/) - The [Material Design specification](https://m2.material.io/components/data-tables) specification -- The accessibility [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) +- The accessibility [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) - The Figma, Adobe XD, and Sketch [design kits](https://mui.com/design-kits/). ## API diff --git a/docs/data/data-grid/pagination/pagination.md b/docs/data/data-grid/pagination/pagination.md index 397fdf04ce41..eebea559626f 100644 --- a/docs/data/data-grid/pagination/pagination.md +++ b/docs/data/data-grid/pagination/pagination.md @@ -33,7 +33,7 @@ You should provide an array of items, each item should be one of these types: Use the `autoPageSize` prop to auto-scale the `pageSize` to match the container height and the max number of rows that can be displayed without a vertical scroll bar. :::warning -You can't use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`. +You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`. ::: {{"demo": "PageSizeAuto.js", "bg": "inline"}} @@ -42,7 +42,7 @@ You can't use both the `autoPageSize` and `autoHeight` props at the same time be The default pagination behavior depends on your plan. -- On the `DataGrid`, pagination is enabled by default and can't be disabled. +- On the `DataGrid`, pagination is enabled by default and cannot be disabled. - On the `DataGridPro` and `DataGridPremium`, pagination is disabled by default; use the `pagination` prop to enable it. The following example activates pagination on a `DataGridPremium` component. diff --git a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js index 6c6ad41c2bcd..0d09526ce08d 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 d55e8a779683..e8c4da9dab49 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/RowGroupingSortingSingleGroupingColDef.js b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js similarity index 96% rename from docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js rename to docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js index 9274284cb3d0..1b61c7766519 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js +++ b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js @@ -11,7 +11,7 @@ import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import Select from '@mui/material/Select'; -export default function RowGroupingSortingSingleGroupingColDef() { +export default function RowGroupingFilteringSingleGroupingColDef() { const data = useMovieData(); const [mainGroupingCriteria, setMainGroupingCriteria] = React.useState('undefined'); diff --git a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx similarity index 96% rename from docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx rename to docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx index bc0cf2b01f87..ec2ffa02b495 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx @@ -11,7 +11,7 @@ import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import Select from '@mui/material/Select'; -export default function RowGroupingSortingSingleGroupingColDef() { +export default function RowGroupingFilteringSingleGroupingColDef() { const data = useMovieData(); const [mainGroupingCriteria, setMainGroupingCriteria] = React.useState('undefined'); diff --git a/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.js b/docs/data/data-grid/row-grouping/RowGroupingGroupingValueGetter.js index 0516dad488d3..f07843101f27 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 2ed31822cf4c..41b5f2b7ff6b 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 de63e20f769f..08ef4281d6cf 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/docs/data/data-grid/row-grouping/row-grouping.md @@ -187,7 +187,7 @@ It will disable all the features related to the row grouping, even if a model is ### For some columns In case you need to disable grouping on specific column(s), set the `groupable` property on the respective column definition (`GridColDef`) to `false`. -In the example below, the `director` column can not be grouped. And in all example, the `title` and `gross` columns can not be grouped. +In the example below, the `director` column cannot be grouped. In all examples, the `title` and `gross` columns cannot be grouped. {{"demo": "RowGroupingColDefCanBeGrouped.js", "bg": "inline", "defaultCodeOpen": false}} @@ -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, }, // ... ]; @@ -271,17 +271,20 @@ To change the default cell indent, you can use the `--DataGrid-cellOffsetMultipl ### Single grouping column -When using `rowGroupingColumnMode = "single"`, the default behavior is to apply the `sortComparator` and `filterOperators` of the top-level grouping criteria. +When using `rowGroupingColumnMode = "single"`, the default behavior is to: + +- sort each grouping criteria using the `sortComparator` of the column +- apply the `filterOperators` of the top-level grouping criteria If you are rendering leaves with the `leafField` property of `groupingColDef`, the sorting and filtering will be applied on the leaves based on the `sortComparator` and `filterOperators` of their original column. -In both cases, you can force the sorting and filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupingColDef` +You can force the filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupingColDef` :::warning This feature is not yet compatible with `sortingMode = "server"` and `filteringMode = "server"`. ::: -{{"demo": "RowGroupingSortingSingleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}} +{{"demo": "RowGroupingFilteringSingleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}} ### Multiple grouping columns @@ -305,7 +308,7 @@ If you are dynamically switching the `leafField` or `mainGroupingCriteria`, the ## Get the rows in a group You can use the `apiRef.current.getRowGroupChildren` method to get the id of all rows contained in a group. -It will not contain the autogenerated rows (i.e. the subgroup rows or the aggregation footers). +It will not contain the autogenerated rows (that is the subgroup rows or the aggregation footers). ```ts const rows: GridRowId[] = apiRef.current.getRowGroupChildren({ diff --git a/docs/data/data-grid/row-ordering/row-ordering.md b/docs/data/data-grid/row-ordering/row-ordering.md index 09e3922d1b2f..b4cd6e75930f 100644 --- a/docs/data/data-grid/row-ordering/row-ordering.md +++ b/docs/data/data-grid/row-ordering/row-ordering.md @@ -57,7 +57,7 @@ To change the icon used for the row reordering, you can provide a different comp Another way to customize is to add a column with `field: __reorder__` to your set of columns. That way, you can overwrite any of the properties from the `GRID_REORDER_COL_DEF` column. The grid will detect that there is already a reorder column defined and it will not add another one in the default position. -If you only set the `field`, then it is up to you to configure the remaining options (e.g. disable the column menu, filtering, sorting). +If you only set the `field`, then it is up to you to configure the remaining options (for example disable the column menu, filtering, sorting). To start with our suggested configuration, spread `GRID_REORDER_COL_DEF` when defining the column. ```tsx diff --git a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.js b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.js index 1d4910848972..6eb99d48c82e 100644 --- a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.js +++ b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.js @@ -1,14 +1,17 @@ import * as React from 'react'; -import { DataGridPro } from '@mui/x-data-grid-pro'; import { - useDemoData, + DataGridPro, + gridStringOrNumberComparator, + getGridStringOperators, +} from '@mui/x-data-grid-pro'; +import { getRealGridData, getCommodityColumns, randomInt, } from '@mui/x-data-grid-generator'; import LinearProgress from '@mui/material/LinearProgress'; -const MAX_ROW_LENGTH = 500; +const MAX_ROW_LENGTH = 1000; function sleep(duration) { return new Promise((resolve) => { @@ -18,51 +21,149 @@ function sleep(duration) { }); } +let allData; + +const columnFields = [ + 'id', + 'desk', + 'commodity', + 'traderName', + 'traderEmail', + 'brokerId', + 'brokerName', + 'counterPartyName', +]; + +const columns = getCommodityColumns().filter((column) => + columnFields.includes(column.field), +); + +const filterOperators = getGridStringOperators(); +const filterOperatorsLookup = filterOperators.reduce((acc, operator) => { + acc[operator.value] = operator; + return acc; +}, {}); + +async function fetchRows({ fromIndex, toIndex, sortModel, filterModel }) { + if (!allData) { + allData = await getRealGridData(MAX_ROW_LENGTH, columns); + } + await sleep(randomInt(100, 600)); + + fromIndex = Math.max(0, fromIndex); + fromIndex = Math.min(fromIndex, allData.rows.length); + + toIndex = Math.max(0, toIndex); + toIndex = Math.min(toIndex, allData.rows.length); + + let allRows = [...allData.rows]; + + if (sortModel && sortModel.length > 0) { + sortModel.forEach(({ field, sort }) => { + if (field && sort) { + allRows = allRows.sort((a, b) => { + return ( + gridStringOrNumberComparator(a[field], b[field], {}, {}) * + (sort === 'asc' ? 1 : -1) + ); + }); + } + }); + } + + if (filterModel && filterModel.items.length > 0) { + const method = filterModel.logicOperator === 'or' ? 'some' : 'every'; + + allRows = allRows.filter((row) => { + return filterModel.items[method]((item) => { + const filter = filterOperatorsLookup[item.operator]; + if (!filter) { + return true; + } + if (!filter.requiresFilterValue !== false && !item.value) { + return true; + } + const colDef = {}; + const apiRef = {}; + return filter.getApplyFilterFn(item, colDef)?.( + row[item.field], + row, + colDef, + apiRef, + ); + }); + }); + } + + const rows = allRows.slice(fromIndex, toIndex); + return rows; +} + export default function InfiniteLoadingGrid() { const [loading, setLoading] = React.useState(false); - const [loadedRows, setLoadedRows] = React.useState([]); - const mounted = React.useRef(true); - const { data } = useDemoData({ - dataSet: 'Commodity', - rowLength: 20, - maxColumns: 6, + const [rows, setRows] = React.useState([]); + const [sortModel, setSortModel] = React.useState([]); + const [filterModel, setFilterModel] = React.useState({ + items: [], }); - const loadServerRows = async (newRowLength) => { - setLoading(true); - const newData = await getRealGridData(newRowLength, getCommodityColumns()); - // Simulate network throttle - await sleep(randomInt(100, 600)); - - if (mounted.current) { + const handleOnRowsScrollEnd = React.useCallback( + async (params) => { + setLoading(true); + const fetchedRows = await fetchRows({ + fromIndex: rows.length, + toIndex: rows.length + params.viewportPageSize * 2, + sortModel, + filterModel, + }); setLoading(false); - setLoadedRows(loadedRows.concat(newData.rows)); - } - }; - - const handleOnRowsScrollEnd = (params) => { - if (loadedRows.length <= MAX_ROW_LENGTH) { - loadServerRows(params.viewportPageSize); - } - }; + setRows((prevRows) => prevRows.concat(fetchedRows)); + }, + [rows.length, sortModel, filterModel], + ); React.useEffect(() => { + let mounted = true; + (async () => { + setLoading(true); + const fetchedRows = await fetchRows({ + fromIndex: 0, + toIndex: 20, + sortModel, + filterModel, + }); + if (mounted) { + setLoading(false); + setRows(fetchedRows); + } + })(); + return () => { - mounted.current = true; + mounted = false; }; - }, []); + }, [sortModel, filterModel]); return (
); diff --git a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx index f25f0c832f9b..88210c82cd15 100644 --- a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx +++ b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx @@ -1,14 +1,23 @@ import * as React from 'react'; -import { DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro'; import { - useDemoData, + DataGridPro, + DataGridProProps, + GridSlots, + GridSortModel, + gridStringOrNumberComparator, + GridFilterModel, + getGridStringOperators, + GridFilterOperator, +} from '@mui/x-data-grid-pro'; +import { getRealGridData, getCommodityColumns, randomInt, + GridDemoData, } from '@mui/x-data-grid-generator'; import LinearProgress from '@mui/material/LinearProgress'; -const MAX_ROW_LENGTH = 500; +const MAX_ROW_LENGTH = 1000; function sleep(duration: number) { return new Promise((resolve) => { @@ -18,51 +27,162 @@ function sleep(duration: number) { }); } +let allData: GridDemoData | undefined; + +const columnFields = [ + 'id', + 'desk', + 'commodity', + 'traderName', + 'traderEmail', + 'brokerId', + 'brokerName', + 'counterPartyName', +]; +const columns = getCommodityColumns().filter((column) => + columnFields.includes(column.field), +); + +const filterOperators = getGridStringOperators(); +const filterOperatorsLookup = filterOperators.reduce< + Record +>((acc, operator) => { + acc[operator.value] = operator; + return acc; +}, {}); + +async function fetchRows({ + fromIndex, + toIndex, + sortModel, + filterModel, +}: { + fromIndex: number; + toIndex: number; + sortModel: GridSortModel; + filterModel: GridFilterModel; +}) { + if (!allData) { + allData = await getRealGridData(MAX_ROW_LENGTH, columns); + } + await sleep(randomInt(100, 600)); + + fromIndex = Math.max(0, fromIndex); + fromIndex = Math.min(fromIndex, allData.rows.length); + + toIndex = Math.max(0, toIndex); + toIndex = Math.min(toIndex, allData.rows.length); + + let allRows = [...allData.rows]; + + if (sortModel && sortModel.length > 0) { + sortModel.forEach(({ field, sort }) => { + if (field && sort) { + allRows = allRows.sort((a, b) => { + return ( + gridStringOrNumberComparator(a[field], b[field], {} as any, {} as any) * + (sort === 'asc' ? 1 : -1) + ); + }); + } + }); + } + + if (filterModel && filterModel.items.length > 0) { + const method = filterModel.logicOperator === 'or' ? 'some' : 'every'; + + allRows = allRows.filter((row) => { + return filterModel.items[method]((item) => { + const filter = filterOperatorsLookup[item.operator]; + if (!filter) { + return true; + } + if (!filter.requiresFilterValue !== false && !item.value) { + return true; + } + const colDef = {} as any; + const apiRef = {} as any; + return filter.getApplyFilterFn(item, colDef)?.( + row[item.field], + row, + colDef, + apiRef, + ); + }); + }); + } + + const rows = allRows.slice(fromIndex, toIndex); + return rows; +} + export default function InfiniteLoadingGrid() { const [loading, setLoading] = React.useState(false); - const [loadedRows, setLoadedRows] = React.useState([]); - const mounted = React.useRef(true); - const { data } = useDemoData({ - dataSet: 'Commodity', - rowLength: 20, - maxColumns: 6, + const [rows, setRows] = React.useState([]); + const [sortModel, setSortModel] = React.useState([]); + const [filterModel, setFilterModel] = React.useState({ + items: [], }); - const loadServerRows = async (newRowLength: number) => { - setLoading(true); - const newData = await getRealGridData(newRowLength, getCommodityColumns()); - // Simulate network throttle - await sleep(randomInt(100, 600)); - - if (mounted.current) { + const handleOnRowsScrollEnd = React.useCallback< + NonNullable + >( + async (params) => { + setLoading(true); + const fetchedRows = await fetchRows({ + fromIndex: rows.length, + toIndex: rows.length + params.viewportPageSize * 2, + sortModel, + filterModel, + }); setLoading(false); - setLoadedRows(loadedRows.concat(newData.rows)); - } - }; - - const handleOnRowsScrollEnd: DataGridProProps['onRowsScrollEnd'] = (params) => { - if (loadedRows.length <= MAX_ROW_LENGTH) { - loadServerRows(params.viewportPageSize); - } - }; + setRows((prevRows) => prevRows.concat(fetchedRows)); + }, + [rows.length, sortModel, filterModel], + ); React.useEffect(() => { + let mounted = true; + (async () => { + setLoading(true); + const fetchedRows = await fetchRows({ + fromIndex: 0, + toIndex: 20, + sortModel, + filterModel, + }); + if (mounted) { + setLoading(false); + setRows(fetchedRows); + } + })(); + return () => { - mounted.current = true; + mounted = false; }; - }, []); + }, [sortModel, filterModel]); return (
); diff --git a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview b/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview deleted file mode 100644 index db0cc47aa791..000000000000 --- a/docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/data-grid/row-updates/LazyLoadingGrid.js b/docs/data/data-grid/row-updates/LazyLoadingGrid.js index 6a53f34caf2f..7acc1a654e54 100644 --- a/docs/data/data-grid/row-updates/LazyLoadingGrid.js +++ b/docs/data/data-grid/row-updates/LazyLoadingGrid.js @@ -97,9 +97,6 @@ export default function LazyLoadingGrid() { filterMode="server" rowsLoadingMode="server" onFetchRows={debouncedHandleFetchRows} - experimentalFeatures={{ - lazyLoading: true, - }} />
); diff --git a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx index f228e1ff8711..16d46719cb03 100644 --- a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx +++ b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx @@ -105,9 +105,6 @@ export default function LazyLoadingGrid() { filterMode="server" rowsLoadingMode="server" onFetchRows={debouncedHandleFetchRows} - experimentalFeatures={{ - lazyLoading: true, - }} />
); diff --git a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview index 76d26a1e110b..5b46e03ab75d 100644 --- a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview +++ b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview @@ -8,7 +8,4 @@ filterMode="server" rowsLoadingMode="server" onFetchRows={debouncedHandleFetchRows} - experimentalFeatures={{ - lazyLoading: true, - }} /> \ No newline at end of file diff --git a/docs/data/data-grid/row-updates/row-updates.md b/docs/data/data-grid/row-updates/row-updates.md index 1462d826b041..e1b8e9680284 100644 --- a/docs/data/data-grid/row-updates/row-updates.md +++ b/docs/data/data-grid/row-updates/row-updates.md @@ -40,17 +40,13 @@ In addition, the area in which `onRowsScrollEnd` is called can be changed using {{"demo": "InfiniteLoadingGrid.js", "bg": "inline", "disableAd": true}} -## Lazy loading [](/x/introduction/licensing/#pro-plan 'Pro plan') - -:::warning -This feature is experimental and must be explicitly activated using the `lazyLoading` experimental feature flag: - -```tsx - -``` - +:::info +For sorting and filtering to work properly with the infinite loading, they should be applied on the server-side. +Otherwise, the sorting and filtering will only be applied to the subset of rows that have been loaded. ::: +## Lazy loading [](/x/introduction/licensing/#pro-plan 'Pro plan') + Lazy Loading works like a pagination system, but instead of loading new rows based on pages, it loads them based on the viewport. It loads new rows in chunks, as the user scrolls through the data grid and reveals empty rows. diff --git a/docs/data/data-grid/server-side-data/aggregation.md b/docs/data/data-grid/server-side-data/aggregation.md index fdbaf839ca6f..99b226b77770 100644 --- a/docs/data/data-grid/server-side-data/aggregation.md +++ b/docs/data/data-grid/server-side-data/aggregation.md @@ -4,7 +4,7 @@ title: React Server-side row grouping # Data Grid - Server-side aggregation [](/x/introduction/licensing/#premium-plan 'Premium plan')🚧 -

Aggregation with server side data source.

+

Aggregation with server-side data source.

:::warning This feature isn't implemented yet. It's coming. diff --git a/docs/data/data-grid/server-side-data/index.md b/docs/data/data-grid/server-side-data/index.md index 13ee31d9b005..a626f60d7c3c 100644 --- a/docs/data/data-grid/server-side-data/index.md +++ b/docs/data/data-grid/server-side-data/index.md @@ -63,7 +63,7 @@ This example only scratches the surface with a lot of problems still unsolved li - Performance optimization - Caching data/deduping requests - More complex use-cases on the server like grouping, tree data, etc. -- Server side row editing +- Server-side row editing - Lazy loading of data - Handling updates to the data like row editing, row deletion, etc. - Refetching data on-demand @@ -182,7 +182,7 @@ interface GetRowsResponse { rows: GridRowModel[]; /** * To reflect updates in total `rowCount` (optional) - * Useful when the `rowCount` is inaccurate (e.g. when filtering) or not available upfront + * Useful when the `rowCount` is inaccurate (for example when filtering) or not available upfront */ rowCount?: number; /** diff --git a/docs/data/data-grid/server-side-data/infinite-loading.md b/docs/data/data-grid/server-side-data/infinite-loading.md index c317a2bb4fd2..d2bcc0e58d03 100644 --- a/docs/data/data-grid/server-side-data/infinite-loading.md +++ b/docs/data/data-grid/server-side-data/infinite-loading.md @@ -4,7 +4,7 @@ title: React Server-side infinite loading # Data Grid - Server-side infinite loading [](/x/introduction/licensing/#pro-plan 'Pro plan')🚧 -

Row infinite loading with server side data source.

+

Row infinite loading with server-side data source.

:::warning This feature isn't implemented yet. It's coming. diff --git a/docs/data/data-grid/server-side-data/lazy-loading.md b/docs/data/data-grid/server-side-data/lazy-loading.md index 849d0c9ba721..6c66183ab0e6 100644 --- a/docs/data/data-grid/server-side-data/lazy-loading.md +++ b/docs/data/data-grid/server-side-data/lazy-loading.md @@ -4,7 +4,7 @@ title: React Server-side lazy loading # Data Grid - Server-side lazy loading [](/x/introduction/licensing/#pro-plan 'Pro plan')🚧 -

Row lazy-loading with server side data source.

+

Row lazy-loading with server-side data source.

:::warning This feature isn't implemented yet. It's coming. diff --git a/docs/data/data-grid/server-side-data/row-grouping.md b/docs/data/data-grid/server-side-data/row-grouping.md index 3dd487f34f27..537ef8ad0d54 100644 --- a/docs/data/data-grid/server-side-data/row-grouping.md +++ b/docs/data/data-grid/server-side-data/row-grouping.md @@ -4,7 +4,7 @@ title: React Server-side row grouping # Data Grid - Server-side row grouping [](/x/introduction/licensing/#pro-plan 'Pro plan')🚧 -

Lazy-loaded row grouping with server side data source.

+

Lazy-loaded row grouping with server-side data source.

:::warning This feature isn't implemented yet. It's coming. diff --git a/docs/data/data-grid/server-side-data/tree-data.md b/docs/data/data-grid/server-side-data/tree-data.md index 7ce5524f9c16..ba9d93e36719 100644 --- a/docs/data/data-grid/server-side-data/tree-data.md +++ b/docs/data/data-grid/server-side-data/tree-data.md @@ -4,7 +4,7 @@ title: React Server-side tree data # Data Grid - Server-side tree data [](/x/introduction/licensing/#pro-plan 'Pro plan')🚧 -

Tree data lazy-loading with server side data source.

+

Tree data lazy-loading with server-side data source.

:::warning This feature isn't implemented yet. It's coming. diff --git a/docs/data/data-grid/sorting/ExtendedSortComparator.js b/docs/data/data-grid/sorting/ExtendedSortComparator.js index 86acdc0d08ee..705eb59585e8 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 ddeef60aeb35..5419a57b3eea 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 ecd8c8a0112a..be364bee8b75 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 22a7ee744160..1ffd85dad444 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/sorting/GetSortComparator.js b/docs/data/data-grid/sorting/GetSortComparator.js new file mode 100644 index 000000000000..53ff478e3289 --- /dev/null +++ b/docs/data/data-grid/sorting/GetSortComparator.js @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { DataGrid, gridStringOrNumberComparator } from '@mui/x-data-grid'; +import { + randomQuantity, + randomId, + randomCommodity, +} from '@mui/x-data-grid-generator'; + +const columns = [ + { field: 'commodity', headerName: 'Commodity', width: 200 }, + { + type: 'number', + field: 'quantity', + headerName: 'Quantity', + getSortComparator: (sortDirection) => { + const modifier = sortDirection === 'desc' ? -1 : 1; + return (value1, value2, cellParams1, cellParams2) => { + if (value1 === null) { + return 1; + } + if (value2 === null) { + return -1; + } + return ( + modifier * + gridStringOrNumberComparator(value1, value2, cellParams1, cellParams2) + ); + }; + }, + }, +]; + +const rows = [ + { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() }, + { id: randomId(), commodity: randomCommodity(), quantity: null }, + { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() }, + { id: randomId(), commodity: randomCommodity(), quantity: null }, + { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() }, +]; + +export default function GetSortComparator() { + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/sorting/GetSortComparator.tsx b/docs/data/data-grid/sorting/GetSortComparator.tsx new file mode 100644 index 000000000000..7cdf29c2d073 --- /dev/null +++ b/docs/data/data-grid/sorting/GetSortComparator.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import { + DataGrid, + GridColDef, + gridStringOrNumberComparator, +} from '@mui/x-data-grid'; +import { + randomQuantity, + randomId, + randomCommodity, +} from '@mui/x-data-grid-generator'; + +const columns: GridColDef[] = [ + { field: 'commodity', headerName: 'Commodity', width: 200 }, + { + type: 'number', + field: 'quantity', + headerName: 'Quantity', + getSortComparator: (sortDirection) => { + const modifier = sortDirection === 'desc' ? -1 : 1; + return (value1, value2, cellParams1, cellParams2) => { + if (value1 === null) { + return 1; + } + if (value2 === null) { + return -1; + } + return ( + modifier * + gridStringOrNumberComparator(value1, value2, cellParams1, cellParams2) + ); + }; + }, + }, +]; + +const rows = [ + { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() }, + { id: randomId(), commodity: randomCommodity(), quantity: null }, + { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() }, + { id: randomId(), commodity: randomCommodity(), quantity: null }, + { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() }, +]; + +export default function GetSortComparator() { + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/sorting/GetSortComparator.tsx.preview b/docs/data/data-grid/sorting/GetSortComparator.tsx.preview new file mode 100644 index 000000000000..6f326f7a9cd1 --- /dev/null +++ b/docs/data/data-grid/sorting/GetSortComparator.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/sorting/sorting.md b/docs/data/data-grid/sorting/sorting.md index 3b486b634f8d..858cfec142d0 100644 --- a/docs/data/data-grid/sorting/sorting.md +++ b/docs/data/data-grid/sorting/sorting.md @@ -118,6 +118,16 @@ The sorting is based on `isAdmin` and then on `name`, if necessary. It re-uses t {{"demo": "ExtendedSortComparator.js", "bg": "inline", "defaultCodeOpen": false}} +### Asymmetric comparator + +The Data Grid considers the `sortComparator` function symmetric, automatically reversing the return value for descending sorting by multiplying it by `-1`. + +While this is sufficient for most use cases, it is possible to define an asymmetric comparator using the `getSortComparator` function – it receives the sorting direction as an argument and returns a comparator function. + +In the demo below, the `getSortComparator` function is used in the "Quantity" column to keep the `null` values at the bottom when sorting is applied (regardless of the sorting direction): + +{{"demo": "GetSortComparator.js", "bg": "inline", "defaultCodeOpen": false}} + ## Custom sort order By default, the sort order cycles between these three different modes: diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx b/docs/data/data-grid/state/RestoreStateInitialState.tsx index 7e576cec4eb9..d953a4a8e5a5 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 cb7e99c92deb..a02338eabb0b 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/state/state.md b/docs/data/data-grid/state/state.md index 8ba74653c21d..8555125b1009 100644 --- a/docs/data/data-grid/state/state.md +++ b/docs/data/data-grid/state/state.md @@ -11,7 +11,7 @@ This prop has the same format as the returned value of `apiRef.current.exportSta The `initialState` can only be used to set the initial value of the state. The Data Grid will not react if you change the `initialState` value later on. -If you need to fully control specific models, use the control props instead (e.g. [`prop.filterModel`](/x/react-data-grid/filtering/#controlled-filters) or [`prop.sortModel`](https://mui.com/x/react-data-grid/sorting/#controlled-sort-model)). +If you need to fully control specific models, use the control props instead (for example [`prop.filterModel`](/x/react-data-grid/filtering/#controlled-filters) or [`prop.sortModel`](https://mui.com/x/react-data-grid/sorting/#controlled-sort-model)). You can find more information on the corresponding feature documentation page. ::: @@ -96,7 +96,7 @@ If you restore the page using `initialState` before the data is fetched, the Dat ### Save and restore the state from external storage -You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (e.g. using local storage or redux). +You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (for example using local storage or redux). This way the state can be persisted on refresh or navigating to another page. In the following demo, the state is saved to `localStorage` and restored when the page is refreshed. diff --git a/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.js b/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.js new file mode 100644 index 000000000000..dee2d4bd4158 --- /dev/null +++ b/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.js @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro'; + +const rows = [ + { + id: 1, + username: '@MUI', + age: 20, + }, +]; + +const columns = [ + { + field: 'id', + }, + { + field: 'username', + width: 200, + resizable: false, + }, + { + field: 'age', + width: 100, + resizable: false, + }, +]; + +export default function ColumnHeaderHideSeparator() { + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.tsx b/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.tsx new file mode 100644 index 000000000000..960c554ed66c --- /dev/null +++ b/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { DataGridPro, GridColDef, gridClasses } from '@mui/x-data-grid-pro'; + +const rows = [ + { + id: 1, + username: '@MUI', + age: 20, + }, +]; + +const columns: GridColDef[] = [ + { + field: 'id', + }, + { + field: 'username', + width: 200, + resizable: false, + }, + { + field: 'age', + width: 100, + resizable: false, + }, +]; + +export default function ColumnHeaderHideSeparator() { + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.tsx.preview b/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.tsx.preview new file mode 100644 index 000000000000..8411416b6d50 --- /dev/null +++ b/docs/data/data-grid/style-recipes/ColumnHeaderHideSeparator.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.js b/docs/data/data-grid/style-recipes/StylingAllCellsButAggregation.js index 4ed59c8b462b..da7be8770849 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 5d0d5c0200c7..f26c378f9e60 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-recipes/style-recipes.md b/docs/data/data-grid/style-recipes/style-recipes.md index 4aa1485c560c..23cbd060e11f 100644 --- a/docs/data/data-grid/style-recipes/style-recipes.md +++ b/docs/data/data-grid/style-recipes/style-recipes.md @@ -13,6 +13,17 @@ Removing the visible `focus` state hurts the accessibility of the grid. {{"demo": "CellFocusNoOutline.js", "bg": "inline", "defaultCodeOpen": false}} +## Remove drag handle for columns that are not resizeable + +In the MUI Data Grid, each column has a resize handle that allows users to adjust the width of the column. +However, there might be cases where you want to disable this feature for certain columns. + +To hide the drag handles on columns that are not resizable, you can use the resizable property in the GridColDef object. +When the column is not resizable, the drag handle will not have the `columnSeparator--resizable` class. +We can use that to hide the separator. + +{{"demo": "ColumnHeaderHideSeparator.js", "bg": "inline", "defaultCodeOpen": false}} + ## Styling Cells without impacting aggregation cells [](/x/introduction/licensing/#premium-plan 'Premium plan') Aggregation cells do not receive a special class, so styling cells without impacting them needs a small workaround in the `getClassName` function. diff --git a/docs/data/data-grid/style/StylingAllCells.js b/docs/data/data-grid/style/StylingAllCells.js index ebd925f7e3b8..6760aea754cc 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 ef089f4c9a6b..08d1222d64f8 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 1a7a7ff8ad46..873711c2d23f 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 ca3e81a973cf..c69ba21dd243 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 e482cad77dcb..4262567ee62a 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 a7a5d9bea059..bc3e5e34b4d5 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/data-grid/virtualization/ColumnVirtualizationGrid.js b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js index b789fd690dc4..014b0e55bfec 100644 --- a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js +++ b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.js @@ -39,7 +39,7 @@ export default function ColumnVirtualizationGrid() { return (
- +
); } diff --git a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx index ef0aa8f4d8a9..c314fa3160c4 100644 --- a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx +++ b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx @@ -49,7 +49,7 @@ export default function ColumnVirtualizationGrid() { return (
- +
); } diff --git a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview index 0fa5d537a93f..ce7543c27f81 100644 --- a/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview +++ b/docs/data/data-grid/virtualization/ColumnVirtualizationGrid.tsx.preview @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/data-grid/virtualization/virtualization.md b/docs/data/data-grid/virtualization/virtualization.md index 7ee018b63d75..bc14f817113f 100644 --- a/docs/data/data-grid/virtualization/virtualization.md +++ b/docs/data/data-grid/virtualization/virtualization.md @@ -11,7 +11,7 @@ _\*unlimited: Browsers set a limit on the number of pixels a scroll container ca Row virtualization is the insertion and removal of rows as the data grid scrolls vertically. -The grid renders twice as many rows as are visible. It isn't configurable yet. +The grid renders some additional rows above and below the visible rows. You can use `rowBufferPx` prop to hint to the Data Grid the area to render, but this value may not be respected in certain situations, for example during high-speed scrolling. Row virtualization is limited to 100 rows in the `DataGrid` component. ## Column virtualization @@ -23,11 +23,11 @@ Column virtualization is the insertion and removal of columns as the data grid s - Overscanning more allows the built-in search feature of the browser to find more matching cells. - Overscanning too much can negatively impact performance. -By default, 2 columns are rendered outside of the viewport. You can change this option with the `columnBuffer` prop. The following demo renders 1,000 columns in total: +By default, columns coming under 150 pixels region are rendered outside of the viewport. You can change this option with the `columnBufferPx` prop. As for `rowBufferPx`, the value may be ignored in some situations. The following demo renders 1,000 columns in total: {{"demo": "ColumnVirtualizationGrid.js", "bg": "inline"}} -You can disable column virtualization by setting the column buffer to a higher number than the number of rendered columns, e.g. with `columnBuffer={columns.length}` or `columnBuffer={Number.MAX_SAFE_INTEGER}`. +You can disable column virtualization by calling `apiRef.current.unstable_setColumnVirtualization(false)`, or by setting the column buffer to the number of total columns. ## Disable virtualization diff --git a/docs/data/date-pickers-component-api-pages.ts b/docs/data/date-pickers-component-api-pages.ts index a4613479d450..739009bd7113 100644 --- a/docs/data/date-pickers-component-api-pages.ts +++ b/docs/data/date-pickers-component-api-pages.ts @@ -163,6 +163,11 @@ const apiPages: MuiPage[] = [ pathname: '/x/api/date-pickers/pickers-layout', title: 'PickersLayout', }, + { + pathname: '/x/api/date-pickers/pickers-range-calendar-header', + title: 'PickersRangeCalendarHeader', + plan: 'pro', + }, { pathname: '/x/api/date-pickers/pickers-section-list', title: 'PickersSectionList', diff --git a/docs/data/date-pickers/adapters-locale/FieldPlaceholder.js b/docs/data/date-pickers/adapters-locale/FieldPlaceholder.js index 3d6d7780f630..75c82c1dfd6b 100644 --- a/docs/data/date-pickers/adapters-locale/FieldPlaceholder.js +++ b/docs/data/date-pickers/adapters-locale/FieldPlaceholder.js @@ -19,7 +19,7 @@ export default function FieldPlaceholder() { dateAdapter={AdapterDayjs} // Define the date locale to have the right format `day.month.year`. adapterLocale="de" - // Define the translations to have the right placeholders (e.g. `JJJJ` for the year). + // Define the translations to have the right placeholders (for example `JJJJ` for the year). localeText={germanLocale} > diff --git a/docs/data/date-pickers/adapters-locale/FieldPlaceholder.tsx b/docs/data/date-pickers/adapters-locale/FieldPlaceholder.tsx index 3d6d7780f630..75c82c1dfd6b 100644 --- a/docs/data/date-pickers/adapters-locale/FieldPlaceholder.tsx +++ b/docs/data/date-pickers/adapters-locale/FieldPlaceholder.tsx @@ -19,7 +19,7 @@ export default function FieldPlaceholder() { dateAdapter={AdapterDayjs} // Define the date locale to have the right format `day.month.year`. adapterLocale="de" - // Define the translations to have the right placeholders (e.g. `JJJJ` for the year). + // Define the translations to have the right placeholders (for example `JJJJ` for the year). localeText={germanLocale} > diff --git a/docs/data/date-pickers/adapters-locale/FieldPlaceholder.tsx.preview b/docs/data/date-pickers/adapters-locale/FieldPlaceholder.tsx.preview index 75dfaceb1063..eba9949fe496 100644 --- a/docs/data/date-pickers/adapters-locale/FieldPlaceholder.tsx.preview +++ b/docs/data/date-pickers/adapters-locale/FieldPlaceholder.tsx.preview @@ -7,7 +7,7 @@ dateAdapter={AdapterDayjs} // Define the date locale to have the right format `day.month.year`. adapterLocale="de" - // Define the translations to have the right placeholders (e.g. `JJJJ` for the year). + // Define the translations to have the right placeholders (for example `JJJJ` for the year). localeText={germanLocale} > diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 5bb45bacae46..6ab1f2944f39 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -43,7 +43,7 @@ For `date-fns`, import the locale and pass it to `LocalizationProvider`: :::info Both `date-fns` major versions (v2.x and v3.x) are supported. -A single adapter can not work for both `date-fns` v2.x and v3.x, because the way functions are exported has been changed in v3.x. +A single adapter cannot work for both `date-fns` v2.x and v3.x, because the way functions are exported has been changed in v3.x. To use `date-fns` v3.x, you will have to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV3` instead of `@mui/x-date-pickers/AdapterDateFns`. ::: @@ -96,7 +96,7 @@ import 'moment/locale/de'; ## Meridiem — 12h/24h format -All the time and datetime components will automatically adjust to the locale's time setting, i.e. the 12-hour or 24-hour format. +All the time and datetime components will automatically adjust to the locale's time setting, that is the 12-hour or 24-hour format. You can override the default setting with the `ampm` prop: {{"demo": "AmPMCustomization.js"}} @@ -141,7 +141,7 @@ Here is the list of the currently supported formats: - The month - ✅ 1-based digit (e.g: `08`) - - ✅ Multi-letter values (e.g. `Aug`, `August`) + - ✅ Multi-letter values (for example `Aug`, `August`) - ❌ 1-letter values (e.g: `A`) because several months are represented with the same letter - The day of the month @@ -291,18 +291,25 @@ dayjs.updateLocale('en', { ### With `date-fns` -For `date-fns`, use the `setDefaultOptions` utility: +For `date-fns`, override the `options.weekStartsOn` of the used locale: ```ts +import { Locale } from 'date-fns'; // with date-fns v2.x -import setDefaultOptions from 'date-fns/setDefaultOptions'; +import enUS from 'date-fns/locale/en-US'; // with date-fns v3.x -import { setDefaultOptions } from 'date-fns/setDefaultOptions'; +import { enUS } from 'date-fns/locale/en-US'; -setDefaultOptions({ - // Sunday = 0, Monday = 1. - weekStartsOn: 1, -}); +const customEnLocale: Locale = { + ...enUS, + options: { + ...enUS.options, + // Sunday = 0, Monday = 1. + weekStartsOn: 1, + }, +}; + + ``` ### With `luxon` @@ -310,7 +317,7 @@ setDefaultOptions({ For `luxon`, use the `Settings.defaultWeekSettings` object: ```ts -import { Settings } from 'luxon'; +import { Settings, Info } from 'luxon'; Settings.defaultWeekSettings = { // Sunday = 7, Monday = 1. diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md index 53befcef5c33..04ae6a33fa60 100644 --- a/docs/data/date-pickers/base-concepts/base-concepts.md +++ b/docs/data/date-pickers/base-concepts/base-concepts.md @@ -65,12 +65,12 @@ The demo below shows each one of them using their field component: Each _Picker_ is available in a responsive, desktop and mobile variant: -- The responsive component (e.g. `DatePicker`) which renders the desktop component or the mobile one depending on the device it runs on. +- The responsive component (for example `DatePicker`) which renders the desktop component or the mobile one depending on the device it runs on. -- The desktop component (e.g. `DesktopDatePicker`) which works best for mouse devices and large screens. +- The desktop component (for example `DesktopDatePicker`) which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field. -- The mobile component (e.g. `MobileDatePicker`) which works best for touch devices and small screens. +- The mobile component (for example `MobileDatePicker`) which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field. {{"demo": "ResponsivePickers.js"}} @@ -151,7 +151,7 @@ Importing it from `@mui/x-date-pickers-pro` is enough. ### Responsive components :::info -Some test environments (i.e. `jsdom`) do not support media query. In such cases, components will be rendered in desktop mode. To modify this behavior you can fake the `window.matchMedia`. +Some test environments (for example `jsdom`) do not support media query. In such cases, components will be rendered in desktop mode. To modify this behavior you can fake the `window.matchMedia`. ::: Be aware that running tests in headless browsers might not pass the default mediaQuery (`pointer: fine`). diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js new file mode 100644 index 000000000000..b789f8a216ed --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.js @@ -0,0 +1,64 @@ +import * as React from 'react'; + +import { styled } from '@mui/material/styles'; +import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; +import IconButton from '@mui/material/IconButton'; +import ChevronLeft from '@mui/icons-material/ChevronLeft'; +import ChevronRight from '@mui/icons-material/ChevronRight'; +import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'; +import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; + +const CustomCalendarHeaderRoot = styled('div')({ + display: 'flex', + justifyContent: 'space-between', + padding: '8px 16px', + alignItems: 'center', +}); + +function CustomCalendarHeader(props) { + const { currentMonth, onMonthChange } = props; + + const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'), 'left'); + const selectNextYear = () => onMonthChange(currentMonth.add(1, 'year'), 'left'); + const selectPreviousMonth = () => + onMonthChange(currentMonth.subtract(1, 'month'), 'right'); + const selectPreviousYear = () => + onMonthChange(currentMonth.subtract(1, 'year'), 'right'); + + return ( + + + + + + + + + + {currentMonth.format('MMMM YYYY')} + + + + + + + + + + ); +} + +export default function CalendarHeaderComponent() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx new file mode 100644 index 000000000000..9810d5f955c0 --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import { styled } from '@mui/material/styles'; +import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; +import IconButton from '@mui/material/IconButton'; +import ChevronLeft from '@mui/icons-material/ChevronLeft'; +import ChevronRight from '@mui/icons-material/ChevronRight'; +import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'; +import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; +import { PickersCalendarHeaderProps } from '@mui/x-date-pickers/PickersCalendarHeader'; + +const CustomCalendarHeaderRoot = styled('div')({ + display: 'flex', + justifyContent: 'space-between', + padding: '8px 16px', + alignItems: 'center', +}); + +function CustomCalendarHeader(props: PickersCalendarHeaderProps) { + const { currentMonth, onMonthChange } = props; + + const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'), 'left'); + const selectNextYear = () => onMonthChange(currentMonth.add(1, 'year'), 'left'); + const selectPreviousMonth = () => + onMonthChange(currentMonth.subtract(1, 'month'), 'right'); + const selectPreviousYear = () => + onMonthChange(currentMonth.subtract(1, 'year'), 'right'); + + return ( + + + + + + + + + + {currentMonth.format('MMMM YYYY')} + + + + + + + + + + ); +} + +export default function CalendarHeaderComponent() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx.preview b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx.preview new file mode 100644 index 000000000000..6d3ca5d9099c --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponent.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.js new file mode 100644 index 000000000000..cfc533c919ec --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; + +export default function CalendarHeaderComponentProps() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx new file mode 100644 index 000000000000..cfc533c919ec --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; + +export default function CalendarHeaderComponentProps() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx.preview b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx.preview new file mode 100644 index 000000000000..bec7214e9bd4 --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentProps.tsx.preview @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js new file mode 100644 index 000000000000..9625c51e9622 --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.js @@ -0,0 +1,57 @@ +import * as React from 'react'; + +import { styled } from '@mui/material/styles'; +import Typography from '@mui/material/Typography'; +import IconButton from '@mui/material/IconButton'; +import ChevronLeft from '@mui/icons-material/ChevronLeft'; +import ChevronRight from '@mui/icons-material/ChevronRight'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar'; + +const CustomCalendarHeaderRoot = styled('div')({ + display: 'flex', + justifyContent: 'space-between', + padding: '8px 16px', + alignItems: 'center', +}); + +function CustomCalendarHeader(props) { + const { currentMonth, onMonthChange, month, calendars, monthIndex } = props; + + const selectNextMonth = () => + onMonthChange(currentMonth.add(calendars, 'month'), 'left'); + const selectPreviousMonth = () => + onMonthChange(currentMonth.subtract(calendars, 'month'), 'right'); + + return ( + + + + + {month.format('MMMM YYYY')} + + + + + ); +} + +export default function CalendarHeaderComponentRange() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx new file mode 100644 index 000000000000..5ff5398aef2b --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import { styled } from '@mui/material/styles'; +import Typography from '@mui/material/Typography'; +import IconButton from '@mui/material/IconButton'; +import ChevronLeft from '@mui/icons-material/ChevronLeft'; +import ChevronRight from '@mui/icons-material/ChevronRight'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar'; +import { PickersRangeCalendarHeaderProps } from '@mui/x-date-pickers-pro/PickersRangeCalendarHeader'; + +const CustomCalendarHeaderRoot = styled('div')({ + display: 'flex', + justifyContent: 'space-between', + padding: '8px 16px', + alignItems: 'center', +}); + +function CustomCalendarHeader(props: PickersRangeCalendarHeaderProps) { + const { currentMonth, onMonthChange, month, calendars, monthIndex } = props; + + const selectNextMonth = () => + onMonthChange(currentMonth.add(calendars, 'month'), 'left'); + const selectPreviousMonth = () => + onMonthChange(currentMonth.subtract(calendars, 'month'), 'right'); + + return ( + + + + + {month.format('MMMM YYYY')} + + + + + ); +} + +export default function CalendarHeaderComponentRange() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx.preview b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx.preview new file mode 100644 index 000000000000..16929c4b6d37 --- /dev/null +++ b/docs/data/date-pickers/custom-components/CalendarHeaderComponentRange.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md index 4aec6939089c..3ecf81afeb3c 100644 --- a/docs/data/date-pickers/custom-components/custom-components.md +++ b/docs/data/date-pickers/custom-components/custom-components.md @@ -1,7 +1,7 @@ --- productId: x-date-pickers title: Date and Time Pickers - Custom slots and subcomponents -components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickersCalendarHeader, PickersShortcuts, DateRangePickerToolbar +components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickersCalendarHeader, PickersRangeCalendarHeader, PickersShortcuts, DateRangePickerToolbar --- # Custom slots and subcomponents @@ -219,6 +219,34 @@ Each component comes with its own toolbar (`DatePickerToolbar`, `TimePickerToolb {{"demo": "ToolbarComponent.js"}} +## Calendar header + +The calendar header is available on any component that renders a calendar to select a date or a range of dates. +It allows the user to navigate through months and to switch to the month and year views when available. + +### Component props + +You can pass props to the calendar header as shown below: + +{{"demo": "CalendarHeaderComponentProps.js", "defaultCodeOpen": false}} + +### Component + +You can pass custom components to replace the header, as shown below: + +{{"demo": "CalendarHeaderComponent.js", "defaultCodeOpen": false}} + +When used with a date range component, +you receive three additional props to let you handle scenarios where multiple months are rendered: + +- `calendars`: The number of calendars rendered +- `month`: The month used for the header being rendered +- `monthIndex`: The index of the month used for the header being rendered + +The demo below shows how to navigate the months two by two: + +{{"demo": "CalendarHeaderComponentRange.js", "defaultCodeOpen": false}} + ## Arrow switcher The following slots let you customize how to render the buttons and icons for an arrow switcher component—the component @@ -232,7 +260,7 @@ You can pass props to the icons and buttons as shown below: ### Component -You can pass custom components—to replace the icons, for example—as shown below: +You can pass custom components to replace the icons, as shown below: {{"demo": "ArrowSwitcherComponent.js", "defaultCodeOpen": false}} diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/BrowserV6Field.js similarity index 89% rename from docs/data/date-pickers/custom-field/PickerWithBrowserField.js rename to docs/data/date-pickers/custom-field/BrowserV6Field.js index b5a8aa1a476a..f3a8f6cc98d1 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/BrowserV6Field.js @@ -10,6 +10,8 @@ import { useClearableField } from '@mui/x-date-pickers/hooks'; const BrowserField = React.forwardRef((props, ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, disabled, id, label, @@ -41,7 +43,10 @@ const BrowserField = React.forwardRef((props, ref) => { const BrowserDateField = React.forwardRef((props, ref) => { const { slots, slotProps, ...textFieldProps } = props; - const fieldResponse = useDateField(textFieldProps); + const fieldResponse = useDateField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: false, + }); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ @@ -63,7 +68,7 @@ const BrowserDatePicker = React.forwardRef((props, ref) => { ); }); -export default function PickerWithBrowserField() { +export default function BrowserV6Field() { return ( , 'size'> { @@ -29,6 +29,7 @@ interface BrowserFieldProps focused?: boolean; ownerState?: any; sx?: any; + enableAccessibleFieldDOMStructure: boolean; } type BrowserFieldComponent = (( @@ -38,6 +39,9 @@ type BrowserFieldComponent = (( const BrowserField = React.forwardRef( (props: BrowserFieldProps, ref: React.Ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, + disabled, id, label, @@ -68,11 +72,12 @@ const BrowserField = React.forwardRef( ) as BrowserFieldComponent; interface BrowserDateFieldProps - extends UseDateFieldProps, + extends UseDateFieldProps, BaseSingleInputFieldProps< Dayjs | null, Dayjs, FieldSection, + false, DateValidationError > {} @@ -80,7 +85,10 @@ const BrowserDateField = React.forwardRef( (props: BrowserDateFieldProps, ref: React.Ref) => { const { slots, slotProps, ...textFieldProps } = props; - const fieldResponse = useDateField(textFieldProps); + const fieldResponse = useDateField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: false, + }); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ @@ -94,9 +102,9 @@ const BrowserDateField = React.forwardRef( ); const BrowserDatePicker = React.forwardRef( - (props: DatePickerProps, ref: React.Ref) => { + (props: DatePickerProps, ref: React.Ref) => { return ( - ref={ref} {...props} slots={{ ...props.slots, field: BrowserDateField }} @@ -105,7 +113,7 @@ const BrowserDatePicker = React.forwardRef( }, ); -export default function PickerWithBrowserField() { +export default function BrowserV6Field() { return ( { const { + // Should be ignored + enableAccessibleFieldDOMStructure, disabled, id, label, @@ -57,6 +59,8 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => { selectedSections, onSelectedSectionsChange, className, + unstableStartFieldRef, + unstableEndFieldRef, } = props; const startTextFieldProps = useSlotProps({ @@ -87,9 +91,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => { disablePast, selectedSections, onSelectedSectionsChange, + enableAccessibleFieldDOMStructure: false, }, startTextFieldProps, endTextFieldProps, + unstableStartFieldRef, + unstableEndFieldRef, }); return ( @@ -117,7 +124,7 @@ const BrowserDateRangePicker = React.forwardRef((props, ref) => { ); }); -export default function RangePickerWithBrowserField() { +export default function BrowserV6MultiInputRangeField() { return ( diff --git a/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx similarity index 88% rename from docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx rename to docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx index 2bdd06ef5d0c..78049576322c 100644 --- a/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx @@ -15,10 +15,10 @@ import { BaseMultiInputFieldProps, DateRange, DateRangeValidationError, - UseDateRangeFieldProps, MultiInputFieldSlotTextFieldProps, RangeFieldSection, -} from '@mui/x-date-pickers-pro'; +} from '@mui/x-date-pickers-pro/models'; +import { UseDateRangeFieldProps } from '@mui/x-date-pickers-pro'; interface BrowserFieldProps extends Omit, 'size'> { @@ -33,6 +33,7 @@ interface BrowserFieldProps focused?: boolean; ownerState?: any; sx?: any; + enableAccessibleFieldDOMStructure: boolean; } type BrowserFieldComponent = (( @@ -42,6 +43,9 @@ type BrowserFieldComponent = (( const BrowserField = React.forwardRef( (props: BrowserFieldProps, ref: React.Ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, + disabled, id, label, @@ -72,11 +76,12 @@ const BrowserField = React.forwardRef( ) as BrowserFieldComponent; interface BrowserMultiInputDateRangeFieldProps - extends UseDateRangeFieldProps, + extends UseDateRangeFieldProps, BaseMultiInputFieldProps< DateRange, Dayjs, RangeFieldSection, + false, DateRangeValidationError > {} @@ -103,6 +108,8 @@ const BrowserMultiInputDateRangeField = React.forwardRef( selectedSections, onSelectedSectionsChange, className, + unstableStartFieldRef, + unstableEndFieldRef, } = props; const startTextFieldProps = useSlotProps({ @@ -119,6 +126,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef( const fieldResponse = useMultiInputDateRangeField< Dayjs, + false, MultiInputFieldSlotTextFieldProps >({ sharedProps: { @@ -136,9 +144,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef( disablePast, selectedSections, onSelectedSectionsChange, + enableAccessibleFieldDOMStructure: false, }, startTextFieldProps, endTextFieldProps, + unstableStartFieldRef, + unstableEndFieldRef, }); return ( @@ -158,7 +169,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef( ) as BrowserMultiInputDateRangeFieldComponent; const BrowserDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { + (props: DateRangePickerProps, ref: React.Ref) => { return ( diff --git a/docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx.preview rename to docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx.preview diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.js b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js similarity index 92% rename from docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.js rename to docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js index a3f68577c858..5761a6ea83bd 100644 --- a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.js +++ b/docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js @@ -14,6 +14,8 @@ import { useClearableField } from '@mui/x-date-pickers/hooks'; const BrowserField = React.forwardRef((props, ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, disabled, id, label, @@ -63,7 +65,10 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { ), }; - const fieldResponse = useSingleInputDateRangeField(textFieldProps); + const fieldResponse = useSingleInputDateRangeField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: false, + }); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ @@ -113,7 +118,7 @@ const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => { ); }); -export default function RangePickerWithSingleInputBrowserField() { +export default function BrowserV6SingleInputRangeField() { return ( , 'size'> { @@ -31,6 +39,7 @@ interface BrowserFieldProps focused?: boolean; ownerState?: any; sx?: any; + enableAccessibleFieldDOMStructure: boolean; } type BrowserFieldComponent = (( @@ -40,6 +49,9 @@ type BrowserFieldComponent = (( const BrowserField = React.forwardRef( (props: BrowserFieldProps, ref: React.Ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, + disabled, id, label, @@ -70,27 +82,32 @@ const BrowserField = React.forwardRef( ) as BrowserFieldComponent; interface BrowserSingleInputDateRangeFieldProps - extends SingleInputDateRangeFieldProps< - Dayjs, - Omit, 'size'> - > { + extends UseSingleInputDateRangeFieldProps, + BaseSingleInputFieldProps< + DateRange, + Dayjs, + RangeFieldSection, + false, + DateRangeValidationError + > { onAdornmentClick?: () => void; } type BrowserSingleInputDateRangeFieldComponent = (( props: BrowserSingleInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { fieldType?: string }; +) => React.JSX.Element) & { fieldType?: FieldType }; const BrowserSingleInputDateRangeField = React.forwardRef( (props: BrowserSingleInputDateRangeFieldProps, ref: React.Ref) => { const { slots, slotProps, onAdornmentClick, ...other } = props; - const textFieldProps: SingleInputDateRangeFieldProps = useSlotProps({ - elementType: 'input', - externalSlotProps: slotProps?.textField, - externalForwardedProps: other, - ownerState: props as any, - }); + const textFieldProps: SingleInputDateRangeFieldProps = + useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + externalForwardedProps: other, + ownerState: props as any, + }); textFieldProps.InputProps = { ...textFieldProps.InputProps, @@ -103,9 +120,11 @@ const BrowserSingleInputDateRangeField = React.forwardRef( ), }; - const fieldResponse = useSingleInputDateRangeField( - textFieldProps, - ); + const fieldResponse = useSingleInputDateRangeField< + Dayjs, + false, + typeof textFieldProps + >({ ...textFieldProps, enableAccessibleFieldDOMStructure: false }); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ @@ -158,7 +177,7 @@ const BrowserSingleInputDateRangePicker = React.forwardRef( }, ); -export default function RangePickerWithSingleInputBrowserField() { +export default function BrowserV6SingleInputRangeField() { return ( { + const { + // Should be ignored + enableAccessibleFieldDOMStructure, + // Should be passed to the PickersSectionList component + elements, + sectionListRef, + contentEditable, + onFocus, + onBlur, + tabIndex, + onInput, + onPaste, + onKeyDown, + // Can be passed to a hidden element + onChange, + value, + // Can be used to render a custom label + label, + // Can be used to style the component + areAllSectionsEmpty, + disabled, + readOnly, + focused, + error, + InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {}, + // The rest can be passed to the root element + ...other + } = props; + + const handleRef = useForkRef(InputPropsRef, ref); + + return ( + + {startAdornment} + + + + {endAdornment} + + ); +}); + +const BrowserDateField = React.forwardRef((props, ref) => { + const { slots, slotProps, ...textFieldProps } = props; + + const fieldResponse = useDateField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: true, + }); + + /* If you don't need a clear button, you can skip the use of this hook */ + const processedFieldProps = useClearableField({ + ...fieldResponse, + slots, + slotProps, + }); + + return ; +}); + +const BrowserDatePicker = React.forwardRef((props, ref) => { + return ( + + ); +}); + +export default function BrowserV7Field() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx new file mode 100644 index 000000000000..a84e535d4340 --- /dev/null +++ b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx @@ -0,0 +1,156 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import useForkRef from '@mui/utils/useForkRef'; +import { styled } from '@mui/material/styles'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; +import { + unstable_useDateField as useDateField, + UseDateFieldProps, +} from '@mui/x-date-pickers/DateField'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; +import { + BaseSingleInputPickersTextFieldProps, + BaseSingleInputFieldProps, + DateValidationError, + FieldSection, +} from '@mui/x-date-pickers/models'; +import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList'; + +const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({ + display: 'flex', + alignItems: 'center', +}); + +const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content' })( + { + border: '1px solid grey', + fontSize: 13.33333, + lineHeight: 'normal', + padding: '1px 2px', + whiteSpace: 'nowrap', + }, +); + +interface BrowserTextFieldProps + extends BaseSingleInputPickersTextFieldProps, + Omit< + React.HTMLAttributes, + keyof BaseSingleInputPickersTextFieldProps + > {} + +const BrowserTextField = React.forwardRef( + (props: BrowserTextFieldProps, ref: React.Ref) => { + const { + // Should be ignored + enableAccessibleFieldDOMStructure, + + // Should be passed to the PickersSectionList component + elements, + sectionListRef, + contentEditable, + onFocus, + onBlur, + tabIndex, + onInput, + onPaste, + onKeyDown, + + // Can be passed to a hidden element + onChange, + value, + + // Can be used to render a custom label + label, + + // Can be used to style the component + areAllSectionsEmpty, + disabled, + readOnly, + focused, + error, + + InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {}, + + // The rest can be passed to the root element + ...other + } = props; + + const handleRef = useForkRef(InputPropsRef, ref); + + return ( + + {startAdornment} + + + + {endAdornment} + + ); + }, +); + +interface BrowserDateFieldProps + extends UseDateFieldProps, + BaseSingleInputFieldProps< + Dayjs | null, + Dayjs, + FieldSection, + true, + DateValidationError + > {} + +const BrowserDateField = React.forwardRef( + (props: BrowserDateFieldProps, ref: React.Ref) => { + const { slots, slotProps, ...textFieldProps } = props; + + const fieldResponse = useDateField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: true, + }); + + /* If you don't need a clear button, you can skip the use of this hook */ + const processedFieldProps = useClearableField({ + ...fieldResponse, + slots, + slotProps, + }); + + return ; + }, +); + +const BrowserDatePicker = React.forwardRef( + (props: DatePickerProps, ref: React.Ref) => { + return ( + + ); + }, +); + +export default function BrowserV7Field() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx.preview new file mode 100644 index 000000000000..0bb9e399d3cb --- /dev/null +++ b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx.preview @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js new file mode 100644 index 000000000000..76d9cceb5c6a --- /dev/null +++ b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js @@ -0,0 +1,172 @@ +import * as React from 'react'; + +import useForkRef from '@mui/utils/useForkRef'; +import { useSlotProps } from '@mui/base/utils'; +import { styled } from '@mui/material/styles'; +import Stack from '@mui/material/Stack'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; +import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList'; + +const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({ + display: 'flex', + alignItems: 'center', +}); + +const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content' })( + { + border: '1px solid grey', + fontSize: 13.33333, + lineHeight: 'normal', + padding: '1px 2px', + whiteSpace: 'nowrap', + }, +); + +// This demo uses `BasePickersTextFieldProps` instead of `BaseMultiInputPickersTextFieldProps`, +// That way you can reuse the same `BrowserTextField` for all your pickers, range or not. +const BrowserTextField = React.forwardRef((props, ref) => { + const { + // Should be ignored + enableAccessibleFieldDOMStructure, + // Should be passed to the PickersSectionList component + elements, + sectionListRef, + contentEditable, + onFocus, + onBlur, + tabIndex, + onInput, + onPaste, + onKeyDown, + // Can be passed to a hidden element + onChange, + value, + // Can be used to render a custom label + label, + // Can be used to style the component + areAllSectionsEmpty, + disabled, + readOnly, + focused, + error, + InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {}, + // The rest can be passed to the root element + ...other + } = props; + + const handleRef = useForkRef(InputPropsRef, ref); + + return ( + + {startAdornment} + + + + {endAdornment} + + ); +}); + +const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => { + const { + slotProps, + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + className, + unstableStartFieldRef, + unstableEndFieldRef, + } = props; + + const startTextFieldProps = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'start' }, + }); + + const endTextFieldProps = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'end' }, + }); + + const fieldResponse = useMultiInputDateRangeField({ + sharedProps: { + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + enableAccessibleFieldDOMStructure: true, + }, + startTextFieldProps, + endTextFieldProps, + unstableStartFieldRef, + unstableEndFieldRef, + }); + + return ( + + + — + + + ); +}); + +const BrowserDateRangePicker = React.forwardRef((props, ref) => { + return ( + + ); +}); + +export default function BrowserV7MultiInputRangeField() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx new file mode 100644 index 000000000000..09e0c7eda30c --- /dev/null +++ b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx @@ -0,0 +1,221 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import useForkRef from '@mui/utils/useForkRef'; +import { useSlotProps } from '@mui/base/utils'; +import { styled } from '@mui/material/styles'; +import Stack from '@mui/material/Stack'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { + DateRangePicker, + DateRangePickerProps, +} from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; +import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList'; +import { + RangeFieldSection, + BaseMultiInputFieldProps, + BasePickersTextFieldProps, + MultiInputFieldSlotTextFieldProps, + DateRangeValidationError, + DateRange, +} from '@mui/x-date-pickers-pro/models'; +import { UseDateRangeFieldProps } from '@mui/x-date-pickers-pro'; + +const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({ + display: 'flex', + alignItems: 'center', +}); + +const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content' })( + { + border: '1px solid grey', + fontSize: 13.33333, + lineHeight: 'normal', + padding: '1px 2px', + whiteSpace: 'nowrap', + }, +); + +interface BrowserTextFieldProps + extends BasePickersTextFieldProps, + Omit< + React.HTMLAttributes, + keyof BasePickersTextFieldProps + > {} + +// This demo uses `BasePickersTextFieldProps` instead of `BaseMultiInputPickersTextFieldProps`, +// That way you can reuse the same `BrowserTextField` for all your pickers, range or not. +const BrowserTextField = React.forwardRef( + (props: BrowserTextFieldProps, ref: React.Ref) => { + const { + // Should be ignored + enableAccessibleFieldDOMStructure, + + // Should be passed to the PickersSectionList component + elements, + sectionListRef, + contentEditable, + onFocus, + onBlur, + tabIndex, + onInput, + onPaste, + onKeyDown, + + // Can be passed to a hidden element + onChange, + value, + + // Can be used to render a custom label + label, + + // Can be used to style the component + areAllSectionsEmpty, + disabled, + readOnly, + focused, + error, + + InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {}, + + // The rest can be passed to the root element + ...other + } = props; + + const handleRef = useForkRef(InputPropsRef, ref); + + return ( + + {startAdornment} + + + + {endAdornment} + + ); + }, +); + +interface BrowserMultiInputDateRangeFieldProps + extends UseDateRangeFieldProps, + BaseMultiInputFieldProps< + DateRange, + Dayjs, + RangeFieldSection, + true, + DateRangeValidationError + > {} + +type BrowserMultiInputDateRangeFieldComponent = (( + props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes, +) => React.JSX.Element) & { propTypes?: any }; + +const BrowserMultiInputDateRangeField = React.forwardRef( + (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref) => { + const { + slotProps, + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + className, + unstableStartFieldRef, + unstableEndFieldRef, + } = props; + + const startTextFieldProps = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'start' }, + }) as MultiInputFieldSlotTextFieldProps; + + const endTextFieldProps = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + ownerState: { ...props, position: 'end' }, + }) as MultiInputFieldSlotTextFieldProps; + + const fieldResponse = useMultiInputDateRangeField< + Dayjs, + true, + MultiInputFieldSlotTextFieldProps + >({ + sharedProps: { + value, + defaultValue, + format, + onChange, + readOnly, + disabled, + onError, + shouldDisableDate, + minDate, + maxDate, + disableFuture, + disablePast, + selectedSections, + onSelectedSectionsChange, + enableAccessibleFieldDOMStructure: true, + }, + startTextFieldProps, + endTextFieldProps, + unstableStartFieldRef, + unstableEndFieldRef, + }); + + return ( + + + — + + + ); + }, +) as BrowserMultiInputDateRangeFieldComponent; + +const BrowserDateRangePicker = React.forwardRef( + (props: DateRangePickerProps, ref: React.Ref) => { + return ( + + ); + }, +); + +export default function BrowserV7MultiInputRangeField() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx.preview new file mode 100644 index 000000000000..d797406fa999 --- /dev/null +++ b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js new file mode 100644 index 000000000000..2eeede71d126 --- /dev/null +++ b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js @@ -0,0 +1,168 @@ +import * as React from 'react'; + +import useForkRef from '@mui/utils/useForkRef'; +import { useSlotProps } from '@mui/base/utils'; +import { styled } from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; +import { DateRangeIcon } from '@mui/x-date-pickers/icons'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; +import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList'; + +const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({ + display: 'flex', + alignItems: 'center', +}); + +const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content' })( + { + border: '1px solid grey', + fontSize: 13.33333, + lineHeight: 'normal', + padding: '1px 2px', + whiteSpace: 'nowrap', + }, +); + +const BrowserTextField = React.forwardRef((props, ref) => { + const { + // Should be ignored + enableAccessibleFieldDOMStructure, + // Should be passed to the PickersSectionList component + elements, + sectionListRef, + contentEditable, + onFocus, + onBlur, + tabIndex, + onInput, + onPaste, + onKeyDown, + // Can be passed to a hidden element + onChange, + value, + // Can be used to render a custom label + label, + // Can be used to style the component + areAllSectionsEmpty, + disabled, + readOnly, + focused, + error, + InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {}, + // The rest can be passed to the root element + ...other + } = props; + + const handleRef = useForkRef(InputPropsRef, ref); + + return ( + + {startAdornment} + + + + {endAdornment} + + ); +}); + +const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { + const { slots, slotProps, onAdornmentClick, ...other } = props; + + const textFieldProps = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + externalForwardedProps: other, + ownerState: props, + }); + + textFieldProps.InputProps = { + ...textFieldProps.InputProps, + endAdornment: ( + + + + + + ), + }; + + const fieldResponse = useSingleInputDateRangeField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: true, + }); + + /* If you don't need a clear button, you can skip the use of this hook */ + const processedFieldProps = useClearableField({ + ...fieldResponse, + slots, + slotProps, + }); + + return ( + + ); +}); + +BrowserSingleInputDateRangeField.fieldType = 'single-input'; + +const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => { + const [isOpen, setIsOpen] = React.useState(false); + + const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); + + const handleOpen = () => setIsOpen(true); + + const handleClose = () => setIsOpen(false); + + return ( + + ); +}); + +export default function BrowserV7SingleInputRangeField() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx new file mode 100644 index 000000000000..eac9ebb26854 --- /dev/null +++ b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx @@ -0,0 +1,218 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import useForkRef from '@mui/utils/useForkRef'; +import { useSlotProps } from '@mui/base/utils'; +import { styled } from '@mui/material/styles'; +import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; +import { DateRangeIcon } from '@mui/x-date-pickers/icons'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { + DateRangePicker, + DateRangePickerProps, +} from '@mui/x-date-pickers-pro/DateRangePicker'; +import { + unstable_useSingleInputDateRangeField as useSingleInputDateRangeField, + UseSingleInputDateRangeFieldProps, +} from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; +import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList'; +import { + BasePickersTextFieldProps, + DateRangeValidationError, + RangeFieldSection, + DateRange, + FieldType, +} from '@mui/x-date-pickers-pro/models'; +import { BaseSingleInputFieldProps } from '@mui/x-date-pickers'; + +const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({ + display: 'flex', + alignItems: 'center', +}); + +const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content' })( + { + border: '1px solid grey', + fontSize: 13.33333, + lineHeight: 'normal', + padding: '1px 2px', + whiteSpace: 'nowrap', + }, +); + +interface BrowserTextFieldProps + extends BasePickersTextFieldProps, + Omit< + React.HTMLAttributes, + keyof BasePickersTextFieldProps + > {} + +const BrowserTextField = React.forwardRef( + (props: BrowserTextFieldProps, ref: React.Ref) => { + const { + // Should be ignored + enableAccessibleFieldDOMStructure, + + // Should be passed to the PickersSectionList component + elements, + sectionListRef, + contentEditable, + onFocus, + onBlur, + tabIndex, + onInput, + onPaste, + onKeyDown, + + // Can be passed to a hidden element + onChange, + value, + + // Can be used to render a custom label + label, + + // Can be used to style the component + areAllSectionsEmpty, + disabled, + readOnly, + focused, + error, + + InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {}, + + // The rest can be passed to the root element + ...other + } = props; + + const handleRef = useForkRef(InputPropsRef, ref); + + return ( + + {startAdornment} + + + + {endAdornment} + + ); + }, +); + +interface BrowserSingleInputDateRangeFieldProps + extends UseSingleInputDateRangeFieldProps, + BaseSingleInputFieldProps< + DateRange, + Dayjs, + RangeFieldSection, + true, + DateRangeValidationError + > { + onAdornmentClick?: () => void; +} + +type BrowserSingleInputDateRangeFieldComponent = (( + props: BrowserSingleInputDateRangeFieldProps & React.RefAttributes, +) => React.JSX.Element) & { fieldType?: FieldType }; + +const BrowserSingleInputDateRangeField = React.forwardRef( + (props: BrowserSingleInputDateRangeFieldProps, ref: React.Ref) => { + const { slots, slotProps, onAdornmentClick, ...other } = props; + + const textFieldProps: typeof props = useSlotProps({ + elementType: 'input', + externalSlotProps: slotProps?.textField, + externalForwardedProps: other, + ownerState: props as any, + }); + + textFieldProps.InputProps = { + ...textFieldProps.InputProps, + endAdornment: ( + + + + + + ), + }; + + const fieldResponse = useSingleInputDateRangeField< + Dayjs, + true, + typeof textFieldProps + >({ ...textFieldProps, enableAccessibleFieldDOMStructure: true }); + + /* If you don't need a clear button, you can skip the use of this hook */ + const processedFieldProps = useClearableField({ + ...fieldResponse, + slots, + slotProps, + }); + + return ( + + ); + }, +) as BrowserSingleInputDateRangeFieldComponent; + +BrowserSingleInputDateRangeField.fieldType = 'single-input'; + +const BrowserSingleInputDateRangePicker = React.forwardRef( + (props: DateRangePickerProps, ref: React.Ref) => { + const [isOpen, setIsOpen] = React.useState(false); + + const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen); + + const handleOpen = () => setIsOpen(true); + + const handleClose = () => setIsOpen(false); + + return ( + + ); + }, +); + +export default function BrowserV7SingleInputRangeField() { + return ( + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx.preview b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx.preview new file mode 100644 index 000000000000..bcaf8043948f --- /dev/null +++ b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx.preview @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx index 3268f758c80f..1b894f55e6a1 100644 --- a/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx +++ b/docs/data/date-pickers/custom-field/DateRangePickerWithButtonField.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Dayjs } from 'dayjs'; import Button from '@mui/material/Button'; import useForkRef from '@mui/utils/useForkRef'; -import { DateRange } from '@mui/x-date-pickers-pro/models'; +import { DateRange, FieldType } from '@mui/x-date-pickers-pro/models'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { @@ -17,10 +17,10 @@ interface DateRangeButtonFieldProps extends SingleInputDateRangeFieldProps, -) => React.JSX.Element) & { fieldType?: string }; +) => React.JSX.Element) & { fieldType?: FieldType }; const DateRangeButtonField = React.forwardRef( - (props: DateRangeButtonFieldProps, ref: React.Ref) => { + (props: DateRangeButtonFieldProps, ref: React.Ref) => { const { setOpen, label, diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/JoyV6Field.js similarity index 92% rename from docs/data/date-pickers/custom-field/PickerWithJoyField.js rename to docs/data/date-pickers/custom-field/JoyV6Field.js index c685d14d25b9..29f4e14ce291 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/JoyV6Field.js @@ -24,6 +24,8 @@ const joyTheme = extendJoyTheme(); const JoyField = React.forwardRef((props, ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, disabled, id, label, @@ -73,7 +75,10 @@ const JoyField = React.forwardRef((props, ref) => { const JoyDateField = React.forwardRef((props, ref) => { const { slots, slotProps, ...textFieldProps } = props; - const fieldResponse = useDateField(textFieldProps); + const fieldResponse = useDateField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: false, + }); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ @@ -82,7 +87,7 @@ const JoyDateField = React.forwardRef((props, ref) => { slotProps, }); - return ; + return ; }); const JoyDatePicker = React.forwardRef((props, ref) => { @@ -118,7 +123,7 @@ function SyncThemeMode({ mode }) { return null; } -export default function PickerWithJoyField() { +export default function JoyV6Field() { const materialTheme = useMaterialTheme(); return ( diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/JoyV6Field.tsx similarity index 89% rename from docs/data/date-pickers/custom-field/PickerWithJoyField.tsx rename to docs/data/date-pickers/custom-field/JoyV6Field.tsx index 306a5adec5f6..05c311984ebf 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6Field.tsx @@ -33,6 +33,7 @@ const joyTheme = extendJoyTheme(); interface JoyFieldProps extends InputProps { label?: React.ReactNode; inputRef?: React.Ref; + enableAccessibleFieldDOMStructure?: boolean; InputProps?: { ref?: React.Ref; endAdornment?: React.ReactNode; @@ -48,6 +49,9 @@ type JoyFieldComponent = (( const JoyField = React.forwardRef( (props: JoyFieldProps, ref: React.Ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, + disabled, id, label, @@ -96,11 +100,12 @@ const JoyField = React.forwardRef( ) as JoyFieldComponent; interface JoyDateFieldProps - extends UseDateFieldProps, + extends UseDateFieldProps, BaseSingleInputFieldProps< Dayjs | null, Dayjs, FieldSection, + false, DateValidationError > {} @@ -108,7 +113,10 @@ const JoyDateField = React.forwardRef( (props: JoyDateFieldProps, ref: React.Ref) => { const { slots, slotProps, ...textFieldProps } = props; - const fieldResponse = useDateField(textFieldProps); + const fieldResponse = useDateField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: false, + }); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ @@ -117,12 +125,12 @@ const JoyDateField = React.forwardRef( slotProps, }); - return ; + return ; }, ); const JoyDatePicker = React.forwardRef( - (props: DatePickerProps, ref: React.Ref) => { + (props: DatePickerProps, ref: React.Ref) => { return ( diff --git a/docs/data/date-pickers/custom-field/JoyV6Field.tsx.preview b/docs/data/date-pickers/custom-field/JoyV6Field.tsx.preview new file mode 100644 index 000000000000..cff735f8a7af --- /dev/null +++ b/docs/data/date-pickers/custom-field/JoyV6Field.tsx.preview @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/RangePickerWithJoyField.js b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js similarity index 96% rename from docs/data/date-pickers/custom-field/RangePickerWithJoyField.js rename to docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js index 200b4229807e..40b15af9295f 100644 --- a/docs/data/date-pickers/custom-field/RangePickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.js @@ -27,6 +27,8 @@ const joyTheme = extendJoyTheme(); const JoyField = React.forwardRef((props, ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, disabled, id, label, @@ -148,6 +150,7 @@ const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => { disablePast, selectedSections, onSelectedSectionsChange, + enableAccessibleFieldDOMStructure: false, }, startTextFieldProps, endTextFieldProps, @@ -186,7 +189,7 @@ function SyncThemeMode({ mode }) { return null; } -export default function RangePickerWithJoyField() { +export default function JoyV6MultiInputRangeField() { const materialTheme = useMaterialTheme(); return ( diff --git a/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx similarity index 94% rename from docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx rename to docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx index bf1c1bdd5ca8..0790a3d60736 100644 --- a/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx @@ -29,16 +29,17 @@ import { BaseMultiInputFieldProps, DateRange, DateRangeValidationError, - UseDateRangeFieldProps, MultiInputFieldSlotTextFieldProps, RangeFieldSection, -} from '@mui/x-date-pickers-pro'; +} from '@mui/x-date-pickers-pro/models'; +import { UseDateRangeFieldProps } from '@mui/x-date-pickers-pro'; const joyTheme = extendJoyTheme(); interface JoyFieldProps extends InputProps { label?: React.ReactNode; inputRef?: React.Ref; + enableAccessibleFieldDOMStructure?: boolean; InputProps?: { ref?: React.Ref; endAdornment?: React.ReactNode; @@ -53,6 +54,9 @@ type JoyFieldComponent = (( const JoyField = React.forwardRef( (props: JoyFieldProps, ref: React.Ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, + disabled, id, label, @@ -128,11 +132,12 @@ const MultiInputJoyDateRangeFieldSeparator = styled( )({ marginTop: '25px' }); interface JoyMultiInputDateRangeFieldProps - extends UseDateRangeFieldProps, + extends UseDateRangeFieldProps, BaseMultiInputFieldProps< DateRange, Dayjs, RangeFieldSection, + false, DateRangeValidationError > {} @@ -175,6 +180,7 @@ const JoyMultiInputDateRangeField = React.forwardRef( const fieldResponse = useMultiInputDateRangeField< Dayjs, + false, MultiInputFieldSlotTextFieldProps >({ sharedProps: { @@ -192,6 +198,7 @@ const JoyMultiInputDateRangeField = React.forwardRef( disablePast, selectedSections, onSelectedSectionsChange, + enableAccessibleFieldDOMStructure: false, }, startTextFieldProps, endTextFieldProps, @@ -233,7 +240,7 @@ function SyncThemeMode({ mode }: { mode: 'light' | 'dark' }) { return null; } -export default function RangePickerWithJoyField() { +export default function JoyV6MultiInputRangeField() { const materialTheme = useMaterialTheme(); return ( diff --git a/docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx.preview b/docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-field/RangePickerWithJoyField.tsx.preview rename to docs/data/date-pickers/custom-field/JoyV6MultiInputRangeField.tsx.preview diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.js b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js similarity index 94% rename from docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.js rename to docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js index 1c8d0719826e..7183f8d9c4a3 100644 --- a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.js +++ b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.js @@ -27,6 +27,8 @@ const joyTheme = extendJoyTheme(); const JoyField = React.forwardRef((props, ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, disabled, id, label, @@ -77,7 +79,10 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { ownerState: props, }); - const fieldResponse = useSingleInputDateRangeField(textFieldProps); + const fieldResponse = useSingleInputDateRangeField({ + ...textFieldProps, + enableAccessibleFieldDOMStructure: false, + }); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ @@ -152,7 +157,7 @@ function SyncThemeMode({ mode }) { return null; } -export default function RangePickerWithSingleInputJoyField() { +export default function JoyV6SingleInputRangeField() { const materialTheme = useMaterialTheme(); return ( diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx similarity index 84% rename from docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx rename to docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx index 817129b9a458..d7e26765a1a0 100644 --- a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx +++ b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx @@ -25,15 +25,23 @@ import { } from '@mui/x-date-pickers-pro/DateRangePicker'; import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField, - SingleInputDateRangeFieldProps, + UseSingleInputDateRangeFieldProps, } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { useClearableField } from '@mui/x-date-pickers/hooks'; +import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models'; +import { + RangeFieldSection, + DateRange, + DateRangeValidationError, + FieldType, +} from '@mui/x-date-pickers-pro/models'; const joyTheme = extendJoyTheme(); interface JoyFieldProps extends InputProps { label?: React.ReactNode; inputRef?: React.Ref; + enableAccessibleFieldDOMStructure?: boolean; InputProps?: { ref?: React.Ref; endAdornment?: React.ReactNode; @@ -48,6 +56,9 @@ type JoyFieldComponent = (( const JoyField = React.forwardRef( (props: JoyFieldProps, ref: React.Ref) => { const { + // Should be ignored + enableAccessibleFieldDOMStructure, + disabled, id, label, @@ -90,31 +101,37 @@ const JoyField = React.forwardRef( ) as JoyFieldComponent; interface JoySingleInputDateRangeFieldProps - extends SingleInputDateRangeFieldProps { + extends UseSingleInputDateRangeFieldProps, + BaseSingleInputFieldProps< + DateRange, + Dayjs, + RangeFieldSection, + false, + DateRangeValidationError + > { onAdornmentClick?: () => void; } type JoySingleInputDateRangeFieldComponent = (( props: JoySingleInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { fieldType?: string }; +) => React.JSX.Element) & { fieldType?: FieldType }; const JoySingleInputDateRangeField = React.forwardRef( (props: JoySingleInputDateRangeFieldProps, ref: React.Ref) => { const { slots, slotProps, onAdornmentClick, ...other } = props; - const textFieldProps: SingleInputDateRangeFieldProps< - Dayjs, - JoyFieldProps & { inputRef: React.Ref } - > = useSlotProps({ + const textFieldProps: JoySingleInputDateRangeFieldProps = useSlotProps({ elementType: FormControl, externalSlotProps: slotProps?.textField, externalForwardedProps: other, ownerState: props as any, }); - const fieldResponse = useSingleInputDateRangeField( - textFieldProps, - ); + const fieldResponse = useSingleInputDateRangeField< + Dayjs, + false, + JoySingleInputDateRangeFieldProps + >({ ...textFieldProps, enableAccessibleFieldDOMStructure: false }); /* If you don't need a clear button, you can skip the use of this hook */ const processedFieldProps = useClearableField({ @@ -145,7 +162,7 @@ const JoySingleInputDateRangeField = React.forwardRef( JoySingleInputDateRangeField.fieldType = 'single-input'; const JoySingleInputDateRangePicker = React.forwardRef( - (props: DateRangePickerProps, ref: React.Ref) => { + (props: DateRangePickerProps, ref: React.Ref) => { const [isOpen, setIsOpen] = React.useState(false); const toggleOpen = (event: React.PointerEvent) => { @@ -192,7 +209,7 @@ function SyncThemeMode({ mode }: { mode: 'light' | 'dark' }) { return null; } -export default function RangePickerWithSingleInputJoyField() { +export default function JoyV6SingleInputRangeField() { const materialTheme = useMaterialTheme(); return ( diff --git a/docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx.preview b/docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-field/RangePickerWithSingleInputJoyField.tsx.preview rename to docs/data/date-pickers/custom-field/JoyV6SingleInputRangeField.tsx.preview diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.js b/docs/data/date-pickers/custom-field/MaterialV6Field.js new file mode 100644 index 000000000000..35d4e0ca73ea --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV6Field.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +export default function MaterialV6Field() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx new file mode 100644 index 000000000000..35d4e0ca73ea --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +export default function MaterialV6Field() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview new file mode 100644 index 000000000000..027cb7beacfa --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV6Field.tsx.preview @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.js b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.js new file mode 100644 index 000000000000..df1b5053a745 --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.js @@ -0,0 +1,22 @@ +import * as React from 'react'; +import MuiTextField from '@mui/material/TextField'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +const TextField = React.forwardRef((props, ref) => ( + +)); + +export default function MaterialV6FieldWrapped() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx new file mode 100644 index 000000000000..0c90908a7d4b --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import MuiTextField, { TextFieldProps } from '@mui/material/TextField'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +const TextField = React.forwardRef( + (props: TextFieldProps, ref: React.Ref) => ( + + ), +); + +export default function MaterialV6FieldWrapped() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview new file mode 100644 index 000000000000..cd5ff731abbc --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV6FieldWrapped.tsx.preview @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/MaterialV7Field.js b/docs/data/date-pickers/custom-field/MaterialV7Field.js new file mode 100644 index 000000000000..f7c4f157b96a --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV7Field.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { DateField } from '@mui/x-date-pickers/DateField'; + +export default function MaterialV7Field() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx b/docs/data/date-pickers/custom-field/MaterialV7Field.tsx new file mode 100644 index 000000000000..f7c4f157b96a --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV7Field.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { DateField } from '@mui/x-date-pickers/DateField'; + +export default function MaterialV7Field() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview new file mode 100644 index 000000000000..9708ed359729 --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV7Field.tsx.preview @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js new file mode 100644 index 000000000000..d125a8479b5c --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.js @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { PickersTextField } from '@mui/x-date-pickers/PickersTextField'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +const MyPickersTextField = React.forwardRef((props, ref) => ( + +)); + +export default function MaterialV7FieldWrapped() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx new file mode 100644 index 000000000000..82e06da7316b --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { + PickersTextField, + PickersTextFieldProps, +} from '@mui/x-date-pickers/PickersTextField'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +const MyPickersTextField = React.forwardRef( + (props: PickersTextFieldProps, ref: React.Ref) => ( + + ), +); + +export default function MaterialV7FieldWrapped() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview new file mode 100644 index 000000000000..17535291f5f3 --- /dev/null +++ b/docs/data/date-pickers/custom-field/MaterialV7FieldWrapped.tsx.preview @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js index 37a41e39987e..7d27a3a3220d 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js @@ -8,7 +8,7 @@ export default function MultiInputFieldSeparatorSlotProps() { return ( - + diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx index 37a41e39987e..7d27a3a3220d 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx @@ -8,7 +8,7 @@ export default function MultiInputFieldSeparatorSlotProps() { return ( - + diff --git a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview index b912174c2280..079351c0f275 100644 --- a/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview +++ b/docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.tsx.preview @@ -1,2 +1,2 @@ - + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js b/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js index 12b3a98d8507..ea7512ace159 100644 --- a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js +++ b/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js @@ -97,8 +97,8 @@ function AutocompleteDatePicker(props) { return ( !optionsLookup[date.startOf('day').toISOString()]} {...other} /> diff --git a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.tsx b/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.tsx index 6d5cfc980154..1aac33d076c0 100644 --- a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.tsx @@ -14,11 +14,12 @@ import { } from '@mui/x-date-pickers/models'; interface AutoCompleteFieldProps - extends UseDateFieldProps, + extends UseDateFieldProps, BaseSingleInputFieldProps< Dayjs | null, Dayjs, FieldSection, + false, DateValidationError > { /** @@ -127,8 +128,8 @@ function AutocompleteDatePicker(props: AutocompleteDatePickerProps) { return ( - slots={{ field: AutocompleteField, ...props.slots }} - slotProps={{ field: { options } as any }} + slots={{ ...props.slots, field: AutocompleteField }} + slotProps={{ ...props.slotProps, field: { options } as any }} shouldDisableDate={(date) => !optionsLookup[date.startOf('day').toISOString()]} {...other} /> diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.js b/docs/data/date-pickers/custom-field/PickerWithButtonField.js index 255784386528..f13ca0315b2b 100644 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.js +++ b/docs/data/date-pickers/custom-field/PickerWithButtonField.js @@ -34,8 +34,8 @@ function ButtonDatePicker(props) { return ( setOpen(false)} diff --git a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx index c8cfc01a1964..aa09717fb29c 100644 --- a/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithButtonField.tsx @@ -12,11 +12,12 @@ import { } from '@mui/x-date-pickers/models'; interface ButtonFieldProps - extends UseDateFieldProps, + extends UseDateFieldProps, BaseSingleInputFieldProps< Dayjs | null, Dayjs, FieldSection, + false, DateValidationError > { setOpen?: React.Dispatch>; @@ -53,8 +54,8 @@ function ButtonDatePicker( return ( setOpen(false)} diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js new file mode 100644 index 000000000000..6c39cc8d08fc --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; + +export default function RangeFieldDateSeparator() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx new file mode 100644 index 000000000000..6c39cc8d08fc --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; + +export default function RangeFieldDateSeparator() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview new file mode 100644 index 000000000000..916dd54d4505 --- /dev/null +++ b/docs/data/date-pickers/custom-field/RangeFieldDateSeparator.tsx.preview @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.js b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.js similarity index 93% rename from docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.js rename to docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.js index 389bd55f5822..aa20bda0c427 100644 --- a/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.js +++ b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.js @@ -12,7 +12,7 @@ const WrappedSingleInputDateRangeField = React.forwardRef((props, ref) => { WrappedSingleInputDateRangeField.fieldType = 'single-input'; -export default function WrappedSingleInputDateRangePicker() { +export default function SingleInputDateRangePickerWrapped() { return ( diff --git a/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx similarity index 79% rename from docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx rename to docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx index 6e104e4b6777..21ea29ee17dd 100644 --- a/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx +++ b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx @@ -8,11 +8,13 @@ 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'; +import { FieldType } from '@mui/x-date-pickers-pro/models'; -type FieldComponent = (( +type FieldComponent = (( props: SingleInputDateRangeFieldProps & React.RefAttributes, -) => React.JSX.Element) & { fieldType?: string }; +) => React.JSX.Element) & { fieldType?: FieldType }; const WrappedSingleInputDateRangeField = React.forwardRef( ( @@ -25,7 +27,7 @@ const WrappedSingleInputDateRangeField = React.forwardRef( WrappedSingleInputDateRangeField.fieldType = 'single-input'; -export default function WrappedSingleInputDateRangePicker() { +export default function SingleInputDateRangePickerWrapped() { return ( diff --git a/docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx.preview b/docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx.preview similarity index 100% rename from docs/data/date-pickers/custom-field/WrappedSingleInputDateRangePicker.tsx.preview rename to docs/data/date-pickers/custom-field/SingleInputDateRangePickerWrapped.tsx.preview diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index 9d5e985def38..81438b384a3c 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -18,7 +18,7 @@ You can use the `textField` slot to pass custom props to the `TextField`: {{"demo": "TextFieldSlotProps.js"}} -### Customize the separator of multi input fields [](/x/introduction/licensing/#pro-plan 'Pro plan') +### Customize the separator of multi input range fields [](/x/introduction/licensing/#pro-plan 'Pro plan') You can use the `fieldSeparator` slot to pass custom props to the `Typography` rendered between the two `TextField`: @@ -39,7 +39,7 @@ You can pass the single input fields to the range picker to use it for keyboard If you want to create a wrapper around the field, make sure to set the `fieldType` static property to `'single-input'`. Otherwise, the picker won't know your field is a single input one and use the multi input event listeners: -{{"demo": "WrappedSingleInputDateRangePicker.js", "defaultCodeOpen": false}} +{{"demo": "SingleInputDateRangePickerWrapped.js", "defaultCodeOpen": false}} You can manually add an `endAdornment` if you want your range picker to look exactly like on a simple picker: @@ -49,6 +49,12 @@ You can manually add an `endAdornment` if you want your range picker to look exa This adornment is purely decorative, the focus remains on the field when the picker is opened. ::: +### Change the separator of range fields [](/x/introduction/licensing/#pro-plan 'Pro plan') + +You can use the `dateSeparator` prop to change the separator rendered between the start and end dates: + +{{"demo": "RangeFieldDateSeparator.js"}} + ### Change the format density You can control the field format spacing using the `formatDensity` prop. @@ -56,38 +62,91 @@ Setting `formatDensity` to `"spacious"` will add a space before and after each ` {{"demo": "FieldFormatDensity.js"}} -## Commonly used custom field +## Usage with Material UI + +### Using Material `TextField` + +You can import the `TextField` component to create custom wrappers: + +{{"demo": "MaterialV6FieldWrapped.js"}} + +:::success +This approach is only recommended if you need complex customizations on your `TextField`, +or if you already have a wrapper also used outside the Date and Time Pickers. + +If you just need to set some default props, you can use [the `slotProps` prop](/x/react-date-pickers/custom-field/#customize-the-textfield). +::: + +### Using Material `PickersTextField` + +Pass the `enableAccessibleFieldDOMStructure` to any Field or Picker component to enable the accessible DOM structure: + +{{"demo": "MaterialV7Field.js"}} + +:::success +Learn more about the [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure). +::: + +You can import the `PickersTextField` component to create custom wrappers: -### Using another input +{{"demo": "MaterialV7FieldWrapped.js"}} -#### With the Joy UI input +:::success +This approach is only recommended if you need complex customizations on your `PickersTextField`. -You can use the [Joy UI](https://mui.com/joy-ui/getting-started/) components instead of the Material UI ones: +If you just need to set some default props, you can use [the `slotProps` prop](/x/react-date-pickers/custom-field/#customize-the-textfield). +::: + +## Usage with Joy UI + +### Using Joy `Input` + +You can use the [Joy UI](https://mui.com/joy-ui/getting-started/) components instead of the Material UI ones: :::info -A higher-level solution for _Joy UI_ will be provided in the near future for even simpler usage. +A higher-level solution for _Joy UI_ will be provided in the near future for even simpler usage. ::: -{{"demo": "PickerWithJoyField.js", "defaultCodeOpen": false}} +{{"demo": "JoyV6Field.js", "defaultCodeOpen": false}} -{{"demo": "RangePickerWithSingleInputJoyField.js", "defaultCodeOpen": false}} +{{"demo": "JoyV6SingleInputRangeField.js", "defaultCodeOpen": false}} -{{"demo": "RangePickerWithJoyField.js", "defaultCodeOpen": false}} +{{"demo": "JoyV6MultiInputRangeField.js", "defaultCodeOpen": false}} + +### Using Joy `PickersTextField` + +:::warning +This component is not available yet. +::: -#### With the browser input +## Usage with an unstyled input -You can also use any other input: +### Using the browser input -{{"demo": "PickerWithBrowserField.js", "defaultCodeOpen": false}} +{{"demo": "BrowserV6Field.js", "defaultCodeOpen": false}} -{{"demo": "RangePickerWithSingleInputBrowserField.js", "defaultCodeOpen": false}} +{{"demo": "BrowserV6SingleInputRangeField.js", "defaultCodeOpen": false}} -{{"demo": "RangePickerWithBrowserField.js", "defaultCodeOpen": false}} +{{"demo": "BrowserV6MultiInputRangeField.js", "defaultCodeOpen": false}} :::warning You will need to use a component that supports the `sx` prop as a wrapper for your input, in order to be able to benefit from the **hover** and **focus** behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the on **focus** and **hover** behavior depends on styles applied via the `sx` prop. ::: +### Using custom `PickersTextField` + +:::success +Learn more about the accessible DOM structure and its difference compared to the current one on the [dedicated doc section](/x/react-date-pickers/fields/#accessible-dom-structure). +::: + +{{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}} + +{{"demo": "BrowserV7SingleInputRangeField.js", "defaultCodeOpen": false}} + +{{"demo": "BrowserV7MultiInputRangeField.js", "defaultCodeOpen": false}} + +## Usage with another UI + ### Using an `Autocomplete` If your user can only select a value in a small list of available dates, diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md index c4c43811e4a3..e17b9b09779e 100644 --- a/docs/data/date-pickers/date-calendar/date-calendar.md +++ b/docs/data/date-pickers/date-calendar/date-calendar.md @@ -91,14 +91,14 @@ You can select the whole week using the `day` component slot: ## Dynamic data Sometimes it may be necessary to display additional info right in the calendar. -The following demo shows how to add a badge on some day based on server side data: +The following demo shows how to add a badge on some day based on server-side data: {{"demo": "DateCalendarServerRequest.js"}} -## Validation +## Localization -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +## Validation -You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.js b/docs/data/date-pickers/date-field/CustomDateFormat.js index 44a9ce3fd903..1e0e073f8eb4 100644 --- a/docs/data/date-pickers/date-field/CustomDateFormat.js +++ b/docs/data/date-pickers/date-field/CustomDateFormat.js @@ -6,21 +6,17 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateField } from '@mui/x-date-pickers/DateField'; export default function CustomDateFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="MM-DD-YYYY" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="LL" /> diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.tsx b/docs/data/date-pickers/date-field/CustomDateFormat.tsx index d4da1d646da7..1e0e073f8eb4 100644 --- a/docs/data/date-pickers/date-field/CustomDateFormat.tsx +++ b/docs/data/date-pickers/date-field/CustomDateFormat.tsx @@ -1,26 +1,22 @@ import * as React from 'react'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateField } from '@mui/x-date-pickers/DateField'; export default function CustomDateFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="MM-DD-YYYY" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="LL" /> diff --git a/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview b/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview index eaf19d92caf1..11be65ef4fcf 100644 --- a/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview +++ b/docs/data/date-pickers/date-field/CustomDateFormat.tsx.preview @@ -1,12 +1,10 @@ setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="MM-DD-YYYY" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17')} format="LL" /> \ No newline at end of file diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md index 9c7db8b60ebf..39c4f51b8a5f 100644 --- a/docs/data/date-pickers/date-field/date-field.md +++ b/docs/data/date-pickers/date-field/date-field.md @@ -28,15 +28,18 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Customize the date format +## Localization -{{"demo": "CustomDateFormat.js"}} +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +### Customize the date format -Use the `LocalizationProvider` to change the date-library locale used in the time field. -See the [localization documentation page](/x/react-date-pickers/localization/) for more details. +{{"demo": "CustomDateFormat.js"}} + +:::info +See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details. +::: ## Validation -See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details. +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js b/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js index ccde819f01bc..3b1a1f36bb4c 100644 --- a/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js +++ b/docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js @@ -28,7 +28,7 @@ export default function CustomizationExamplesNoSnap() { return ( - + setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="L hh:mm a" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="L HH:mm" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="LLL" /> diff --git a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx index 3cda7812ec61..c1a035f613ef 100644 --- a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx +++ b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateTimeField } from '@mui/x-date-pickers/DateTimeField'; export default function CustomDateTimeFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17T15:30')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="L hh:mm a" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="L HH:mm" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="LLL" /> diff --git a/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview new file mode 100644 index 000000000000..311732f62ee9 --- /dev/null +++ b/docs/data/date-pickers/date-time-field/CustomDateTimeFormat.tsx.preview @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md index 33fb877cc5ef..f6efa09212a8 100644 --- a/docs/data/date-pickers/date-time-field/date-time-field.md +++ b/docs/data/date-pickers/date-time-field/date-time-field.md @@ -28,15 +28,18 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Customize the date time format +## Localization -{{"demo": "CustomDateTimeFormat.js"}} +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +### Customize the date time format -Use the `LocalizationProvider` to change the date-library locale used in the date time field. -See the [localization documentation page](/x/react-date-pickers/localization/) for more details. +{{"demo": "CustomDateTimeFormat.js"}} + +:::info +See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details. +::: ## Validation -See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details. +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md index 15f6c45a5a15..075ec25dd156 100644 --- a/docs/data/date-pickers/date-time-picker/date-time-picker.md +++ b/docs/data/date-pickers/date-time-picker/date-time-picker.md @@ -18,7 +18,6 @@ materialDesign: https://m2.material.io/components/date-pickers ## Component composition The component is built using the `DateTimeField` for the keyboard editing, the `DateCalendar` for the date view editing, the `DigitalClock` for the desktop view editing, and the `TimeClock` for the mobile time view editing. -All the documented props of those four components can also be passed to the Date Time Picker component. Check-out their documentation page for more information: @@ -27,6 +26,9 @@ Check-out their documentation page for more information: - [Digital Clock](/x/react-date-pickers/digital-clock/) - [Time Clock](/x/react-date-pickers/time-clock/) +You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/date-time-picker/#props). +Some [DateTimeField props](/x/api/date-pickers/date-time-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field. + ## Uncontrolled vs. controlled value The value of the component can be uncontrolled or controlled. @@ -88,7 +90,7 @@ Use the `openTo` prop to change this behavior: :::success The views will appear in the order defined by the `views` array. If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow -(e.g. view the default behaviors, the `year` is only accessible when clicking on the toolbar). +(for example view the default behaviors, the `year` is only accessible when clicking on the toolbar). ::: ## Landscape orientation @@ -110,10 +112,10 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo {{"demo": "DateTimePickerViewRenderers.js"}} -## Validation +## Localization -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +## Validation -You can find the documentation about localization in the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md index 98a5a0c459f0..378abff09ee8 100644 --- a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md +++ b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md @@ -34,3 +34,11 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: + +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + +## Validation + +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md index 277748cf4917..92137b72ba81 100644 --- a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md +++ b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md @@ -18,7 +18,6 @@ materialDesign: https://m2.material.io/components/date-pickers ## Component composition The component is built using the `MultiInputDateTimeRangeField` for the keyboard editing, the `DateRangeCalendar` for the date view editing and `DigitalClock` for the time view editing. -All the documented props of those two components can also be passed to the Date Time Range Picker component. Check-out their documentation page for more information: @@ -26,6 +25,9 @@ Check-out their documentation page for more information: - [Date Range Calendar](/x/react-date-pickers/date-range-calendar/) - [Digital Clock](/x/react-date-pickers/digital-clock/) +You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/date-time-range-picker/#props). +Some [MultiInputDateTimeRangeField props](/x/api/date-pickers/multi-input-date-time-range-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field. + ## Uncontrolled vs. controlled value The value of the component can be uncontrolled or controlled. @@ -100,6 +102,10 @@ You can pass a different view renderer to the Date Time Range Picker to customiz {{"demo": "DateTimeRangePickerViewRenderer.js"}} +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/digital-clock/digital-clock.md b/docs/data/date-pickers/digital-clock/digital-clock.md index d545babc4e7a..4e3f2f39061c 100644 --- a/docs/data/date-pickers/digital-clock/digital-clock.md +++ b/docs/data/date-pickers/digital-clock/digital-clock.md @@ -52,7 +52,7 @@ Views will appear in the order they're included in the `views` array. ## 12h/24h format -The components use the hour format of the locale's time setting, i.e. the 12-hour or 24-hour format. +The components use the hour format of the locale's time setting, that is the 12-hour or 24-hour format. You can force a specific format using the `ampm` prop. @@ -77,7 +77,7 @@ The prop accepts: ## Skip rendering disabled options -With the `skipDisabled` prop, the components don't render options that are not available to the user (e.g. through `minTime`, `maxTime`, `shouldDisabledTime` etc.). +With the `skipDisabled` prop, the components don't render options that are not available to the user (for example through `minTime`, `maxTime`, `shouldDisabledTime` etc.). The following example combines these properties to customize which options are rendered. @@ -86,6 +86,10 @@ The following example combines these properties to customize which options are r {{"demo": "DigitalClockSkipDisabled.js"}} +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/faq/faq.md b/docs/data/date-pickers/faq/faq.md index 14fc9192067e..761a8e798b82 100644 --- a/docs/data/date-pickers/faq/faq.md +++ b/docs/data/date-pickers/faq/faq.md @@ -23,7 +23,7 @@ You should never use these components in your application. ## Why is the KeyboardDatePicker not supported anymore? -It has been replaced with the `DatePicker` component, please refer to the [migration documentation](/material-ui/guides/pickers-migration/#imports) for more information. +It has been replaced with the `DatePicker` component, please refer to the [migration documentation](/material-ui/migration/pickers-migration/#imports) for more information. All versions of the date and time pickers implement keyboard input for accessibility and also allow editing through the UI. Depending on your use case, you may only need keyboard editing, in which case you can use the date and time field components. diff --git a/docs/data/date-pickers/fields/BasicV6DOMStructure.js b/docs/data/date-pickers/fields/BasicV6DOMStructure.js new file mode 100644 index 000000000000..20a6c9ae844b --- /dev/null +++ b/docs/data/date-pickers/fields/BasicV6DOMStructure.js @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; + +export default function BasicV6DOMStructure() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/BasicV6DOMStructure.tsx b/docs/data/date-pickers/fields/BasicV6DOMStructure.tsx new file mode 100644 index 000000000000..20a6c9ae844b --- /dev/null +++ b/docs/data/date-pickers/fields/BasicV6DOMStructure.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; + +export default function BasicV6DOMStructure() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/BasicV6DOMStructure.tsx.preview b/docs/data/date-pickers/fields/BasicV6DOMStructure.tsx.preview new file mode 100644 index 000000000000..2dc079345c09 --- /dev/null +++ b/docs/data/date-pickers/fields/BasicV6DOMStructure.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.js b/docs/data/date-pickers/fields/BasicV7DOMStructure.js new file mode 100644 index 000000000000..1f32eca967da --- /dev/null +++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.js @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; + +export default function BasicV7DOMStructure() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx new file mode 100644 index 000000000000..1f32eca967da --- /dev/null +++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; + +export default function BasicV7DOMStructure() { + return ( + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview new file mode 100644 index 000000000000..f33bc6c8fdc7 --- /dev/null +++ b/docs/data/date-pickers/fields/BasicV7DOMStructure.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/date-pickers/fields/fields.md b/docs/data/date-pickers/fields/fields.md index 9bd7260fff46..5f54b1411f66 100644 --- a/docs/data/date-pickers/fields/fields.md +++ b/docs/data/date-pickers/fields/fields.md @@ -25,6 +25,201 @@ All fields to edit a range are available in a single input version and in a mult {{"demo": "DateRangeFieldExamples.js", "defaultCodeOpen": false}} +## Accessible DOM structure + +By default, the fields' DOM structure consists of an ``, which holds the whole value for the component, but unfortunately presents a few limitations in terms of accessibility when managing multiple section values. + +From v7 version, you can opt-in for a new and experimental DOM structure on any field or picker component using the `enableAccessibleFieldDOMStructure` prop. + +```tsx + + + +``` + +This new feature allows the field component to set aria attributes on individual sections, providing a far better experience with screen readers. + +{{"demo": "BasicV7DOMStructure.js", "defaultCodeOpen": false }} + +### Usage with `slotProps.field` + +When using `slotProps.field` to pass props to your field component, +the field consumes some props (e.g: `shouldRespectLeadingZeros`) and forwards the rest to the `TextField`. + +- For the props consumed by the field, the behavior should remain exactly the same with both DOM structures. + + Both components below will respect the leading zeroes on digit sections: + + ```js + + + ``` + +- For the props forwarded to the `TextField`, + you can have a look at the next section to see how the migration impact them. + + Both components below will render a small size UI: + + ```js + + + ``` + +### Usage with `slotProps.textField` + +If you are passing props to `slotProps.textField`, +these props will now be received by `PickersTextField` and should keep working the same way as before. + +Both components below will render a small size UI: + +```js + + +``` + +:::info +If you are passing `inputProps` to `slotProps.textField`, +these props will now be passed to the hidden `` element. +::: + +### Usage with `slots.field` + +If you are passing a custom field component to your pickers, you need to create a new one that is using the accessible DOM structure. +This new component will need to use the `PickersSectionList` component instead of an `` HTML element. + +You can have a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) to have a concrete example. + +:::info +If your custom field was used to create a Joy UI design component, +you may want to wait a few weeks for the release of an out-of-the-box Joy `PickersTextField` component instead of implementing it yourself. +::: + +### Usage with `slots.textField` + +If you are passing a custom `TextField` component to your fields and pickers, +you need to create a new one that is using the accessible DOM structure. + +You can have a look at the second demo of the [Material PickersTextField section](/x/react-date-pickers/custom-field/#using-material-pickerstextfield) to have a concrete example. + +:::info +If your custom `TextField` was used to apply a totally different input that did not use `@mui/material/TextField`, +please consider having a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) section which uses `slots.field`. +This approach can be more appropriate for deeper changes. +::: + +### Usage with theme + +If you are using the theme to customize `MuiTextField`, +you need to pass the same config to `MuiPickersTextField`: + +```js +const theme = createTheme({ + components: { + MuiTextField: { + defaultProps: { + variant: 'outlined', + }, + styleOverrides: { + root: { + '& .MuiInputLabel-outlined.Mui-focused': { + color: 'red', + }, + }, + }, + }, + MuiPickersTextField: { + defaultProps: { + variant: 'outlined', + }, + styleOverrides: { + root: { + '& .MuiInputLabel-outlined.Mui-focused': { + color: 'red', + }, + }, + }, + }, + }, +}); +``` + +If you are using the theme to customize `MuiInput`, `MuiOutlinedInput` or `MuiFilledInput`, +you need to pass the same config to `MuiPickersInput`, `MuiPickersOutlinedInput` or `MuiPickersFilledInput`: + +```js +const theme = createTheme({ + components: { + // Replace with `MuiOutlinedInput` or `MuiFilledInput` if needed + MuiInput: { + defaultProps: { + margin: 'dense', + }, + styleOverrides: { + root: { + color: 'red', + }, + }, + }, + // Replace with `MuiPickersOutlinedInput` or `MuiPickersFilledInput` if needed + MuiPickersInput: { + defaultProps: { + margin: 'dense', + }, + styleOverrides: { + root: { + color: 'red', + }, + }, + }, + }, +}); +``` + +If you are using the theme to customize `MuiInputBase`, +you need to pass the same config to `MuiPickersInputBase`: + +```js +const theme = createTheme({ + components: { + MuiInputBase: { + defaultProps: { + margin: 'dense', + }, + styleOverrides: { + root: { + color: 'red', + }, + }, + }, + MuiPickersInputBase: { + defaultProps: { + margin: 'dense', + }, + styleOverrides: { + root: { + color: 'red', + }, + }, + }, + }, +}); +``` + ## Advanced ### What is a section? diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md index 7a42400ed76e..ac7925ea7c39 100644 --- a/docs/data/date-pickers/getting-started/getting-started.md +++ b/docs/data/date-pickers/getting-started/getting-started.md @@ -20,10 +20,6 @@ Using your favorite package manager, install: -:::warning -The `next` tag is used to download the latest v7 **pre-release** version. -::: - {{"component": "modules/components/PickersInstallationInstructions.js"}} :::info @@ -76,7 +72,7 @@ pnpm add @mui/styled-engine-sc styled-components -Take a look at the [Styled engine guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine. +Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. ## Setup your date library adapter diff --git a/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.js b/docs/data/date-pickers/lifecycle/LifeCycleDateFieldEmpty.js index ff6c9544090e..3ed120732789 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 22fafe61283b..6444023122b6 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 7f22674742a9..1746e78fd888 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 a77c9d6d5abf..ff34833efbb6 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 f6cae364e97b..8bab9a5ad460 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 90f4a115ac5d..4cce05110e86 100644 --- a/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx.preview +++ b/docs/data/date-pickers/lifecycle/LifeCycleDateRangeField.tsx.preview @@ -1,9 +1,6 @@ - setValue(newValue)} - /> + diff --git a/docs/data/date-pickers/lifecycle/ServerInteraction.tsx b/docs/data/date-pickers/lifecycle/ServerInteraction.tsx index 0795fab5891f..c265b005dd90 100644 --- a/docs/data/date-pickers/lifecycle/ServerInteraction.tsx +++ b/docs/data/date-pickers/lifecycle/ServerInteraction.tsx @@ -40,7 +40,7 @@ function DisplayEvents(props: DisplayEventsProps) { // debounce function function debounce(func: (...arg: any) => void, wait = 500) { - let timeout: NodeJS.Timeout; + let timeout: ReturnType; function debounced(...args: any) { const later = () => { func(...args); diff --git a/docs/data/date-pickers/localization/data.json b/docs/data/date-pickers/localization/data.json index 78f5c7cd8618..52aa6c3832b9 100644 --- a/docs/data/date-pickers/localization/data.json +++ b/docs/data/date-pickers/localization/data.json @@ -3,264 +3,264 @@ "languageTag": "eu", "importName": "eu", "localeName": "Basque", - "missingKeysCount": 4, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/eu.ts" + "missingKeysCount": 13, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/eu.ts" }, { "languageTag": "be-BY", "importName": "beBY", "localeName": "Belarusian", - "missingKeysCount": 6, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/beBY.ts" + "missingKeysCount": 15, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/beBY.ts" }, { "languageTag": "ca-ES", "importName": "caES", "localeName": "Catalan", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/caES.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/caES.ts" }, { "languageTag": "zh-HK", "importName": "zhHK", "localeName": "Chinese (Hong Kong)", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/zhHK.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/zhHK.ts" }, { "languageTag": "zh-CN", "importName": "zhCN", "localeName": "Chinese (Simplified)", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/zhCN.ts" + "missingKeysCount": 0, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/zhCN.ts" }, { "languageTag": "cs-CZ", "importName": "csCZ", "localeName": "Czech", - "missingKeysCount": 6, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/csCZ.ts" + "missingKeysCount": 15, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/csCZ.ts" }, { "languageTag": "da-DK", "importName": "daDK", "localeName": "Danish", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/daDK.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/daDK.ts" }, { "languageTag": "nl-NL", "importName": "nlNL", "localeName": "Dutch", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/nlNL.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/nlNL.ts" }, { "languageTag": "fi-FI", "importName": "fiFI", "localeName": "Finnish", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/fiFI.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/fiFI.ts" }, { "languageTag": "fr-FR", "importName": "frFR", "localeName": "French", - "missingKeysCount": 6, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/frFR.ts" + "missingKeysCount": 15, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/frFR.ts" }, { "languageTag": "de-DE", "importName": "deDE", "localeName": "German", - "missingKeysCount": 4, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/deDE.ts" + "missingKeysCount": 13, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/deDE.ts" }, { "languageTag": "el-GR", "importName": "elGR", "localeName": "Greek", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/elGR.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/elGR.ts" }, { "languageTag": "he-IL", "importName": "heIL", "localeName": "Hebrew", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/heIL.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/heIL.ts" }, { "languageTag": "hu-HU", "importName": "huHU", "localeName": "Hungarian", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/huHU.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/huHU.ts" }, { "languageTag": "is-IS", "importName": "isIS", "localeName": "Icelandic", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/isIS.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/isIS.ts" }, { "languageTag": "it-IT", "importName": "itIT", "localeName": "Italian", - "missingKeysCount": 6, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/itIT.ts" + "missingKeysCount": 15, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/itIT.ts" }, { "languageTag": "ja-JP", "importName": "jaJP", "localeName": "Japanese", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/jaJP.ts" + "missingKeysCount": 0, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/jaJP.ts" }, { "languageTag": "kz-KZ", "importName": "kzKZ", "localeName": "Kazakh", - "missingKeysCount": 6, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/kzKZ.ts" + "missingKeysCount": 15, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/kzKZ.ts" }, { "languageTag": "ko-KR", "importName": "koKR", "localeName": "Korean", - "missingKeysCount": 6, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/koKR.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/koKR.ts" }, { "languageTag": "mk", "importName": "mk", "localeName": "Macedonian", - "missingKeysCount": 4, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/mk.ts" + "missingKeysCount": 13, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/mk.ts" }, { "languageTag": "nb-NO", "importName": "nbNO", "localeName": "Norwegian (Bokmål)", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/nbNO.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/nbNO.ts" }, { "languageTag": "fa-IR", "importName": "faIR", "localeName": "Persian", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/faIR.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/faIR.ts" }, { "languageTag": "pl-PL", "importName": "plPL", "localeName": "Polish", - "missingKeysCount": 13, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/plPL.ts" + "missingKeysCount": 22, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/plPL.ts" }, { "languageTag": "pt-BR", "importName": "ptBR", "localeName": "Portuguese (Brazil)", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ptBR.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ptBR.ts" }, { "languageTag": "ro-RO", "importName": "roRO", "localeName": "Romanian", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/roRO.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/roRO.ts" }, { "languageTag": "ru-RU", "importName": "ruRU", "localeName": "Russian", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ruRU.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ruRU.ts" }, { "languageTag": "sk-SK", "importName": "skSK", "localeName": "Slovak", - "missingKeysCount": 6, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/skSK.ts" + "missingKeysCount": 15, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/skSK.ts" }, { "languageTag": "es-ES", "importName": "esES", "localeName": "Spanish", - "missingKeysCount": 4, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/esES.ts" + "missingKeysCount": 13, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/esES.ts" }, { "languageTag": "sv-SE", "importName": "svSE", "localeName": "Swedish", - "missingKeysCount": 13, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/svSE.ts" + "missingKeysCount": 22, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/svSE.ts" }, { "languageTag": "tr-TR", "importName": "trTR", "localeName": "Turkish", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/trTR.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/trTR.ts" }, { "languageTag": "uk-UA", "importName": "ukUA", "localeName": "Ukrainian", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/ukUA.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ukUA.ts" }, { "languageTag": "ur-PK", "importName": "urPK", "localeName": "Urdu (Pakistan)", - "missingKeysCount": 13, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/urPK.ts" + "missingKeysCount": 22, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/urPK.ts" }, { "languageTag": "vi-VN", "importName": "viVN", "localeName": "Vietnamese", - "missingKeysCount": 5, - "totalKeysCount": 41, - "githubLink": "https://github.com/mui/mui-x/blob/next/packages/x-date-pickers/src/locales/viVN.ts" + "missingKeysCount": 14, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/viVN.ts" } ] diff --git a/docs/data/date-pickers/time-clock/time-clock.md b/docs/data/date-pickers/time-clock/time-clock.md index 4e7a100a7579..9f545b257e10 100644 --- a/docs/data/date-pickers/time-clock/time-clock.md +++ b/docs/data/date-pickers/time-clock/time-clock.md @@ -46,7 +46,7 @@ Views will appear in the order they're included in the `views` array. ## 12h/24h format -The component uses the hour format of the locale's time setting, i.e. the 12-hour or 24-hour format. +The component uses the hour format of the locale's time setting, that is the 12-hour or 24-hour format. You can force a specific format using the `ampm` prop. @@ -54,6 +54,10 @@ You can find more information about 12h/24h format in the [Date localization pag {{"demo": "TimeClockAmPm.js"}} +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.js b/docs/data/date-pickers/time-field/CustomTimeFormat.js index eb0ce966cc0b..abd0fea47a3a 100644 --- a/docs/data/date-pickers/time-field/CustomTimeFormat.js +++ b/docs/data/date-pickers/time-field/CustomTimeFormat.js @@ -6,27 +6,22 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { TimeField } from '@mui/x-date-pickers/TimeField'; export default function CustomTimeFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17T15:30')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="hh:mm a" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="HH:mm" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="HH:mm:ss" /> diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx index 8928647c5b3c..abd0fea47a3a 100644 --- a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx +++ b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx @@ -1,32 +1,27 @@ import * as React from 'react'; -import dayjs, { Dayjs } from 'dayjs'; +import dayjs from 'dayjs'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { TimeField } from '@mui/x-date-pickers/TimeField'; export default function CustomTimeFormat() { - const [value, setValue] = React.useState(dayjs('2022-04-17T15:30')); - return ( setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="hh:mm a" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="HH:mm" /> setValue(newValue)} + defaultValue={dayjs('2022-04-17T15:30')} format="HH:mm:ss" /> diff --git a/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview new file mode 100644 index 000000000000..d82a4aeb479b --- /dev/null +++ b/docs/data/date-pickers/time-field/CustomTimeFormat.tsx.preview @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md index 9521a56f8499..8aa989cb6011 100644 --- a/docs/data/date-pickers/time-field/time-field.md +++ b/docs/data/date-pickers/time-field/time-field.md @@ -28,15 +28,18 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Customize the time format +## Localization -{{"demo": "CustomTimeFormat.js"}} +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. -## Localization +### Customize the time format -Use the `LocalizationProvider` to change the date-library locale used in the date field. -See the [localization documentation page](/x/react-date-pickers/localization/) for more details. +{{"demo": "CustomTimeFormat.js"}} + +:::info +See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details. +::: ## Validation -See the documentation page [validation documentation page](/x/react-date-pickers/validation/) for more details. +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md index ed5d6492e8e2..d6db6b9d53c9 100644 --- a/docs/data/date-pickers/time-picker/time-picker.md +++ b/docs/data/date-pickers/time-picker/time-picker.md @@ -18,7 +18,6 @@ materialDesign: https://m2.material.io/components/time-pickers ## Component composition The component is built using the `TimeField` for the keyboard editing, the `DigitalClock` for the desktop view editing, and the `TimeClock` for the mobile view editing. -All the documented props of those two components can also be passed to the Time Picker component. Check-out their documentation page for more information: @@ -26,6 +25,9 @@ Check-out their documentation page for more information: - [Digital Clock](/x/react-date-pickers/digital-clock/) - [Time Clock](/x/react-date-pickers/time-clock/) +You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/time-picker/#props). +Some [TimeField props](/x/api/date-pickers/time-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field. + ## Uncontrolled vs. controlled value The value of the component can be uncontrolled or controlled. @@ -108,6 +110,10 @@ You might be interested in using the [Time Clock](/x/react-date-pickers/time-clo {{"demo": "TimePickerViewRenderers.js"}} +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + ## Validation -You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/time-range-field/time-range-field.md b/docs/data/date-pickers/time-range-field/time-range-field.md index 2ca2beb1a165..8ba850ecfd50 100644 --- a/docs/data/date-pickers/time-range-field/time-range-field.md +++ b/docs/data/date-pickers/time-range-field/time-range-field.md @@ -34,3 +34,11 @@ The value of the component can be uncontrolled or controlled. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: + +## Localization + +See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details. + +## Validation + +See the [Validation](/x/react-date-pickers/validation/) documentation page for more details. diff --git a/docs/data/date-pickers/validation/validation.md b/docs/data/date-pickers/validation/validation.md index 4dbbe7f5467c..1a1d0aee49f1 100644 --- a/docs/data/date-pickers/validation/validation.md +++ b/docs/data/date-pickers/validation/validation.md @@ -1,6 +1,6 @@ --- productId: x-date-pickers -components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker, DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker, DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker, DateCalendar +components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker, DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker, DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker, DateTimeRangePicker, DesktopDateTimeRangePicker, MobileDateTimeRangePicker, DateCalendar githubLabel: 'component: pickers' packageName: '@mui/x-date-pickers' --- @@ -118,7 +118,7 @@ Please note that `shouldDisableDate` will execute on every date rendered in the For components supporting date range edition (`DateRangePicker`, `DateTimeRangePicker`)—the `shouldDisableDate` prop receives a second argument to differentiate the start and the end date. -In the example below—the start date can't be in the weekend but the end date can. +In the example below—the start date cannot be in the weekend but the end date can. {{"demo": "DateRangeValidationShouldDisableDate.js", "defaultCodeOpen": false}} diff --git a/docs/data/introduction/installation/installation.md b/docs/data/introduction/installation/installation.md index 46f58f64c82f..2b47b9ea9802 100644 --- a/docs/data/introduction/installation/installation.md +++ b/docs/data/introduction/installation/installation.md @@ -11,6 +11,6 @@ MUI X components have a peer dependency on `@mui/material`: the installation [i ## Components -Note that you only need to install the packages corresponding to the components you're using—e.g., Data Grid users don't need to install the Date and Time Pickers. +Note that you only need to install the packages corresponding to the components you're using—for example Data Grid users don't need to install the Date and Time Pickers. {{"component": "modules/components/InstallationGrid.js"}} diff --git a/docs/data/introduction/licensing/licensing.md b/docs/data/introduction/licensing/licensing.md index 2176ffb9e7b2..13bd5aecba8c 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'); @@ -223,11 +221,11 @@ While we recommend hard-coding the license key in git, you can also use an envir This method is required if your codebase is "source-available" (to hide the license key), and can be preferred if you want to granularly share the license key with your licensed developers. ::: -The license key is validated on the server and client side so you must expose the environment variable to the browser. +The license key is validated on the server and client-side so you must expose the environment variable to the browser. 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. @@ -298,7 +296,7 @@ This error indicates that your MUI X license key format isn't valid. It could be because the license key is missing a character or has a typo. To solve the issue, you need to double-check that `setLicenseKey()` is called with the right argument. -Please check the [license key installation](#license-key-installation). +Please check the [license key installation](/x/introduction/licensing/#license-key). ### 6. Invalid license key (TypeError: extracting license expiry timestamp) diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md index 5c1d49e2875b..701c65e34bd5 100644 --- a/docs/data/introduction/support/support.md +++ b/docs/data/introduction/support/support.md @@ -21,9 +21,42 @@ 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 (👍). -## Stack Overflow +### Bug reproductions -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. +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: + +#### Use the live editors + +You can browse the documentation, find an example close to your use case, and then open it in a live editor: + + + +Forking an example + + +Forking an example + + + +- [Data Grid](/x/react-data-grid/#mit-version-free-forever) +- [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component) +- [Charts](/x/react-charts/getting-started/#single-charts) +- [Tree View](/x/react-tree-view/#simple-tree-view) + +#### Use starter templates + +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/master/bug-reproductions/x-data-grid?file=src/index.tsx) +- A plain React [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts) template + +## Stack Overflow + +We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUI X community as well as MUI X maintainers. You can search through existing questions and answers to see if someone has asked a similar question using one of [these tags](https://stackoverflow.com/questions/tagged/mui-x+or+mui-x-charts+or+mui-x-data-grid+or+mui-x-date-picker): @@ -32,7 +65,7 @@ You can search through existing questions and answers to see if someone has aske - mui-x-date-picker - mui-x-charts -If you can't find your answer, [ask a new question](https://stackoverflow.com/questions/ask?tags=reactjs%20mui-x) using the relevant tags. +If you cannot find your answer, [ask a new question](https://stackoverflow.com/questions/ask?tags=reactjs%20mui-x) using the relevant tags. ## Technical support @@ -61,9 +94,9 @@ This includes issues introduced by external sources, like browser upgrades or ch ### Supported versions -- MUI X v7: ✅ Pre-release (Continuous support - Stable release: March 2024) -- MUI X v6: ✅ Stable major (Continuous support) -- MUI X v5: ⚠️ Long-term support (Guaranteed Support for security issues and regressions). +- MUI X v7: ✅ Stable major (Continuous support). +- MUI X v6: ⚠️ Long-term support (Guaranteed Support for security issues and regressions). +- MUI X v5: 🅧 No longer supported. - MUI X v4: 🅧 No longer supported. - MUI X v3: 🅧 Never existed. - MUI X v2: 🅧 Never existed. @@ -84,7 +117,7 @@ Our tools are used by thousands of developers and teams all around the world, ma You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us! :::warning -How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). +How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). ::: ## Custom work diff --git a/docs/data/migration/migration-charts-v6/migration-charts-v6.md b/docs/data/migration/migration-charts-v6/migration-charts-v6.md index e46e62858af1..e274f55159cb 100644 --- a/docs/data/migration/migration-charts-v6/migration-charts-v6.md +++ b/docs/data/migration/migration-charts-v6/migration-charts-v6.md @@ -10,20 +10,20 @@ productId: x-charts This is a reference guide for upgrading `@mui/x-charts` from v6 to v7. The change between v6 and v7 is mostly here to match the version with other MUI X packages. -Not big breaking changes are expected. +No big breaking changes are expected. ## Start using the new release -In `package.json`, change the version of the charts package to `next`. +In `package.json`, change the version of the charts package to `^7.0.0`. ```diff -"@mui/x-charts": "6.x.x", -+"@mui/x-charts": "next", ++"@mui/x-charts": "^7.0.0", ``` ## Update `@mui/material` package -To have the option of using the latest API from `@mui/material`, the package peer dependency version has been updated to `^5.15.0`. +To have the option of using the latest API from `@mui/material`, the package peer dependency version has been updated to `^5.15.14`. 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. @@ -32,11 +32,33 @@ Please update your `@mui/material` package to this or a newer version. Since `v7` is a major release, it contains changes that affect the public API. These changes were done for consistency, improved stability and to make room for new features. +### Drop the legacy bundle + +The support for IE11 has been removed from all MUI X packages. +The `legacy` bundle that used to support old browsers like IE11 is no longer included. + +:::info +If you need support for IE11, you will need to keep using the latest version of the `v6` release. +::: + ### Renaming +#### Types + Some types got renamed for coherence: | v6 | v7 | | :-------------------------------- | :----------------------- | | `ChartsTooltipSlotComponentProps` | `ChartsTooltipSlotProps` | | `ChartsTooltipSlotsComponent` | `ChartsTooltipSlots` | + +#### Props + +The Pie Chart `onClick` prop has been renamed `onItemClick` for consistency with other components. +The behavior of this prop remains the same. + +### Animation + +The Line Chart now have animation by default. +You can disable it with `skipAnimation` prop. +See [animation documentation](/x/react-charts/lines/#animation) for more information. diff --git a/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md b/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md index 7ed8c4c3c711..c3c64e54780c 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,30 +9,30 @@ 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 import { createGenerateClassName } from '@material-ui/core/styles'; const generateClassName = createGenerateClassName({ - // By enabling this option, if you have non-MUI elements (e.g. `
`) - // using MUI classes (e.g. `.MuiButton`) they will lose styles. + // By enabling this option, if you have non-MUI elements (for example `
`) + // using MUI classes (for example `.MuiButton`) they will lose styles. // Make sure to convert them to use `styled()` or `` first. disableGlobal: true, // Class names will receive this seed to avoid name collisions. @@ -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}} @@ -234,7 +234,7 @@ To use the v5 version of MUI X, you first need to update to the new package nam You can use the new `initialState` prop instead. Note that `initialState` only allows the `preferencePanel`, `filter.filterModel` and `sort.sortModel` keys. - To fully control the state, use the feature's model prop and change callback (e.g. `filterModel` and `onFilterModelChange`). + To fully control the state, use the feature's model prop and change callback (for example `filterModel` and `onFilterModelChange`). ```diff + ); @@ -143,7 +144,9 @@ function List(params) { return (
    {params.value.split(', ').map((v) => ( -
  • {v}
    • +
  • + {v} +
    • ))}
); 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 f7683fe80823..7a1f588a5eb8 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 @@ -4,21 +4,24 @@ productId: x-data-grid # Migration from v6 to v7 - -

This guide describes the changes needed to migrate the Data Grid from v6 to v7.

- +This is a reference guide for upgrading `@mui/x-data-grid` from v6 to v7. +To read more about the changes from the new major, check out [the blog post about the release of MUI X v7](https://mui.com/blog/mui-x-v7-beta/). ## Start using the new release -In `package.json`, change the version of the data grid package to `next`. +In `package.json`, change the version of the data grid package to `^7.0.0`. ```diff -"@mui/x-data-grid": "6.x.x", -+"@mui/x-data-grid": "next", ++"@mui/x-data-grid": "^7.0.0", +-"@mui/x-data-grid-pro": "6.x.x", ++"@mui/x-data-grid-pro": "^7.0.0", +-"@mui/x-data-grid-premium": "6.x.x", ++"@mui/x-data-grid-premium": "^7.0.0", ``` Since v7 is a major release, it contains changes that affect the public API. @@ -27,10 +30,26 @@ Described below are the steps needed to migrate from v6 to v7. ## Update `@mui/material` package -To have the option of using the latest API from `@mui/material`, the package peer dependency version has been updated to `^5.15.0`. +To have the option of using the latest API from `@mui/material`, the package peer dependency version has been updated to `^5.15.14`. 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": "^7.0.0", +``` + ## Run codemods The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v7. @@ -40,13 +59,14 @@ 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 +npx @mui/x-codemod v7.0.0/data-grid/preset-safe + // Target other MUI X components as well -npx @mui/x-codemod@next v7.0.0/preset-safe +npx @mui/x-codemod 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. @@ -75,21 +95,33 @@ Since v7 is a major release, it contains some changes that affect the public API These changes were done for consistency, improve stability and make room for new features. Below are described the steps you need to make to migrate from v6 to v7. +### Drop the legacy bundle + +The support for IE11 has been removed from all MUI X packages. +The `legacy` bundle that used to support old browsers like IE11 is no longer included. + +:::info +If you need support for IE11, you will need to keep using the latest version of the `v6` release. +::: + ### 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. - Pinned row and column sections are now contained in the virtual scroller. +- The cell inner wrapper `.MuiDataGrid-cellContent` has been removed. - +- The props `rowBuffer` and `columnBuffer` were renamed to `rowBufferPx` and `columnBufferPx`. + Their value is now a pixel value rather than a number of items. Their default value is now `150`. ### Removed props -- The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details. +- ✅ The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details. - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead. - The `getOptionValue` and `getOptionLabel` props were removed from the following components: @@ -112,26 +144,37 @@ The layout of the grid has been substantially altered to use CSS sticky position }; ``` +- The props `rowThreshold` and `columnThreshold` have been removed. + If you had the `rowThreshold` prop set to `0` to force new rows to be rendered more often – this is no longer necessary. +- ✅ Some feature flags were removed from the `experimentalFeatures` prop. These features are now stable and enabled by default: + - [`columnGrouping`](/x/react-data-grid/column-groups/) + - [`clipboardPaste`](/x/react-data-grid/clipboard/#clipboard-paste) + - [`lazyLoading`](/x/react-data-grid/row-updates/#lazy-loading) + ### 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. @@ -192,8 +341,7 @@ Here's the list of affected features, colDef flags and props to disable them and ### Clipboard -- Clipboard paste is now enabled by default. The flag `clipboardPaste` is no longer needed to be passed to the `experimentalFeatures` prop to enable it. -- The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`. +- ✅ The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`. ### Print export @@ -279,11 +427,11 @@ Here's the list of affected features, colDef flags and props to disable them and - The filter panel no longer uses the native version of the [`Select`](https://mui.com/material-ui/react-select/) component for all components. - The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types. The `filterModel` still accepts strings as values for `date` and `dateTime` column types, - but all updates to the `filterModel` coming from the UI (e.g. filter panel) will set the value as a `Date` object. + but all updates to the `filterModel` coming from the UI (for example filter panel) will set the value as a `Date` object. ### Accessibility -- The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default. +- ✅ The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default. If you were using the `ariaV7` flag, you can remove it from the `experimentalFeatures` prop: ```diff @@ -308,9 +456,9 @@ Here's the list of affected features, colDef flags and props to disable them and - When [Tree data](/x/react-data-grid/tree-data/) feature is used, the grid role is now `role="treegrid"` instead of `role="grid"`. - The Data Grid cells now have `role="gridcell"` instead of `role="cell"`. - +- The `rowEditCommit` event and the related prop `onRowEditCommit` was removed. The [`processRowUpdate`](/x/react-data-grid/editing/#the-processrowupdate-callback) prop can be used in its place. ### Other exports @@ -328,7 +476,7 @@ Here's the list of affected features, colDef flags and props to disable them and ``` - The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` are no longer exported. - Use the [`filterDebounceMs`](/x/api/data-grid/data-grid/#DataGrid-prop-filterDebounceMs) prop to customize filter debounce time. + Use the [`filterDebounceMs`](/x/api/data-grid/data-grid/#data-grid-prop-filterDebounceMs) prop to customize filter debounce time. - The `GridPreferencesPanel` component is not exported anymore as it wasn't meant to be used outside of the Data Grid. @@ -352,14 +500,16 @@ Here's the list of affected features, colDef flags and props to disable them and } ``` -### CSS classes - -- Some CSS classes were removed or renamed +### CSS classes and styling - | 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. +- The `.MuiDataGrid-cell--withRenderer` class has been removed. +- The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior. This also means cells aren't vertically centered by default anymore, so if you have dynamic row height, you might want to set the `display: 'flex'` for all non-dynamic columns. +- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`. +- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility. +- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to. + The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers. ### Changes to the public API @@ -375,5 +525,6 @@ Here's the list of affected features, colDef flags and props to disable them and - The slot `row` has had these props removed: `containerWidth`, `position`. - The slot `row` has typed props now. - The slot `headerFilterCell` has had these props removed: `filterOperators`. +- All slots are now strongly typed, previously were `React.JSXElementConstructor`. diff --git a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md index 969f2b58acb9..67cdb7dab1d1 100644 --- a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md +++ b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md @@ -268,7 +268,7 @@ The codemod will take care of renaming the prop to keep the existing functionali In v5, it was possible to import adapters either from either `@date-io` or `@mui/x-date-pickers` which were the same. In v6, the adapters are extended by `@mui/x-date-pickers` to support [fields components](/x/react-date-pickers/fields/). -Which means adapters can not be imported from `@date-io` anymore. They need to be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`. +Which means adapters cannot be imported from `@date-io` anymore. They need to be imported from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`. Otherwise, some methods will be missing. If you do not find the adapter you were using—there probably was a reason for it, but you can raise an issue expressing interest in it. diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index f2e4b8386a3f..456e79dc53d4 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -4,21 +4,20 @@ productId: x-date-pickers # Migration from v6 to v7 - -

This guide describes the changes needed to migrate the Date and Time Pickers from v6 to v7.

## Introduction -TBD +This is a reference guide for upgrading `@mui/x-date-pickers` from v6 to v7. +To read more about the changes from the new major, check out [the blog post about the release of MUI X v7](https://mui.com/blog/mui-x-v7-beta/). ## Start using the new release -In `package.json`, change the version of the date pickers package to `next`. +In `package.json`, change the version of the date pickers package to `^7.0.0`. ```diff -"@mui/x-date-pickers": "6.x.x", -+"@mui/x-date-pickers": "next", ++"@mui/x-date-pickers": "^7.0.0", ``` Since `v7` is a major release, it contains changes that affect the public API. @@ -27,10 +26,26 @@ Described below are the steps needed to migrate from v6 to v7. ## Update `@mui/material` package -To have the option of using the latest API from `@mui/material`, the package peer dependency version has been updated to `^5.15.0`. +To have the option of using the latest API from `@mui/material`, the package peer dependency version has been updated to `^5.15.14`. 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": "^7.0.0", +``` + ## 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. @@ -39,10 +54,10 @@ You can either run it on a specific file, folder, or your entire codebase when c ```bash // Date and Time Pickers specific -npx @mui/x-codemod@next v7.0.0/pickers/preset-safe +npx @mui/x-codemod v7.0.0/pickers/preset-safe // Target Data Grid as well -npx @mui/x-codemod@next v7.0.0/preset-safe +npx @mui/x-codemod v7.0.0/preset-safe ``` :::info @@ -69,6 +84,15 @@ After running the codemods, make sure to test your application and that you don' Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration. ::: +## Drop the legacy bundle + +The support for IE11 has been removed from all MUI X packages. +The `legacy` bundle that used to support old browsers like IE11 is no longer included. + +:::info +If you need support for IE11, you will need to keep using the latest version of the `v6` release. +::: + ## Component slots ### Rename `components` to `slots` @@ -81,7 +105,7 @@ And are removed from the v7. If not already done, this modification can be handled by the codemod ```bash -npx @mui/x-codemod@next v7.0.0/pickers/ +npx @mui/x-codemod v7.0.0/pickers/ ``` Take a look at [the RFC](https://github.com/mui/material-ui/issues/33416) for more information. @@ -221,12 +245,29 @@ The string argument of the `dayOfWeekFormatter` prop has been replaced in favor // If you were already using the day object, just remove the first argument. - dayOfWeekFormatter={(_dayStr, day) => `${day.format('dd')}.` -+ dayOfWeekFormatter={day => `${day.format('dd')}.` ++ dayOfWeekFormatter={day => `${day.format('dd')}.`} /> ``` ## Field components +### Update the format of `selectedSections` + +The `selectedSections` prop no longer accepts start and end indexes. +When selecting several — but not all — sections, +the field components were not behaving correctly, you can now only select one or all sections: + +```diff + +``` + ### Replace the section `hasLeadingZeros` property :::success @@ -342,6 +383,41 @@ If your custom field is based on one of the examples of the [Custom field](/x/re then you can look at the page to see all the examples improved and updated to use the new simplified API. ::: +#### Do not forward the `enableAccessibleFieldDOMStructure` prop to the DOM + +The headless field hooks (e.g.: `useDateField`) now return a new prop called `enableAccessibleFieldDOMStructure`. +This is used to know if the current UI expected is built using the accessible DOM structure or not. +Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure). + +When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM: + +```diff + function MyCustomTextField(props) { + const { ++ // Should be ignored ++ enableAccessibleFieldDOMStructure, + + // ... rest of the props you are using + } + + return ( /* Some UI to edit the date */ ) + } + + function MyCustomField(props) { + const fieldResponse = useDateField({ + ...props, ++ // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application ++ enableAccessibleFieldDOMStructure: false, + }); + + return ; + } + + function App() { + return ; + } +``` + ## Date management ### Use localized week with luxon @@ -353,7 +429,7 @@ If you want to keep the start of the week on Monday even if your locale says oth You can hardcode the week settings as follows: ```ts -import { Settings } from 'luxon'; +import { Settings, Info } from 'luxon'; Settings.defaultWeekSettings = { firstDay: 1, @@ -443,13 +519,23 @@ The `locales` export has been removed from the root of the packages. In an effort to reduce the bundle size, the locales are now only available from the `@mui/x-date-pickers/locales` or `@mui/x-date-pickers-pro/locales` paths. If you were still relying on the root level export, please update your code. -Before v7, it was possible to import locales from the package root (i.e. `import { frFR } from '@mui/x-date-pickers'`). +Before v7, it was possible to import locales from the package root (that is `import { frFR } from '@mui/x-date-pickers'`). ```diff -import { frFR } from '@mui/x-date-pickers'; +import { frFR } from '@mui/x-date-pickers/locales'; ``` +## Remove `dateTimeViewRenderers` export + +The `dateTimeViewRenderers` export has been removed in favor of reusing existing time view renderers (`renderTimeViewClock`, `renderDigitalClockTimeView` and `renderMultiSectionDigitalClockTimeView`) and date view renderer (`renderDateViewCalendar`) to render the `DesktopDateTimePicker`. + +If you were relying on this import, you can refer to the implementation of the `DesktopDateTimePicker` to see how to combine the renderers yourself. + +:::info +The additional side-effect of this change is that passing `renderTimeViewClock` to time view renderers will no longer revert to the old behavior of rendering only date or time view. +::: + ## Adapters internal changes :::success @@ -836,3 +922,14 @@ Which is the same type as the one accepted by the components `value` prop. ``` + +## Removed internal types + +The following internal types were exported by mistake and have been removed from the public API: + +- `UseDateFieldDefaultizedProps` +- `UseTimeFieldDefaultizedProps` +- `UseDateTimeFieldDefaultizedProps` +- `UseSingleInputDateRangeFieldComponentProps` +- `UseSingleInputTimeRangeFieldComponentProps` +- `UseSingleInputDateTimeRangeFieldComponentProps` diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index bf1b3cdf2fc3..ba4f3df4b112 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -4,26 +4,25 @@ productId: x-tree-view # Migration from v6 to v7 - -

This guide describes the changes needed to migrate the Tree View from v6 to v7.

## Introduction -TBD +This is a reference guide for upgrading `@mui/x-tree-view` from v6 to v7. +To read more about the changes from the new major, check out [the blog post about the release of MUI X v7](https://mui.com/blog/mui-x-v7-beta/). -## Start using the alpha release +## Start using the new release -In `package.json`, change the version of the tree view package to `next`. +In `package.json`, change the version of the tree view package to `^7.0.0`. ```diff -"@mui/x-tree-view": "6.x.x", -+"@mui/x-tree-view": "next", ++"@mui/x-tree-view": "^7.0.0", ``` ## Update `@mui/material` package -To have the option of using the latest API from `@mui/material`, the package peer dependency version has been updated to `^5.15.0`. +To have the option of using the latest API from `@mui/material`, the package peer dependency version has been updated to `^5.15.14`. 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. @@ -32,6 +31,45 @@ Please update your `@mui/material` package to this or a newer version. Since `v7` is a major release, it contains changes that affect the public API. These changes were done for consistency, improved stability and to make room for new features. +### Drop the legacy bundle + +The support for IE11 has been removed from all MUI X packages. +The `legacy` bundle that used to support old browsers like IE11 is no longer included. + +:::info +If you need support for IE11, you will need to keep using the latest version of the `v6` release. +::: + +### ✅ Rename `nodeId` to `itemId` + +The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency: + +```diff + +- ++ + +``` + +The same change has been applied to the and `ContentComponent` prop: + +```diff + const CustomContent = React.forwardRef((props, ref) => { +- const id = props.nodeId; ++ const id = props.itemId; + + // Render some UI + }); + + function App() { + return ( + + + + ) + } +``` + ### ✅ Use `SimpleTreeView` instead of `TreeView` The `TreeView` component has been deprecated and will be removed in the next major. @@ -47,7 +85,7 @@ You can start replacing it with the new `SimpleTreeView` component which has exa return ( - + - + - + ); @@ -84,8 +122,8 @@ If you were using the `treeViewClasses` object, you can replace it with the new #### Define `expandIcon` -The icon used to expand the children of a node (rendered when this node is collapsed) -is now defined as a slot both on the Tree View and the Tree Item components. +The icon used to expand the children of an item (rendered when this item is collapsed) +is now defined as a slot both on the Tree View and the `TreeItem` components. If you were using the `ChevronRight` icon from `@mui/icons-material`, you can stop passing it to your component because it is now the default value: @@ -116,14 +154,14 @@ you need to use the new `expandIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing another icon to your Tree Item component, +If you were passing another icon to your `TreeItem` component, you need to use the new `expandIcon` slot on this component: ```diff } + slots={{ expandIcon: MyCustomExpandIcon }} /> @@ -132,8 +170,8 @@ you need to use the new `expandIcon` slot on this component: #### Define `collapseIcon` -The icon used to collapse the children of a node (rendered when this node is expanded) -is now defined as a slot both on the Tree View and the Tree Item components. +The icon used to collapse the children of an item (rendered when this item is expanded) +is now defined as a slot both on the Tree View and the `TreeItem` components. If you were using the `ExpandMore` icon from `@mui/icons-material`, you can stop passing it to your component because it is now the default value: @@ -164,14 +202,14 @@ you need to use the new `collapseIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing another icon to your Tree Item component, +If you were passing another icon to your `TreeItem` component, you need to use the new `collapseIcon` slot on this component: ```diff } + slots={{ collapseIcon: MyCustomCollapseIcon }} /> @@ -198,7 +236,7 @@ by passing the same icon to both the `collapseIcon` and the `expandIcon` slots o #### Define `endIcon` The icon rendered next to an item without children -is now defined as a slot both on the Tree View and the Tree Item components. +is now defined as a slot both on the Tree View and the `TreeItem` components. If you were passing an icon to your Tree View component, you need to use the new `endIcon` slot on this component: @@ -216,14 +254,14 @@ you need to use the new `endIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing an icon to your Tree Item component, +If you were passing an icon to your `TreeItem` component, you need to use the new `endIcon` slot on this component: ```diff } + slots={{ endIcon: MyCustomEndIcon }} /> @@ -233,16 +271,16 @@ you need to use the new `endIcon` slot on this component: #### Define `icon` The icon rendered next to an item -is now defined as a slot on the Tree Item component. +is now defined as a slot on the `TreeItem` component. -If you were passing an icon to your Tree Item component, +If you were passing an icon to your `TreeItem` component, you need to use the new `icon` slot on this component: ```diff } + slots={{ icon: MyCustomIcon }} /> @@ -253,38 +291,72 @@ you need to use the new `icon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: +### ✅ Use slots to define the group transition + +The component used to animate the item children +is now defined as a slot on the `TreeItem` component. + +If you were passing a `TransitionComponent` or `TransitionProps` to your `TreeItem` component, +you need to use the new `groupTransition` slot on this component: + +```diff + + + +``` + +### Rename the `group` class of the `TreeItem` component + +The `group` class of the `TreeItem` component has been renamed to `groupTransition` to match with its new slot name. + +```diff + const StyledTreeItem = styled(TreeItem)({ +- [`& .${treeItemClasses.group}`]: { ++ [`& .${treeItemClasses.groupTransition}`]: { + marginLeft: 20, + }, + }); +``` + ### ✅ Rename `onNodeToggle`, `expanded` and `defaultExpanded` The expansion props have been renamed to better describe their behaviors: | Old name | New name | | :---------------- | :---------------------- | -| `onNodeToggle` | `onExpandedNodesChange` | -| `expanded` | `expandedNodes` | -| `defaultExpanded` | `defaultExpandedNodes` | +| `onNodeToggle` | `onExpandedItemsChange` | +| `expanded` | `expandedItems` | +| `defaultExpanded` | `defaultExpandedItems` | ```diff ``` :::info -If you were using the `onNodeToggle` prop to react to the expansion or collapse of a specific node, -you can use the new `onNodeExpansionToggle` prop which is called whenever a node is expanded or collapsed with its id and expansion status +If you were using the `onNodeToggle` prop to react to the expansion or collapse of a specific item, +you can use the new `onItemExpansionToggle` prop which is called whenever an item is expanded or collapsed with its id and expansion status ```tsx // It is also available on the deprecated `TreeView` component - console.log(nodeId, isExpanded) + onItemExpansionToggle={(event, itemId, isExpanded) => + console.log(itemId, isExpanded) } /> ``` @@ -297,38 +369,70 @@ The selection props have been renamed to better describe their behaviors: | Old name | New name | | :---------------- | :---------------------- | -| `onNodeSelect` | `onSelectedNodesChange` | -| `selected` | `selectedNodes` | -| `defaultSelected` | `defaultSelectedNodes` | +| `onNodeSelect` | `onSelectedItemsChange` | +| `selected` | `selectedItems` | +| `defaultSelected` | `defaultSelectedItems` | ```diff ``` :::info -If you were using the `onNodeSelect` prop to react to the selection or deselection of a specific node, -you can use the new `onNodeSelectionToggle` prop which is called whenever a node is selected or deselected with its id and selection status. +If you were using the `onNodeSelect` prop to react to the selection or deselection of a specific item, +you can use the new `onItemSelectionToggle` prop which is called whenever an item is selected or deselected with its id and selection status. ```tsx // It is also available on the deprecated `TreeView` component - console.log(nodeId, isSelected) + onItemSelectionToggle={(event, itemId, isSelected) => + console.log(itemId, isSelected) } /> ``` ::: +### Focus the Tree Item instead of the Tree View + +The focus is now applied to the Tree Item root element instead of the Tree View root element. + +This change will allow new features that require the focus to be on the Tree Item, +like the drag and drop reordering of items. +It also solves several issues with focus management, +like the inability to scroll to the focused item when a lot of items are rendered. + +This will mostly impact how you write tests to interact with the Tree View: + +For example, if you were writing a test with `react-testing-library`, here is what the changes could look like: + +```diff + it('test example on first item', () => { + const { getByRole } = render( + + One + Two + + ); +- const tree = getByRole('tree'); ++ const treeItem = getByRole('treeitem', { name: 'One' }); + act(() => { +- tree.focus(); ++ treeItem.focus(); + }); +- fireEvent.keyDown(tree, { key: 'ArrowDown' }); ++ fireEvent.keyDown(treeItem, { key: 'ArrowDown' }); + }) +``` + ### ✅ Use `useTreeItemState` instead of `useTreeItem` The `useTreeItem` hook has been renamed `useTreeItemState`. @@ -339,8 +443,8 @@ This will help create a new headless version of the `TreeItem` component based o +import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem'; const CustomContent = React.forwardRef((props, ref) => { -- const { disabled } = useTreeItem(props.nodeId); -+ const { disabled } = useTreeItemState(props.nodeId); +- const { disabled } = useTreeItem(props.itemId); ++ const { disabled } = useTreeItemState(props.itemId); // Render some UI }); @@ -353,3 +457,14 @@ This will help create a new headless version of the `TreeItem` component based o ) } ``` + +### ✅ Rename `onNodeFocus` + +The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency: + +```diff + +``` diff --git a/docs/data/pages.ts b/docs/data/pages.ts index a1eadb385cf8..5ca6c1bd5d8f 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -436,6 +436,7 @@ const pages: MuiPage[] = [ pathname: '/x/react-charts/sparkline', title: 'Sparkline', }, + { pathname: '/x/react-charts/gauge', title: 'Gauge' }, { pathname: '/x/api/charts-group', title: 'API Reference', @@ -458,13 +459,17 @@ const pages: MuiPage[] = [ pathname: '/x/react-charts-future', subheader: 'Future components', children: [ - { pathname: '/x/react-charts/gauge', title: 'Gauge', planned: true }, - { pathname: '/x/react-charts/heat-map', title: 'Heat map', planned: true }, { pathname: '/x/react-charts/radar', title: 'Radar', planned: true }, { pathname: '/x/react-charts/tree-map', title: 'Treemap', planned: true }, + { + pathname: '/x/react-charts/heat-map', + title: 'Heatmap', + plan: 'pro', + planned: true, + }, { pathname: '/x/react-charts/funnel', title: 'Funnel', plan: 'pro', planned: true }, - { pathname: '/x/react-charts/gantt', title: 'Gantt', plan: 'pro', planned: true }, { pathname: '/x/react-charts/sankey', title: 'Sankey', plan: 'pro', planned: true }, + { pathname: '/x/react-charts/gantt', title: 'Gantt', plan: 'pro', planned: true }, ], }, ], @@ -486,6 +491,7 @@ const pages: MuiPage[] = [ { pathname: '/x/react-tree-view/simple-tree-view/selection' }, { pathname: '/x/react-tree-view/simple-tree-view/expansion' }, { pathname: '/x/react-tree-view/simple-tree-view/customization' }, + { pathname: '/x/react-tree-view/simple-tree-view/focus' }, ], }, { @@ -495,6 +501,8 @@ const pages: MuiPage[] = [ { pathname: '/x/react-tree-view/rich-tree-view/items' }, { pathname: '/x/react-tree-view/rich-tree-view/selection' }, { pathname: '/x/react-tree-view/rich-tree-view/expansion' }, + { pathname: '/x/react-tree-view/rich-tree-view/customization' }, + { pathname: '/x/react-tree-view/rich-tree-view/focus' }, ], }, { diff --git a/docs/data/tree-view-component-api-pages.ts b/docs/data/tree-view-component-api-pages.ts index b65570c58e47..39fcd6ae8933 100644 --- a/docs/data/tree-view-component-api-pages.ts +++ b/docs/data/tree-view-component-api-pages.ts @@ -13,6 +13,10 @@ const apiPages: MuiPage[] = [ pathname: '/x/api/tree-view/tree-item', title: 'TreeItem', }, + { + pathname: '/x/api/tree-view/tree-item-2', + title: 'TreeItem2', + }, { pathname: '/x/api/tree-view/tree-view', title: 'TreeView', diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/getting-started/FirstComponent.js index f298d80d737d..f5b1eb6a7691 100644 --- a/docs/data/tree-view/getting-started/FirstComponent.js +++ b/docs/data/tree-view/getting-started/FirstComponent.js @@ -6,15 +6,15 @@ export default function FirstComponent() { return ( - - + + - - - - + + + + diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx b/docs/data/tree-view/getting-started/FirstComponent.tsx index f298d80d737d..f5b1eb6a7691 100644 --- a/docs/data/tree-view/getting-started/FirstComponent.tsx +++ b/docs/data/tree-view/getting-started/FirstComponent.tsx @@ -6,15 +6,15 @@ export default function FirstComponent() { return ( - - + + - - - - + + + + diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview index 80d9ff4dc140..8228e866c065 100644 --- a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview +++ b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview @@ -1,14 +1,14 @@ - - + + - - - - + + + + \ No newline at end of file diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md index 5a6b9790c03d..3ae405a02a8d 100644 --- a/docs/data/tree-view/getting-started/getting-started.md +++ b/docs/data/tree-view/getting-started/getting-started.md @@ -17,21 +17,17 @@ Using your favorite package manager, install `@mui/x-tree-view`: -:::warning -The `next` tag is used to download the latest v7 **pre-release** version. -::: - ```bash npm -npm install @mui/x-tree-view@next +npm install @mui/x-tree-view ``` ```bash yarn -yarn add @mui/x-tree-view@next +yarn add @mui/x-tree-view ``` ```bash pnpm -pnpm add @mui/x-tree-view@next +pnpm add @mui/x-tree-view ``` @@ -81,7 +77,7 @@ pnpm add @mui/styled-engine-sc styled-components -Take a look at the [Styled engine guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine. +Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. ## Render your first component diff --git a/docs/data/tree-view/overview/BasicRichTreeView.js b/docs/data/tree-view/overview/BasicRichTreeView.js index 3af5afeaf5c7..6891094201b0 100644 --- a/docs/data/tree-view/overview/BasicRichTreeView.js +++ b/docs/data/tree-view/overview/BasicRichTreeView.js @@ -25,7 +25,7 @@ const MUI_X_PRODUCTS = [ export default function BasicRichTreeView() { return ( - + ); diff --git a/docs/data/tree-view/overview/BasicRichTreeView.tsx b/docs/data/tree-view/overview/BasicRichTreeView.tsx index 644205c6ffdc..5f89f65503c3 100644 --- a/docs/data/tree-view/overview/BasicRichTreeView.tsx +++ b/docs/data/tree-view/overview/BasicRichTreeView.tsx @@ -25,7 +25,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ export default function BasicRichTreeView() { return ( - + ); diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.js b/docs/data/tree-view/overview/BasicSimpleTreeView.js index ae254b6877f5..5757cfb2964e 100644 --- a/docs/data/tree-view/overview/BasicSimpleTreeView.js +++ b/docs/data/tree-view/overview/BasicSimpleTreeView.js @@ -5,16 +5,16 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function BasicSimpleTreeView() { return ( - + - - - - + + + + - - - + + + diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx index ae254b6877f5..5757cfb2964e 100644 --- a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx +++ b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx @@ -5,16 +5,16 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function BasicSimpleTreeView() { return ( - + - - - - + + + + - - - + + + diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview index 4f449dc9b561..3641f9443f57 100644 --- a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview +++ b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview @@ -1,11 +1,11 @@ - - - - + + + + - - - + + + \ No newline at end of file diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md index 0954679d90fc..9429bf8a1d30 100644 --- a/docs/data/tree-view/overview/overview.md +++ b/docs/data/tree-view/overview/overview.md @@ -8,31 +8,108 @@ 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. +::: + +### Tree Item components + +The `@mui/x-tree-view` package exposes two different components to define your tree items: + +- `TreeItem` +- `TreeItem2` + +#### `TreeItem` + +This is the long-standing component that is very similar to the one used in previous versions (`@mui/x-tree-view@6` and `@mui/lab`). + +When using `SimpleTreeView`, +you can import it from `@mui/x-tree-view/TreeItem` and use it as a child of the `SimpleTreeView` component: + +```tsx +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; + +export default function App() { + return ( + + + + + ); +} +``` + +When using `RichTreeView`, +you don't have to import anything; it's the default component used to render the items: + +```tsx +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +export default function App() { + return ; +} +``` + +#### `TreeItem2` + +This is a new component that provides a more powerful customization API, and will eventually replace `TreeItem`. + +When using `SimpleTreeView`, +you can import it from `@mui/x-tree-view/TreeItem2` and use it as a child of the `SimpleTreeView` component: + +```tsx +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; + +export default function App() { + return ( + + + + + ); +} +``` + +When using `RichTreeView`, +you can import it from `@mui/x-tree-view/TreeItem2` and pass it as a slot of the `RichTreeView` component: + +```tsx +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; + +export default function App() { + return ; +} +``` diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js new file mode 100644 index 000000000000..53d9edc89c93 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js @@ -0,0 +1,62 @@ +import * as React from 'react'; +import Collapse from '@mui/material/Collapse'; + +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +import { useSpring, animated } from '@react-spring/web'; + +const ITEMS = [ + { + id: '1', + label: 'Main', + children: [ + { id: '2', label: 'Hello' }, + { + id: '3', + label: 'Subtree with children', + children: [ + { id: '6', label: 'Hello' }, + { + id: '7', + label: 'Sub-subtree with children', + children: [ + { id: '9', label: 'Child 1' }, + { id: '10', label: 'Child 2' }, + { id: '11', label: 'Child 3' }, + ], + }, + { id: '8', label: 'Hello' }, + ], + }, + { id: '4', label: 'World' }, + { id: '5', label: 'Something something' }, + ], + }, +]; + +function TransitionComponent(props) { + const style = useSpring({ + to: { + opacity: props.in ? 1 : 0, + transform: `translate3d(${props.in ? 0 : 20}px,0,0)`, + }, + }); + + return ( + + + + ); +} + +export default function CustomAnimation() { + return ( + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx new file mode 100644 index 000000000000..c0f7dc541b51 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +import Collapse from '@mui/material/Collapse'; +import { TransitionProps } from '@mui/material/transitions'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; +import { useSpring, animated } from '@react-spring/web'; + +const ITEMS: TreeViewBaseItem[] = [ + { + id: '1', + label: 'Main', + children: [ + { id: '2', label: 'Hello' }, + { + id: '3', + label: 'Subtree with children', + children: [ + { id: '6', label: 'Hello' }, + { + id: '7', + label: 'Sub-subtree with children', + children: [ + { id: '9', label: 'Child 1' }, + { id: '10', label: 'Child 2' }, + { id: '11', label: 'Child 3' }, + ], + }, + { id: '8', label: 'Hello' }, + ], + }, + { id: '4', label: 'World' }, + { id: '5', label: 'Something something' }, + ], + }, +]; + +function TransitionComponent(props: TransitionProps) { + const style = useSpring({ + to: { + opacity: props.in ? 1 : 0, + transform: `translate3d(${props.in ? 0 : 20}px,0,0)`, + }, + }); + + return ( + + + + ); +} + +export default function CustomAnimation() { + return ( + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview new file mode 100644 index 000000000000..56ad322fe2d0 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js new file mode 100644 index 000000000000..d024ef094cc1 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js @@ -0,0 +1,93 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Avatar from '@mui/material/Avatar'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; +import { + TreeItem2Content, + TreeItem2IconContainer, + TreeItem2GroupTransition, + TreeItem2Label, + TreeItem2Root, +} from '@mui/x-tree-view/TreeItem2'; +import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; +import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; + +const ITEMS = [ + { + id: '1', + label: 'Amelia Hart', + children: [{ id: '2', label: 'Jane Fisher' }], + }, + { + id: '3', + label: 'Bailey Monroe', + children: [ + { id: '4', label: 'Freddie Reed' }, + { + id: '5', + label: 'Georgia Johnson', + children: [{ id: '6', label: 'Samantha Malone' }], + }, + ], + }, +]; + +const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ + padding: theme.spacing(0.5, 1), +})); + +const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { + const { id, itemId, label, disabled, children, ...other } = props; + + const { + getRootProps, + getContentProps, + getIconContainerProps, + getLabelProps, + getGroupTransitionProps, + status, + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); + + return ( + + + + + + + + ({ + background: theme.palette.primary.main, + width: 24, + height: 24, + fontSize: '0.8rem', + })} + > + {label[0]} + + + + + {children && } + + + ); +}); + +export default function CustomContentTreeView() { + return ( + + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx new file mode 100644 index 000000000000..7651bb7ed31e --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx @@ -0,0 +1,103 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Avatar from '@mui/material/Avatar'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; +import { + unstable_useTreeItem2 as useTreeItem2, + UseTreeItem2Parameters, +} from '@mui/x-tree-view/useTreeItem2'; +import { + TreeItem2Content, + TreeItem2IconContainer, + TreeItem2GroupTransition, + TreeItem2Label, + TreeItem2Root, +} from '@mui/x-tree-view/TreeItem2'; +import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; +import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; + +const ITEMS: TreeViewBaseItem[] = [ + { + id: '1', + label: 'Amelia Hart', + children: [{ id: '2', label: 'Jane Fisher' }], + }, + { + id: '3', + label: 'Bailey Monroe', + children: [ + { id: '4', label: 'Freddie Reed' }, + { + id: '5', + label: 'Georgia Johnson', + children: [{ id: '6', label: 'Samantha Malone' }], + }, + ], + }, +]; + +const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ + padding: theme.spacing(0.5, 1), +})); + +interface CustomTreeItemProps + extends Omit, + Omit, 'onFocus'> {} + +const CustomTreeItem = React.forwardRef(function CustomTreeItem( + props: CustomTreeItemProps, + ref: React.Ref, +) { + const { id, itemId, label, disabled, children, ...other } = props; + + const { + getRootProps, + getContentProps, + getIconContainerProps, + getLabelProps, + getGroupTransitionProps, + status, + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); + + return ( + + + + + + + + ({ + background: theme.palette.primary.main, + width: 24, + height: 24, + fontSize: '0.8rem', + })} + > + {(label as string)[0]} + + + + + {children && } + + + ); +}); + +export default function CustomContentTreeView() { + return ( + + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx.preview new file mode 100644 index 000000000000..e37df6849fe2 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx.preview @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.js b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.js new file mode 100644 index 000000000000..9b6787b5c825 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.js @@ -0,0 +1,75 @@ +import * as React from 'react'; +import AddBoxIcon from '@mui/icons-material/AddBox'; +import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox'; +import SvgIcon from '@mui/material/SvgIcon'; +import { styled } from '@mui/material/styles'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; + +const ITEMS = [ + { + id: '1', + label: 'Main', + children: [ + { id: '2', label: 'Hello' }, + { + id: '3', + label: 'Subtree with children', + children: [ + { id: '6', label: 'Hello' }, + { + id: '7', + label: 'Sub-subtree with children', + children: [ + { id: '9', label: 'Child 1' }, + { id: '10', label: 'Child 2' }, + { id: '11', label: 'Child 3' }, + ], + }, + { id: '8', label: 'Hello' }, + ], + }, + { id: '4', label: 'World' }, + { id: '5', label: 'Something something' }, + ], + }, +]; + +const CustomTreeItem = styled(TreeItem)({ + [`& .${treeItemClasses.iconContainer}`]: { + '& .close': { + opacity: 0.3, + }, + }, +}); + +function CloseSquare(props) { + return ( + + {/* tslint:disable-next-line: max-line-length */} + + + ); +} + +export default function CustomIcons() { + return ( + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx new file mode 100644 index 000000000000..8fe4f628f2ce --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import AddBoxIcon from '@mui/icons-material/AddBox'; +import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; +import { styled } from '@mui/material/styles'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; + +const ITEMS: TreeViewBaseItem[] = [ + { + id: '1', + label: 'Main', + children: [ + { id: '2', label: 'Hello' }, + { + id: '3', + label: 'Subtree with children', + children: [ + { id: '6', label: 'Hello' }, + { + id: '7', + label: 'Sub-subtree with children', + children: [ + { id: '9', label: 'Child 1' }, + { id: '10', label: 'Child 2' }, + { id: '11', label: 'Child 3' }, + ], + }, + { id: '8', label: 'Hello' }, + ], + }, + { id: '4', label: 'World' }, + { id: '5', label: 'Something something' }, + ], + }, +]; + +const CustomTreeItem = styled(TreeItem)({ + [`& .${treeItemClasses.iconContainer}`]: { + '& .close': { + opacity: 0.3, + }, + }, +}); + +function CloseSquare(props: SvgIconProps) { + return ( + + {/* tslint:disable-next-line: max-line-length */} + + + ); +} + +export default function CustomIcons() { + return ( + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx.preview new file mode 100644 index 000000000000..209560af6131 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomIcons.tsx.preview @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js new file mode 100644 index 000000000000..255f2ec67c29 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js @@ -0,0 +1,75 @@ +import * as React from 'react'; +import { styled, alpha } from '@mui/material/styles'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; + +const ITEMS = [ + { + id: '1', + label: 'Main', + children: [ + { id: '2', label: 'Hello' }, + { + id: '3', + label: 'Subtree with children', + children: [ + { id: '6', label: 'Hello' }, + { + id: '7', + label: 'Sub-subtree with children', + children: [ + { id: '9', label: 'Child 1' }, + { id: '10', label: 'Child 2' }, + { id: '11', label: 'Child 3' }, + ], + }, + { id: '8', label: 'Hello' }, + ], + }, + { id: '4', label: 'World' }, + { id: '5', label: 'Something something' }, + ], + }, +]; + +const StyledTreeItem = styled(TreeItem)(({ theme }) => ({ + color: + theme.palette.mode === 'light' + ? theme.palette.grey[800] + : theme.palette.grey[200], + [`& .${treeItemClasses.content}`]: { + borderRadius: theme.spacing(0.5), + padding: theme.spacing(0.5, 1), + margin: theme.spacing(0.2, 0), + [`& .${treeItemClasses.label}`]: { + fontSize: '0.8rem', + fontWeight: 500, + }, + }, + [`& .${treeItemClasses.iconContainer}`]: { + borderRadius: '50%', + backgroundColor: + theme.palette.mode === 'light' + ? alpha(theme.palette.primary.main, 0.25) + : theme.palette.primary.dark, + color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText, + padding: theme.spacing(0, 1.2), + }, + [`& .${treeItemClasses.groupTransition}`]: { + marginLeft: 15, + paddingLeft: 18, + borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`, + }, +})); + +export default function CustomStyling() { + return ( + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx new file mode 100644 index 000000000000..ab3760093459 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx @@ -0,0 +1,77 @@ +import * as React from 'react'; +import { styled, alpha } from '@mui/material/styles'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; + +const ITEMS: TreeViewBaseItem[] = [ + { + id: '1', + label: 'Main', + children: [ + { id: '2', label: 'Hello' }, + { + id: '3', + label: 'Subtree with children', + children: [ + { id: '6', label: 'Hello' }, + { + id: '7', + label: 'Sub-subtree with children', + children: [ + { id: '9', label: 'Child 1' }, + { id: '10', label: 'Child 2' }, + { id: '11', label: 'Child 3' }, + ], + }, + { id: '8', label: 'Hello' }, + ], + }, + { id: '4', label: 'World' }, + { id: '5', label: 'Something something' }, + ], + }, +]; + +const StyledTreeItem = styled(TreeItem)(({ theme }) => ({ + color: + theme.palette.mode === 'light' + ? theme.palette.grey[800] + : theme.palette.grey[200], + + [`& .${treeItemClasses.content}`]: { + borderRadius: theme.spacing(0.5), + padding: theme.spacing(0.5, 1), + margin: theme.spacing(0.2, 0), + [`& .${treeItemClasses.label}`]: { + fontSize: '0.8rem', + fontWeight: 500, + }, + }, + [`& .${treeItemClasses.iconContainer}`]: { + borderRadius: '50%', + backgroundColor: + theme.palette.mode === 'light' + ? alpha(theme.palette.primary.main, 0.25) + : theme.palette.primary.dark, + color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText, + padding: theme.spacing(0, 1.2), + }, + [`& .${treeItemClasses.groupTransition}`]: { + marginLeft: 15, + paddingLeft: 18, + borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`, + }, +})); + +export default function CustomStyling() { + return ( + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx.preview new file mode 100644 index 000000000000..3aef020f6665 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx.preview @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js new file mode 100644 index 000000000000..4c28c6cd280b --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js @@ -0,0 +1,100 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { useTreeItemState } from '@mui/x-tree-view/TreeItem'; + +const ITEMS = [ + { + id: '1', + label: 'Applications', + children: [{ id: '2', label: 'Calendar' }], + }, + { + id: '3', + label: 'Documents', + children: [ + { id: '6', label: 'OSS' }, + { + id: '4', + label: 'MUI', + children: [{ id: '5', label: 'index.js' }], + }, + ], + }, +]; + +const CustomContent = React.forwardRef(function CustomContent(props, ref) { + const { + classes, + className, + label, + itemId, + icon: iconProp, + expansionIcon, + displayIcon, + } = props; + + const { + disabled, + expanded, + selected, + focused, + handleExpansion, + handleSelection, + preventSelection, + } = useTreeItemState(itemId); + + const icon = iconProp || expansionIcon || displayIcon; + + const handleMouseDown = (event) => { + preventSelection(event); + }; + + const handleExpansionClick = (event) => { + handleExpansion(event); + }; + + const handleSelectionClick = (event) => { + handleSelection(event); + }; + + return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} +
+ {icon} +
+ + {label} + +
+ ); +}); + +export default function IconExpansionTreeView() { + return ( + + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx new file mode 100644 index 000000000000..2847daf70967 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx @@ -0,0 +1,108 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { useTreeItemState, TreeItemContentProps } from '@mui/x-tree-view/TreeItem'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; + +const ITEMS: TreeViewBaseItem[] = [ + { + id: '1', + label: 'Applications', + children: [{ id: '2', label: 'Calendar' }], + }, + { + id: '3', + label: 'Documents', + children: [ + { id: '6', label: 'OSS' }, + { + id: '4', + label: 'MUI', + children: [{ id: '5', label: 'index.js' }], + }, + ], + }, +]; + +const CustomContent = React.forwardRef(function CustomContent( + props: TreeItemContentProps, + ref, +) { + const { + classes, + className, + label, + itemId, + icon: iconProp, + expansionIcon, + displayIcon, + } = props; + + const { + disabled, + expanded, + selected, + focused, + handleExpansion, + handleSelection, + preventSelection, + } = useTreeItemState(itemId); + + const icon = iconProp || expansionIcon || displayIcon; + + const handleMouseDown = (event: React.MouseEvent) => { + preventSelection(event); + }; + + const handleExpansionClick = ( + event: React.MouseEvent, + ) => { + handleExpansion(event); + }; + + const handleSelectionClick = ( + event: React.MouseEvent, + ) => { + handleSelection(event); + }; + + return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
} + > + {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} +
+ {icon} +
+ + {label} + +
+ ); +}); + +export default function IconExpansionTreeView() { + return ( + + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx.preview new file mode 100644 index 000000000000..9a621283b2c0 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx.preview @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js new file mode 100644 index 000000000000..0261e5154c82 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; + +const MUI_X_PRODUCTS = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { id: 'grid-community', label: '@mui/x-data-grid' }, + { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, + { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, + ], + }, + { + id: 'pickers', + label: 'Date and Time Pickers', + children: [ + { id: 'pickers-community', label: '@mui/x-date-pickers' }, + { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, + ], + }, +]; + +const CustomTreeItem = React.forwardRef((props, ref) => ( + +)); + +export default function LabelSlotProps() { + return ( + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx new file mode 100644 index 000000000000..99f29c8d5d29 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; + +const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { id: 'grid-community', label: '@mui/x-data-grid' }, + { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, + { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, + ], + }, + { + id: 'pickers', + label: 'Date and Time Pickers', + children: [ + { id: 'pickers-community', label: '@mui/x-date-pickers' }, + { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, + ], + }, +]; + +const CustomTreeItem = React.forwardRef( + (props: TreeItem2Props, ref: React.Ref) => ( + + ), +); + +export default function LabelSlotProps() { + return ( + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx.preview new file mode 100644 index 000000000000..511debc05ff2 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx.preview @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js new file mode 100644 index 000000000000..2b7de2e27e14 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js @@ -0,0 +1,156 @@ +import * as React from 'react'; +import { TreeItem2, TreeItem2Label } from '@mui/x-tree-view/TreeItem2'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +import { useTreeItem2Utils } from '@mui/x-tree-view'; + +function CustomLabel(props) { + const { children, onChange, ...other } = props; + + const [isEditing, setIsEditing] = React.useState(false); + const [value, setValue] = React.useState(''); + const editingLabelRef = React.useRef(null); + + const handleLabelDoubleClick = () => { + setIsEditing(true); + setValue(children); + }; + + const handleEditingLabelChange = (event) => { + setValue(event.target.value); + }; + + const handleEditingLabelKeyDown = (event) => { + if (event.key === 'Enter') { + event.stopPropagation(); + setIsEditing(false); + onChange(value); + } else if (event.key === 'Escape') { + event.stopPropagation(); + setIsEditing(false); + } + }; + + React.useEffect(() => { + if (isEditing) { + editingLabelRef.current?.focus(); + } + }, [isEditing]); + + if (isEditing) { + return ( + + ); + } + + return ( + + {children} + + ); +} + +const TreeItemContext = React.createContext({ onLabelValueChange: () => {} }); + +const CustomTreeItem = React.forwardRef((props, ref) => { + const { interactions } = useTreeItem2Utils({ + itemId: props.itemId, + children: props.children, + }); + + const { onLabelValueChange } = React.useContext(TreeItemContext); + + const handleLabelValueChange = (newLabel) => { + onLabelValueChange(props.itemId, newLabel); + }; + + const handleContentClick = (event) => { + event.defaultMuiPrevented = true; + interactions.handleSelection(event); + }; + + const handleIconContainerClick = (event) => { + interactions.handleExpansion(event); + }; + + return ( + + ); +}); + +const DEFAULT_MUI_X_PRODUCTS = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { id: 'grid-community', label: '@mui/x-data-grid' }, + { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, + { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, + ], + }, + { + id: 'pickers', + label: 'Date and Time Pickers', + children: [ + { id: 'pickers-community', label: '@mui/x-date-pickers' }, + { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, + ], + }, +]; + +const DEFAULT_EXPANDED_ITEMS = ['pickers']; + +export default function LabelSlots() { + const [products, setProducts] = React.useState(DEFAULT_MUI_X_PRODUCTS); + + const context = React.useMemo( + () => ({ + onLabelValueChange: (itemId, label) => + setProducts((prev) => { + const walkTree = (item) => { + if (item.id === itemId) { + return { ...item, label }; + } + if (item.children) { + return { ...item, children: item.children.map(walkTree) }; + } + + return item; + }; + + return prev.map(walkTree); + }), + }), + [], + ); + + return ( + + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx new file mode 100644 index 000000000000..0dbfa7e69e57 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx @@ -0,0 +1,175 @@ +import * as React from 'react'; +import { + TreeItem2, + TreeItem2Label, + TreeItem2Props, +} from '@mui/x-tree-view/TreeItem2'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; +import { + UseTreeItem2ContentSlotOwnProps, + useTreeItem2Utils, +} from '@mui/x-tree-view'; + +interface CustomLabelProps { + children: string; + className: string; + onChange: (value: string) => void; +} + +function CustomLabel(props: CustomLabelProps) { + const { children, onChange, ...other } = props; + + const [isEditing, setIsEditing] = React.useState(false); + const [value, setValue] = React.useState(''); + const editingLabelRef = React.useRef(null); + + const handleLabelDoubleClick = () => { + setIsEditing(true); + setValue(children); + }; + + const handleEditingLabelChange = (event: React.ChangeEvent) => { + setValue(event.target.value); + }; + + const handleEditingLabelKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + event.stopPropagation(); + setIsEditing(false); + onChange(value); + } else if (event.key === 'Escape') { + event.stopPropagation(); + setIsEditing(false); + } + }; + + React.useEffect(() => { + if (isEditing) { + editingLabelRef.current?.focus(); + } + }, [isEditing]); + + if (isEditing) { + return ( + + ); + } + + return ( + + {children} + + ); +} + +const TreeItemContext = React.createContext<{ + onLabelValueChange: (itemId: string, label: string) => void; +}>({ onLabelValueChange: () => {} }); + +const CustomTreeItem = React.forwardRef( + (props: TreeItem2Props, ref: React.Ref) => { + const { interactions } = useTreeItem2Utils({ + itemId: props.itemId, + children: props.children, + }); + + const { onLabelValueChange } = React.useContext(TreeItemContext); + + const handleLabelValueChange = (newLabel: string) => { + onLabelValueChange(props.itemId, newLabel); + }; + + const handleContentClick: UseTreeItem2ContentSlotOwnProps['onClick'] = ( + event, + ) => { + event.defaultMuiPrevented = true; + interactions.handleSelection(event); + }; + + const handleIconContainerClick = (event: React.MouseEvent) => { + interactions.handleExpansion(event); + }; + + return ( + + ); + }, +); + +const DEFAULT_MUI_X_PRODUCTS: TreeViewBaseItem[] = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { id: 'grid-community', label: '@mui/x-data-grid' }, + { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, + { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, + ], + }, + { + id: 'pickers', + label: 'Date and Time Pickers', + children: [ + { id: 'pickers-community', label: '@mui/x-date-pickers' }, + { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, + ], + }, +]; + +const DEFAULT_EXPANDED_ITEMS = ['pickers']; + +export default function LabelSlots() { + const [products, setProducts] = React.useState(DEFAULT_MUI_X_PRODUCTS); + + const context = React.useMemo( + () => ({ + onLabelValueChange: (itemId: string, label: string) => + setProducts((prev) => { + const walkTree = (item: TreeViewBaseItem): TreeViewBaseItem => { + if (item.id === itemId) { + return { ...item, label }; + } + if (item.children) { + return { ...item, children: item.children.map(walkTree) }; + } + + return item; + }; + + return prev.map(walkTree); + }), + }), + [], + ); + + return ( + + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx.preview new file mode 100644 index 000000000000..36cf606d1cb1 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx.preview @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/customization/customization.md b/docs/data/tree-view/rich-tree-view/customization/customization.md new file mode 100644 index 000000000000..5d33efde72b5 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/customization/customization.md @@ -0,0 +1,71 @@ +--- +productId: x-tree-view +title: Rich Tree View - Customization +components: RichTreeView, TreeItem, TreeItem2 +packageName: '@mui/x-tree-view' +githubLabel: 'component: tree view' +waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ +--- + +# Rich Tree View - Customization + +

Learn how to customize the Rich Tree View component.

+ +## Basics + +### Custom icons + +Use the `collapseIcon` slot, the `expandIcon` slot and the `defaultEndIcon` prop to customize the Tree View icons. +The demo below shows how to add icons using both an existing icon library, such as [Material Icons](/material-ui/material-icons/), and creating an icon from scratch using Material UI's [SVG Icon component](/material-ui/icons/#svgicon). + +{{"demo": "CustomIcons.js", "defaultCodeOpen": false}} + +### Custom toggle animations + +Use the `groupTransition` slot on the `TreeItem` to pass a component that handles your animation. + +The demo below is animated using Material UI's [Collapse](/material-ui/transitions/#collapse) component together with the [react-spring](https://www.react-spring.dev/) library. + +{{"demo": "CustomAnimation.js", "defaultCodeOpen": false}} + +### Custom styling + +Use `treeItemClasses` to target internal elements of the Tree Item component and change their styles. + +{{"demo": "CustomStyling.js"}} + +### Custom label + +:::warning +This example is built using the new `TreeItem2` component +which adds several slots to modify the content of the Tree Item or change its behavior. + +You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). +::: + +Use the `label` slot to customize the Tree Item label or to replace it with a custom component. + +The `slotProps` prop allows you to pass props to the label component. +The demo below shows how to pass an `id` attribute to the Tree Item label: + +{{"demo": "LabelSlotProps.js", "defaultCodeOpen": false }} + +The `slots` prop allows you to replace the default label with your own component: +The demo below shows how to add a tooltip on the Tree Item label: + +{{"demo": "LabelSlots.js", "defaultCodeOpen": false}} + +### Headless API + +Use the `useTreeItem2` hook to create your own component. +The demo below shows how to add an avatar and custom typography elements. + +{{"demo": "CustomContentTreeView.js", "defaultCodeOpen": false}} + +## Common examples + +### Limit expansion to icon container + +The demo below shows how to trigger the expansion interaction just by clicking on the icon container instead of the whole Tree Item surface. + +{{"demo": "IconExpansionTreeView.js", "defaultCodeOpen": false}} diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js index 063312287ef5..bcc49a4c33c4 100644 --- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js +++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js @@ -33,30 +33,30 @@ const MUI_X_PRODUCTS = [ }, ]; -const getAllItemWithChildrenNodeIds = () => { - const nodeIds = []; - const registerNodeId = (item) => { +const getAllItemsWithChildrenItemIds = () => { + const itemIds = []; + const registerItemId = (item) => { if (item.children?.length) { - nodeIds.push(item.id); - item.children.forEach(registerNodeId); + itemIds.push(item.id); + item.children.forEach(registerItemId); } }; - MUI_X_PRODUCTS.forEach(registerNodeId); + MUI_X_PRODUCTS.forEach(registerItemId); - return nodeIds; + return itemIds; }; export default function ControlledExpansion() { - const [expandedNodes, setExpandedNodes] = React.useState([]); + const [expandedItems, setExpandedItems] = React.useState([]); - const handleExpandedNodesChange = (event, nodeIds) => { - setExpandedNodes(nodeIds); + const handleExpandedItemsChange = (event, itemIds) => { + setExpandedItems(itemIds); }; const handleExpandClick = () => { - setExpandedNodes((oldExpanded) => - oldExpanded.length === 0 ? getAllItemWithChildrenNodeIds() : [], + setExpandedItems((oldExpanded) => + oldExpanded.length === 0 ? getAllItemsWithChildrenItemIds() : [], ); }; @@ -64,14 +64,14 @@ export default function ControlledExpansion() { - + diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx index cdd69e36b2ff..83d826091478 100644 --- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx +++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx @@ -34,33 +34,33 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ }, ]; -const getAllItemWithChildrenNodeIds = () => { - const nodeIds: TreeViewItemId[] = []; - const registerNodeId = (item: TreeViewBaseItem) => { +const getAllItemsWithChildrenItemIds = () => { + const itemIds: TreeViewItemId[] = []; + const registerItemId = (item: TreeViewBaseItem) => { if (item.children?.length) { - nodeIds.push(item.id); - item.children.forEach(registerNodeId); + itemIds.push(item.id); + item.children.forEach(registerItemId); } }; - MUI_X_PRODUCTS.forEach(registerNodeId); + MUI_X_PRODUCTS.forEach(registerItemId); - return nodeIds; + return itemIds; }; export default function ControlledExpansion() { - const [expandedNodes, setExpandedNodes] = React.useState([]); + const [expandedItems, setExpandedItems] = React.useState([]); - const handleExpandedNodesChange = ( + const handleExpandedItemsChange = ( event: React.SyntheticEvent, - nodeIds: string[], + itemIds: string[], ) => { - setExpandedNodes(nodeIds); + setExpandedItems(itemIds); }; const handleExpandClick = () => { - setExpandedNodes((oldExpanded) => - oldExpanded.length === 0 ? getAllItemWithChildrenNodeIds() : [], + setExpandedItems((oldExpanded) => + oldExpanded.length === 0 ? getAllItemsWithChildrenItemIds() : [], ); }; @@ -68,14 +68,14 @@ export default function ControlledExpansion() { - + diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview index 70f0f60d7ef5..8a83ec46e541 100644 --- a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview +++ b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview @@ -1,12 +1,12 @@ - + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.js similarity index 82% rename from docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js rename to docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.js index 7f45db3398c0..10e6f0dc3a5e 100644 --- a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js +++ b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.js @@ -35,11 +35,11 @@ const MUI_X_PRODUCTS = [ }, ]; -export default function TrackNodeExpansionToggle() { +export default function TrackItemExpansionToggle() { const [action, setAction] = React.useState(null); - const handleNodeExpansionToggle = (event, nodeId, isExpanded) => { - setAction({ nodeId, isExpanded }); + const handleItemExpansionToggle = (event, itemId, isExpanded) => { + setAction({ itemId, isExpanded }); }; return ( @@ -48,14 +48,14 @@ export default function TrackNodeExpansionToggle() { No action recorded ) : ( - Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId} )} - + diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx similarity index 83% rename from docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx rename to docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx index 3c1091875569..7da11861cd8c 100644 --- a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx +++ b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx @@ -35,18 +35,18 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ }, ]; -export default function TrackNodeExpansionToggle() { +export default function TrackItemExpansionToggle() { const [action, setAction] = React.useState<{ - nodeId: string; + itemId: string; isExpanded: boolean; } | null>(null); - const handleNodeExpansionToggle = ( + const handleItemExpansionToggle = ( event: React.SyntheticEvent, - nodeId: string, + itemId: string, isExpanded: boolean, ) => { - setAction({ nodeId, isExpanded }); + setAction({ itemId, isExpanded }); }; return ( @@ -55,13 +55,13 @@ export default function TrackNodeExpansionToggle() { No action recorded ) : ( - Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId} )} - + diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx.preview similarity index 67% rename from docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview rename to docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx.preview index 535a5e1f2bbe..4699de8b8e11 100644 --- a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview +++ b/docs/data/tree-view/rich-tree-view/expansion/TrackItemExpansionToggle.tsx.preview @@ -2,12 +2,12 @@ No action recorded ) : ( - Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId} )} - + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/expansion/expansion.md b/docs/data/tree-view/rich-tree-view/expansion/expansion.md index d45ef4960fa6..86a04e1b8c1f 100644 --- a/docs/data/tree-view/rich-tree-view/expansion/expansion.md +++ b/docs/data/tree-view/rich-tree-view/expansion/expansion.md @@ -13,22 +13,22 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ ## Controlled expansion -Use the `expandedNodes` prop to control the expanded items. +Use the `expandedItems` 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 use the `onExpandedItemsChange` prop to listen to changes in the expanded items and update the prop accordingly. {{"demo": "ControlledExpansion.js"}} :::info -- The expansion is **controlled** when its parent manages it by providing a `expandedNodes` prop. -- The expansion is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultExpandedNodes` prop. +- The expansion is **controlled** when its parent manages it by providing a `expandedItems` prop. +- The expansion is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultExpandedItems` prop. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Track node expansion change +## Track item expansion change -Use the `onNodeExpansionToggle` prop if you want to react to a node expansion change: +Use the `onItemExpansionToggle` prop if you want to react to an item expansion change: -{{"demo": "TrackNodeExpansionToggle.js"}} +{{"demo": "TrackItemExpansionToggle.js"}} diff --git a/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.js b/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.js new file mode 100644 index 000000000000..c2a96bffdf47 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.js @@ -0,0 +1,54 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef'; + +const MUI_X_PRODUCTS = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { id: 'grid-community', label: '@mui/x-data-grid' }, + { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, + { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, + ], + }, + { + id: 'pickers', + label: 'Date and Time Pickers', + children: [ + { id: 'pickers-community', label: '@mui/x-date-pickers' }, + { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, + ], + }, + { + id: 'charts', + label: 'Charts', + children: [{ id: 'charts-community', label: '@mui/x-charts' }], + }, + { + id: 'tree-view', + label: 'Tree View', + children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }], + }, +]; + +export default function FocusedRichTreeView() { + const apiRef = useTreeViewApiRef(); + const handleButtonClick = (event) => { + apiRef.current?.focusItem(event, 'pickers'); + }; + + return ( + + + + + + + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.tsx b/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.tsx new file mode 100644 index 000000000000..04b1aad4d11c --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; +import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef'; + +const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { id: 'grid-community', label: '@mui/x-data-grid' }, + { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, + { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, + ], + }, + { + id: 'pickers', + label: 'Date and Time Pickers', + children: [ + { id: 'pickers-community', label: '@mui/x-date-pickers' }, + { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, + ], + }, + { + id: 'charts', + label: 'Charts', + children: [{ id: 'charts-community', label: '@mui/x-charts' }], + }, + { + id: 'tree-view', + label: 'Tree View', + children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }], + }, +]; + +export default function FocusedRichTreeView() { + const apiRef = useTreeViewApiRef(); + const handleButtonClick = (event: React.SyntheticEvent) => { + apiRef.current?.focusItem(event, 'pickers'); + }; + + return ( + + + + + + + + + ); +} diff --git a/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.tsx.preview b/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.tsx.preview new file mode 100644 index 000000000000..144d8e4e8dd5 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/focus/FocusedRichTreeView.tsx.preview @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/focus/focus.md b/docs/data/tree-view/rich-tree-view/focus/focus.md new file mode 100644 index 000000000000..4fa127cea557 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/focus/focus.md @@ -0,0 +1,36 @@ +--- +productId: x-tree-view +title: Rich Tree View - Focus +components: RichTreeView, TreeItem +packageName: '@mui/x-tree-view' +githubLabel: 'component: tree view' +waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ +--- + +# Rich Tree View - Focus + +

Learn how to focus Tree View items.

+ +## Focus a specific item + +You can use the the `apiRef.focusItem` method to focus a specific item. +This methods receives two parameters: `event` and `itemId`. + +:::success +To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows: + +```tsx +const apiRef = useTreeViewApiRef(); + +return ; +``` + +`apiRef` will be undefined during the first render and will then contain methods allowing you to imperatively interact with the Tree View. +::: + +:::info +This method only works with items that are currently visible. +Calling `apiRef.focusItem` on an item whose parent is collapsed will do nothing. +::: + +{{"demo": "FocusedRichTreeView.js"}} diff --git a/docs/data/tree-view/rich-tree-view/headless/LogExpandedNodes.js b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js similarity index 94% rename from docs/data/tree-view/rich-tree-view/headless/LogExpandedNodes.js rename to docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js index a59c50a63058..fbccfb57e3c2 100644 --- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedNodes.js +++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js @@ -14,7 +14,7 @@ import { } from '@mui/x-tree-view/internals'; const useTreeViewLogExpanded = ({ params, models }) => { - const expandedStr = JSON.stringify(models.expandedNodes.value); + const expandedStr = JSON.stringify(models.expandedItems.value); React.useEffect(() => { if (params.areLogsEnabled && params.logMessage) { @@ -59,7 +59,7 @@ function TreeView(inProps) { const renderNode = ({ children: itemChildren, ...itemProps }) => { return ( - + {itemChildren?.map(renderNode)} ); @@ -90,7 +90,7 @@ const ITEMS = [ }, ]; -export default function LogExpandedNodes() { +export default function LogExpandedItems() { const [logs, setLogs] = React.useState([]); return ( diff --git a/docs/data/tree-view/rich-tree-view/headless/LogExpandedNodes.tsx b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx similarity index 96% rename from docs/data/tree-view/rich-tree-view/headless/LogExpandedNodes.tsx rename to docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx index bb7aa2140f48..c8decec9b3ca 100644 --- a/docs/data/tree-view/rich-tree-view/headless/LogExpandedNodes.tsx +++ b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx @@ -45,7 +45,7 @@ const useTreeViewLogExpanded: TreeViewPlugin = ({ params, models, }) => { - const expandedStr = JSON.stringify(models.expandedNodes.value); + const expandedStr = JSON.stringify(models.expandedItems.value); React.useEffect(() => { if (params.areLogsEnabled && params.logMessage) { @@ -111,7 +111,7 @@ function TreeView( ...itemProps }: ReturnType[number]) => { return ( - + {itemChildren?.map(renderNode)} ); @@ -142,7 +142,7 @@ const ITEMS: TreeViewBaseItem[] = [ }, ]; -export default function LogExpandedNodes() { +export default function LogExpandedItems() { const [logs, setLogs] = React.useState([]); return ( diff --git a/docs/data/tree-view/rich-tree-view/headless/LogExpandedNodes.tsx.preview b/docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx.preview similarity index 100% rename from docs/data/tree-view/rich-tree-view/headless/LogExpandedNodes.tsx.preview rename to docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx.preview diff --git a/docs/data/tree-view/rich-tree-view/headless/headless.md b/docs/data/tree-view/rich-tree-view/headless/headless.md index c1248e4cffcf..6d920b03d2c5 100644 --- a/docs/data/tree-view/rich-tree-view/headless/headless.md +++ b/docs/data/tree-view/rich-tree-view/headless/headless.md @@ -61,7 +61,7 @@ useCustomPlugin.getDefaultizedParams = (params) => ({ ### Controllable models A model is a value that can either be controlled or initialized using a prop. -The Tree View contains several models like the `expandedNodes` model which contains the ids of the nodes currently expanded. +The Tree View contains several models like the `expandedItems` model which contains the ids of the items currently expanded. You can create your own models using the `models` property of your plugin: @@ -110,14 +110,14 @@ Your plugin can access the instance methods, the params and the models of any ot ```ts const useCustomPlugin = ({ models }) => { const handleSomeAction = () => { - // Log the id of the nodes currently expanded - console.log(models.expandedNodes.value); + // Log the id of the items currently expanded + console.log(models.expandedItems.value); - // Collapse all the nodes - models.expandedNodes.setValue([]); + // Collapse all the items + models.expandedItems.setValue([]); - // Check if a node is expanded - const isExpanded = instance.isNodeExpanded('some-node-id'); + // Check if an item is expanded + const isExpanded = instance.isNodeExpanded('some-item-id'); }; }; ``` @@ -206,8 +206,8 @@ const useCustomPlugin = ({ params }) => { You can use the `contextValue` property in the returned object to pass elements to the Tree Item: :::warning -The context is private for now and cannot be accessed outside of our own plugins. -You need to modify the `useTreeItem` hook to return the new value returned by your plugin. +The context is private for now and cannot be accessed outside the provided plugins. +You need to modify the `useTreeItemState` hook to return the new value returned by your plugin. ::: ```tsx @@ -219,25 +219,25 @@ const useCustomPlugin = ({ params }) => { }; }; -function useTreeItem(nodeId: string) { +function useTreeItemState(itemId: string) { const { customPlugin, // ...other elements returned by the context } = useTreeViewContext(); - // ...rest of the `useTreeItem` hook content + // ...rest of the `useTreeItemState` hook content return { customPlugin, - // ...other elements returned by `useTreeItem` + // ...other elements returned by `useTreeItemState` }; } function TreeItemContent() { const { customPlugin, - // ...other elements returned by `useTreeItem` - } = useTreeItem(props.nodeId); + // ...other elements returned by `useTreeItemState` + } = useTreeItemState(props.itemId); // Do something with customPlugin.enabled } @@ -313,4 +313,4 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{ Interact with the tree view to see the expanded items being logged: -{{"demo": "LogExpandedNodes.js"}} +{{"demo": "LogExpandedItems.js"}} diff --git a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js index 3af5afeaf5c7..1758169287e6 100644 --- a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js +++ b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js @@ -25,7 +25,7 @@ const MUI_X_PRODUCTS = [ export default function BasicRichTreeView() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx index 644205c6ffdc..12357940fd8b 100644 --- a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx +++ b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx @@ -25,7 +25,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ export default function BasicRichTreeView() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js index 92ba89af8ef8..01d3c61bd5f5 100644 --- a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js +++ b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js @@ -66,7 +66,7 @@ export default function DisabledItemsFocusable() { label="Allow focusing disabled items" /> - + - + !!item.disabled; export default function DisabledPropItem() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx index f1ab2b1335e3..5d5b0a2a9c62 100644 --- a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx +++ b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx @@ -52,7 +52,7 @@ const isItemDisabled = (item: MuiXProduct) => !!item.disabled; export default function DisabledPropItem() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemId.js b/docs/data/tree-view/rich-tree-view/items/GetItemId.js index c1db4c61e4b7..72a50eaeb7e6 100644 --- a/docs/data/tree-view/rich-tree-view/items/GetItemId.js +++ b/docs/data/tree-view/rich-tree-view/items/GetItemId.js @@ -27,7 +27,7 @@ const getItemId = (item) => item.internalId; export default function GetItemId() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx b/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx index 105405ea2ac2..deca6e972944 100644 --- a/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx +++ b/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx @@ -32,7 +32,7 @@ const getItemId = (item: MuiXProduct) => item.internalId; export default function GetItemId() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js index 1a6511a06a70..830a78258204 100644 --- a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js +++ b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js @@ -27,7 +27,7 @@ const getItemLabel = (item) => item.name; export default function GetItemLabel() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx index de5f01ef25bb..0d6815d0d677 100644 --- a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx +++ b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx @@ -32,7 +32,7 @@ const getItemLabel = (item: MuiXProduct) => item.name; export default function GetItemLabel() { return ( - + ); 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 04469b2a06de..e85d35328c69 100644 --- a/docs/data/tree-view/rich-tree-view/items/items.md +++ b/docs/data/tree-view/rich-tree-view/items/items.md @@ -95,12 +95,12 @@ It could be achieved by either defining the prop outside the component scope or ::: :::warning -Unlike the `SimpleTreeView` component, the `RichTreeView` component only supports string labels, you can't pass React nodes to it. +Unlike the `SimpleTreeView` component, the `RichTreeView` component only supports string labels, you cannot pass React nodes to it. ::: ## Disabled items -You can disable some of the items using the `isItemDisabled` prop on the `RichTreeView` component: +Use the `isItemDisabled` prop on the Rich Tree View to disable interaction and focus on a Tree Item: ```tsx function isItemDisabled(item) { @@ -116,29 +116,27 @@ function isItemDisabled(item) { Just like the `items` prop, the `isItemDisabled` function should keep the same JavaScript reference between two renders. Otherwise, the Tree View will re-generate its entire structure. -It could be achieved by either defining the prop outside the component scope or by memoizing using the `React.useCallback` hook if the function reuses something from the component scope. +This can be achieved by either defining the prop outside the component scope or by memoizing using the `React.useCallback` hook if the function reuses something from the component scope. ::: -### Interact with disabled items +### The disabledItemsFocusable prop -The behavior of disabled tree items depends on the `disabledItemsFocusable` prop. +Use the `disabledItemsFocusable` prop to control whether or not a disabled Tree Item can be focused. -If it is false: +When this prop is set to false: -- Arrow keys will not focus disabled items, and the next non-disabled item will be focused. -- Typing the first character of a disabled item's label will not focus the item. +- Navigating with keyboard arrow keys will not focus the disabled items, and the next non-disabled item will be focused instead. +- Typing the first character of a disabled item's label will not move the focus to it. - Mouse or keyboard interaction will not expand/collapse disabled items. - Mouse or keyboard interaction will not select disabled items. -- Shift + arrow keys will skip disabled items, and the next non-disabled item will be selected. +- Shift + arrow keys will skip disabled items, and the next non-disabled item will be selected instead. - Programmatic focus will not focus disabled items. -If it is true: +When it's set to true: -- Arrow keys will focus disabled items. -- Typing the first character of a disabled item's label will focus the item. +- Navigating with keyboard arrow keys will focus disabled items. +- Typing the first character of a disabled item's label will move focus to it. - Mouse or keyboard interaction will not expand/collapse disabled items. - Mouse or keyboard interaction will not select disabled items. -- Shift + arrow keys will not skip disabled items but, the disabled item will not be selected. +- Shift + arrow keys will not skip disabled items, but the disabled item will not be selected. - Programmatic focus will focus disabled items. - -{{"demo": "DisabledItemsFocusable.js", "defaultCodeOpen": false}} diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js index a8d9d0d100b2..537b04fc53cb 100644 --- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js +++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js @@ -33,28 +33,28 @@ const MUI_X_PRODUCTS = [ }, ]; -const getAllItemNodeIds = () => { +const getAllItemItemIds = () => { const ids = []; - const registerNodeId = (item) => { + const registerItemId = (item) => { ids.push(item.id); - item.children?.forEach(registerNodeId); + item.children?.forEach(registerItemId); }; - MUI_X_PRODUCTS.forEach(registerNodeId); + MUI_X_PRODUCTS.forEach(registerItemId); return ids; }; export default function ControlledSelection() { - const [selectedNodes, setSelectedNodes] = React.useState([]); + const [selectedItems, setSelectedItems] = React.useState([]); - const handleSelectedNodesChange = (event, ids) => { - setSelectedNodes(ids); + const handleSelectedItemsChange = (event, ids) => { + setSelectedItems(ids); }; const handleSelectClick = () => { - setSelectedNodes((oldSelected) => - oldSelected.length === 0 ? getAllItemNodeIds() : [], + setSelectedItems((oldSelected) => + oldSelected.length === 0 ? getAllItemItemIds() : [], ); }; @@ -62,14 +62,14 @@ export default function ControlledSelection() { - + diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx index d8de02d814df..3f2967a50d4a 100644 --- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx +++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx @@ -34,28 +34,28 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ }, ]; -const getAllItemNodeIds = () => { +const getAllItemItemIds = () => { const ids: TreeViewItemId[] = []; - const registerNodeId = (item: TreeViewBaseItem) => { + const registerItemId = (item: TreeViewBaseItem) => { ids.push(item.id); - item.children?.forEach(registerNodeId); + item.children?.forEach(registerItemId); }; - MUI_X_PRODUCTS.forEach(registerNodeId); + MUI_X_PRODUCTS.forEach(registerItemId); return ids; }; export default function ControlledSelection() { - const [selectedNodes, setSelectedNodes] = React.useState([]); + const [selectedItems, setSelectedItems] = React.useState([]); - const handleSelectedNodesChange = (event: React.SyntheticEvent, ids: string[]) => { - setSelectedNodes(ids); + const handleSelectedItemsChange = (event: React.SyntheticEvent, ids: string[]) => { + setSelectedItems(ids); }; const handleSelectClick = () => { - setSelectedNodes((oldSelected) => - oldSelected.length === 0 ? getAllItemNodeIds() : [], + setSelectedItems((oldSelected) => + oldSelected.length === 0 ? getAllItemItemIds() : [], ); }; @@ -63,14 +63,14 @@ export default function ControlledSelection() { - + diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview index edaf87ee644d..e1b7677fd754 100644 --- a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview +++ b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview @@ -1,13 +1,13 @@ - + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js index c403c5c78ca3..45f155a4b3e4 100644 --- a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js +++ b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { RichTreeView } from '@mui/x-tree-view'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; const MUI_X_PRODUCTS = [ { @@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [ export default function DisableSelection() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx index 78f8b569e6b6..7937123a72e3 100644 --- a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx +++ b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { RichTreeView, TreeViewBaseItem } from '@mui/x-tree-view'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ { @@ -34,7 +35,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ export default function DisableSelection() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js index 7d74d64e6879..ea21e6cb404b 100644 --- a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js +++ b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { RichTreeView } from '@mui/x-tree-view'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; const MUI_X_PRODUCTS = [ { @@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [ export default function MultiSelectTreeView() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx index 72ba5375d5bd..deea7256e615 100644 --- a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx +++ b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { RichTreeView, TreeViewBaseItem } from '@mui/x-tree-view'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ { @@ -34,7 +35,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ export default function MultiSelectTreeView() { return ( - + ); diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.js similarity index 71% rename from docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js rename to docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.js index 891709293c47..6e0bbc061cd2 100644 --- a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js +++ b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.js @@ -35,26 +35,26 @@ const MUI_X_PRODUCTS = [ }, ]; -export default function TrackNodeSelectionToggle() { - const [lastSelectedNode, setLastSelectedNode] = React.useState(null); +export default function TrackItemSelectionToggle() { + const [lastSelectedItem, setLastSelectedItem] = React.useState(null); - const handleNodeSelectionToggle = (event, nodeId, isSelected) => { + const handleItemSelectionToggle = (event, itemId, isSelected) => { if (isSelected) { - setLastSelectedNode(nodeId); + setLastSelectedItem(itemId); } }; return ( - {lastSelectedNode == null - ? 'No node selection recorded' - : `Last selected node: ${lastSelectedNode}`} + {lastSelectedItem == null + ? 'No item selection recorded' + : `Last selected item: ${lastSelectedItem}`} - + diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx similarity index 74% rename from docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx rename to docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx index 7f151f72afcc..bd1b41122a18 100644 --- a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx +++ b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx @@ -35,32 +35,32 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ }, ]; -export default function TrackNodeSelectionToggle() { - const [lastSelectedNode, setLastSelectedNode] = React.useState( +export default function TrackItemSelectionToggle() { + const [lastSelectedItem, setLastSelectedItem] = React.useState( null, ); - const handleNodeSelectionToggle = ( + const handleItemSelectionToggle = ( event: React.SyntheticEvent, - nodeId: string, + itemId: string, isSelected: boolean, ) => { if (isSelected) { - setLastSelectedNode(nodeId); + setLastSelectedItem(itemId); } }; return ( - {lastSelectedNode == null - ? 'No node selection recorded' - : `Last selected node: ${lastSelectedNode}`} + {lastSelectedItem == null + ? 'No item selection recorded' + : `Last selected item: ${lastSelectedItem}`} - + diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx.preview new file mode 100644 index 000000000000..2b55fdb43b56 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/selection/TrackItemSelectionToggle.tsx.preview @@ -0,0 +1,11 @@ + + {lastSelectedItem == null + ? 'No item selection recorded' + : `Last selected item: ${lastSelectedItem}`} + + + + \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview deleted file mode 100644 index 78685ef7036b..000000000000 --- a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - {lastSelectedNode == null - ? 'No node selection recorded' - : `Last selected node: ${lastSelectedNode}`} - - - - \ No newline at end of file diff --git a/docs/data/tree-view/rich-tree-view/selection/selection.md b/docs/data/tree-view/rich-tree-view/selection/selection.md index 472d654ea28b..90e60c40dcc4 100644 --- a/docs/data/tree-view/rich-tree-view/selection/selection.md +++ b/docs/data/tree-view/rich-tree-view/selection/selection.md @@ -25,22 +25,22 @@ 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. +Use the `selectedItems` 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. +You can use the `onSelectedItemsChange` prop to listen to changes in the selected items and update the prop accordingly. {{"demo": "ControlledSelection.js"}} :::info -- The selection is **controlled** when its parent manages it by providing a `selectedNodes` prop. -- The selection is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultSelectedNodes` prop. +- The selection is **controlled** when its parent manages it by providing a `selectedItems` prop. +- The selection is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultSelectedItems` prop. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Track node selection change +## Track item selection change -Use the `onNodeSelectionToggle` prop if you want to react to a node selection change: +Use the `onItemSelectionToggle` prop if you want to react to an item selection change: -{{"demo": "TrackNodeSelectionToggle.js"}} +{{"demo": "TrackItemSelectionToggle.js"}} diff --git a/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js b/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js index 50515ff9c98e..10913836a21d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js @@ -16,7 +16,7 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({ opacity: 0.3, }, }, - [`& .${treeItemClasses.group}`]: { + [`& .${treeItemClasses.groupTransition}`]: { marginLeft: 15, paddingLeft: 18, borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`, @@ -39,7 +39,7 @@ export default function BorderedTreeView() { return ( - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx index b1c02ce1725b..fd6a9e2a2929 100644 --- a/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx @@ -16,7 +16,7 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({ opacity: 0.3, }, }, - [`& .${treeItemClasses.group}`]: { + [`& .${treeItemClasses.groupTransition}`]: { marginLeft: 15, paddingLeft: 18, borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`, @@ -41,7 +41,7 @@ export default function BorderedTreeView() { return ( - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js index 25b7784062e0..8db5e31fc09d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js @@ -21,29 +21,33 @@ function TransitionComponent(props) { } const CustomTreeItem = React.forwardRef((props, ref) => ( - + )); export default function CustomAnimation() { return ( - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx index c3b5c34a1fac..786650ea38e0 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx @@ -22,7 +22,11 @@ function TransitionComponent(props: TransitionProps) { const CustomTreeItem = React.forwardRef( (props: TreeItemProps, ref: React.Ref) => ( - + ), ); @@ -30,22 +34,22 @@ export default function CustomAnimation() { return ( - - - - - - - - + + + + + + + + - + - - + + ); 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 bb582b7ff117..2076a1e87f93 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.js @@ -1,99 +1,77 @@ import * as React from 'react'; -import clsx from 'clsx'; import { styled } from '@mui/material/styles'; -import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Avatar from '@mui/material/Avatar'; import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem'; +import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2'; +import { + TreeItem2Content, + TreeItem2IconContainer, + TreeItem2GroupTransition, + TreeItem2Label, + TreeItem2Root, +} from '@mui/x-tree-view/TreeItem2'; +import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; +import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; -const CustomContentRoot = styled('div')(({ theme }) => ({ - '&': { padding: theme.spacing(0.5, 1) }, +const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ + padding: theme.spacing(0.5, 1), })); -const CustomContent = React.forwardRef(function CustomContent(props, ref) { - const { - className, - classes, - label, - nodeId, - icon: iconProp, - expansionIcon, - displayIcon, - } = props; +const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { + const { id, itemId, label, disabled, children, ...other } = props; const { - disabled, - expanded, - selected, - focused, - handleExpansion, - handleSelection, - preventSelection, - } = useTreeItemState(nodeId); - - const icon = iconProp || expansionIcon || displayIcon; - - const handleMouseDown = (event) => { - preventSelection(event); - }; - - const handleClick = (event) => { - handleExpansion(event); - handleSelection(event); - }; + getRootProps, + getContentProps, + getIconContainerProps, + getLabelProps, + getGroupTransitionProps, + status, + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); return ( - -
{icon}
- - ({ - background: theme.palette.primary.main, - width: 24, - height: 24, - fontSize: '0.8rem', - })} - > - {label[0]} - - - {label} - - - + + + + + + + + ({ + background: theme.palette.primary.main, + width: 24, + height: 24, + fontSize: '0.8rem', + })} + > + {label[0]} + + + + + {children && } + + ); }); -const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { - return ; -}); - export default function CustomContentTreeView() { return ( - - + + - - - - + + + + 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 9c4a435d6f00..a7e41eb533c3 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx @@ -1,110 +1,87 @@ import * as React from 'react'; -import clsx from 'clsx'; import { styled } from '@mui/material/styles'; -import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Avatar from '@mui/material/Avatar'; import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; import { - TreeItem, - useTreeItemState, - TreeItemProps, - TreeItemContentProps, -} from '@mui/x-tree-view/TreeItem'; + unstable_useTreeItem2 as useTreeItem2, + UseTreeItem2Parameters, +} from '@mui/x-tree-view/useTreeItem2'; +import { + TreeItem2Content, + TreeItem2IconContainer, + TreeItem2GroupTransition, + TreeItem2Label, + TreeItem2Root, +} from '@mui/x-tree-view/TreeItem2'; +import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; +import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; -const CustomContentRoot = styled('div')(({ theme }) => ({ - '&': { padding: theme.spacing(0.5, 1) }, +const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ + padding: theme.spacing(0.5, 1), })); -const CustomContent = React.forwardRef(function CustomContent( - props: TreeItemContentProps, - ref, +interface CustomTreeItemProps + extends Omit, + Omit, 'onFocus'> {} + +const CustomTreeItem = React.forwardRef(function CustomTreeItem( + props: CustomTreeItemProps, + ref: React.Ref, ) { - const { - className, - classes, - label, - nodeId, - icon: iconProp, - expansionIcon, - displayIcon, - } = props; + const { id, itemId, label, disabled, children, ...other } = props; const { - disabled, - expanded, - selected, - focused, - handleExpansion, - handleSelection, - preventSelection, - } = useTreeItemState(nodeId); - - const icon = iconProp || expansionIcon || displayIcon; - - const handleMouseDown = (event: React.MouseEvent) => { - preventSelection(event); - }; - - const handleClick = (event: React.MouseEvent) => { - handleExpansion(event); - handleSelection(event); - }; + getRootProps, + getContentProps, + getIconContainerProps, + getLabelProps, + getGroupTransitionProps, + status, + } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref }); return ( - } - > -
{icon}
- - ({ - background: theme.palette.primary.main, - width: 24, - height: 24, - fontSize: '0.8rem', - })} - > - {(label as string)[0]} - - - {label} - - - + + + + + + + + ({ + background: theme.palette.primary.main, + width: 24, + height: 24, + fontSize: '0.8rem', + })} + > + {(label as string)[0]} + + + + + {children && } + + ); }); -const CustomTreeItem = React.forwardRef(function CustomTreeItem( - props: TreeItemProps & { subtitle?: string }, - ref: React.Ref, -) { - return ; -}); - export default function CustomContentTreeView() { return ( - - + + - - - - + + + + diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview index 54f412d16317..8d935ef57ba7 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview +++ b/docs/data/tree-view/simple-tree-view/customization/CustomContentTreeView.tsx.preview @@ -1,15 +1,15 @@ - - + + - - - - + + + + \ No newline at end of file diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js index 844e3faea6f3..3bfdaf46af80 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.js @@ -32,7 +32,7 @@ export default function CustomIcons() { return ( - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx index 9d1e1fad2812..f8746f6dd376 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomIcons.tsx @@ -32,7 +32,7 @@ export default function CustomIcons() { return ( - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js index 982f01f4d858..f2426eb5cbf0 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.js @@ -32,22 +32,22 @@ export default function CustomStyling() { return ( - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx index 325ca55790f6..1f9aa0a895b6 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomStyling.tsx @@ -33,22 +33,22 @@ export default function CustomStyling() { return ( - - - - - - - - + + + + + + + + - + - - + + ); diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js b/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js index 8a307f4fedad..572f804db372 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js @@ -89,7 +89,7 @@ const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({ color: 'white', }, }, - [`& .${treeItemClasses.group}`]: { + [`& .${treeItemClasses.groupTransition}`]: { marginLeft: theme.spacing(3.5), [`& .${treeItemClasses.content}`]: { fontWeight: 500, @@ -115,6 +115,9 @@ const StyledTreeItem = React.forwardRef(function StyledTreeItem(props, ref) { return ( } {...other} - TransitionComponent={TransitionComponent} ref={ref} /> ); @@ -142,36 +144,36 @@ export default function CustomizedTreeView() { return ( - - - - - - + + + + + + - - + + - + - - + + - - + + ); } diff --git a/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx index f602a4eb7ff2..f28c321d880f 100644 --- a/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx @@ -36,7 +36,7 @@ declare module 'react' { } } -type StyledTreeItemProps = TreeItemProps & { +type StyledTreeItemProps = Omit & { labelIcon: React.ElementType; labelText: string; }; @@ -101,7 +101,7 @@ const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({ color: 'white', }, }, - [`& .${treeItemClasses.group}`]: { + [`& .${treeItemClasses.groupTransition}`]: { marginLeft: theme.spacing(3.5), [`& .${treeItemClasses.content}`]: { fontWeight: 500, @@ -130,6 +130,9 @@ const StyledTreeItem = React.forwardRef(function StyledTreeItem( return ( } {...other} - TransitionComponent={TransitionComponent} ref={ref} /> ); @@ -157,36 +159,36 @@ export default function CustomizedTreeView() { return ( - - - - - - + + + + + + - - + + - + - - + + - - + + ); } diff --git a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js index 1b2a00236efe..078d26889f44 100644 --- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import clsx from 'clsx'; import { styled, useTheme, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; @@ -13,85 +14,124 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import ArrowRightIcon from '@mui/icons-material/ArrowRight'; import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; +import { + TreeItem2Content, + TreeItem2IconContainer, + TreeItem2Root, + TreeItem2GroupTransition, +} from '@mui/x-tree-view/TreeItem2'; +import { unstable_useTreeItem2 as useTreeItem } from '@mui/x-tree-view/useTreeItem2'; +import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; +import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; -const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({ +const CustomTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({ color: theme.palette.text.secondary, - [`& .${treeItemClasses.content}`]: { - marginBottom: theme.spacing(0.3), - color: theme.palette.text.secondary, - borderRadius: theme.spacing(2), - paddingRight: theme.spacing(1), - fontWeight: theme.typography.fontWeightMedium, - '&.Mui-expanded': { - fontWeight: theme.typography.fontWeightRegular, - }, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': { - backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`, - color: 'var(--tree-view-color)', - }, - [`& .${treeItemClasses.label}`]: { - fontWeight: 'inherit', - color: 'inherit', - }, - [`& .${treeItemClasses.iconContainer}`]: { - marginRight: theme.spacing(1), - }, +})); + +const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ + marginBottom: theme.spacing(0.3), + color: theme.palette.text.secondary, + borderRadius: theme.spacing(2), + paddingRight: theme.spacing(1), + fontWeight: theme.typography.fontWeightMedium, + '&.expanded': { + fontWeight: theme.typography.fontWeightRegular, + }, + '&:hover': { + backgroundColor: theme.palette.action.hover, }, - [`& .${treeItemClasses.group}`]: { + '&.focused, &.selected, &.selected.focused': { + backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`, + color: 'var(--tree-view-color)', + }, +})); + +const CustomTreeItemIconContainer = styled(TreeItem2IconContainer)(({ theme }) => ({ + marginRight: theme.spacing(1), +})); + +const CustomTreeItemGroupTransition = styled(TreeItem2GroupTransition)( + ({ theme }) => ({ marginLeft: 0, - [`& .${treeItemClasses.content}`]: { + [`& .content`]: { paddingLeft: theme.spacing(2), }, - }, -})); + }), +); -const StyledTreeItem = React.forwardRef(function StyledTreeItem(props, ref) { +const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { const theme = useTheme(); const { + id, + itemId, + label, + disabled, + children, bgColor, color, labelIcon: LabelIcon, labelInfo, - labelText, colorForDarkMode, bgColorForDarkMode, ...other } = props; - const styleProps = { + const { + getRootProps, + getContentProps, + getIconContainerProps, + getLabelProps, + getGroupTransitionProps, + status, + } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref }); + + const style = { '--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode, '--tree-view-bg-color': theme.palette.mode !== 'dark' ? bgColor : bgColorForDarkMode, }; return ( - + + - - - {labelText} - - - {labelInfo} - - - } - style={styleProps} - {...other} - ref={ref} - /> + + + + + + + + {labelInfo} + + + + {children && ( + + )} + + ); }); @@ -103,8 +143,8 @@ export default function GmailTreeView() { return ( - - - - + + + - - - - - + + ); } diff --git a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx index cec04bc175b3..59274dac5839 100644 --- a/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import clsx from 'clsx'; import { styled, useTheme, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; @@ -13,7 +14,18 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import ArrowRightIcon from '@mui/icons-material/ArrowRight'; import { SvgIconProps } from '@mui/material/SvgIcon'; import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { TreeItem, TreeItemProps, treeItemClasses } from '@mui/x-tree-view/TreeItem'; +import { + TreeItem2Content, + TreeItem2IconContainer, + TreeItem2Root, + TreeItem2GroupTransition, +} from '@mui/x-tree-view/TreeItem2'; +import { + unstable_useTreeItem2 as useTreeItem, + UseTreeItem2Parameters, +} from '@mui/x-tree-view/useTreeItem2'; +import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider'; +import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon'; declare module 'react' { interface CSSProperties { @@ -22,96 +34,128 @@ declare module 'react' { } } -type StyledTreeItemProps = TreeItemProps & { +interface StyledTreeItemProps + extends Omit, + React.HTMLAttributes { bgColor?: string; bgColorForDarkMode?: string; color?: string; colorForDarkMode?: string; labelIcon: React.ElementType; labelInfo?: string; - labelText: string; -}; +} -const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({ +const CustomTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({ color: theme.palette.text.secondary, - [`& .${treeItemClasses.content}`]: { - marginBottom: theme.spacing(0.3), - color: theme.palette.text.secondary, - borderRadius: theme.spacing(2), - paddingRight: theme.spacing(1), - fontWeight: theme.typography.fontWeightMedium, - '&.Mui-expanded': { - fontWeight: theme.typography.fontWeightRegular, - }, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': { - backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`, - color: 'var(--tree-view-color)', - }, - [`& .${treeItemClasses.label}`]: { - fontWeight: 'inherit', - color: 'inherit', - }, - [`& .${treeItemClasses.iconContainer}`]: { - marginRight: theme.spacing(1), - }, +})); + +const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ + marginBottom: theme.spacing(0.3), + color: theme.palette.text.secondary, + borderRadius: theme.spacing(2), + paddingRight: theme.spacing(1), + fontWeight: theme.typography.fontWeightMedium, + '&.expanded': { + fontWeight: theme.typography.fontWeightRegular, }, - [`& .${treeItemClasses.group}`]: { + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + '&.focused, &.selected, &.selected.focused': { + backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`, + color: 'var(--tree-view-color)', + }, +})); + +const CustomTreeItemIconContainer = styled(TreeItem2IconContainer)(({ theme }) => ({ + marginRight: theme.spacing(1), +})); + +const CustomTreeItemGroupTransition = styled(TreeItem2GroupTransition)( + ({ theme }) => ({ marginLeft: 0, - [`& .${treeItemClasses.content}`]: { + [`& .content`]: { paddingLeft: theme.spacing(2), }, - }, -})) as unknown as typeof TreeItem; + }), +); -const StyledTreeItem = React.forwardRef(function StyledTreeItem( +const CustomTreeItem = React.forwardRef(function CustomTreeItem( props: StyledTreeItemProps, ref: React.Ref, ) { const theme = useTheme(); const { + id, + itemId, + label, + disabled, + children, bgColor, color, labelIcon: LabelIcon, labelInfo, - labelText, colorForDarkMode, bgColorForDarkMode, ...other } = props; - const styleProps = { + const { + getRootProps, + getContentProps, + getIconContainerProps, + getLabelProps, + getGroupTransitionProps, + status, + } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref }); + + const style = { '--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode, '--tree-view-bg-color': theme.palette.mode !== 'dark' ? bgColor : bgColorForDarkMode, }; return ( - + + - - - {labelText} - - - {labelInfo} - - - } - style={styleProps} - {...other} - ref={ref} - /> + + + + + + + + {labelInfo} + + + + {children && ( + + )} + + ); }); @@ -123,8 +167,8 @@ export default function GmailTreeView() { return ( - - - - + + + - - - - - + + ); } diff --git a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js index b435a9946a4b..f924050a7f06 100644 --- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js +++ b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.js @@ -1,87 +1,48 @@ import * as React from 'react'; -import clsx from 'clsx'; -import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem'; +import { useTreeItem2Utils } from '@mui/x-tree-view/hooks/useTreeItem2Utils'; -const CustomContent = React.forwardRef(function CustomContent(props, ref) { - const { - classes, - className, - label, - nodeId, - icon: iconProp, - expansionIcon, - displayIcon, - } = props; +import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; - const { - disabled, - expanded, - selected, - focused, - handleExpansion, - handleSelection, - preventSelection, - } = useTreeItemState(nodeId); +const CustomTreeItem = React.forwardRef(function MyTreeItem(props, ref) { + const { interactions } = useTreeItem2Utils({ + itemId: props.itemId, + children: props.children, + }); - const icon = iconProp || expansionIcon || displayIcon; - - const handleMouseDown = (event) => { - preventSelection(event); - }; - - const handleExpansionClick = (event) => { - handleExpansion(event); + const handleContentClick = (event) => { + event.defaultMuiPrevented = true; + interactions.handleSelection(event); }; - const handleSelectionClick = (event) => { - handleSelection(event); + const handleIconContainerClick = (event) => { + interactions.handleExpansion(event); }; return ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions -
- {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} -
- {icon} -
- - {label} - -
+ slotProps={{ + content: { onClick: handleContentClick }, + iconContainer: { onClick: handleIconContainerClick }, + }} + /> ); }); -const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) { - return ; -}); - export default function IconExpansionTreeView() { return ( - - + + - - - - + + + + diff --git a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx index 947a4a6b15c3..7fda369d214d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx @@ -1,102 +1,51 @@ import * as React from 'react'; -import clsx from 'clsx'; -import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { - TreeItem, - TreeItemProps, - useTreeItemState, - TreeItemContentProps, -} from '@mui/x-tree-view/TreeItem'; +import { useTreeItem2Utils } from '@mui/x-tree-view/hooks/useTreeItem2Utils'; +import { UseTreeItem2ContentSlotOwnProps } from '@mui/x-tree-view/useTreeItem2'; +import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2'; -const CustomContent = React.forwardRef(function CustomContent( - props: TreeItemContentProps, - ref, +const CustomTreeItem = React.forwardRef(function MyTreeItem( + props: TreeItem2Props, + ref: React.Ref, ) { - const { - classes, - className, - label, - nodeId, - icon: iconProp, - expansionIcon, - displayIcon, - } = props; - - const { - disabled, - expanded, - selected, - focused, - handleExpansion, - handleSelection, - preventSelection, - } = useTreeItemState(nodeId); - - const icon = iconProp || expansionIcon || displayIcon; - - const handleMouseDown = (event: React.MouseEvent) => { - preventSelection(event); - }; - - const handleExpansionClick = ( - event: React.MouseEvent, - ) => { - handleExpansion(event); + const { interactions } = useTreeItem2Utils({ + itemId: props.itemId, + children: props.children, + }); + + const handleContentClick: UseTreeItem2ContentSlotOwnProps['onClick'] = (event) => { + event.defaultMuiPrevented = true; + interactions.handleSelection(event); }; - const handleSelectionClick = ( - event: React.MouseEvent, - ) => { - handleSelection(event); + const handleIconContainerClick = (event: React.MouseEvent) => { + interactions.handleExpansion(event); }; return ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions -
} - > - {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} -
- {icon} -
- - {label} - -
+ ); }); -const CustomTreeItem = React.forwardRef(function CustomTreeItem( - props: TreeItemProps, - ref: React.Ref, -) { - return ; -}); - export default function IconExpansionTreeView() { return ( - - + + - - - - + + + + diff --git a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview index 9c02dd229e67..c72caa3b106d 100644 --- a/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview +++ b/docs/data/tree-view/simple-tree-view/customization/IconExpansionTreeView.tsx.preview @@ -1,11 +1,11 @@ - - + + - - - - + + + + \ No newline at end of file diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js new file mode 100644 index 000000000000..59c40e034d24 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.js @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; + +const CustomTreeItem = React.forwardRef((props, ref) => ( + +)); + +export default function LabelSlotProps() { + return ( + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx new file mode 100644 index 000000000000..3476b3b8e13c --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2'; + +const CustomTreeItem = React.forwardRef( + (props: TreeItem2Props, ref: React.Ref) => ( + + ), +); + +export default function LabelSlotProps() { + return ( + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview new file mode 100644 index 000000000000..1aaad97525e6 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlotProps.tsx.preview @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js new file mode 100644 index 000000000000..cec9de6b0aeb --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.js @@ -0,0 +1,66 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Tooltip from '@mui/material/Tooltip'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem2, TreeItem2Label } from '@mui/x-tree-view/TreeItem2'; + +function CustomLabel(props) { + const { tooltip, ...other } = props; + + return ( + + + + ); +} + +const CustomTreeItem = React.forwardRef((props, ref) => { + const { labelTooltip, ...other } = props; + + return ( + + ); +}); + +export default function LabelSlots() { + return ( + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx new file mode 100644 index 000000000000..59882c3023c1 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/customization/LabelSlots.tsx @@ -0,0 +1,81 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Tooltip from '@mui/material/Tooltip'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { + TreeItem2, + TreeItem2Label, + TreeItem2Props, +} from '@mui/x-tree-view/TreeItem2'; + +interface CustomLabelProps { + children: React.ReactNode; + tooltip?: string; +} + +function CustomLabel(props: CustomLabelProps) { + const { tooltip, ...other } = props; + + return ( + + + + ); +} + +interface CustomTreeItemProps extends TreeItem2Props { + labelTooltip?: string; +} + +const CustomTreeItem = React.forwardRef( + (props: CustomTreeItemProps, ref: React.Ref) => { + const { labelTooltip, ...other } = props; + + return ( + + ); + }, +); + +export default function LabelSlots() { + return ( + + + + + + + + + + + + + + ); +} 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 d1e3341d8056..819205b2d815 100644 --- a/docs/data/tree-view/simple-tree-view/customization/customization.md +++ b/docs/data/tree-view/simple-tree-view/customization/customization.md @@ -1,7 +1,7 @@ --- productId: x-tree-view title: Simple Tree View - Customization -components: SimpleTreeView, TreeItem +components: SimpleTreeView, TreeItem, TreeItem2 packageName: '@mui/x-tree-view' githubLabel: 'component: tree view' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ @@ -9,7 +9,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ # Simple Tree View - Customization -

Learn how to customize the simple version of the Tree View component.

+

Learn how to customize the Simple Tree View component.

## Basics @@ -22,7 +22,7 @@ The demo below shows how to add icons using both an existing icon library, such ### Custom toggle animations -Use the `TransitionComponent` prop on the `TreeItem` to pass a component that handles your animation. +Use the `groupTransition` slot on the `TreeItem` to pass a component that handles your animation. The demo below is animated using Material UI's [Collapse](/material-ui/transitions/#collapse) component together with the [react-spring](https://www.react-spring.dev/) library. @@ -34,23 +34,51 @@ Use `treeItemClasses` to target internal elements of the Tree Item component and {{"demo": "CustomStyling.js"}} -### Adding custom content +### Custom label -Use the `ContentComponent` prop and the `useTreeItemState` hook to replace the Tree Item content with an entirely custom component. +:::warning +This example is built using the new `TreeItem2` component +which adds several slots to modify the content of the Tree Item or change its behavior. + +You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). +::: + +Use the `label` slot to customize the Tree Item label or to replace it with a custom component. + +The `slotProps` prop allows you to pass props to the label component. +The demo below shows how to pass an `id` attribute to the Tree Item label: + +{{"demo": "LabelSlotProps.js", "defaultCodeOpen": false }} + +The `slots` prop allows you to replace the default label with your own component: +The demo below shows how to add a tooltip on the Tree Item label: + +{{"demo": "LabelSlots.js", "defaultCodeOpen": false}} + +### Headless API + +Use the `useTreeItem2` hook to create your own component. The demo below shows how to add an avatar and custom typography elements. -{{"demo": "CustomContentTreeView.js"}} +{{"demo": "CustomContentTreeView.js", "defaultCodeOpen": false}} ## Common examples ### Connection border -Target the `treeItemClasses.group` class to add connection borders between the Tree View items. +Target the `treeItemClasses.groupTransition` class to add connection borders between the Tree View items. {{"demo": "BorderedTreeView.js", "defaultCodeOpen": false}} ### Limit expansion to icon container +:::warning +This example is built using the new `TreeItem2` component +which adds several slots to modify the content of the Tree Item or change its behavior. + +You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). +::: + The demo below shows how to trigger the expansion interaction just by clicking on the icon container instead of the whole Tree Item surface. {{"demo": "IconExpansionTreeView.js", "defaultCodeOpen": false}} @@ -63,7 +91,17 @@ The demo below shows many of the previous customization examples brought togethe ### Gmail clone +:::warning +This example is built using the new `TreeItem2` component +which adds several slots to modify the content of the Tree Item or change its behavior. + +You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). +::: + 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/ControlledExpansion.js b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js index b9a5851e126d..a11d874a4659 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js +++ b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js @@ -5,14 +5,14 @@ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function ControlledExpansion() { - const [expandedNodes, setExpandedNodes] = React.useState([]); + const [expandedItems, setExpandedItems] = React.useState([]); - const handleExpandedNodesChange = (event, nodeIds) => { - setExpandedNodes(nodeIds); + const handleExpandedItemsChange = (event, itemIds) => { + setExpandedItems(itemIds); }; const handleExpandClick = () => { - setExpandedNodes((oldExpanded) => + setExpandedItems((oldExpanded) => oldExpanded.length === 0 ? [ 'grid', @@ -35,28 +35,28 @@ export default function ControlledExpansion() { - + - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx index e7493025fa3b..ec0f524d81cf 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx +++ b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx @@ -5,17 +5,17 @@ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function ControlledExpansion() { - const [expandedNodes, setExpandedNodes] = React.useState([]); + const [expandedItems, setExpandedItems] = React.useState([]); - const handleExpandedNodesChange = ( + const handleExpandedItemsChange = ( event: React.SyntheticEvent, - nodeIds: string[], + itemIds: string[], ) => { - setExpandedNodes(nodeIds); + setExpandedItems(itemIds); }; const handleExpandClick = () => { - setExpandedNodes((oldExpanded) => + setExpandedItems((oldExpanded) => oldExpanded.length === 0 ? [ 'grid', @@ -38,28 +38,28 @@ export default function ControlledExpansion() { - + - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js new file mode 100644 index 000000000000..f656970f2ebf --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.js @@ -0,0 +1,46 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +import Typography from '@mui/material/Typography'; + +export default function TrackItemExpansionToggle() { + const [action, setAction] = React.useState(null); + + const handleItemExpansionToggle = (event, itemId, isExpanded) => { + setAction({ itemId, isExpanded }); + }; + + return ( + + {action == null ? ( + No action recorded + ) : ( + + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId} + + )} + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx new file mode 100644 index 000000000000..6f257acad9b9 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/expansion/TrackItemExpansionToggle.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +import Typography from '@mui/material/Typography'; + +export default function TrackItemExpansionToggle() { + const [action, setAction] = React.useState<{ + itemId: string; + isExpanded: boolean; + } | null>(null); + + const handleItemExpansionToggle = ( + event: React.SyntheticEvent, + itemId: string, + isExpanded: boolean, + ) => { + setAction({ itemId, isExpanded }); + }; + + return ( + + {action == null ? ( + No action recorded + ) : ( + + Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId} + + )} + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js deleted file mode 100644 index 5836d5a55c00..000000000000 --- a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { TreeItem } from '@mui/x-tree-view/TreeItem'; -import Typography from '@mui/material/Typography'; - -export default function TrackNodeExpansionToggle() { - const [action, setAction] = React.useState(null); - - const handleNodeExpansionToggle = (event, nodeId, isExpanded) => { - setAction({ nodeId, isExpanded }); - }; - - return ( - - {action == null ? ( - No action recorded - ) : ( - - Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} - - )} - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx deleted file mode 100644 index 5c6d8485d40c..000000000000 --- a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { TreeItem } from '@mui/x-tree-view/TreeItem'; -import Typography from '@mui/material/Typography'; - -export default function TrackNodeExpansionToggle() { - const [action, setAction] = React.useState<{ - nodeId: string; - isExpanded: boolean; - } | null>(null); - - const handleNodeExpansionToggle = ( - event: React.SyntheticEvent, - nodeId: string, - isExpanded: boolean, - ) => { - setAction({ nodeId, isExpanded }); - }; - - return ( - - {action == null ? ( - No action recorded - ) : ( - - Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId} - - )} - - - - - - - - - - - - - - - - - - - - - ); -} 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 e41a5a8d9b38..296736f0d16a 100644 --- a/docs/data/tree-view/simple-tree-view/expansion/expansion.md +++ b/docs/data/tree-view/simple-tree-view/expansion/expansion.md @@ -9,26 +9,25 @@ 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. +Use the `expandedItems` prop to control the expanded items. +You can also use the `onExpandedItemsChange` prop to listen to changes in the expanded items and update the prop accordingly. {{"demo": "ControlledExpansion.js"}} :::info -- The expansion is **controlled** when its parent manages it by providing a `expandedNodes` prop. -- The expansion is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultExpandedNodes` prop. +- The expansion is **controlled** when its parent manages it by providing a `expandedItems` prop. +- The expansion is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultExpandedItems` prop. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Track node expansion change +## Track item expansion change -Use the `onNodeExpansionToggle` prop if you want to react to a node expansion change: +Use the `onItemExpansionToggle` prop to trigger an action upon an item being expanded. -{{"demo": "TrackNodeExpansionToggle.js"}} +{{"demo": "TrackItemExpansionToggle.js"}} diff --git a/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.js b/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.js new file mode 100644 index 000000000000..9e12cc3ce060 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.js @@ -0,0 +1,40 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef'; + +export default function FocusedSimpleTreeView() { + const apiRef = useTreeViewApiRef(); + const handleButtonClick = (event) => { + apiRef.current?.focusItem(event, 'pickers'); + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.tsx b/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.tsx new file mode 100644 index 000000000000..bc98ac6e25a9 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/focus/FocusedSimpleTreeView.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef'; + +export default function FocusedSimpleTreeView() { + const apiRef = useTreeViewApiRef(); + const handleButtonClick = (event: React.SyntheticEvent) => { + apiRef.current?.focusItem(event, 'pickers'); + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/focus/focus.md b/docs/data/tree-view/simple-tree-view/focus/focus.md new file mode 100644 index 000000000000..b408b02c9f35 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/focus/focus.md @@ -0,0 +1,36 @@ +--- +productId: x-tree-view +title: Simple Tree View - Focus +components: SimpleTreeView, TreeItem +packageName: '@mui/x-tree-view' +githubLabel: 'component: tree view' +waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ +--- + +# Simple Tree View - Focus + +

Learn how to focus Tree View items.

+ +## Focus a specific item + +You can use the the `apiRef.focusItem` method to focus a specific item. +This methods receives two parameters: `event` and `itemId`. + +:::success +To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows: + +```tsx +const apiRef = useTreeViewApiRef(); + +return {children}; +``` + +`apiRef` will be undefined during the first render and will then contain methods allowing you to imperatively interact with the Tree View. +::: + +:::info +This method only works with items that are currently visible. +Calling `apiRef.focusItem` on an item whose parent is collapsed will do nothing. +::: + +{{"demo": "FocusedSimpleTreeView.js"}} diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js index ae254b6877f5..5757cfb2964e 100644 --- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js +++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js @@ -5,16 +5,16 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function BasicSimpleTreeView() { return ( - + - - - - + + + + - - - + + + diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx index ae254b6877f5..5757cfb2964e 100644 --- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx @@ -5,16 +5,16 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function BasicSimpleTreeView() { return ( - + - - - - + + + + - - - + + + diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview index 4f449dc9b561..3641f9443f57 100644 --- a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview +++ b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx.preview @@ -1,11 +1,11 @@ - - - - + + + + - - - + + + \ No newline at end of file diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js index 8c35d4ebaadf..773e68d490d0 100644 --- a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js +++ b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js @@ -25,26 +25,26 @@ export default function DisabledItemsFocusable() { label="Allow focusing disabled items" /> - + - - - - + + + + - - - + + + - - + + - - - + + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx index 1434931f4086..2cab7252b0a9 100644 --- a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx +++ b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx @@ -25,26 +25,26 @@ export default function DisabledItemsFocusable() { label="Allow focusing disabled items" /> - + - - - - + + + + - - - + + + - - + + - - - + + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js index 19dda696cb4f..14a73027e0ad 100644 --- a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js +++ b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.js @@ -7,24 +7,24 @@ export default function DisabledJSXItem() { return ( - - - - + + + + - - - + + + - - + + - - - + + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx index 19dda696cb4f..14a73027e0ad 100644 --- a/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx +++ b/docs/data/tree-view/simple-tree-view/items/DisabledJSXItem.tsx @@ -7,24 +7,24 @@ export default function DisabledJSXItem() { return ( - - - - + + + + - - - + + + - - + + - - - + + + - - + + 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 b30d217b9b19..9105dc5588cc 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 `itemId`. +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/ControlledSelection.js b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js index 935118837b17..12f8708449c3 100644 --- a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js +++ b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js @@ -5,14 +5,14 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; import Button from '@mui/material/Button'; export default function ControlledSelection() { - const [selectedNodes, setSelectedNodes] = React.useState([]); + const [selectedItems, setSelectedItems] = React.useState([]); - const handleSelectedNodesChange = (event, ids) => { - setSelectedNodes(ids); + const handleSelectedItemsChange = (event, ids) => { + setSelectedItems(ids); }; const handleSelectClick = () => { - setSelectedNodes((oldSelected) => + setSelectedItems((oldSelected) => oldSelected.length === 0 ? [ 'grid', @@ -35,29 +35,29 @@ export default function ControlledSelection() { - + - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx index 26516e7546c4..b638e19eecee 100644 --- a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx +++ b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx @@ -5,14 +5,14 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; import Button from '@mui/material/Button'; export default function ControlledSelection() { - const [selectedNodes, setSelectedNodes] = React.useState([]); + const [selectedItems, setSelectedItems] = React.useState([]); - const handleSelectedNodesChange = (event: React.SyntheticEvent, ids: string[]) => { - setSelectedNodes(ids); + const handleSelectedItemsChange = (event: React.SyntheticEvent, ids: string[]) => { + setSelectedItems(ids); }; const handleSelectClick = () => { - setSelectedNodes((oldSelected) => + setSelectedItems((oldSelected) => oldSelected.length === 0 ? [ 'grid', @@ -35,29 +35,29 @@ export default function ControlledSelection() { - + - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js index 6f461015bc97..9db0d16ef7e6 100644 --- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js +++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js @@ -5,22 +5,22 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function DisableSelection() { return ( - + - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx index 6f461015bc97..9db0d16ef7e6 100644 --- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx +++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx @@ -5,22 +5,22 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function DisableSelection() { return ( - + - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js index 1ac08c85b55f..eba9bb8cd17f 100644 --- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js +++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js @@ -5,22 +5,22 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function MultiSelectTreeView() { return ( - + - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx index 1ac08c85b55f..eba9bb8cd17f 100644 --- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx +++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx @@ -5,22 +5,22 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem'; export default function MultiSelectTreeView() { return ( - + - - - - + + + + - - - + + + - - + + - - + + diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js new file mode 100644 index 000000000000..4bc39db3cf23 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.js @@ -0,0 +1,45 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +import Typography from '@mui/material/Typography'; + +export default function TrackItemSelectionToggle() { + const [lastSelectedItem, setLastSelectedItem] = React.useState(null); + + const handleItemSelectionToggle = (event, itemId, isSelected) => { + if (isSelected) { + setLastSelectedItem(itemId); + } + }; + + return ( + + + {lastSelectedItem == null + ? 'No item selection recorded' + : `Last selected item: ${lastSelectedItem}`} + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx new file mode 100644 index 000000000000..ebd584ed1b69 --- /dev/null +++ b/docs/data/tree-view/simple-tree-view/selection/TrackItemSelectionToggle.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; +import Typography from '@mui/material/Typography'; + +export default function TrackItemSelectionToggle() { + const [lastSelectedItem, setLastSelectedItem] = React.useState( + null, + ); + + const handleItemSelectionToggle = ( + event: React.SyntheticEvent, + itemId: string, + isSelected: boolean, + ) => { + if (isSelected) { + setLastSelectedItem(itemId); + } + }; + + return ( + + + {lastSelectedItem == null + ? 'No item selection recorded' + : `Last selected item: ${lastSelectedItem}`} + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js deleted file mode 100644 index 7e77949a5248..000000000000 --- a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { TreeItem } from '@mui/x-tree-view/TreeItem'; -import Typography from '@mui/material/Typography'; - -export default function TrackNodeSelectionToggle() { - const [lastSelectedNode, setLastSelectedNode] = React.useState(null); - - const handleNodeSelectionToggle = (event, nodeId, isSelected) => { - if (isSelected) { - setLastSelectedNode(nodeId); - } - }; - - return ( - - - {lastSelectedNode == null - ? 'No node selection recorded' - : `Last selected node: ${lastSelectedNode}`} - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx deleted file mode 100644 index db772b2839cc..000000000000 --- a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -import { TreeItem } from '@mui/x-tree-view/TreeItem'; -import Typography from '@mui/material/Typography'; - -export default function TrackNodeSelectionToggle() { - const [lastSelectedNode, setLastSelectedNode] = React.useState( - null, - ); - - const handleNodeSelectionToggle = ( - event: React.SyntheticEvent, - nodeId: string, - isSelected: boolean, - ) => { - if (isSelected) { - setLastSelectedNode(nodeId); - } - }; - - return ( - - - {lastSelectedNode == null - ? 'No node selection recorded' - : `Last selected node: ${lastSelectedNode}`} - - - - - - - - - - - - - - - - - - - - - - ); -} 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 11f758b2629a..da1aabecfa40 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,22 +25,21 @@ 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 `selectedItems` prop to control selected Tree View items. +You can also use the `onSelectedItemsChange` prop to listen to changes in the selected items and update the prop accordingly. {{"demo": "ControlledSelection.js"}} :::info -- The selection is **controlled** when its parent manages it by providing a `selectedNodes` prop. -- The selection is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultSelectedNodes` prop. +- The selection is **controlled** when its parent manages it by providing a `selectedItems` prop. +- The selection is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultSelectedItems` prop. Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -## Track node selection change +## Track item selection change -Use the `onNodeSelectionToggle` prop if you want to react to a node selection change: +Use the `onItemSelectionToggle` prop if you want to react to an item selection change: -{{"demo": "TrackNodeSelectionToggle.js"}} +{{"demo": "TrackItemSelectionToggle.js"}} diff --git a/docs/data/whats-new/WhatsNewLayoutNoSnap.js b/docs/data/whats-new/WhatsNewLayoutNoSnap.js deleted file mode 100644 index 58d0f9b2c82e..000000000000 --- 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 3e293bb68865..000000000000 --- 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 b701ffab9b3b..000000000000 --- 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 50f506e6dc22..456426475217 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 69% rename from docs/next.config.js rename to docs/next.config.mjs index a8b59b0b4f73..c8e56e9d4092 100644 --- a/docs/next.config.js +++ b/docs/next.config.mjs @@ -1,28 +1,58 @@ // @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, + LANGUAGES_IGNORE_PAGES, + LANGUAGES_IN_PROGRESS, +} 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'); + +let localSettings = {}; +try { + localSettings = require('./next.config.local.js'); +} catch (_) {} + +export default withDocsInfra({ + experimental: { + workerThreads: true, + cpus: 3, + }, // 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 +86,12 @@ module.exports = withDocsInfra({ ...config.resolve, alias: { ...config.resolve.alias, - docs: path.resolve(__dirname, '../node_modules/@mui/monorepo/docs'), - docsx: path.resolve(__dirname, '../docs'), + '@mui/docs': path.resolve( + currentDirectory, + '../node_modules/@mui/monorepo/packages/mui-docs/src', + ), + docs: path.resolve(currentDirectory, '../node_modules/@mui/monorepo/docs'), + docsx: path.resolve(currentDirectory, '../docs'), }, }, module: { @@ -68,12 +102,15 @@ module.exports = withDocsInfra({ test: /\.md$/, oneOf: [ { - resourceQuery: /@mui\/markdown/, + resourceQuery: /muiMarkdown/, use: [ options.defaultLoaders.babel, { - loader: require.resolve('@mui/monorepo/packages/markdown/loader'), + loader: require.resolve('@mui/internal-markdown/loader'), options: { + workspaceRoot, + ignoreLanguagePages: LANGUAGES_IGNORE_PAGES, + languagesInProgress: LANGUAGES_IN_PROGRESS, env: { SOURCE_CODE_REPO: options.config.env.SOURCE_CODE_REPO, LIB_VERSION: options.config.env.LIB_VERSION, @@ -176,4 +213,5 @@ module.exports = withDocsInfra({ }, ], }), + ...localSettings, }); diff --git a/docs/package.json b/docs/package.json index 6568e6136eeb..3f427728648f 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", @@ -19,28 +19,28 @@ "populate:demos": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" scripts/populatePickersDemos" }, "dependencies": { - "@babel/core": "^7.23.9", - "@babel/plugin-transform-object-assign": "^7.23.3", - "@babel/runtime-corejs2": "^7.23.9", + "@babel/core": "^7.24.0", + "@babel/runtime-corejs2": "^7.24.0", "@docsearch/react": "^3.5.2", "@emotion/cache": "^11.11.0", - "@emotion/react": "^11.11.3", + "@emotion/react": "^11.11.4", "@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.14", + "@mui/internal-markdown": "^1.0.0", + "@mui/joy": "^5.0.0-beta.32", + "@mui/lab": "^5.0.0-alpha.169", + "@mui/material": "^5.15.14", + "@mui/styles": "^5.15.14", + "@mui/utils": "^5.15.14", "@react-spring/web": "^9.7.3", "@trendmicro/react-interpolate": "^0.5.5", "@types/lodash": "^4.14.202", "@types/moment-hijri": "^2.1.4", - "@types/react-dom": "^18.2.18", + "@types/react-dom": "^18.2.19", "@types/react-router-dom": "^5.3.3", "ast-types": "^0.14.2", - "autoprefixer": "^10.4.17", + "autoprefixer": "^10.4.18", "babel-plugin-module-resolver": "^5.0.0", "babel-plugin-optimize-clsx": "^2.6.2", "babel-plugin-preval": "^5.1.0", @@ -52,38 +52,38 @@ "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", - "express": "^4.18.2", + "express": "^4.18.3", "fg-loadcss": "^3.1.0", "fs-extra": "^11.2.0", "lodash": "^4.17.21", "luxon": "^3.4.4", "lz-string": "^1.5.0", - "markdown-to-jsx": "^7.4.0", + "markdown-to-jsx": "^7.4.1", "marked": "^5.1.2", "moment": "^2.30.1", "moment-hijri": "^2.1.2", - "moment-timezone": "^0.5.44", - "next": "^14.1.0", + "moment-timezone": "^0.5.45", + "next": "^14.1.1", "nprogress": "^0.2.0", - "postcss": "^8.4.33", + "postcss": "^8.4.35", "prismjs": "^1.29.0", "prop-types": "^15.8.1", "raw-loader": "^1.0.0", "react": "^18.2.0", "react-docgen": "^5.4.3", "react-dom": "^18.2.0", - "react-hook-form": "^7.49.3", + "react-hook-form": "^7.51.0", "react-is": "^18.2.0", - "react-router": "^6.21.3", - "react-router-dom": "^6.21.3", + "react-router": "^6.22.3", + "react-router-dom": "^6.22.3", "react-runner": "^1.0.3", "react-simple-code-editor": "^0.13.1", - "recast": "^0.23.4", + "recast": "^0.23.5", "rimraf": "^5.0.5", "styled-components": "^6.1.8", "stylis-plugin-rtl": "^2.1.1", @@ -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.4", + "@mui/internal-scripts": "^1.0.1", "@types/doctrine": "^0.0.9", "@types/stylis": "^4.2.5", + "@types/webpack-bundle-analyzer": "^4.7.0", "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 56aaa444f278..06e3770e405c 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -13,13 +13,14 @@ import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics'; import { ThemeProvider } from 'docs/src/modules/components/ThemeContext'; import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant'; import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy'; -import { UserLanguageProvider } from 'docs/src/modules/utils/i18n'; import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider'; 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'; +import { DocsProvider } from '@mui/docs/DocsProvider'; +import config from '../config'; // Remove the license warning from demonstration purposes LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE); @@ -29,7 +30,7 @@ function getMuiPackageVersion(packageName, commitRef) { // #default-branch-switch // Use the "latest" npm tag for the master git branch // Use the "next" npm tag for the next git branch - return 'next'; + return 'latest'; } const shortSha = commitRef.slice(0, 8); return `https://pkg.csb.dev/mui/mui-x/commit/${shortSha}/@mui/${packageName}`; @@ -214,7 +215,7 @@ function AppWrapper(props) { text: `v${process.env.LIB_VERSION}`, current: true, }, - { text: 'v6', href: `https://mui.com${languagePrefix}/x/introduction/` }, + { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/introduction/` }, { text: 'v5', href: `https://v5.mui.com${languagePrefix}/x/introduction/` }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` }, ], @@ -229,7 +230,7 @@ function AppWrapper(props) { text: `v${process.env.DATA_GRID_VERSION}`, current: true, }, - { text: 'v6', href: `https://mui.com${languagePrefix}/x/react-data-grid/` }, + { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/react-data-grid/` }, { text: 'v5', href: `https://v5.mui.com${languagePrefix}/x/react-data-grid/` }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/components/data-grid/` }, ], @@ -245,7 +246,7 @@ function AppWrapper(props) { }, { text: 'v6', - href: `https://mui.com${languagePrefix}/x/react-date-pickers/`, + href: `https://v6.mui.com${languagePrefix}/x/react-date-pickers/`, }, { text: 'v5', @@ -262,7 +263,7 @@ function AppWrapper(props) { text: `v${process.env.CHARTS_VERSION}`, current: true, }, - { text: 'v6', href: `https://mui.com${languagePrefix}/x/react-charts/` }, + { text: 'v6', href: `https://v6.mui.com${languagePrefix}/x/react-charts/` }, ], }; } else if (productId === 'x-tree-view') { @@ -276,7 +277,7 @@ function AppWrapper(props) { }, { text: 'v6', - href: `https://mui.com${languagePrefix}/x/react-tree-view/getting-started`, + href: `https://v6.mui.com${languagePrefix}/x/react-tree-view/getting-started`, }, ], }; @@ -305,7 +306,7 @@ function AppWrapper(props) { - + @@ -318,7 +319,7 @@ function AppWrapper(props) { - + ); } diff --git a/docs/pages/x/api/charts/area-plot.json b/docs/pages/x/api/charts/area-plot.json index 30c6fa3f2ce3..e70a4110d61a 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 c95a8d55fe68..f5440ca898e9 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -1,15 +1,23 @@ { "props": { + "series": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "required": true + }, "axisHighlight": { "type": { "name": "shape", "description": "{ x?: 'band'
| 'line'
| 'none', y?: 'band'
| 'line'
| 'none' }" + }, + "seeMoreLink": { + "url": "https://mui.com/x/react-charts/tooltip/#highlights", + "text": "highlight docs" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -19,11 +27,18 @@ }, "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, - "height": { "type": { "name": "number" }, "default": "undefined" }, + "grid": { + "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" } + }, + "height": { "type": { "name": "number" } }, + "layout": { + "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, + "default": "'vertical'" + }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, @@ -34,10 +49,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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, @@ -48,24 +77,31 @@ "default": "{}", "additionalInfo": { "slotsApi": true } }, + "tooltip": { + "type": { + "name": "shape", + "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'
| 'item'
| 'none' }" + }, + "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" } + }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, - "width": { "type": { "name": "number" }, "default": "undefined" }, + "width": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, @@ -75,15 +111,60 @@ "import { BarChart } from '@mui/x-charts';" ], "slots": [ - { "name": "axisLine", "description": "", "class": null }, - { "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": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "axisLine", + "description": "Custom component for the axis main line.", + "default": "'line'", + "class": null + }, + { + "name": "axisTick", + "description": "Custom component for the axis tick.", + "default": "'line'", + "class": null + }, + { + "name": "axisTickLabel", + "description": "Custom component for tick label.", + "default": "ChartsText", + "class": null + }, + { + "name": "axisLabel", + "description": "Custom component for axis label.", + "default": "ChartsText", + "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": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiBarChart", diff --git a/docs/pages/x/api/charts/bar-element.json b/docs/pages/x/api/charts/bar-element.json index 31b55695c62d..f9b2bb5c2d72 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 bebcdf0a429d..a5f557a11a20 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 8319bfa4bb11..74e710cbacf8 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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 697f66b2f4ee..50ca8a9ef894 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" } diff --git a/docs/pages/x/api/charts/charts-grid.js b/docs/pages/x/api/charts/charts-grid.js new file mode 100644 index 000000000000..ddec5817dd04 --- /dev/null +++ b/docs/pages/x/api/charts/charts-grid.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-grid.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts/charts-grid', + false, + /\.\/charts-grid.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/charts-grid.json b/docs/pages/x/api/charts/charts-grid.json new file mode 100644 index 000000000000..060e64195b71 --- /dev/null +++ b/docs/pages/x/api/charts/charts-grid.json @@ -0,0 +1,43 @@ +{ + "props": { + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "horizontal": { "type": { "name": "bool" } }, + "vertical": { "type": { "name": "bool" } } + }, + "name": "ChartsGrid", + "imports": [ + "import { ChartsGrid } from '@mui/x-charts/ChartsGrid';", + "import { ChartsGrid } from '@mui/x-charts';" + ], + "classes": [ + { + "key": "horizontalLine", + "className": "MuiChartsGrid-horizontalLine", + "description": "Styles applied to x-axes.", + "isGlobal": false + }, + { + "key": "line", + "className": "MuiChartsGrid-line", + "description": "Styles applied to every line element.", + "isGlobal": false + }, + { + "key": "root", + "className": "MuiChartsGrid-root", + "description": "Styles applied to the root element.", + "isGlobal": false + }, + { + "key": "verticalLine", + "className": "MuiChartsGrid-verticalLine", + "description": "Styles applied to y-axes.", + "isGlobal": false + } + ], + "muiName": "MuiChartsGrid", + "filename": "/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/x/api/charts/charts-legend.json b/docs/pages/x/api/charts/charts-legend.json index b3c18b42ad59..2942b9292159 100644 --- a/docs/pages/x/api/charts/charts-legend.json +++ b/docs/pages/x/api/charts/charts-legend.json @@ -3,6 +3,12 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "direction": { "type": { "name": "enum", "description": "'column'
| 'row'" } }, "hidden": { "type": { "name": "bool" }, "default": "false" }, + "position": { + "type": { + "name": "shape", + "description": "{ horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }" + } + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, @@ -15,7 +21,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 000000000000..261a76d5960c --- /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 000000000000..92638d4ee5d0 --- /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 5a3d16376943..424ca89ad2ca 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-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json index ec4df95eee22..52b6a9bd0056 100644 --- a/docs/pages/x/api/charts/charts-tooltip.json +++ b/docs/pages/x/api/charts/charts-tooltip.json @@ -31,9 +31,24 @@ "import { ChartsTooltip } from '@mui/x-charts';" ], "slots": [ - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [ { diff --git a/docs/pages/x/api/charts/charts-voronoi-handler.json b/docs/pages/x/api/charts/charts-voronoi-handler.json index 72ada4aeea80..dec738632690 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" } } + }, "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 0720c413a2ee..b97bee2e777d 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 000000000000..e29bddc9b574 --- /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 000000000000..8d4426a4f9d3 --- /dev/null +++ b/docs/pages/x/api/charts/default-charts-legend.json @@ -0,0 +1,63 @@ +{ + "props": { + "classes": { + "type": { "name": "object" }, + "required": true, + "additionalInfo": { "cssApi": true } + }, + "direction": { + "type": { "name": "enum", "description": "'column'
| 'row'" }, + "required": true + }, + "position": { + "type": { + "name": "shape", + "description": "{ horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }" + }, + "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/gauge-container.js b/docs/pages/x/api/charts/gauge-container.js new file mode 100644 index 000000000000..7b2fc51b7afc --- /dev/null +++ b/docs/pages/x/api/charts/gauge-container.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 './gauge-container.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts/gauge-container', + false, + /\.\/gauge-container.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/gauge-container.json b/docs/pages/x/api/charts/gauge-container.json new file mode 100644 index 000000000000..3d064b0e5535 --- /dev/null +++ b/docs/pages/x/api/charts/gauge-container.json @@ -0,0 +1,44 @@ +{ + "props": { + "cornerRadius": { + "type": { "name": "union", "description": "number
| string" }, + "default": "0" + }, + "cx": { "type": { "name": "union", "description": "number
| string" } }, + "cy": { "type": { "name": "union", "description": "number
| string" } }, + "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, + "endAngle": { "type": { "name": "number" }, "default": "360" }, + "height": { "type": { "name": "number" } }, + "innerRadius": { + "type": { "name": "union", "description": "number
| string" }, + "default": "'80%'" + }, + "margin": { + "type": { + "name": "shape", + "description": "{ bottom?: number, left?: number, right?: number, top?: number }" + }, + "default": "object Depends on the charts type." + }, + "outerRadius": { + "type": { "name": "union", "description": "number
| string" }, + "default": "'100%'" + }, + "startAngle": { "type": { "name": "number" }, "default": "0" }, + "value": { "type": { "name": "number" } }, + "valueMax": { "type": { "name": "number" }, "default": "100" }, + "valueMin": { "type": { "name": "number" }, "default": "0" }, + "width": { "type": { "name": "number" } } + }, + "name": "GaugeContainer", + "imports": [ + "import { GaugeContainer } from '@mui/x-charts/Gauge';", + "import { GaugeContainer } from '@mui/x-charts';" + ], + "classes": [], + "muiName": "MuiGaugeContainer", + "filename": "/packages/x-charts/src/Gauge/GaugeContainer.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/x/api/charts/gauge.js b/docs/pages/x/api/charts/gauge.js new file mode 100644 index 000000000000..4b4dfa202507 --- /dev/null +++ b/docs/pages/x/api/charts/gauge.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 './gauge.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts/gauge', + false, + /\.\/gauge.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/gauge.json b/docs/pages/x/api/charts/gauge.json new file mode 100644 index 000000000000..a17d90adb673 --- /dev/null +++ b/docs/pages/x/api/charts/gauge.json @@ -0,0 +1,69 @@ +{ + "props": { + "cornerRadius": { + "type": { "name": "union", "description": "number
| string" }, + "default": "0" + }, + "cx": { "type": { "name": "union", "description": "number
| string" } }, + "cy": { "type": { "name": "union", "description": "number
| string" } }, + "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, + "endAngle": { "type": { "name": "number" }, "default": "360" }, + "height": { "type": { "name": "number" } }, + "innerRadius": { + "type": { "name": "union", "description": "number
| string" }, + "default": "'80%'" + }, + "margin": { + "type": { + "name": "shape", + "description": "{ bottom?: number, left?: number, right?: number, top?: number }" + }, + "default": "object Depends on the charts type." + }, + "outerRadius": { + "type": { "name": "union", "description": "number
| string" }, + "default": "'100%'" + }, + "startAngle": { "type": { "name": "number" }, "default": "0" }, + "value": { "type": { "name": "number" } }, + "valueMax": { "type": { "name": "number" }, "default": "100" }, + "valueMin": { "type": { "name": "number" }, "default": "0" }, + "width": { "type": { "name": "number" } } + }, + "name": "Gauge", + "imports": [ + "import { Gauge } from '@mui/x-charts/Gauge';", + "import { Gauge } from '@mui/x-charts';" + ], + "classes": [ + { + "key": "referenceArc", + "className": "MuiGauge-referenceArc", + "description": "Styles applied to the arc diplaying the range of available values.", + "isGlobal": false + }, + { + "key": "root", + "className": "MuiGauge-root", + "description": "Styles applied to the root element.", + "isGlobal": false + }, + { + "key": "valueArc", + "className": "MuiGauge-valueArc", + "description": "Styles applied to the arc diplaying the value.", + "isGlobal": false + }, + { + "key": "valueText", + "className": "MuiGauge-valueText", + "description": "Styles applied to the value text.", + "isGlobal": false + } + ], + "muiName": "MuiGauge", + "filename": "/packages/x-charts/src/Gauge/Gauge.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 1ae374f7c5e7..dd15be4e5d23 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -1,16 +1,24 @@ { "props": { + "series": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "required": true + }, "axisHighlight": { "type": { "name": "shape", "description": "{ x?: 'band'
| 'line'
| 'none', y?: 'band'
| 'line'
| 'none' }" }, - "default": "{ x: 'line' }" + "default": "{ x: 'line' }", + "seeMoreLink": { + "url": "https://mui.com/x/react-charts/tooltip/#highlights", + "text": "highlight docs" + } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -21,11 +29,14 @@ "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, "disableLineItemHighlight": { "type": { "name": "bool" } }, - "height": { "type": { "name": "number" }, "default": "undefined" }, + "grid": { + "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" } + }, + "height": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, @@ -36,10 +47,20 @@ }, "default": "object Depends on the charts type." }, + "onAreaClick": { "type": { "name": "func" } }, + "onAxisClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(event: MouseEvent, data: null | AxisData) => void", + "describedArgs": ["event", "data"] + } + }, + "onLineClick": { "type": { "name": "func" } }, + "onMarkClick": { "type": { "name": "func" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, @@ -50,24 +71,32 @@ "default": "{}", "additionalInfo": { "slotsApi": true } }, + "tooltip": { + "type": { + "name": "shape", + "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'
| 'item'
| 'none' }" + }, + "default": "{ trigger: 'item' }", + "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" } + }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, - "width": { "type": { "name": "number" }, "default": "undefined" }, + "width": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, @@ -77,10 +106,30 @@ "import { LineChart } from '@mui/x-charts';" ], "slots": [ - { "name": "axisLine", "description": "", "class": null }, - { "name": "axisTick", "description": "", "class": null }, - { "name": "axisTickLabel", "description": "", "class": null }, - { "name": "axisLabel", "description": "", "class": null }, + { + "name": "axisLine", + "description": "Custom component for the axis main line.", + "default": "'line'", + "class": null + }, + { + "name": "axisTick", + "description": "Custom component for the axis tick.", + "default": "'line'", + "class": null + }, + { + "name": "axisTickLabel", + "description": "Custom component for tick label.", + "default": "ChartsText", + "class": null + }, + { + "name": "axisLabel", + "description": "Custom component for axis label.", + "default": "ChartsText", + "class": null + }, { "name": "area", "description": "The component that renders the area.", @@ -95,10 +144,30 @@ }, { "name": "mark", "description": "", "class": null }, { "name": "lineHighlight", "description": "", "class": null }, - { "name": "legend", "description": "", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "legend", + "description": "Custom rendering of the legend.", + "default": "DefaultChartsLegend", + "class": null + }, + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiLineChart", diff --git a/docs/pages/x/api/charts/line-plot.json b/docs/pages/x/api/charts/line-plot.json index 695302fba7fa..b42395b5ed14 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 e334cc78e61d..bd8e81555f56 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 bb73132ab435..2b52c04ea36a 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 da19d23d6011..1e974abe72a0 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -1,9 +1,24 @@ { "props": { + "series": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "required": true + }, + "axisHighlight": { + "type": { + "name": "shape", + "description": "{ x?: 'band'
| 'line'
| 'none', y?: 'band'
| 'line'
| 'none' }" + }, + "default": "{ x: 'none', y: 'none' }", + "seeMoreLink": { + "url": "https://mui.com/x/react-charts/tooltip/#highlights", + "text": "highlight docs" + } + }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, @@ -13,14 +28,23 @@ }, "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, - "height": { "type": { "name": "number" }, "default": "undefined" }, + "height": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, + "legend": { + "type": { + "name": "shape", + "description": "{ classes?: object, direction?: 'column'
| 'row', hidden?: bool, position?: { horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }, slotProps?: object, slots?: object }" + }, + "default": "{ direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }", + "deprecated": true, + "deprecationInfo": "Consider using slotProps.legend instead." + }, "margin": { "type": { "name": "shape", @@ -28,33 +52,47 @@ }, "default": "object Depends on the charts type." }, + "onItemClick": { "type": { "name": "func" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, "skipAnimation": { "type": { "name": "bool" }, "default": "false" }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, + "slots": { + "type": { "name": "object" }, + "default": "{}", + "additionalInfo": { "slotsApi": true } + }, + "tooltip": { + "type": { + "name": "shape", + "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'
| 'item'
| 'none' }" + }, + "default": "{ trigger: 'item' }", + "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" } + }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, - "width": { "type": { "name": "number" }, "default": "undefined" }, + "width": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, @@ -64,16 +102,56 @@ "import { PieChart } from '@mui/x-charts';" ], "slots": [ - { "name": "axisLine", "description": "", "class": null }, - { "name": "axisTick", "description": "", "class": null }, - { "name": "axisTickLabel", "description": "", "class": null }, - { "name": "axisLabel", "description": "", "class": null }, + { + "name": "axisLine", + "description": "Custom component for the axis main line.", + "default": "'line'", + "class": null + }, + { + "name": "axisTick", + "description": "Custom component for the axis tick.", + "default": "'line'", + "class": null + }, + { + "name": "axisTickLabel", + "description": "Custom component for tick label.", + "default": "ChartsText", + "class": null + }, + { + "name": "axisLabel", + "description": "Custom component for axis label.", + "default": "ChartsText", + "class": null + }, { "name": "pieArc", "description": "", "class": null }, { "name": "pieArcLabel", "description": "", "class": null }, - { "name": "legend", "description": "", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "legend", + "description": "Custom rendering of the legend.", + "default": "DefaultChartsLegend", + "class": null + }, + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiPieChart", diff --git a/docs/pages/x/api/charts/pie-plot.json b/docs/pages/x/api/charts/pie-plot.json index 21d97bf5c303..4d098050997e 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 b32d7652af2e..216f02afe84b 100644 --- a/docs/pages/x/api/charts/responsive-chart-container.json +++ b/docs/pages/x/api/charts/responsive-chart-container.json @@ -10,7 +10,7 @@ }, "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, - "height": { "type": { "name": "number" }, "default": "undefined" }, + "height": { "type": { "name": "number" } }, "margin": { "type": { "name": "shape", @@ -18,17 +18,17 @@ }, "default": "object Depends on the charts type." }, - "width": { "type": { "name": "number" }, "default": "undefined" }, + "width": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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 624f957f297c..81ca7241fd46 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -1,9 +1,24 @@ { "props": { + "series": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "required": true + }, + "axisHighlight": { + "type": { + "name": "shape", + "description": "{ x?: 'band'
| 'line'
| 'none', y?: 'band'
| 'line'
| 'none' }" + }, + "default": "{ x: 'none', y: 'none' }", + "seeMoreLink": { + "url": "https://mui.com/x/react-charts/tooltip/#highlights", + "text": "highlight docs" + } + }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "xAxisIds[0] The id of the first provided axis" }, @@ -14,11 +29,14 @@ "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, "disableVoronoi": { "type": { "name": "bool" }, "default": "false" }, - "height": { "type": { "name": "number" }, "default": "undefined" }, + "grid": { + "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" } + }, + "height": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "yAxisIds[0] The id of the first provided axis" }, @@ -29,10 +47,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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, @@ -42,25 +67,33 @@ "default": "{}", "additionalInfo": { "slotsApi": true } }, + "tooltip": { + "type": { + "name": "shape", + "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'
| 'item'
| 'none' }" + }, + "default": "{ trigger: 'item' }", + "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" } + }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number }
| string" }, "default": "null" }, - "voronoiMaxRadius": { "type": { "name": "number" }, "default": "undefined" }, - "width": { "type": { "name": "number" }, "default": "undefined" }, + "voronoiMaxRadius": { "type": { "name": "number" } }, + "width": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>" } } }, @@ -70,15 +103,55 @@ "import { ScatterChart } from '@mui/x-charts';" ], "slots": [ - { "name": "axisLine", "description": "", "class": null }, - { "name": "axisTick", "description": "", "class": null }, - { "name": "axisTickLabel", "description": "", "class": null }, - { "name": "axisLabel", "description": "", "class": null }, + { + "name": "axisLine", + "description": "Custom component for the axis main line.", + "default": "'line'", + "class": null + }, + { + "name": "axisTick", + "description": "Custom component for the axis tick.", + "default": "'line'", + "class": null + }, + { + "name": "axisTickLabel", + "description": "Custom component for tick label.", + "default": "ChartsText", + "class": null + }, + { + "name": "axisLabel", + "description": "Custom component for axis label.", + "default": "ChartsText", + "class": null + }, { "name": "scatter", "description": "", "class": null }, - { "name": "legend", "description": "", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "legend", + "description": "Custom rendering of the legend.", + "default": "DefaultChartsLegend", + "class": null + }, + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiScatterChart", diff --git a/docs/pages/x/api/charts/scatter-plot.json b/docs/pages/x/api/charts/scatter-plot.json index eb293b3b005d..06c717e800fe 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 fb41b8589433..258a927ce826 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 6ac9a094ae81..73fa87be1352 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -11,7 +11,7 @@ }, "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, - "height": { "type": { "name": "number" }, "default": "undefined" }, + "height": { "type": { "name": "number" } }, "margin": { "type": { "name": "shape", @@ -33,18 +33,18 @@ }, "valueFormatter": { "type": { "name": "func" }, - "default": "(v: number | null) => (v === null ? '' : v.toString())", + "default": "(value: number | null) => (value === null ? '' : value.toString())", "signature": { "type": "function(value: number) => string", "describedArgs": ["value"], "returned": "string" } }, - "width": { "type": { "name": "number" }, "default": "undefined" }, + "width": { "type": { "name": "number" } }, "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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }" } } }, @@ -68,10 +68,30 @@ }, { "name": "mark", "description": "", "class": null }, { "name": "lineHighlight", "description": "", "class": null }, - { "name": "bar", "description": "", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "bar", + "description": "The component that renders the bar.", + "default": "BarElementPath", + "class": null + }, + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiSparkLineChart", diff --git a/docs/pages/x/api/data-grid/data-grid-premium.js b/docs/pages/x/api/data-grid/data-grid-premium.js index f46f04bcfb44..21c8633b6132 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.js +++ b/docs/pages/x/api/data-grid/data-grid-premium.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './data-grid-premium.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { 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 2b4860d709f1..9ce3955ee724 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -4,10 +4,6 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "required": true }, - "rows": { - "type": { "name": "arrayOf", "description": "Array<object>" }, - "required": true - }, "aggregationFunctions": { "type": { "name": "object" }, "default": "GRID_AGGREGATION_FUNCTIONS" @@ -36,9 +32,8 @@ "checkboxSelectionVisibleOnly": { "type": { "name": "bool" }, "default": "false" }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, - "columnBuffer": { "type": { "name": "number" }, "default": "3" }, + "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, - "columnThreshold": { "type": { "name": "number" }, "default": "3" }, "columnVisibilityModel": { "type": { "name": "object" } }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, "density": { @@ -79,10 +74,7 @@ "default": "\"cell\"" }, "experimentalFeatures": { - "type": { - "name": "shape", - "description": "{ lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" - } + "type": { "name": "shape", "description": "{ warnIfFocusStateIsNotSynced?: bool }" } }, "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, "filterMode": { @@ -235,6 +227,10 @@ "describedArgs": ["model", "details"] } }, + "onBeforeClipboardPasteStart": { + "type": { "name": "func" }, + "signature": { "type": "function(params: object) => void", "describedArgs": ["params"] } + }, "onCellClick": { "type": { "name": "func" }, "signature": { @@ -360,6 +356,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onDensityChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(density: GridDensity) => void", + "describedArgs": ["density"] + } + }, "onDetailPanelExpandedRowIdsChange": { "type": { "name": "func" }, "signature": { @@ -448,6 +451,10 @@ "describedArgs": ["params", "event", "details"] } }, + "onRowCountChange": { + "type": { "name": "func" }, + "signature": { "type": "function(count: number) => void", "describedArgs": ["count"] } + }, "onRowDoubleClick": { "type": { "name": "func" }, "signature": { @@ -455,13 +462,6 @@ "describedArgs": ["params", "event", "details"] } }, - "onRowEditCommit": { - "type": { "name": "func" }, - "signature": { - "type": "function(id: GridRowId, event: MuiEvent) => void", - "describedArgs": ["id", "event"] - } - }, "onRowEditStart": { "type": { "name": "func" }, "signature": { @@ -548,7 +548,7 @@ "returned": "Promise | R" } }, - "rowBuffer": { "type": { "name": "number" }, "default": "3" }, + "rowBufferPx": { "type": { "name": "number" }, "default": "150" }, "rowCount": { "type": { "name": "number" } }, "rowGroupingColumnMode": { "type": { "name": "enum", "description": "'multiple'
| 'single'" }, @@ -559,6 +559,10 @@ "rowModesModel": { "type": { "name": "object" } }, "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, "rowReordering": { "type": { "name": "bool" }, "default": "false" }, + "rows": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "default": "[]" + }, "rowSelection": { "type": { "name": "bool" }, "default": "true" }, "rowSelectionModel": { "type": { @@ -573,7 +577,6 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, - "rowThreshold": { "type": { "name": "number" }, "default": "3" }, "scrollbarSize": { "type": { "name": "number" } }, "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, @@ -613,6 +616,440 @@ "import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';", "import { DataGridPremium } from '@mui/x-data-grid-premium';" ], + "slots": [ + { + "name": "headerFilterCell", + "description": "Component responsible for showing menu adornment in Header filter row", + "default": "GridHeaderFilterCell", + "class": null + }, + { + "name": "headerFilterMenu", + "description": "Component responsible for showing menu in Header filter row", + "default": "GridHeaderFilterMenu", + "class": null + }, + { + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip", + "class": null + }, + { + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell", + "class": "MuiDataGridPremium-cell" + }, + { + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell", + "class": null + }, + { + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton", + "class": null + }, + { + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.", + "default": "GridColumnMenu", + "class": null + }, + { + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders", + "class": "MuiDataGridPremium-columnHeaders" + }, + { + "name": "detailPanels", + "description": "Component responsible for rendering the detail panels.", + "default": "GridDetailPanels", + "class": "MuiDataGridPremium-detailPanels" + }, + { + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter", + "class": null + }, + { + "name": "footerRowCount", + "description": "Row count component rendered in the footer", + "default": "GridRowCount", + "class": null + }, + { + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null", + "class": null + }, + { + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay", + "class": null + }, + { + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay", + "class": null + }, + { + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay", + "class": null + }, + { + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination", + "class": null + }, + { + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel", + "class": null + }, + { + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel", + "class": null + }, + { + "name": "columnsManagement", + "description": "Component used inside Grid Columns panel to manage columns.", + "default": "GridColumnsManagement", + "class": "MuiDataGridPremium-columnsManagement" + }, + { + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel", + "class": "MuiDataGridPremium-panel" + }, + { + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow", + "class": "MuiDataGridPremium-row" + }, + { + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox", + "class": null + }, + { + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment", + "class": null + }, + { + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField", + "class": null + }, + { + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl", + "class": null + }, + { + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select", + "class": null + }, + { + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button", + "class": null + }, + { + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton", + "class": null + }, + { + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip", + "class": null + }, + { + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper", + "class": null + }, + { + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel", + "class": null + }, + { + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem", + "class": null + }, + { + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon", + "class": null + }, + { + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon", + "class": null + }, + { + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon", + "class": null + }, + { + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon", + "class": null + }, + { + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon", + "class": null + }, + { + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon", + "class": null + }, + { + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon", + "class": null + }, + { + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon", + "class": null + }, + { + "name": "densityComfortableIcon", + "description": "Icon displayed on the \"comfortable\" density option in the toolbar.", + "default": "GridViewStreamIcon", + "class": null + }, + { + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon", + "class": null + }, + { + "name": "moreActionsIcon", + "description": "Icon displayed on the `actions` column type to open the menu.", + "default": "GridMoreVertIcon", + "class": null + }, + { + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon", + "class": null + }, + { + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon", + "class": null + }, + { + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon", + "class": null + }, + { + "name": "rowReorderIcon", + "description": "Icon displayed on the `reorder` column type to reorder a row.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon", + "class": null + }, + { + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon", + "class": null + }, + { + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon", + "class": null + }, + { + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon", + "class": null + }, + { + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon", + "class": null + }, + { + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "columnMenuPinLeftIcon", + "description": "Icon displayed in column menu for left pinning", + "default": "GridPushPinLeftIcon", + "class": null + }, + { + "name": "columnMenuPinRightIcon", + "description": "Icon displayed in column menu for right pinning", + "default": "GridPushPinRightIcon", + "class": null + }, + { + "name": "columnMenuUngroupIcon", + "description": "Icon displayed in column menu for ungrouping", + "default": "GridWorkspacesIcon", + "class": null + }, + { + "name": "columnMenuGroupIcon", + "description": "Icon displayed in column menu for grouping", + "default": "GridGroupWorkIcon", + "class": null + }, + { + "name": "columnMenuAggregationIcon", + "description": "Icon displayed in column menu for aggregation", + "default": "GridFunctionsIcon", + "class": null + } + ], "classes": [ { "key": "actionsCell", @@ -668,12 +1105,6 @@ "description": "Styles applied to the icon of the boolean cell.", "isGlobal": false }, - { - "key": "cell", - "className": "MuiDataGridPremium-cell", - "description": "Styles applied to the cell element.", - "isGlobal": false - }, { "key": "cell--editable", "className": "MuiDataGridPremium-cell--editable", @@ -686,6 +1117,12 @@ "description": "Styles applied to the cell element if the cell is in edit mode.", "isGlobal": false }, + { + "key": "cell--flex", + "className": "MuiDataGridPremium-cell--flex", + "description": "Styles applied to the cell element in flex display mode.", + "isGlobal": false + }, { "key": "cell--pinnedLeft", "className": "MuiDataGridPremium-cell--pinnedLeft", @@ -752,12 +1189,6 @@ "description": "Styles applied the cell if `showColumnVerticalBorder={true}`.", "isGlobal": false }, - { - "key": "cell--withRenderer", - "className": "MuiDataGridPremium-cell--withRenderer", - "description": "Styles applied to the cell element if the cell has a custom renderer.", - "isGlobal": false - }, { "key": "cell--withRightBorder", "className": "MuiDataGridPremium-cell--withRightBorder", @@ -770,12 +1201,6 @@ "description": "Styles applied to the cell checkbox element.", "isGlobal": false }, - { - "key": "cellContent", - "className": "MuiDataGridPremium-cellContent", - "description": "Styles applied to the element that wraps the cell content.", - "isGlobal": false - }, { "key": "cellEmpty", "className": "MuiDataGridPremium-cellEmpty", @@ -794,12 +1219,6 @@ "description": "Styles applied to the selection checkbox element.", "isGlobal": false }, - { - "key": "columnGroupHeader", - "className": "MuiDataGridPremium-columnGroupHeader", - "description": "Styles applied to the column group header element.", - "isGlobal": false - }, { "key": "columnHeader", "className": "MuiDataGridPremium-columnHeader", @@ -861,9 +1280,15 @@ "isGlobal": false }, { - "key": "columnHeader--showColumnBorder", - "className": "MuiDataGridPremium-columnHeader--showColumnBorder", - "description": "Styles applied to the column group header cell when show column border.", + "key": "columnHeader--pinnedLeft", + "className": "MuiDataGridPremium-columnHeader--pinnedLeft", + "description": "", + "isGlobal": false + }, + { + "key": "columnHeader--pinnedRight", + "className": "MuiDataGridPremium-columnHeader--pinnedRight", + "description": "", "isGlobal": false }, { @@ -878,6 +1303,12 @@ "description": "Styles applied to the column header if the column is sorted.", "isGlobal": false }, + { + "key": "columnHeader--withLeftBorder", + "className": "MuiDataGridPremium-columnHeader--withLeftBorder", + "description": "", + "isGlobal": false + }, { "key": "columnHeader--withRightBorder", "className": "MuiDataGridPremium-columnHeader--withRightBorder", @@ -896,30 +1327,6 @@ "description": "Styles applied to the column header's draggable container element.", "isGlobal": false }, - { - "key": "columnHeaderDropZone", - "className": "MuiDataGridPremium-columnHeaderDropZone", - "description": "Styles applied to the column headers wrapper if a column is being dragged.", - "isGlobal": false - }, - { - "key": "columnHeaders", - "className": "MuiDataGridPremium-columnHeaders", - "description": "Styles applied to the column headers.", - "isGlobal": false - }, - { - "key": "columnHeadersInner", - "className": "MuiDataGridPremium-columnHeadersInner", - "description": "Styles applied to the column headers's inner element.", - "isGlobal": false - }, - { - "key": "columnHeadersInner--scrollable", - "className": "MuiDataGridPremium-columnHeadersInner--scrollable", - "description": "Styles applied to the column headers's inner element if there is a horizontal scrollbar.", - "isGlobal": false - }, { "key": "columnHeaderTitle", "className": "MuiDataGridPremium-columnHeaderTitle", @@ -968,12 +1375,6 @@ "description": "Styles applied to the column header separator if the side is \"right\".", "isGlobal": false }, - { - "key": "columnsManagement", - "className": "MuiDataGridPremium-columnsManagement", - "description": "Styles applied to the columns management body.", - "isGlobal": false - }, { "key": "columnsManagementFooter", "className": "MuiDataGridPremium-columnsManagementFooter", @@ -1010,12 +1411,6 @@ "description": "Styles applied to the detail panel element.", "isGlobal": false }, - { - "key": "detailPanels", - "className": "MuiDataGridPremium-detailPanels", - "description": "Styles applied to the detail panels wrapper element.", - "isGlobal": false - }, { "key": "detailPanelToggleCell", "className": "MuiDataGridPremium-detailPanelToggleCell", @@ -1040,24 +1435,6 @@ "description": "Styles applied to the root of the input component.", "isGlobal": false }, - { - "key": "filler", - "className": "MuiDataGridPremium-filler", - "description": "Styles applied to the filler row.", - "isGlobal": false - }, - { - "key": "filler--pinnedLeft", - "className": "MuiDataGridPremium-filler--pinnedLeft", - "description": "Styles applied to the filler row pinned left section.", - "isGlobal": false - }, - { - "key": "filler--pinnedRight", - "className": "MuiDataGridPremium-filler--pinnedRight", - "description": "Styles applied to the filler row pinned right section.", - "isGlobal": false - }, { "key": "filterForm", "className": "MuiDataGridPremium-filterForm", @@ -1202,12 +1579,6 @@ "description": "Styles applied to the overlay wrapper inner element.", "isGlobal": false }, - { - "key": "panel", - "className": "MuiDataGridPremium-panel", - "description": "Styles applied to the panel element.", - "isGlobal": false - }, { "key": "panelContent", "className": "MuiDataGridPremium-panelContent", @@ -1238,24 +1609,6 @@ "description": "Styles applied to the paper element.", "isGlobal": false }, - { - "key": "pinnedColumnHeaders", - "className": "MuiDataGridPremium-pinnedColumnHeaders", - "description": "Styles applied to the pinned column headers.", - "isGlobal": false - }, - { - "key": "pinnedColumnHeaders--left", - "className": "MuiDataGridPremium-pinnedColumnHeaders--left", - "description": "Styles applied to the left pinned column headers.", - "isGlobal": false - }, - { - "key": "pinnedColumnHeaders--right", - "className": "MuiDataGridPremium-pinnedColumnHeaders--right", - "description": "Styles applied to the right pinned column headers.", - "isGlobal": false - }, { "key": "pinnedColumns", "className": "MuiDataGridPremium-pinnedColumns", @@ -1316,12 +1669,6 @@ "description": "Styles applied to the root element when user selection is disabled.", "isGlobal": false }, - { - "key": "row", - "className": "MuiDataGridPremium-row", - "description": "Styles applied to the row element.", - "isGlobal": false - }, { "key": "row--detailPanelExpanded", "className": "MuiDataGridPremium-row--detailPanelExpanded", @@ -1505,7 +1852,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.js b/docs/pages/x/api/data-grid/data-grid-pro.js index 6a38d78eb2ee..ca9a6f94ad7a 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.js +++ b/docs/pages/x/api/data-grid/data-grid-pro.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './data-grid-pro.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { 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 8a4e76d64e1c..f85d38ad7148 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -4,10 +4,6 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "required": true }, - "rows": { - "type": { "name": "arrayOf", "description": "Array<object>" }, - "required": true - }, "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } }, "aria-label": { "type": { "name": "string" } }, "aria-labelledby": { "type": { "name": "string" } }, @@ -25,9 +21,8 @@ "checkboxSelectionVisibleOnly": { "type": { "name": "bool" }, "default": "false" }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, - "columnBuffer": { "type": { "name": "number" }, "default": "3" }, + "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, - "columnThreshold": { "type": { "name": "number" }, "default": "3" }, "columnVisibilityModel": { "type": { "name": "object" } }, "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, "density": { @@ -65,10 +60,7 @@ "default": "\"cell\"" }, "experimentalFeatures": { - "type": { - "name": "shape", - "description": "{ lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" - } + "type": { "name": "shape", "description": "{ warnIfFocusStateIsNotSynced?: bool }" } }, "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, "filterMode": { @@ -321,6 +313,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onDensityChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(density: GridDensity) => void", + "describedArgs": ["density"] + } + }, "onDetailPanelExpandedRowIdsChange": { "type": { "name": "func" }, "signature": { @@ -402,6 +401,10 @@ "describedArgs": ["params", "event", "details"] } }, + "onRowCountChange": { + "type": { "name": "func" }, + "signature": { "type": "function(count: number) => void", "describedArgs": ["count"] } + }, "onRowDoubleClick": { "type": { "name": "func" }, "signature": { @@ -409,13 +412,6 @@ "describedArgs": ["params", "event", "details"] } }, - "onRowEditCommit": { - "type": { "name": "func" }, - "signature": { - "type": "function(id: GridRowId, event: MuiEvent) => void", - "describedArgs": ["id", "event"] - } - }, "onRowEditStart": { "type": { "name": "func" }, "signature": { @@ -495,12 +491,16 @@ "returned": "Promise | R" } }, - "rowBuffer": { "type": { "name": "number" }, "default": "3" }, + "rowBufferPx": { "type": { "name": "number" }, "default": "150" }, "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, "rowReordering": { "type": { "name": "bool" }, "default": "false" }, + "rows": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "default": "[]" + }, "rowSelection": { "type": { "name": "bool" }, "default": "true" }, "rowSelectionModel": { "type": { @@ -515,7 +515,6 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, - "rowThreshold": { "type": { "name": "number" }, "default": "3" }, "scrollbarSize": { "type": { "name": "number" } }, "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, @@ -552,6 +551,422 @@ "import { DataGridPro } from '@mui/x-data-grid-pro';", "import { DataGridPro } from '@mui/x-data-grid-premium';" ], + "slots": [ + { + "name": "headerFilterCell", + "description": "Component responsible for showing menu adornment in Header filter row", + "default": "GridHeaderFilterCell", + "class": null + }, + { + "name": "headerFilterMenu", + "description": "Component responsible for showing menu in Header filter row", + "default": "GridHeaderFilterMenu", + "class": null + }, + { + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip", + "class": null + }, + { + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell", + "class": "MuiDataGridPro-cell" + }, + { + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell", + "class": null + }, + { + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton", + "class": null + }, + { + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.", + "default": "GridColumnMenu", + "class": null + }, + { + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders", + "class": "MuiDataGridPro-columnHeaders" + }, + { + "name": "detailPanels", + "description": "Component responsible for rendering the detail panels.", + "default": "GridDetailPanels", + "class": "MuiDataGridPro-detailPanels" + }, + { + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter", + "class": null + }, + { + "name": "footerRowCount", + "description": "Row count component rendered in the footer", + "default": "GridRowCount", + "class": null + }, + { + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null", + "class": null + }, + { + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay", + "class": null + }, + { + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay", + "class": null + }, + { + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay", + "class": null + }, + { + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination", + "class": null + }, + { + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel", + "class": null + }, + { + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel", + "class": null + }, + { + "name": "columnsManagement", + "description": "Component used inside Grid Columns panel to manage columns.", + "default": "GridColumnsManagement", + "class": "MuiDataGridPro-columnsManagement" + }, + { + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel", + "class": "MuiDataGridPro-panel" + }, + { + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow", + "class": "MuiDataGridPro-row" + }, + { + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox", + "class": null + }, + { + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment", + "class": null + }, + { + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField", + "class": null + }, + { + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl", + "class": null + }, + { + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select", + "class": null + }, + { + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button", + "class": null + }, + { + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton", + "class": null + }, + { + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip", + "class": null + }, + { + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper", + "class": null + }, + { + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel", + "class": null + }, + { + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem", + "class": null + }, + { + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon", + "class": null + }, + { + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon", + "class": null + }, + { + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon", + "class": null + }, + { + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon", + "class": null + }, + { + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon", + "class": null + }, + { + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon", + "class": null + }, + { + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon", + "class": null + }, + { + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon", + "class": null + }, + { + "name": "densityComfortableIcon", + "description": "Icon displayed on the \"comfortable\" density option in the toolbar.", + "default": "GridViewStreamIcon", + "class": null + }, + { + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon", + "class": null + }, + { + "name": "moreActionsIcon", + "description": "Icon displayed on the `actions` column type to open the menu.", + "default": "GridMoreVertIcon", + "class": null + }, + { + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon", + "class": null + }, + { + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon", + "class": null + }, + { + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon", + "class": null + }, + { + "name": "rowReorderIcon", + "description": "Icon displayed on the `reorder` column type to reorder a row.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon", + "class": null + }, + { + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon", + "class": null + }, + { + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon", + "class": null + }, + { + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon", + "class": null + }, + { + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon", + "class": null + }, + { + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "columnMenuPinLeftIcon", + "description": "Icon displayed in column menu for left pinning", + "default": "GridPushPinLeftIcon", + "class": null + }, + { + "name": "columnMenuPinRightIcon", + "description": "Icon displayed in column menu for right pinning", + "default": "GridPushPinRightIcon", + "class": null + } + ], "classes": [ { "key": "actionsCell", @@ -607,12 +1022,6 @@ "description": "Styles applied to the icon of the boolean cell.", "isGlobal": false }, - { - "key": "cell", - "className": "MuiDataGridPro-cell", - "description": "Styles applied to the cell element.", - "isGlobal": false - }, { "key": "cell--editable", "className": "MuiDataGridPro-cell--editable", @@ -625,6 +1034,12 @@ "description": "Styles applied to the cell element if the cell is in edit mode.", "isGlobal": false }, + { + "key": "cell--flex", + "className": "MuiDataGridPro-cell--flex", + "description": "Styles applied to the cell element in flex display mode.", + "isGlobal": false + }, { "key": "cell--pinnedLeft", "className": "MuiDataGridPro-cell--pinnedLeft", @@ -691,12 +1106,6 @@ "description": "Styles applied the cell if `showColumnVerticalBorder={true}`.", "isGlobal": false }, - { - "key": "cell--withRenderer", - "className": "MuiDataGridPro-cell--withRenderer", - "description": "Styles applied to the cell element if the cell has a custom renderer.", - "isGlobal": false - }, { "key": "cell--withRightBorder", "className": "MuiDataGridPro-cell--withRightBorder", @@ -709,12 +1118,6 @@ "description": "Styles applied to the cell checkbox element.", "isGlobal": false }, - { - "key": "cellContent", - "className": "MuiDataGridPro-cellContent", - "description": "Styles applied to the element that wraps the cell content.", - "isGlobal": false - }, { "key": "cellEmpty", "className": "MuiDataGridPro-cellEmpty", @@ -733,12 +1136,6 @@ "description": "Styles applied to the selection checkbox element.", "isGlobal": false }, - { - "key": "columnGroupHeader", - "className": "MuiDataGridPro-columnGroupHeader", - "description": "Styles applied to the column group header element.", - "isGlobal": false - }, { "key": "columnHeader", "className": "MuiDataGridPro-columnHeader", @@ -800,9 +1197,15 @@ "isGlobal": false }, { - "key": "columnHeader--showColumnBorder", - "className": "MuiDataGridPro-columnHeader--showColumnBorder", - "description": "Styles applied to the column group header cell when show column border.", + "key": "columnHeader--pinnedLeft", + "className": "MuiDataGridPro-columnHeader--pinnedLeft", + "description": "", + "isGlobal": false + }, + { + "key": "columnHeader--pinnedRight", + "className": "MuiDataGridPro-columnHeader--pinnedRight", + "description": "", "isGlobal": false }, { @@ -817,6 +1220,12 @@ "description": "Styles applied to the column header if the column is sorted.", "isGlobal": false }, + { + "key": "columnHeader--withLeftBorder", + "className": "MuiDataGridPro-columnHeader--withLeftBorder", + "description": "", + "isGlobal": false + }, { "key": "columnHeader--withRightBorder", "className": "MuiDataGridPro-columnHeader--withRightBorder", @@ -835,30 +1244,6 @@ "description": "Styles applied to the column header's draggable container element.", "isGlobal": false }, - { - "key": "columnHeaderDropZone", - "className": "MuiDataGridPro-columnHeaderDropZone", - "description": "Styles applied to the column headers wrapper if a column is being dragged.", - "isGlobal": false - }, - { - "key": "columnHeaders", - "className": "MuiDataGridPro-columnHeaders", - "description": "Styles applied to the column headers.", - "isGlobal": false - }, - { - "key": "columnHeadersInner", - "className": "MuiDataGridPro-columnHeadersInner", - "description": "Styles applied to the column headers's inner element.", - "isGlobal": false - }, - { - "key": "columnHeadersInner--scrollable", - "className": "MuiDataGridPro-columnHeadersInner--scrollable", - "description": "Styles applied to the column headers's inner element if there is a horizontal scrollbar.", - "isGlobal": false - }, { "key": "columnHeaderTitle", "className": "MuiDataGridPro-columnHeaderTitle", @@ -907,12 +1292,6 @@ "description": "Styles applied to the column header separator if the side is \"right\".", "isGlobal": false }, - { - "key": "columnsManagement", - "className": "MuiDataGridPro-columnsManagement", - "description": "Styles applied to the columns management body.", - "isGlobal": false - }, { "key": "columnsManagementFooter", "className": "MuiDataGridPro-columnsManagementFooter", @@ -949,12 +1328,6 @@ "description": "Styles applied to the detail panel element.", "isGlobal": false }, - { - "key": "detailPanels", - "className": "MuiDataGridPro-detailPanels", - "description": "Styles applied to the detail panels wrapper element.", - "isGlobal": false - }, { "key": "detailPanelToggleCell", "className": "MuiDataGridPro-detailPanelToggleCell", @@ -979,24 +1352,6 @@ "description": "Styles applied to the root of the input component.", "isGlobal": false }, - { - "key": "filler", - "className": "MuiDataGridPro-filler", - "description": "Styles applied to the filler row.", - "isGlobal": false - }, - { - "key": "filler--pinnedLeft", - "className": "MuiDataGridPro-filler--pinnedLeft", - "description": "Styles applied to the filler row pinned left section.", - "isGlobal": false - }, - { - "key": "filler--pinnedRight", - "className": "MuiDataGridPro-filler--pinnedRight", - "description": "Styles applied to the filler row pinned right section.", - "isGlobal": false - }, { "key": "filterForm", "className": "MuiDataGridPro-filterForm", @@ -1141,12 +1496,6 @@ "description": "Styles applied to the overlay wrapper inner element.", "isGlobal": false }, - { - "key": "panel", - "className": "MuiDataGridPro-panel", - "description": "Styles applied to the panel element.", - "isGlobal": false - }, { "key": "panelContent", "className": "MuiDataGridPro-panelContent", @@ -1177,24 +1526,6 @@ "description": "Styles applied to the paper element.", "isGlobal": false }, - { - "key": "pinnedColumnHeaders", - "className": "MuiDataGridPro-pinnedColumnHeaders", - "description": "Styles applied to the pinned column headers.", - "isGlobal": false - }, - { - "key": "pinnedColumnHeaders--left", - "className": "MuiDataGridPro-pinnedColumnHeaders--left", - "description": "Styles applied to the left pinned column headers.", - "isGlobal": false - }, - { - "key": "pinnedColumnHeaders--right", - "className": "MuiDataGridPro-pinnedColumnHeaders--right", - "description": "Styles applied to the right pinned column headers.", - "isGlobal": false - }, { "key": "pinnedColumns", "className": "MuiDataGridPro-pinnedColumns", @@ -1255,12 +1586,6 @@ "description": "Styles applied to the root element when user selection is disabled.", "isGlobal": false }, - { - "key": "row", - "className": "MuiDataGridPro-row", - "description": "Styles applied to the row element.", - "isGlobal": false - }, { "key": "row--detailPanelExpanded", "className": "MuiDataGridPro-row--detailPanelExpanded", @@ -1444,7 +1769,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.js b/docs/pages/x/api/data-grid/data-grid.js index 87962cb94d64..c68d5ab94bbb 100644 --- a/docs/pages/x/api/data-grid/data-grid.js +++ b/docs/pages/x/api/data-grid/data-grid.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './data-grid.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 24989d3962c7..ac8d1f022003 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -4,22 +4,24 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "required": true }, - "rows": { - "type": { "name": "arrayOf", "description": "Array<object>" }, - "required": true - }, "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } }, "aria-label": { "type": { "name": "string" } }, "aria-labelledby": { "type": { "name": "string" } }, "autoHeight": { "type": { "name": "bool" }, "default": "false" }, "autoPageSize": { "type": { "name": "bool" }, "default": "false" }, + "autosizeOnMount": { "type": { "name": "bool" }, "default": "false" }, + "autosizeOptions": { + "type": { + "name": "shape", + "description": "{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }" + } + }, "cellModesModel": { "type": { "name": "object" } }, "checkboxSelection": { "type": { "name": "bool" }, "default": "false" }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, - "columnBuffer": { "type": { "name": "number" }, "default": "3" }, + "columnBufferPx": { "type": { "name": "number" }, "default": "150" }, "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, - "columnThreshold": { "type": { "name": "number" }, "default": "3" }, "columnVisibilityModel": { "type": { "name": "object" } }, "density": { "type": { @@ -28,8 +30,10 @@ }, "default": "\"standard\"" }, + "disableAutosize": { "type": { "name": "bool" }, "default": "false" }, "disableColumnFilter": { "type": { "name": "bool" }, "default": "false" }, "disableColumnMenu": { "type": { "name": "bool" }, "default": "false" }, + "disableColumnResize": { "type": { "name": "bool" }, "default": "false" }, "disableColumnSelector": { "type": { "name": "bool" }, "default": "false" }, "disableColumnSorting": { "type": { "name": "bool" }, "default": "false" }, "disableDensitySelector": { "type": { "name": "bool" }, "default": "false" }, @@ -248,6 +252,13 @@ "describedArgs": ["params", "event", "details"] } }, + "onColumnResize": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, "onColumnVisibilityModelChange": { "type": { "name": "func" }, "signature": { @@ -255,6 +266,20 @@ "describedArgs": ["model", "details"] } }, + "onColumnWidthChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onDensityChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(density: GridDensity) => void", + "describedArgs": ["density"] + } + }, "onFilterModelChange": { "type": { "name": "func" }, "signature": { @@ -315,6 +340,10 @@ "describedArgs": ["params", "event", "details"] } }, + "onRowCountChange": { + "type": { "name": "func" }, + "signature": { "type": "function(count: number) => void", "describedArgs": ["count"] } + }, "onRowDoubleClick": { "type": { "name": "func" }, "signature": { @@ -322,13 +351,6 @@ "describedArgs": ["params", "event", "details"] } }, - "onRowEditCommit": { - "type": { "name": "func" }, - "signature": { - "type": "function(id: GridRowId, event: MuiEvent) => void", - "describedArgs": ["id", "event"] - } - }, "onRowEditStart": { "type": { "name": "func" }, "signature": { @@ -386,11 +408,15 @@ "returned": "Promise | R" } }, - "rowBuffer": { "type": { "name": "number" }, "default": "3" }, + "rowBufferPx": { "type": { "name": "number" }, "default": "150" }, "rowCount": { "type": { "name": "number" } }, "rowHeight": { "type": { "name": "number" }, "default": "52" }, "rowModesModel": { "type": { "name": "object" } }, "rowPositionsDebounceMs": { "type": { "name": "number" }, "default": "166" }, + "rows": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "default": "[]" + }, "rowSelection": { "type": { "name": "bool" }, "default": "true" }, "rowSelectionModel": { "type": { @@ -402,7 +428,6 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, - "rowThreshold": { "type": { "name": "number" }, "default": "3" }, "scrollbarSize": { "type": { "name": "number" } }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, "showColumnVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, @@ -437,6 +462,398 @@ "import { DataGrid } from '@mui/x-data-grid-pro';", "import { DataGrid } from '@mui/x-data-grid-premium';" ], + "slots": [ + { + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip", + "class": null + }, + { + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell", + "class": "MuiDataGrid-cell" + }, + { + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell", + "class": null + }, + { + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton", + "class": null + }, + { + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.", + "default": "GridColumnMenu", + "class": null + }, + { + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders", + "class": "MuiDataGrid-columnHeaders" + }, + { + "name": "detailPanels", + "description": "Component responsible for rendering the detail panels.", + "default": "GridDetailPanels", + "class": "MuiDataGrid-detailPanels" + }, + { + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter", + "class": null + }, + { + "name": "footerRowCount", + "description": "Row count component rendered in the footer", + "default": "GridRowCount", + "class": null + }, + { + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null", + "class": null + }, + { + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay", + "class": null + }, + { + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay", + "class": null + }, + { + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay", + "class": null + }, + { + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination", + "class": null + }, + { + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel", + "class": null + }, + { + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel", + "class": null + }, + { + "name": "columnsManagement", + "description": "Component used inside Grid Columns panel to manage columns.", + "default": "GridColumnsManagement", + "class": "MuiDataGrid-columnsManagement" + }, + { + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel", + "class": "MuiDataGrid-panel" + }, + { + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow", + "class": "MuiDataGrid-row" + }, + { + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox", + "class": null + }, + { + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment", + "class": null + }, + { + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField", + "class": null + }, + { + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl", + "class": null + }, + { + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select", + "class": null + }, + { + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button", + "class": null + }, + { + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton", + "class": null + }, + { + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip", + "class": null + }, + { + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper", + "class": null + }, + { + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel", + "class": null + }, + { + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem", + "class": null + }, + { + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon", + "class": null + }, + { + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon", + "class": null + }, + { + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon", + "class": null + }, + { + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon", + "class": null + }, + { + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon", + "class": null + }, + { + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon", + "class": null + }, + { + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon", + "class": null + }, + { + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon", + "class": null + }, + { + "name": "densityComfortableIcon", + "description": "Icon displayed on the \"comfortable\" density option in the toolbar.", + "default": "GridViewStreamIcon", + "class": null + }, + { + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon", + "class": null + }, + { + "name": "moreActionsIcon", + "description": "Icon displayed on the `actions` column type to open the menu.", + "default": "GridMoreVertIcon", + "class": null + }, + { + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon", + "class": null + }, + { + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon", + "class": null + }, + { + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon", + "class": null + }, + { + "name": "rowReorderIcon", + "description": "Icon displayed on the `reorder` column type to reorder a row.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon", + "class": null + }, + { + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon", + "class": null + }, + { + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon", + "class": null + }, + { + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon", + "class": null + }, + { + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon", + "class": null + }, + { + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon", + "class": null + } + ], "classes": [ { "key": "actionsCell", @@ -492,12 +909,6 @@ "description": "Styles applied to the icon of the boolean cell.", "isGlobal": false }, - { - "key": "cell", - "className": "MuiDataGrid-cell", - "description": "Styles applied to the cell element.", - "isGlobal": false - }, { "key": "cell--editable", "className": "MuiDataGrid-cell--editable", @@ -510,6 +921,12 @@ "description": "Styles applied to the cell element if the cell is in edit mode.", "isGlobal": false }, + { + "key": "cell--flex", + "className": "MuiDataGrid-cell--flex", + "description": "Styles applied to the cell element in flex display mode.", + "isGlobal": false + }, { "key": "cell--pinnedLeft", "className": "MuiDataGrid-cell--pinnedLeft", @@ -576,12 +993,6 @@ "description": "Styles applied the cell if `showColumnVerticalBorder={true}`.", "isGlobal": false }, - { - "key": "cell--withRenderer", - "className": "MuiDataGrid-cell--withRenderer", - "description": "Styles applied to the cell element if the cell has a custom renderer.", - "isGlobal": false - }, { "key": "cell--withRightBorder", "className": "MuiDataGrid-cell--withRightBorder", @@ -594,12 +1005,6 @@ "description": "Styles applied to the cell checkbox element.", "isGlobal": false }, - { - "key": "cellContent", - "className": "MuiDataGrid-cellContent", - "description": "Styles applied to the element that wraps the cell content.", - "isGlobal": false - }, { "key": "cellEmpty", "className": "MuiDataGrid-cellEmpty", @@ -618,12 +1023,6 @@ "description": "Styles applied to the selection checkbox element.", "isGlobal": false }, - { - "key": "columnGroupHeader", - "className": "MuiDataGrid-columnGroupHeader", - "description": "Styles applied to the column group header element.", - "isGlobal": false - }, { "key": "columnHeader", "className": "MuiDataGrid-columnHeader", @@ -685,9 +1084,15 @@ "isGlobal": false }, { - "key": "columnHeader--showColumnBorder", - "className": "MuiDataGrid-columnHeader--showColumnBorder", - "description": "Styles applied to the column group header cell when show column border.", + "key": "columnHeader--pinnedLeft", + "className": "MuiDataGrid-columnHeader--pinnedLeft", + "description": "", + "isGlobal": false + }, + { + "key": "columnHeader--pinnedRight", + "className": "MuiDataGrid-columnHeader--pinnedRight", + "description": "", "isGlobal": false }, { @@ -702,6 +1107,12 @@ "description": "Styles applied to the column header if the column is sorted.", "isGlobal": false }, + { + "key": "columnHeader--withLeftBorder", + "className": "MuiDataGrid-columnHeader--withLeftBorder", + "description": "", + "isGlobal": false + }, { "key": "columnHeader--withRightBorder", "className": "MuiDataGrid-columnHeader--withRightBorder", @@ -720,30 +1131,6 @@ "description": "Styles applied to the column header's draggable container element.", "isGlobal": false }, - { - "key": "columnHeaderDropZone", - "className": "MuiDataGrid-columnHeaderDropZone", - "description": "Styles applied to the column headers wrapper if a column is being dragged.", - "isGlobal": false - }, - { - "key": "columnHeaders", - "className": "MuiDataGrid-columnHeaders", - "description": "Styles applied to the column headers.", - "isGlobal": false - }, - { - "key": "columnHeadersInner", - "className": "MuiDataGrid-columnHeadersInner", - "description": "Styles applied to the column headers's inner element.", - "isGlobal": false - }, - { - "key": "columnHeadersInner--scrollable", - "className": "MuiDataGrid-columnHeadersInner--scrollable", - "description": "Styles applied to the column headers's inner element if there is a horizontal scrollbar.", - "isGlobal": false - }, { "key": "columnHeaderTitle", "className": "MuiDataGrid-columnHeaderTitle", @@ -792,12 +1179,6 @@ "description": "Styles applied to the column header separator if the side is \"right\".", "isGlobal": false }, - { - "key": "columnsManagement", - "className": "MuiDataGrid-columnsManagement", - "description": "Styles applied to the columns management body.", - "isGlobal": false - }, { "key": "columnsManagementFooter", "className": "MuiDataGrid-columnsManagementFooter", @@ -834,12 +1215,6 @@ "description": "Styles applied to the detail panel element.", "isGlobal": false }, - { - "key": "detailPanels", - "className": "MuiDataGrid-detailPanels", - "description": "Styles applied to the detail panels wrapper element.", - "isGlobal": false - }, { "key": "detailPanelToggleCell", "className": "MuiDataGrid-detailPanelToggleCell", @@ -864,24 +1239,6 @@ "description": "Styles applied to the root of the input component.", "isGlobal": false }, - { - "key": "filler", - "className": "MuiDataGrid-filler", - "description": "Styles applied to the filler row.", - "isGlobal": false - }, - { - "key": "filler--pinnedLeft", - "className": "MuiDataGrid-filler--pinnedLeft", - "description": "Styles applied to the filler row pinned left section.", - "isGlobal": false - }, - { - "key": "filler--pinnedRight", - "className": "MuiDataGrid-filler--pinnedRight", - "description": "Styles applied to the filler row pinned right section.", - "isGlobal": false - }, { "key": "filterForm", "className": "MuiDataGrid-filterForm", @@ -1026,12 +1383,6 @@ "description": "Styles applied to the overlay wrapper inner element.", "isGlobal": false }, - { - "key": "panel", - "className": "MuiDataGrid-panel", - "description": "Styles applied to the panel element.", - "isGlobal": false - }, { "key": "panelContent", "className": "MuiDataGrid-panelContent", @@ -1062,24 +1413,6 @@ "description": "Styles applied to the paper element.", "isGlobal": false }, - { - "key": "pinnedColumnHeaders", - "className": "MuiDataGrid-pinnedColumnHeaders", - "description": "Styles applied to the pinned column headers.", - "isGlobal": false - }, - { - "key": "pinnedColumnHeaders--left", - "className": "MuiDataGrid-pinnedColumnHeaders--left", - "description": "Styles applied to the left pinned column headers.", - "isGlobal": false - }, - { - "key": "pinnedColumnHeaders--right", - "className": "MuiDataGrid-pinnedColumnHeaders--right", - "description": "Styles applied to the right pinned column headers.", - "isGlobal": false - }, { "key": "pinnedColumns", "className": "MuiDataGrid-pinnedColumns", @@ -1140,12 +1473,6 @@ "description": "Styles applied to the root element when user selection is disabled.", "isGlobal": false }, - { - "key": "row", - "className": "MuiDataGrid-row", - "description": "Styles applied to the row element.", - "isGlobal": false - }, { "key": "row--detailPanelExpanded", "className": "MuiDataGrid-row--detailPanelExpanded", @@ -1329,7 +1656,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.js b/docs/pages/x/api/data-grid/grid-actions-col-def.js index 6756e560aee6..7ca29be5152e 100644 --- a/docs/pages/x/api/data-grid/grid-actions-col-def.js +++ b/docs/pages/x/api/data-grid/grid-actions-col-def.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-actions-col-def.md?@mui/markdown'; +import * as pageProps from './grid-actions-col-def.md?muiMarkdown'; export default function Page() { return ; 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 af3663b0805c..e1f9daf908f4 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,11 +29,12 @@ 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. | | disableReorder? | boolean | false | If `true`, this column cannot be reordered. | +| display? | 'text' \| 'flex' | | Display mode for the cell:
- 'text': For text-based cells (default)
- 'flex': For cells with HTMLElement children | | editable? | boolean | false | If `true`, the cells of the column are editable. | | field | string | | The column identifier. It's used to map with GridRowModel values. | | filterable? | boolean | true | If `true`, the column is filterable. | @@ -41,8 +42,9 @@ import { GridActionsColDef } from '@mui/x-data-grid'; | flex? | number | | If set, it indicates that a column has fluid width. Range [0, ∞). | | 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. | +| getSortComparator? | (sortDirection: GridSortDirection) => GridComparatorFn<V> \| undefined | | Allows to use a different comparator function depending on the sort direction.
Takes precedence over `sortComparator`. | | 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,20 +52,20 @@ 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. | | renderEditCell? | (params: GridRenderEditCellParams<R, V, F>) => React.ReactNode | | Allows to override the component rendered in edit cell mode for this column. | | renderHeader? | (params: GridColumnHeaderParams<R, V, F>) => React.ReactNode | | Allows to render a component in the column header cell. | -| renderHeaderFilter? [](/x/introduction/licensing/#pro-plan) | (params: GridHeaderFilterCellProps) => React.ReactNode | | Allows to render a component in the column header filter cell. | +| renderHeaderFilter? [](/x/introduction/licensing/#pro-plan) | (params: GridRenderHeaderFilterProps) => React.ReactNode | | Allows to render a component in the column header filter cell. | | resizable? | boolean | true | If `true`, the column is resizable. | | sortable? | boolean | true | If `true`, the column is sortable. | | 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-aggregation-function.js b/docs/pages/x/api/data-grid/grid-aggregation-function.js index 87645327d96f..c2255c2117ca 100644 --- a/docs/pages/x/api/data-grid/grid-aggregation-function.js +++ b/docs/pages/x/api/data-grid/grid-aggregation-function.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-aggregation-function.md?@mui/markdown'; +import * as pageProps from './grid-aggregation-function.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-api.js b/docs/pages/x/api/data-grid/grid-api.js index 96ffa85910a7..3ec62f326b40 100644 --- a/docs/pages/x/api/data-grid/grid-api.js +++ b/docs/pages/x/api/data-grid/grid-api.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-api.md?@mui/markdown'; +import * as pageProps from './grid-api.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md index 67b125ccb392..cf6a2bdbf7de 100644 --- a/docs/pages/x/api/data-grid/grid-api.md +++ b/docs/pages/x/api/data-grid/grid-api.md @@ -27,7 +27,7 @@ import { GridApi } from '@mui/x-data-grid'; | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | addRowGroupingCriteria [](/x/introduction/licensing/#premium-plan) | (groupingCriteriaField: string, groupingIndex?: number) => void | Adds the field to the row grouping model. | | applySorting | () => void | Applies the current sort model to the rows. | -| autosizeColumns [](/x/introduction/licensing/#pro-plan) | (options?: GridAutosizeOptions) => Promise<void> | Auto-size the columns of the grid based on the cells' content and the space available. | +| autosizeColumns | (options?: GridAutosizeOptions) => Promise<void> | Auto-size the columns of the grid based on the cells' content and the space available. | | deleteFilterItem | (item: GridFilterItem) => void | Deletes a [GridFilterItem](/x/api/data-grid/grid-filter-item/). | | exportDataAsCsv | (options?: GridCsvExportOptions) => void | Downloads and exports a CSV of the grid's data. | | exportDataAsExcel [](/x/introduction/licensing/#premium-plan) | (options?: GridExcelExportOptions) => Promise<void> | Downloads and exports an Excel file of the grid's data. | @@ -116,6 +116,7 @@ import { GridApi } from '@mui/x-data-grid'; | setPinnedColumns [](/x/introduction/licensing/#pro-plan) | (pinnedColumns: GridPinnedColumnFields) => void | Changes the pinned columns. | | setQuickFilterValues | (values: any[]) => void | Set the quick filter values to the one given by `values` | | setRowChildrenExpansion [](/x/introduction/licensing/#pro-plan) | (id: GridRowId, isExpanded: boolean) => void | Expand or collapse a row children. | +| setRowCount | (rowCount: number) => void | Sets the `rowCount` to a new value. | | setRowGroupingCriteriaIndex [](/x/introduction/licensing/#premium-plan) | (groupingCriteriaField: string, groupingIndex: number) => void | Sets the grouping index of a grouping criteria. | | setRowGroupingModel [](/x/introduction/licensing/#premium-plan) | (model: GridRowGroupingModel) => void | Sets the columns to use as grouping criteria. | | setRowIndex [](/x/introduction/licensing/#pro-plan) | (rowId: GridRowId, targetIndex: number) => void | Moves a row from its original position to the position given by `targetIndex`. | diff --git a/docs/pages/x/api/data-grid/grid-cell-params.js b/docs/pages/x/api/data-grid/grid-cell-params.js index e87eb30e5242..aa00cd536832 100644 --- a/docs/pages/x/api/data-grid/grid-cell-params.js +++ b/docs/pages/x/api/data-grid/grid-cell-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-cell-params.md?@mui/markdown'; +import * as pageProps from './grid-cell-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-col-def.js b/docs/pages/x/api/data-grid/grid-col-def.js index 7528cd203c41..01c423562290 100644 --- a/docs/pages/x/api/data-grid/grid-col-def.js +++ b/docs/pages/x/api/data-grid/grid-col-def.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-col-def.md?@mui/markdown'; +import * as pageProps from './grid-col-def.md?muiMarkdown'; export default function Page() { return ; 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 c05e09badc9c..b8927910ff2e 100644 --- a/docs/pages/x/api/data-grid/grid-col-def.md +++ b/docs/pages/x/api/data-grid/grid-col-def.md @@ -29,19 +29,21 @@ 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. | | disableReorder? | boolean | false | If `true`, this column cannot be reordered. | +| display? | 'text' \| 'flex' | | Display mode for the cell:
- 'text': For text-based cells (default)
- 'flex': For cells with HTMLElement children | | editable? | boolean | false | If `true`, the cells of the column are editable. | | field | string | | The column identifier. It's used to map with GridRowModel values. | | filterable? | boolean | true | If `true`, the column is filterable. | | filterOperators? | GridFilterOperator<R, V, F>[] | | Allows setting the filter operators for this column. | | 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. | +| getSortComparator? | (sortDirection: GridSortDirection) => GridComparatorFn<V> \| undefined | | Allows to use a different comparator function depending on the sort direction.
Takes precedence over `sortComparator`. | | 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,20 +51,20 @@ 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. | | renderEditCell? | (params: GridRenderEditCellParams<R, V, F>) => React.ReactNode | | Allows to override the component rendered in edit cell mode for this column. | | renderHeader? | (params: GridColumnHeaderParams<R, V, F>) => React.ReactNode | | Allows to render a component in the column header cell. | -| renderHeaderFilter? [](/x/introduction/licensing/#pro-plan) | (params: GridHeaderFilterCellProps) => React.ReactNode | | Allows to render a component in the column header filter cell. | +| renderHeaderFilter? [](/x/introduction/licensing/#pro-plan) | (params: GridRenderHeaderFilterProps) => React.ReactNode | | Allows to render a component in the column header filter cell. | | resizable? | boolean | true | If `true`, the column is resizable. | | sortable? | boolean | true | If `true`, the column is sortable. | | 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-csv-export-options.js b/docs/pages/x/api/data-grid/grid-csv-export-options.js index 12edbd4d9caf..606363051651 100644 --- a/docs/pages/x/api/data-grid/grid-csv-export-options.js +++ b/docs/pages/x/api/data-grid/grid-csv-export-options.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-csv-export-options.md?@mui/markdown'; +import * as pageProps from './grid-csv-export-options.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-excel-export-options.js b/docs/pages/x/api/data-grid/grid-excel-export-options.js index 8aa0941180c9..8807a36df2fe 100644 --- a/docs/pages/x/api/data-grid/grid-excel-export-options.js +++ b/docs/pages/x/api/data-grid/grid-excel-export-options.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-excel-export-options.md?@mui/markdown'; +import * as pageProps from './grid-excel-export-options.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-export-state-params.js b/docs/pages/x/api/data-grid/grid-export-state-params.js index e9bf971a63e4..e1f093bdb24e 100644 --- a/docs/pages/x/api/data-grid/grid-export-state-params.js +++ b/docs/pages/x/api/data-grid/grid-export-state-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-export-state-params.md?@mui/markdown'; +import * as pageProps from './grid-export-state-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-filter-form.js b/docs/pages/x/api/data-grid/grid-filter-form.js index 1d2c854371ac..32132e6fc520 100644 --- a/docs/pages/x/api/data-grid/grid-filter-form.js +++ b/docs/pages/x/api/data-grid/grid-filter-form.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './grid-filter-form.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { 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 d7615441eb93..8c9176f37e49 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-item.js b/docs/pages/x/api/data-grid/grid-filter-item.js index 7a5c021d7bb4..0e496ac37ad7 100644 --- a/docs/pages/x/api/data-grid/grid-filter-item.js +++ b/docs/pages/x/api/data-grid/grid-filter-item.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-filter-item.md?@mui/markdown'; +import * as pageProps from './grid-filter-item.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-filter-model.js b/docs/pages/x/api/data-grid/grid-filter-model.js index 101f8899005c..4e4fb6f1cfe4 100644 --- a/docs/pages/x/api/data-grid/grid-filter-model.js +++ b/docs/pages/x/api/data-grid/grid-filter-model.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-filter-model.md?@mui/markdown'; +import * as pageProps from './grid-filter-model.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-filter-operator.js b/docs/pages/x/api/data-grid/grid-filter-operator.js index 777de2ebb010..6f8a94320880 100644 --- a/docs/pages/x/api/data-grid/grid-filter-operator.js +++ b/docs/pages/x/api/data-grid/grid-filter-operator.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-filter-operator.md?@mui/markdown'; +import * as pageProps from './grid-filter-operator.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-filter-panel.js b/docs/pages/x/api/data-grid/grid-filter-panel.js index 433dcb578f95..67a6a124d4e3 100644 --- a/docs/pages/x/api/data-grid/grid-filter-panel.js +++ b/docs/pages/x/api/data-grid/grid-filter-panel.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './grid-filter-panel.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { 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 94392094ef5b..4afba52a6252 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-pagination-api.json b/docs/pages/x/api/data-grid/grid-pagination-api.json index e756435855c1..b782ce762515 100644 --- a/docs/pages/x/api/data-grid/grid-pagination-api.json +++ b/docs/pages/x/api/data-grid/grid-pagination-api.json @@ -16,6 +16,11 @@ "name": "setPaginationModel", "description": "Sets the paginationModel to a new value.", "type": "(model: GridPaginationModel) => void" + }, + { + "name": "setRowCount", + "description": "Sets the rowCount to a new value.", + "type": "(rowCount: number) => void" } ] } diff --git a/docs/pages/x/api/data-grid/grid-print-export-options.js b/docs/pages/x/api/data-grid/grid-print-export-options.js index 96b09b359c77..bf0ba5f8800d 100644 --- a/docs/pages/x/api/data-grid/grid-print-export-options.js +++ b/docs/pages/x/api/data-grid/grid-print-export-options.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-print-export-options.md?@mui/markdown'; +import * as pageProps from './grid-print-export-options.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-row-class-name-params.js b/docs/pages/x/api/data-grid/grid-row-class-name-params.js index aedfbd3ad613..02f1a861f343 100644 --- a/docs/pages/x/api/data-grid/grid-row-class-name-params.js +++ b/docs/pages/x/api/data-grid/grid-row-class-name-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-row-class-name-params.md?@mui/markdown'; +import * as pageProps from './grid-row-class-name-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-row-params.js b/docs/pages/x/api/data-grid/grid-row-params.js index 7a145e372f37..e963d9494bf6 100644 --- a/docs/pages/x/api/data-grid/grid-row-params.js +++ b/docs/pages/x/api/data-grid/grid-row-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-row-params.md?@mui/markdown'; +import * as pageProps from './grid-row-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-row-spacing-params.js b/docs/pages/x/api/data-grid/grid-row-spacing-params.js index bad1db240627..4e3be6c53759 100644 --- a/docs/pages/x/api/data-grid/grid-row-spacing-params.js +++ b/docs/pages/x/api/data-grid/grid-row-spacing-params.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-row-spacing-params.md?@mui/markdown'; +import * as pageProps from './grid-row-spacing-params.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/grid-single-select-col-def.js b/docs/pages/x/api/data-grid/grid-single-select-col-def.js index 30a321aa9294..bb9fedb9b879 100644 --- a/docs/pages/x/api/data-grid/grid-single-select-col-def.js +++ b/docs/pages/x/api/data-grid/grid-single-select-col-def.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './grid-single-select-col-def.md?@mui/markdown'; +import * as pageProps from './grid-single-select-col-def.md?muiMarkdown'; export default function Page() { return ; 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 4b3ce7f21236..b42076119a95 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,11 +29,12 @@ 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. | | disableReorder? | boolean | false | If `true`, this column cannot be reordered. | +| display? | 'text' \| 'flex' | | Display mode for the cell:
- 'text': For text-based cells (default)
- 'flex': For cells with HTMLElement children | | editable? | boolean | false | If `true`, the cells of the column are editable. | | field | string | | The column identifier. It's used to map with GridRowModel values. | | filterable? | boolean | true | If `true`, the column is filterable. | @@ -42,8 +43,9 @@ import { GridSingleSelectColDef } from '@mui/x-data-grid'; | 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. | | 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. | +| getSortComparator? | (sortDirection: GridSortDirection) => GridComparatorFn<V> \| undefined | | Allows to use a different comparator function depending on the sort direction.
Takes precedence over `sortComparator`. | | 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,21 +53,21 @@ 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. | | renderEditCell? | (params: GridRenderEditCellParams<R, V, F>) => React.ReactNode | | Allows to override the component rendered in edit cell mode for this column. | | renderHeader? | (params: GridColumnHeaderParams<R, V, F>) => React.ReactNode | | Allows to render a component in the column header cell. | -| renderHeaderFilter? [](/x/introduction/licensing/#pro-plan) | (params: GridHeaderFilterCellProps) => React.ReactNode | | Allows to render a component in the column header filter cell. | +| renderHeaderFilter? [](/x/introduction/licensing/#pro-plan) | (params: GridRenderHeaderFilterProps) => React.ReactNode | | Allows to render a component in the column header filter cell. | | resizable? | boolean | true | If `true`, the column is resizable. | | sortable? | boolean | true | If `true`, the column is sortable. | | 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.js b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js index 14bb1387a762..12ffb257502d 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './grid-toolbar-quick-filter.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { 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 83c51a1932ba..ae73f843b26b 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/data-grid/index.js b/docs/pages/x/api/data-grid/index.js index d9d08f84a887..217644aebd17 100644 --- a/docs/pages/x/api/data-grid/index.js +++ b/docs/pages/x/api/data-grid/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './index.md?@mui/markdown'; +import * as pageProps from './index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json index f3fd67789100..1140b1bf1d94 100644 --- a/docs/pages/x/api/data-grid/selectors.json +++ b/docs/pages/x/api/data-grid/selectors.json @@ -124,15 +124,9 @@ }, { "name": "gridDensitySelector", - "returnType": "GridDensityState", - "description": "", - "supportsApiRef": false - }, - { - "name": "gridDensityValueSelector", "returnType": "GridDensity", "description": "", - "supportsApiRef": true + "supportsApiRef": false }, { "name": "gridDetailPanelExpandedRowIdsSelector", @@ -264,6 +258,12 @@ "description": "", "supportsApiRef": true }, + { + "name": "gridHeaderFilteringEnabledSelector", + "returnType": "boolean", + "description": "", + "supportsApiRef": true + }, { "name": "gridHeaderFilteringMenuSelector", "returnType": "string | null", @@ -318,6 +318,13 @@ "description": "Get the pagination model", "supportsApiRef": true }, + { + "name": "gridPaginationRowCountSelector", + "returnType": "number", + "category": "Pagination", + "description": "Get the row count", + "supportsApiRef": true + }, { "name": "gridPaginationRowRangeSelector", "returnType": "{ firstRowIndex: number; lastRowIndex: number } | null", diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index f0031bb5be3d..72f1cd795719 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -1,6 +1,7 @@ { "props": { "autoFocus": { "type": { "name": "bool" } }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "dayOfWeekFormatter": { "type": { "name": "func" }, "default": "(_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()", @@ -10,13 +11,13 @@ "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" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "focusedView": { "type": { "name": "enum", @@ -24,8 +25,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 +69,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 +127,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 46e896fb433f..61aff54380b4 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,14 +63,14 @@ }, "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" }, "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -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-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json index 8e565400a1ea..aa2ee2a36df1 100644 --- a/docs/pages/x/api/date-pickers/date-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-picker-toolbar.json @@ -12,7 +12,22 @@ }, "required": true }, + "views": { + "type": { + "name": "arrayOf", + "description": "Array<'day'
| 'month'
| 'year'>" + }, + "required": true + }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" } }, diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 76b6407274a7..c615567fe829 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)'" @@ -25,7 +25,7 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -111,7 +111,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -160,7 +160,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -280,8 +280,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { 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 afa6e86ecdf7..0c0a1d51c6b5 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -9,6 +9,7 @@ "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "2" }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "currentMonthCalendarPosition": { "type": { "name": "enum", "description": "1
| 2
| 3" }, "default": "1" @@ -26,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" }, @@ -34,11 +35,11 @@ "disableHighlightToday": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "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 +77,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 +119,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 03725816fc5a..fc19b9e50ec6 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-toolbar.json b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json index 8492bb0aa251..8e907ede0223 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json @@ -1,6 +1,24 @@ { "props": { + "onViewChange": { + "type": { "name": "func" }, + "required": true, + "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } + }, + "view": { "type": { "name": "enum", "description": "'day'" }, "required": true }, + "views": { + "type": { "name": "arrayOf", "description": "Array<'day'>" }, + "required": true + }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" } }, 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 09c5a61c9007..99612ca1ca76 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)'" @@ -39,7 +39,7 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -112,7 +112,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -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", @@ -237,8 +237,8 @@ }, { "name": "textField", - "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { 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 2ccfcbcc7dd5..c7778236192f 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,14 +70,14 @@ }, "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" }, "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -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-tabs.json b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json index 447813119c4e..1b401f930604 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json +++ b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json @@ -18,6 +18,13 @@ "type": { "name": "bool" }, "default": "`window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`" }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, "timeIcon": { "type": { "name": "node" }, "default": "Time" } }, "name": "DateTimePickerTabs", diff --git a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json index 7b8e9b350f17..5e4b5e44022b 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json @@ -5,8 +5,22 @@ "required": true, "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] } }, + "views": { + "type": { + "name": "arrayOf", + "description": "Array<'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'>" + }, + "required": true + }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" }, "toolbarTitle": { "type": { "name": "node" } }, 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 5416d121b877..1588c746f832 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)'" @@ -28,7 +28,7 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -119,7 +119,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -185,7 +185,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -314,8 +314,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json index 8002de5133e2..ddc60b796d52 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json @@ -18,6 +18,13 @@ "type": { "name": "bool" }, "default": "`window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`" }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, "timeIcon": { "type": { "name": "element" }, "default": "TimeIcon" } }, "name": "DateTimeRangePickerTabs", diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json index 01c430ed7759..c7b155134c01 100644 --- a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json @@ -12,7 +12,22 @@ }, "required": true }, + "views": { + "type": { + "name": "arrayOf", + "description": "Array<'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'seconds'>" + }, + "required": true + }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" } }, 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 55d6d1ee2f79..1c8645cf410e 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)'" @@ -41,24 +41,22 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, "default": "\"dense\"" }, - "inputRef": { - "type": { "name": "union", "description": "func
| { current?: object }" } - }, + "inputRef": { "type": { "name": "custom", "description": "ref" } }, "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 +114,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": { @@ -131,7 +129,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -181,7 +179,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "view": { "type": { "name": "enum", @@ -308,8 +306,8 @@ }, { "name": "textField", - "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { @@ -369,9 +367,12 @@ } ], "classes": [], + "spread": false, + "themeDefaultProps": false, "muiName": "MuiDateTimeRangePicker", + "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } 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 69ab72f56f8b..8054ed48893c 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -14,14 +14,14 @@ "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" }, "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -107,7 +107,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -156,7 +156,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -276,8 +276,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { 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 f846abac5f69..56ef916cd278 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" }, @@ -35,7 +35,7 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -108,7 +108,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -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", @@ -233,8 +233,8 @@ }, { "name": "textField", - "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { 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 854019a2a091..bdc527c14f28 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" }, @@ -24,7 +24,7 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -115,7 +115,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -181,7 +181,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -310,8 +310,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { 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 90357b9228f5..e17818a31797 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" }, @@ -37,24 +37,22 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, "default": "\"dense\"" }, - "inputRef": { - "type": { "name": "union", "description": "func
| { current?: object }" } - }, + "inputRef": { "type": { "name": "custom", "description": "ref" } }, "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 +110,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": { @@ -127,7 +125,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -177,7 +175,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "view": { "type": { "name": "enum", @@ -304,8 +302,8 @@ }, { "name": "textField", - "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { @@ -347,9 +345,12 @@ { "name": "field", "description": "", "class": null } ], "classes": [], + "spread": false, + "themeDefaultProps": false, "muiName": "MuiDesktopDateTimeRangePicker", + "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } 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 1b91794a34cc..3437b5b664ee 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,13 +71,13 @@ "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": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableTime": { @@ -118,7 +118,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -213,8 +213,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { diff --git a/docs/pages/x/api/date-pickers/digital-clock.json b/docs/pages/x/api/date-pickers/digital-clock.json index 8f3d3af0be1c..ab41bb11244e 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/index.js b/docs/pages/x/api/date-pickers/index.js index d9d08f84a887..217644aebd17 100644 --- a/docs/pages/x/api/date-pickers/index.js +++ b/docs/pages/x/api/date-pickers/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './index.md?@mui/markdown'; +import * as pageProps from './index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/api/date-pickers/localization-provider.json b/docs/pages/x/api/date-pickers/localization-provider.json index ce3bb20c5258..f7950552319e 100644 --- a/docs/pages/x/api/date-pickers/localization-provider.json +++ b/docs/pages/x/api/date-pickers/localization-provider.json @@ -11,7 +11,7 @@ "dateFormats": { "type": { "name": "shape", - "description": "{ dayOfMonth?: string, fullDate?: string, fullTime?: string, fullTime12h?: string, fullTime24h?: string, hours12h?: string, hours24h?: string, keyboardDate?: string, keyboardDateTime?: string, keyboardDateTime12h?: string, keyboardDateTime24h?: string, meridiem?: string, minutes?: string, month?: string, monthShort?: string, normalDate?: string, normalDateWithWeekday?: string, seconds?: string, shortDate?: string, weekday?: string, weekdayShort?: string, year?: string }" + "description": "{ dayOfMonth?: string, dayOfMonthFull?: string, fullDate?: string, fullTime?: string, fullTime12h?: string, fullTime24h?: string, hours12h?: string, hours24h?: string, keyboardDate?: string, keyboardDateTime?: string, keyboardDateTime12h?: string, keyboardDateTime24h?: string, meridiem?: string, minutes?: string, month?: string, monthShort?: string, normalDate?: string, normalDateWithWeekday?: string, seconds?: string, shortDate?: string, weekday?: string, weekdayShort?: string, year?: string }" } }, "dateLibInstance": { "type": { "name": "any" } }, 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 d519138df7f8..9c2d12c3887c 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -14,14 +14,14 @@ "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" }, "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -107,7 +107,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -156,7 +156,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -258,8 +258,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { 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 88e6f7786dc1..4e4b02c80de7 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" }, @@ -31,7 +31,7 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -104,7 +104,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -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", @@ -200,6 +200,12 @@ "default": "ArrowDropDown", "class": null }, + { + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", @@ -229,8 +235,8 @@ }, { "name": "textField", - "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { @@ -245,12 +251,6 @@ "default": "IconButton", "class": null }, - { - "name": "dialog", - "description": "Custom component for the dialog inside which the views are rendered on mobile.", - "default": "PickersModalDialogRoot", - "class": null - }, { "name": "mobilePaper", "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", 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 df40abdc0f88..a31d556420df 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" }, @@ -24,7 +24,7 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, @@ -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": { @@ -115,7 +115,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -172,7 +172,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -283,8 +283,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { 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 688f24d49b0d..2b82a772e23a 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" }, @@ -33,24 +33,22 @@ "disableOpenPicker": { "type": { "name": "bool" }, "default": "false" }, "disablePast": { "type": { "name": "bool" }, "default": "false" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "format": { "type": { "name": "string" } }, "formatDensity": { "type": { "name": "enum", "description": "'dense'
| 'spacious'" }, "default": "\"dense\"" }, - "inputRef": { - "type": { "name": "union", "description": "func
| { current?: object }" } - }, + "inputRef": { "type": { "name": "custom", "description": "ref" } }, "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 +106,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": { @@ -123,7 +121,7 @@ "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -173,7 +171,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "value": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "view": { "type": { "name": "enum", @@ -271,6 +269,12 @@ "default": "MenuItem from '@mui/material'", "class": null }, + { + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot", + "class": null + }, { "name": "actionBar", "description": "Custom component for the action bar, it is placed below the picker views.", @@ -300,8 +304,8 @@ }, { "name": "textField", - "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { @@ -316,12 +320,6 @@ "default": "IconButton", "class": null }, - { - "name": "dialog", - "description": "Custom component for the dialog inside which the views are rendered on mobile.", - "default": "PickersModalDialogRoot", - "class": null - }, { "name": "mobilePaper", "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", @@ -337,9 +335,12 @@ { "name": "field", "description": "", "class": null } ], "classes": [], + "spread": false, + "themeDefaultProps": false, "muiName": "MuiMobileDateTimeRangePicker", + "forwardsRefTo": "HTMLDivElement", "filename": "/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } 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 59748eba2605..c1cc22aecfaf 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,13 +71,13 @@ "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": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableTime": { @@ -109,7 +109,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -183,8 +183,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 55c00405e671..2fe02db3fe45 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 43fa71b3f73f..6ac27db9ea70 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,9 @@ { "props": { + "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { "name": "union", @@ -18,8 +20,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,13 +45,13 @@ }, "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": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -90,7 +92,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 481f133235df..82462976a3f1 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 @@ -1,8 +1,10 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, + "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { "name": "union", @@ -20,12 +22,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,13 +52,13 @@ }, "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": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -105,7 +107,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 9ea14b1bd778..9119c6dcc281 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 @@ -1,8 +1,10 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, + "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, + "defaultValue": { "type": { "name": "arrayOf", "description": "Array<object>" } }, "direction": { "type": { "name": "union", @@ -20,8 +22,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,13 +48,13 @@ }, "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": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableTime": { @@ -93,7 +95,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 f87b4cc0e544..792a65ce1208 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 42e74730e290..1380c63391db 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/pickers-layout.json b/docs/pages/x/api/date-pickers/pickers-layout.json index 48ebd9037c62..f340a4c17beb 100644 --- a/docs/pages/x/api/date-pickers/pickers-layout.json +++ b/docs/pages/x/api/date-pickers/pickers-layout.json @@ -1,5 +1,6 @@ { "props": { + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "orientation": { "type": { "name": "enum", "description": "'landscape'
| 'portrait'" } }, @@ -8,6 +9,13 @@ "type": { "name": "object" }, "default": "{}", "additionalInfo": { "slotsApi": true } + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } } }, "name": "PickersLayout", diff --git a/docs/pages/x/api/date-pickers/pickers-range-calendar-header.js b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.js new file mode 100644 index 000000000000..e2bc950a7650 --- /dev/null +++ b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.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 './pickers-range-calendar-header.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/date-pickers/pickers-range-calendar-header', + false, + /\.\/pickers-range-calendar-header.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json new file mode 100644 index 000000000000..fbf2f5e605c2 --- /dev/null +++ b/docs/pages/x/api/date-pickers/pickers-range-calendar-header.json @@ -0,0 +1,70 @@ +{ + "props": { + "calendars": { + "type": { "name": "enum", "description": "1
| 2
| 3" }, + "required": true + }, + "month": { "type": { "name": "object" }, "required": true }, + "monthIndex": { "type": { "name": "number" }, "required": true }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "format": { + "type": { "name": "string" }, + "default": "`${adapter.formats.month} ${adapter.formats.year}`" + }, + "slotProps": { "type": { "name": "object" }, "default": "{}" }, + "slots": { + "type": { "name": "object" }, + "default": "{}", + "additionalInfo": { "slotsApi": true } + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + } + }, + "name": "PickersRangeCalendarHeader", + "imports": [ + "import { PickersRangeCalendarHeader } from '@mui/x-date-pickers-pro/PickersRangeCalendarHeader';", + "import { PickersRangeCalendarHeader } from '@mui/x-date-pickers-pro';" + ], + "classes": [ + { + "key": "label", + "className": "MuiPickersRangeCalendarHeader-label", + "description": "Styles applied to the label element.", + "isGlobal": false + }, + { + "key": "labelContainer", + "className": "MuiPickersRangeCalendarHeader-labelContainer", + "description": "Styles applied to the label container element.", + "isGlobal": false + }, + { + "key": "root", + "className": "MuiPickersRangeCalendarHeader-root", + "description": "Styles applied to the root element.", + "isGlobal": false + }, + { + "key": "switchViewButton", + "className": "MuiPickersRangeCalendarHeader-switchViewButton", + "description": "Styles applied to the switch view button element.", + "isGlobal": false + }, + { + "key": "switchViewIcon", + "className": "MuiPickersRangeCalendarHeader-switchViewIcon", + "description": "Styles applied to the switch view icon element.", + "isGlobal": false + } + ], + "muiName": "MuiPickersRangeCalendarHeader", + "filename": "/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} 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 bf3556552fea..697d60d0ef89 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,8 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, + "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 +37,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,14 +64,14 @@ }, "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" }, "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -107,7 +108,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 2e611014ece1..3fe2a8097778 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,8 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, + "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 +39,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,14 +71,14 @@ }, "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" }, "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableDate": { @@ -122,7 +123,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 4e6f7c5e1134..d04206f9390c 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,8 @@ }, "default": "'primary'" }, - "defaultValue": { "type": { "name": "arrayOf", "description": "Array<any>" } }, + "dateSeparator": { "type": { "name": "string" }, "default": "\"–\"" }, + "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 +39,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,14 +67,14 @@ }, "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" }, "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableTime": { @@ -110,7 +111,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 32cf7df69729..07823b0be25c 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" }, @@ -20,11 +20,11 @@ "default": "\"mobile\"" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "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 13df18576c7c..e4c0366f38fd 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" }, @@ -34,11 +34,11 @@ "default": "\"mobile\"" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "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 de69515b0267..90e73442433f 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" }, @@ -23,15 +23,15 @@ "default": "\"mobile\"" }, "displayWeekNumber": { "type": { "name": "bool" } }, - "fixedWeekNumber": { "type": { "name": "number" }, "default": "undefined" }, + "fixedWeekNumber": { "type": { "name": "number" } }, "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 d0995c15ec71..5cf72df9cbf4 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 86d8ec9214f7..f569a5c964f9 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 ad24b2bd2a52..641529f95fd4 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,14 +66,14 @@ }, "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" }, "selectedSections": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableTime": { @@ -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-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json index 423df6f45537..0ac030abb5f1 100644 --- a/docs/pages/x/api/date-pickers/time-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/time-picker-toolbar.json @@ -12,7 +12,22 @@ }, "required": true }, + "views": { + "type": { + "name": "arrayOf", + "description": "Array<'hours'
| 'meridiem'
| 'minutes'
| 'seconds'>" + }, + "required": true + }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" } }, diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index 071c5ad8f4c2..1fd742141aa6 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,13 +75,13 @@ "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": { "type": { "name": "union", - "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }" + "description": "'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number" } }, "shouldDisableTime": { @@ -122,7 +122,7 @@ "text": "timezones documentation" } }, - "value": { "type": { "name": "any" } }, + "value": { "type": { "name": "object" } }, "view": { "type": { "name": "enum", @@ -217,8 +217,8 @@ }, { "name": "textField", - "description": "Form control with an input to render the value inside the default field.\nReceives the same props as `@mui/material/TextField`.", - "default": "TextField from '@mui/material'", + "description": "Form control with an input to render the value inside the default field.", + "default": "TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.", "class": null }, { diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index 2d97dfcb6604..cd8b9dc24feb 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/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json index 891044b6b187..181ae591f91c 100644 --- a/docs/pages/x/api/tree-view/rich-tree-view.json +++ b/docs/pages/x/api/tree-view/rich-tree-view.json @@ -1,14 +1,17 @@ { "props": { + "apiRef": { + "type": { "name": "shape", "description": "{ current?: { focusItem: func, getItem: func } }" } + }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultExpandedNodes": { + "defaultExpandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" }, "default": "[]" }, - "defaultSelectedNodes": { "type": { "name": "any" }, "default": "[]" }, + "defaultSelectedItems": { "type": { "name": "any" }, "default": "[]" }, "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" }, "disableSelection": { "type": { "name": "bool" }, "default": "false" }, - "expandedNodes": { "type": { "name": "arrayOf", "description": "Array<string>" } }, + "expandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" } }, "getItemId": { "type": { "name": "func" }, "default": "`(item) => item.id`", @@ -37,42 +40,42 @@ } }, "multiSelect": { "type": { "name": "bool" }, "default": "false" }, - "onExpandedNodesChange": { + "onExpandedItemsChange": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeIds: array) => void", - "describedArgs": ["event", "nodeIds"] + "type": "function(event: React.SyntheticEvent, itemIds: array) => void", + "describedArgs": ["event", "itemIds"] } }, - "onNodeExpansionToggle": { + "onItemExpansionToggle": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: array, isExpanded: array) => void", - "describedArgs": ["event", "nodeId", "isExpanded"] + "type": "function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void", + "describedArgs": ["event", "itemId", "isExpanded"] } }, - "onNodeFocus": { + "onItemFocus": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: string, value: string) => void", - "describedArgs": ["event", "nodeId", "value"] + "type": "function(event: React.SyntheticEvent, itemId: string, value: string) => void", + "describedArgs": ["event", "itemId", "value"] } }, - "onNodeSelectionToggle": { + "onItemSelectionToggle": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: array, isSelected: array) => void", - "describedArgs": ["event", "nodeId", "isSelected"] + "type": "function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void", + "describedArgs": ["event", "itemId", "isSelected"] } }, - "onSelectedNodesChange": { + "onSelectedItemsChange": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeIds: Array | string) => void", - "describedArgs": ["event", "nodeIds"] + "type": "function(event: React.SyntheticEvent, itemIds: Array | string) => void", + "describedArgs": ["event", "itemIds"] } }, - "selectedNodes": { "type": { "name": "any" } }, + "selectedItems": { "type": { "name": "any" } }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, @@ -128,6 +131,6 @@ "forwardsRefTo": "HTMLUListElement", "filename": "/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json index f24417dee5b0..5957aad77056 100644 --- a/docs/pages/x/api/tree-view/simple-tree-view.json +++ b/docs/pages/x/api/tree-view/simple-tree-view.json @@ -1,53 +1,56 @@ { "props": { + "apiRef": { + "type": { "name": "shape", "description": "{ current?: { focusItem: func, getItem: func } }" } + }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultExpandedNodes": { + "defaultExpandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" }, "default": "[]" }, - "defaultSelectedNodes": { "type": { "name": "any" }, "default": "[]" }, + "defaultSelectedItems": { "type": { "name": "any" }, "default": "[]" }, "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" }, "disableSelection": { "type": { "name": "bool" }, "default": "false" }, - "expandedNodes": { "type": { "name": "arrayOf", "description": "Array<string>" } }, + "expandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" } }, "id": { "type": { "name": "string" } }, "multiSelect": { "type": { "name": "bool" }, "default": "false" }, - "onExpandedNodesChange": { + "onExpandedItemsChange": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeIds: array) => void", - "describedArgs": ["event", "nodeIds"] + "type": "function(event: React.SyntheticEvent, itemIds: array) => void", + "describedArgs": ["event", "itemIds"] } }, - "onNodeExpansionToggle": { + "onItemExpansionToggle": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: array, isExpanded: array) => void", - "describedArgs": ["event", "nodeId", "isExpanded"] + "type": "function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void", + "describedArgs": ["event", "itemId", "isExpanded"] } }, - "onNodeFocus": { + "onItemFocus": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: string, value: string) => void", - "describedArgs": ["event", "nodeId", "value"] + "type": "function(event: React.SyntheticEvent, itemId: string, value: string) => void", + "describedArgs": ["event", "itemId", "value"] } }, - "onNodeSelectionToggle": { + "onItemSelectionToggle": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: array, isSelected: array) => void", - "describedArgs": ["event", "nodeId", "isSelected"] + "type": "function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void", + "describedArgs": ["event", "itemId", "isSelected"] } }, - "onSelectedNodesChange": { + "onSelectedItemsChange": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeIds: Array | string) => void", - "describedArgs": ["event", "nodeIds"] + "type": "function(event: React.SyntheticEvent, itemIds: Array | string) => void", + "describedArgs": ["event", "itemIds"] } }, - "selectedNodes": { "type": { "name": "any" } }, + "selectedItems": { "type": { "name": "any" } }, "slotProps": { "type": { "name": "object" } }, "slots": { "type": { "name": "object" }, "additionalInfo": { "slotsApi": true } }, "sx": { @@ -93,6 +96,6 @@ "forwardsRefTo": "HTMLUListElement", "filename": "/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/tree-view/tree-item-2.js b/docs/pages/x/api/tree-view/tree-item-2.js new file mode 100644 index 000000000000..157c5febd2e1 --- /dev/null +++ b/docs/pages/x/api/tree-view/tree-item-2.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 './tree-item-2.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/tree-view/tree-item-2', + false, + /\.\/tree-item-2.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/tree-view/tree-item-2.json b/docs/pages/x/api/tree-view/tree-item-2.json new file mode 100644 index 000000000000..82e77380feb4 --- /dev/null +++ b/docs/pages/x/api/tree-view/tree-item-2.json @@ -0,0 +1,93 @@ +{ + "props": { + "itemId": { "type": { "name": "string" }, "required": true }, + "children": { "type": { "name": "node" } }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "disabled": { "type": { "name": "bool" }, "default": "false" }, + "id": { "type": { "name": "string" } }, + "label": { "type": { "name": "node" } }, + "onFocus": { "type": { "name": "custom", "description": "unsupportedProp" } }, + "slotProps": { "type": { "name": "object" }, "default": "{}" }, + "slots": { + "type": { "name": "object" }, + "default": "{}", + "additionalInfo": { "slotsApi": true } + } + }, + "name": "TreeItem2", + "imports": [ + "import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';", + "import { TreeItem2 } from '@mui/x-tree-view';" + ], + "slots": [ + { + "name": "root", + "description": "The component that renders the root.", + "default": "TreeItem2Root", + "class": "MuiTreeItem2-root" + }, + { + "name": "content", + "description": "The component that renders the content of the item.\n(e.g.: everything related to this item, not to its children).", + "default": "TreeItem2Content", + "class": "MuiTreeItem2-content" + }, + { + "name": "groupTransition", + "description": "The component that renders the children of the item.", + "default": "TreeItem2GroupTransition", + "class": "MuiTreeItem2-groupTransition" + }, + { + "name": "iconContainer", + "description": "The component that renders the icon.", + "default": "TreeItem2IconContainer", + "class": "MuiTreeItem2-iconContainer" + }, + { + "name": "label", + "description": "The component that renders the item label.", + "default": "TreeItem2Label", + "class": "MuiTreeItem2-label" + }, + { "name": "collapseIcon", "description": "The icon used to collapse the node.", "class": null }, + { "name": "expandIcon", "description": "The icon used to expand the node.", "class": null }, + { "name": "endIcon", "description": "The icon displayed next to an end node.", "class": null }, + { + "name": "icon", + "description": "The icon to display next to the tree node's label.", + "class": null + } + ], + "classes": [ + { + "key": "disabled", + "className": "Mui-disabled", + "description": "State class applied to the element when disabled.", + "isGlobal": true + }, + { + "key": "expanded", + "className": "Mui-expanded", + "description": "State class applied to the content element when expanded.", + "isGlobal": true + }, + { + "key": "focused", + "className": "Mui-focused", + "description": "State class applied to the content element when focused.", + "isGlobal": true + }, + { + "key": "selected", + "className": "Mui-selected", + "description": "State class applied to the content element when selected.", + "isGlobal": true + } + ], + "muiName": "MuiTreeItem2", + "filename": "/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index 81a9ed2ce85b..e51cc365b7d3 100644 --- a/docs/pages/x/api/tree-view/tree-item.json +++ b/docs/pages/x/api/tree-view/tree-item.json @@ -1,6 +1,6 @@ { "props": { - "nodeId": { "type": { "name": "string" }, "required": true }, + "itemId": { "type": { "name": "string" }, "required": true }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "ContentComponent": { @@ -23,9 +23,7 @@ "description": "Array<func
| object
| bool>
| func
| object" }, "additionalInfo": { "sx": true } - }, - "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" }, - "TransitionProps": { "type": { "name": "object" } } + } }, "name": "TreeItem", "imports": [ @@ -33,13 +31,19 @@ "import { TreeItem } from '@mui/x-tree-view';" ], "slots": [ - { "name": "collapseIcon", "description": "The icon used to collapse the node.", "class": null }, - { "name": "expandIcon", "description": "The icon used to expand the node.", "class": null }, - { "name": "endIcon", "description": "The icon displayed next to an end node.", "class": null }, + { "name": "collapseIcon", "description": "The icon used to collapse the item.", "class": null }, + { "name": "expandIcon", "description": "The icon used to expand the item.", "class": null }, + { "name": "endIcon", "description": "The icon displayed next to an end item.", "class": null }, { "name": "icon", - "description": "The icon to display next to the tree node's label.", + "description": "The icon to display next to the tree item's label.", "class": null + }, + { + "name": "groupTransition", + "description": "The component that animates to appearance / disappearance of the item's children.", + "default": "TreeItem2Group", + "class": "MuiTreeItem-groupTransition" } ], "classes": [ @@ -67,12 +71,6 @@ "description": "State class applied to the content element when focused.", "isGlobal": true }, - { - "key": "group", - "className": "MuiTreeItem-group", - "description": "Styles applied to the transition component.", - "isGlobal": false - }, { "key": "iconContainer", "className": "MuiTreeItem-iconContainer", @@ -104,6 +102,6 @@ "forwardsRefTo": "HTMLLIElement", "filename": "/packages/x-tree-view/src/TreeItem/TreeItem.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json index 5eb73fe0d4ad..fae8965650e9 100644 --- a/docs/pages/x/api/tree-view/tree-view.json +++ b/docs/pages/x/api/tree-view/tree-view.json @@ -1,53 +1,56 @@ { "props": { + "apiRef": { + "type": { "name": "shape", "description": "{ current?: { focusItem: func, getItem: func } }" } + }, "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultExpandedNodes": { + "defaultExpandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" }, "default": "[]" }, - "defaultSelectedNodes": { "type": { "name": "any" }, "default": "[]" }, + "defaultSelectedItems": { "type": { "name": "any" }, "default": "[]" }, "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" }, "disableSelection": { "type": { "name": "bool" }, "default": "false" }, - "expandedNodes": { "type": { "name": "arrayOf", "description": "Array<string>" } }, + "expandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" } }, "id": { "type": { "name": "string" } }, "multiSelect": { "type": { "name": "bool" }, "default": "false" }, - "onExpandedNodesChange": { + "onExpandedItemsChange": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeIds: array) => void", - "describedArgs": ["event", "nodeIds"] + "type": "function(event: React.SyntheticEvent, itemIds: array) => void", + "describedArgs": ["event", "itemIds"] } }, - "onNodeExpansionToggle": { + "onItemExpansionToggle": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: array, isExpanded: array) => void", - "describedArgs": ["event", "nodeId", "isExpanded"] + "type": "function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void", + "describedArgs": ["event", "itemId", "isExpanded"] } }, - "onNodeFocus": { + "onItemFocus": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: string, value: string) => void", - "describedArgs": ["event", "nodeId", "value"] + "type": "function(event: React.SyntheticEvent, itemId: string, value: string) => void", + "describedArgs": ["event", "itemId", "value"] } }, - "onNodeSelectionToggle": { + "onItemSelectionToggle": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeId: array, isSelected: array) => void", - "describedArgs": ["event", "nodeId", "isSelected"] + "type": "function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void", + "describedArgs": ["event", "itemId", "isSelected"] } }, - "onSelectedNodesChange": { + "onSelectedItemsChange": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent, nodeIds: Array | string) => void", - "describedArgs": ["event", "nodeIds"] + "type": "function(event: React.SyntheticEvent, itemIds: Array | string) => void", + "describedArgs": ["event", "itemIds"] } }, - "selectedNodes": { "type": { "name": "any" } }, + "selectedItems": { "type": { "name": "any" } }, "slotProps": { "type": { "name": "object" } }, "slots": { "type": { "name": "object" }, "additionalInfo": { "slotsApi": true } }, "sx": { diff --git a/docs/pages/x/introduction/index.js b/docs/pages/x/introduction/index.js index eddce3552992..00ae99afc960 100644 --- a/docs/pages/x/introduction/index.js +++ b/docs/pages/x/introduction/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/installation.js b/docs/pages/x/introduction/installation.js index 6076987bb754..29debac122aa 100644 --- a/docs/pages/x/introduction/installation.js +++ b/docs/pages/x/introduction/installation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/installation/installation.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/installation/installation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/licensing.js b/docs/pages/x/introduction/licensing.js index 2376c5ace5c2..a6b125f3cb0f 100644 --- a/docs/pages/x/introduction/licensing.js +++ b/docs/pages/x/introduction/licensing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/licensing/licensing.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/licensing/licensing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/roadmap.js b/docs/pages/x/introduction/roadmap.js index 6df07e53a3ff..6f3de3b61eff 100644 --- a/docs/pages/x/introduction/roadmap.js +++ b/docs/pages/x/introduction/roadmap.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/roadmap/roadmap.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/roadmap/roadmap.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/introduction/support.js b/docs/pages/x/introduction/support.js index 46890f3c485c..15552e02d41c 100644 --- a/docs/pages/x/introduction/support.js +++ b/docs/pages/x/introduction/support.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/introduction/support/support.md?@mui/markdown'; +import * as pageProps from 'docsx/data/introduction/support/support.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-charts-v6.js b/docs/pages/x/migration/migration-charts-v6.js index 4ba678d24986..721617a21c2f 100644 --- a/docs/pages/x/migration/migration-charts-v6.js +++ b/docs/pages/x/migration/migration-charts-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-charts-v6/migration-charts-v6.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-charts-v6/migration-charts-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-data-grid-v4.js b/docs/pages/x/migration/migration-data-grid-v4.js index b296ea65c67d..f3779384ae66 100644 --- a/docs/pages/x/migration/migration-data-grid-v4.js +++ b/docs/pages/x/migration/migration-data-grid-v4.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-data-grid-v4/migration-data-grid-v4.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-data-grid-v4/migration-data-grid-v4.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-data-grid-v5.js b/docs/pages/x/migration/migration-data-grid-v5.js index b8115f074831..e85af9f8f988 100644 --- a/docs/pages/x/migration/migration-data-grid-v5.js +++ b/docs/pages/x/migration/migration-data-grid-v5.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-data-grid-v5/migration-data-grid-v5.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-data-grid-v5/migration-data-grid-v5.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-data-grid-v6.js b/docs/pages/x/migration/migration-data-grid-v6.js index 8ce5141b987e..fa75c908bfc0 100644 --- a/docs/pages/x/migration/migration-data-grid-v6.js +++ b/docs/pages/x/migration/migration-data-grid-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-data-grid-v6/migration-data-grid-v6.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-data-grid-v6/migration-data-grid-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-pickers-lab.js b/docs/pages/x/migration/migration-pickers-lab.js index a210d290ec13..fe467cd46023 100644 --- a/docs/pages/x/migration/migration-pickers-lab.js +++ b/docs/pages/x/migration/migration-pickers-lab.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-pickers-lab/migration-pickers-lab.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-pickers-lab/migration-pickers-lab.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-pickers-v5.js b/docs/pages/x/migration/migration-pickers-v5.js index 4ca852bcef69..033ea7936e04 100644 --- a/docs/pages/x/migration/migration-pickers-v5.js +++ b/docs/pages/x/migration/migration-pickers-v5.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-pickers-v5/migration-pickers-v5.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-pickers-v5/migration-pickers-v5.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-pickers-v6.js b/docs/pages/x/migration/migration-pickers-v6.js index 8f64f9f109e4..1352c597f95e 100644 --- a/docs/pages/x/migration/migration-pickers-v6.js +++ b/docs/pages/x/migration/migration-pickers-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-pickers-v6/migration-pickers-v6.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-pickers-v6/migration-pickers-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-tree-view-lab.js b/docs/pages/x/migration/migration-tree-view-lab.js index c9eae940b456..859d1273373e 100644 --- a/docs/pages/x/migration/migration-tree-view-lab.js +++ b/docs/pages/x/migration/migration-tree-view-lab.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-tree-view-lab/migration-tree-view-lab.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-tree-view-lab/migration-tree-view-lab.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/migration/migration-tree-view-v6.js b/docs/pages/x/migration/migration-tree-view-v6.js index 1ebe531b3f6b..4ff608066da9 100644 --- a/docs/pages/x/migration/migration-tree-view-v6.js +++ b/docs/pages/x/migration/migration-tree-view-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/migration/migration-tree-view-v6/migration-tree-view-v6.md?@mui/markdown'; +import * as pageProps from 'docsx/data/migration/migration-tree-view-v6/migration-tree-view-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/areas-demo.js b/docs/pages/x/react-charts/areas-demo.js index 7c4e36ca78e5..659ea0a6f3cc 100644 --- a/docs/pages/x/react-charts/areas-demo.js +++ b/docs/pages/x/react-charts/areas-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/areas-demo/areas-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/areas-demo/areas-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/axis.js b/docs/pages/x/react-charts/axis.js index bb865f7f75da..b2ba2e083426 100644 --- a/docs/pages/x/react-charts/axis.js +++ b/docs/pages/x/react-charts/axis.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/axis/axis.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/axis/axis.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/bar-demo.js b/docs/pages/x/react-charts/bar-demo.js index 1669aefdb6e9..edfb5ab19d6b 100644 --- a/docs/pages/x/react-charts/bar-demo.js +++ b/docs/pages/x/react-charts/bar-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/bar-demo/bar-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/bar-demo/bar-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/bars.js b/docs/pages/x/react-charts/bars.js index 8f575b3d9819..51f9ab3d034b 100644 --- a/docs/pages/x/react-charts/bars.js +++ b/docs/pages/x/react-charts/bars.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/bars/bars.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/bars/bars.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/components.js b/docs/pages/x/react-charts/components.js index 7f74333487c2..e061d37ded7d 100644 --- a/docs/pages/x/react-charts/components.js +++ b/docs/pages/x/react-charts/components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/components/components.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/components/components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/composition.js b/docs/pages/x/react-charts/composition.js index a49089a51265..20aa86d6acf9 100644 --- a/docs/pages/x/react-charts/composition.js +++ b/docs/pages/x/react-charts/composition.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/composition/composition.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/composition/composition.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/funnel.js b/docs/pages/x/react-charts/funnel.js index 3500b4c849ac..7b0beb682f04 100644 --- a/docs/pages/x/react-charts/funnel.js +++ b/docs/pages/x/react-charts/funnel.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/funnel/funnel.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/funnel/funnel.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/gantt.js b/docs/pages/x/react-charts/gantt.js index e897b8385bb3..083cea9284bb 100644 --- a/docs/pages/x/react-charts/gantt.js +++ b/docs/pages/x/react-charts/gantt.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/gantt/gantt.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/gantt/gantt.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/gauge.js b/docs/pages/x/react-charts/gauge.js index 7234d0343dcc..fad6260b737e 100644 --- a/docs/pages/x/react-charts/gauge.js +++ b/docs/pages/x/react-charts/gauge.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/gauge/gauge.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/gauge/gauge.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/getting-started.js b/docs/pages/x/react-charts/getting-started.js index 951ac46c0aba..fcb53b26968b 100644 --- a/docs/pages/x/react-charts/getting-started.js +++ b/docs/pages/x/react-charts/getting-started.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/getting-started/getting-started.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/getting-started/getting-started.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/heat-map.js b/docs/pages/x/react-charts/heat-map.js index efbb52253ce2..1ca391b5fe22 100644 --- a/docs/pages/x/react-charts/heat-map.js +++ b/docs/pages/x/react-charts/heat-map.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/heat-map/heat-map.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/heat-map/heat-map.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/index.js b/docs/pages/x/react-charts/index.js index 5dc7a6db300f..530e78d58513 100644 --- a/docs/pages/x/react-charts/index.js +++ b/docs/pages/x/react-charts/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/legend.js b/docs/pages/x/react-charts/legend.js index 63bca9fec7d7..ea99c2b6a8cf 100644 --- a/docs/pages/x/react-charts/legend.js +++ b/docs/pages/x/react-charts/legend.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/legend/legend.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/legend/legend.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/line-demo.js b/docs/pages/x/react-charts/line-demo.js index 3da172307598..b3d76d1388f9 100644 --- a/docs/pages/x/react-charts/line-demo.js +++ b/docs/pages/x/react-charts/line-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/line-demo/line-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/line-demo/line-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/lines.js b/docs/pages/x/react-charts/lines.js index f06aa85b1d77..9d3dc690e4d6 100644 --- a/docs/pages/x/react-charts/lines.js +++ b/docs/pages/x/react-charts/lines.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/lines/lines.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/lines/lines.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/pie-demo.js b/docs/pages/x/react-charts/pie-demo.js index 62fd7d85b954..31982a1525f9 100644 --- a/docs/pages/x/react-charts/pie-demo.js +++ b/docs/pages/x/react-charts/pie-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/pie-demo/pie-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/pie-demo/pie-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/pie.js b/docs/pages/x/react-charts/pie.js index 930ebb85a511..870382b38abf 100644 --- a/docs/pages/x/react-charts/pie.js +++ b/docs/pages/x/react-charts/pie.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/pie/pie.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/pie/pie.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/radar.js b/docs/pages/x/react-charts/radar.js index 105a5975a8df..d0cb579975f1 100644 --- a/docs/pages/x/react-charts/radar.js +++ b/docs/pages/x/react-charts/radar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/radar/radar.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/radar/radar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/sankey.js b/docs/pages/x/react-charts/sankey.js index 98525d560485..ef2676c2873e 100644 --- a/docs/pages/x/react-charts/sankey.js +++ b/docs/pages/x/react-charts/sankey.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/sankey/sankey.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/sankey/sankey.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/scatter-demo.js b/docs/pages/x/react-charts/scatter-demo.js index f06d196243c3..e74172dbb64e 100644 --- a/docs/pages/x/react-charts/scatter-demo.js +++ b/docs/pages/x/react-charts/scatter-demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/scatter-demo/scatter-demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/scatter-demo/scatter-demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/scatter.js b/docs/pages/x/react-charts/scatter.js index d15c0a858219..4e0675e0c588 100644 --- a/docs/pages/x/react-charts/scatter.js +++ b/docs/pages/x/react-charts/scatter.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/scatter/scatter.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/scatter/scatter.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/sparkline.js b/docs/pages/x/react-charts/sparkline.js index 88b682afd3b6..9b4ed941558c 100644 --- a/docs/pages/x/react-charts/sparkline.js +++ b/docs/pages/x/react-charts/sparkline.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/sparkline/sparkline.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/sparkline/sparkline.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/stacking.js b/docs/pages/x/react-charts/stacking.js index 85d2559b2e8d..0e39babc4c72 100644 --- a/docs/pages/x/react-charts/stacking.js +++ b/docs/pages/x/react-charts/stacking.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/stacking/stacking.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/stacking/stacking.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/styling.js b/docs/pages/x/react-charts/styling.js index 2f47cd803d90..5dcd6bbafcdc 100644 --- a/docs/pages/x/react-charts/styling.js +++ b/docs/pages/x/react-charts/styling.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/styling/styling.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/styling/styling.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/tooltip.js b/docs/pages/x/react-charts/tooltip.js index 5d8df6cec858..e096fbfc8895 100644 --- a/docs/pages/x/react-charts/tooltip.js +++ b/docs/pages/x/react-charts/tooltip.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/tooltip/tooltip.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/tooltip/tooltip.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-charts/tree-map.js b/docs/pages/x/react-charts/tree-map.js index db641a96691f..227f21269d4a 100644 --- a/docs/pages/x/react-charts/tree-map.js +++ b/docs/pages/x/react-charts/tree-map.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/tree-map/tree-map.md?@mui/markdown'; +import * as pageProps from 'docsx/data/charts/tree-map/tree-map.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/accessibility.js b/docs/pages/x/react-data-grid/accessibility.js index cbe154fea405..072cc45486df 100644 --- a/docs/pages/x/react-data-grid/accessibility.js +++ b/docs/pages/x/react-data-grid/accessibility.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/accessibility/accessibility.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/accessibility/accessibility.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/aggregation.js b/docs/pages/x/react-data-grid/aggregation.js index 6df4a3bd42e7..b387d85cf7b9 100644 --- a/docs/pages/x/react-data-grid/aggregation.js +++ b/docs/pages/x/react-data-grid/aggregation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/aggregation/aggregation.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/aggregation/aggregation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/api-object.js b/docs/pages/x/react-data-grid/api-object.js index 51169592bc0e..0c0f259b5066 100644 --- a/docs/pages/x/react-data-grid/api-object.js +++ b/docs/pages/x/react-data-grid/api-object.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/api-object/api-object.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/api-object/api-object.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/cell-selection.js b/docs/pages/x/react-data-grid/cell-selection.js index 85b2ff2d7496..4e2b8afd74b0 100644 --- a/docs/pages/x/react-data-grid/cell-selection.js +++ b/docs/pages/x/react-data-grid/cell-selection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/cell-selection/cell-selection.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/cell-selection/cell-selection.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/clipboard.js b/docs/pages/x/react-data-grid/clipboard.js index 700cc6ab1d4b..b2247312c476 100644 --- a/docs/pages/x/react-data-grid/clipboard.js +++ b/docs/pages/x/react-data-grid/clipboard.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/clipboard/clipboard.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/clipboard/clipboard.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-definition.js b/docs/pages/x/react-data-grid/column-definition.js index e1bcbdef4e73..b2eb691fa880 100644 --- a/docs/pages/x/react-data-grid/column-definition.js +++ b/docs/pages/x/react-data-grid/column-definition.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-definition/column-definition.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-definition/column-definition.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-dimensions.js b/docs/pages/x/react-data-grid/column-dimensions.js index 2288bfcc59e5..d9def3d2ba98 100644 --- a/docs/pages/x/react-data-grid/column-dimensions.js +++ b/docs/pages/x/react-data-grid/column-dimensions.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-dimensions/column-dimensions.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-dimensions/column-dimensions.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-groups.js b/docs/pages/x/react-data-grid/column-groups.js index 0686da7f2b02..1e823ed67128 100644 --- a/docs/pages/x/react-data-grid/column-groups.js +++ b/docs/pages/x/react-data-grid/column-groups.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-groups/column-groups.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-groups/column-groups.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-header.js b/docs/pages/x/react-data-grid/column-header.js index 4b421607a488..de8381a6b09f 100644 --- a/docs/pages/x/react-data-grid/column-header.js +++ b/docs/pages/x/react-data-grid/column-header.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-header/column-header.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-header/column-header.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-menu.js b/docs/pages/x/react-data-grid/column-menu.js index 293f6c798aca..fb52f314069b 100644 --- a/docs/pages/x/react-data-grid/column-menu.js +++ b/docs/pages/x/react-data-grid/column-menu.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-menu/column-menu.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-menu/column-menu.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-ordering.js b/docs/pages/x/react-data-grid/column-ordering.js index ac9644e04c8d..d63fc7161bbc 100644 --- a/docs/pages/x/react-data-grid/column-ordering.js +++ b/docs/pages/x/react-data-grid/column-ordering.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-ordering/column-ordering.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-ordering/column-ordering.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-pinning.js b/docs/pages/x/react-data-grid/column-pinning.js index 77dd14759a63..07939fdd86a9 100644 --- a/docs/pages/x/react-data-grid/column-pinning.js +++ b/docs/pages/x/react-data-grid/column-pinning.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-pinning/column-pinning.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-pinning/column-pinning.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-spanning.js b/docs/pages/x/react-data-grid/column-spanning.js index 0a847589b2c1..7817df7d46a6 100644 --- a/docs/pages/x/react-data-grid/column-spanning.js +++ b/docs/pages/x/react-data-grid/column-spanning.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-spanning/column-spanning.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-spanning/column-spanning.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/column-visibility.js b/docs/pages/x/react-data-grid/column-visibility.js index 3403e8b85f4a..6daeb967ba1f 100644 --- a/docs/pages/x/react-data-grid/column-visibility.js +++ b/docs/pages/x/react-data-grid/column-visibility.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/column-visibility/column-visibility.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/column-visibility/column-visibility.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/components.js b/docs/pages/x/react-data-grid/components.js index 3da2cd691868..adbe72c8412e 100644 --- a/docs/pages/x/react-data-grid/components.js +++ b/docs/pages/x/react-data-grid/components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/components/components.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/components/components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/custom-columns.js b/docs/pages/x/react-data-grid/custom-columns.js index 4af41a45ef3d..7276dfed7075 100644 --- a/docs/pages/x/react-data-grid/custom-columns.js +++ b/docs/pages/x/react-data-grid/custom-columns.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/custom-columns/custom-columns.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/custom-columns/custom-columns.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/demo.js b/docs/pages/x/react-data-grid/demo.js index 303d86f6b9c3..0e8f0e21416c 100644 --- a/docs/pages/x/react-data-grid/demo.js +++ b/docs/pages/x/react-data-grid/demo.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/demo/demo.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/demo/demo.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/editing.js b/docs/pages/x/react-data-grid/editing.js index 65ecc60a6e24..96374f70fda1 100644 --- a/docs/pages/x/react-data-grid/editing.js +++ b/docs/pages/x/react-data-grid/editing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/editing/editing.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/editing/editing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/events.js b/docs/pages/x/react-data-grid/events.js index 370407e4860a..fdbea37bedfa 100644 --- a/docs/pages/x/react-data-grid/events.js +++ b/docs/pages/x/react-data-grid/events.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/events/events.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/events/events.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/experiments/joy-ui.js b/docs/pages/x/react-data-grid/experiments/joy-ui.js index 545055476bf9..49f733491cb3 100644 --- a/docs/pages/x/react-data-grid/experiments/joy-ui.js +++ b/docs/pages/x/react-data-grid/experiments/joy-ui.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/joy-ui/joy-ui.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/joy-ui/joy-ui.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/export.js b/docs/pages/x/react-data-grid/export.js index 347bd1887005..f39c99f13a49 100644 --- a/docs/pages/x/react-data-grid/export.js +++ b/docs/pages/x/react-data-grid/export.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/export/export.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/export/export.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/faq.js b/docs/pages/x/react-data-grid/faq.js index 294944846af0..0cd81c85f54b 100644 --- a/docs/pages/x/react-data-grid/faq.js +++ b/docs/pages/x/react-data-grid/faq.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/faq/faq.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/faq/faq.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering-recipes.js b/docs/pages/x/react-data-grid/filtering-recipes.js index 61d91d4c1aab..453a2ce2d6b7 100644 --- a/docs/pages/x/react-data-grid/filtering-recipes.js +++ b/docs/pages/x/react-data-grid/filtering-recipes.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering-recipes/filtering-recipes.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering-recipes/filtering-recipes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/customization.js b/docs/pages/x/react-data-grid/filtering/customization.js index 2feac758bf6a..a4687a8700b7 100644 --- a/docs/pages/x/react-data-grid/filtering/customization.js +++ b/docs/pages/x/react-data-grid/filtering/customization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/customization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/customization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/header-filters.js b/docs/pages/x/react-data-grid/filtering/header-filters.js index df8157252ed8..5496581ce55e 100644 --- a/docs/pages/x/react-data-grid/filtering/header-filters.js +++ b/docs/pages/x/react-data-grid/filtering/header-filters.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/header-filters.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/header-filters.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/index.js b/docs/pages/x/react-data-grid/filtering/index.js index 49113326bfbf..805884707370 100644 --- a/docs/pages/x/react-data-grid/filtering/index.js +++ b/docs/pages/x/react-data-grid/filtering/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/index.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/multi-filters.js b/docs/pages/x/react-data-grid/filtering/multi-filters.js index cf66367f2163..067655490f34 100644 --- a/docs/pages/x/react-data-grid/filtering/multi-filters.js +++ b/docs/pages/x/react-data-grid/filtering/multi-filters.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/multi-filters.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/multi-filters.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/quick-filter.js b/docs/pages/x/react-data-grid/filtering/quick-filter.js index aab4f12ea640..3168c70e4aab 100644 --- a/docs/pages/x/react-data-grid/filtering/quick-filter.js +++ b/docs/pages/x/react-data-grid/filtering/quick-filter.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/quick-filter.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/quick-filter.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/filtering/server-side.js b/docs/pages/x/react-data-grid/filtering/server-side.js index b7f55f31f670..493b8a073b33 100644 --- a/docs/pages/x/react-data-grid/filtering/server-side.js +++ b/docs/pages/x/react-data-grid/filtering/server-side.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/filtering/server-side.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/filtering/server-side.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/getting-started.js b/docs/pages/x/react-data-grid/getting-started.js index 81ad516c5a7f..005cd237802b 100644 --- a/docs/pages/x/react-data-grid/getting-started.js +++ b/docs/pages/x/react-data-grid/getting-started.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/getting-started/getting-started.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/getting-started/getting-started.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/index.js b/docs/pages/x/react-data-grid/index.js index d41dc4a3d05c..b83bd081ef57 100644 --- a/docs/pages/x/react-data-grid/index.js +++ b/docs/pages/x/react-data-grid/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/layout.js b/docs/pages/x/react-data-grid/layout.js index 67f99c5fd9b2..d291f25763cf 100644 --- a/docs/pages/x/react-data-grid/layout.js +++ b/docs/pages/x/react-data-grid/layout.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/layout/layout.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/layout/layout.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/localization.js b/docs/pages/x/react-data-grid/localization.js index 9101ce8d8bdd..64ea4b6d054f 100644 --- a/docs/pages/x/react-data-grid/localization.js +++ b/docs/pages/x/react-data-grid/localization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/localization/localization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/localization/localization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/master-detail.js b/docs/pages/x/react-data-grid/master-detail.js index 42c48741b1fb..f0d3bd62121c 100644 --- a/docs/pages/x/react-data-grid/master-detail.js +++ b/docs/pages/x/react-data-grid/master-detail.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/master-detail/master-detail.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/master-detail/master-detail.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/pagination.js b/docs/pages/x/react-data-grid/pagination.js index 644c44f6b74c..43109087c047 100644 --- a/docs/pages/x/react-data-grid/pagination.js +++ b/docs/pages/x/react-data-grid/pagination.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/pagination/pagination.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/pagination/pagination.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/performance.js b/docs/pages/x/react-data-grid/performance.js index c3600d16c9d5..692a6f658064 100644 --- a/docs/pages/x/react-data-grid/performance.js +++ b/docs/pages/x/react-data-grid/performance.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/performance/performance.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/performance/performance.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/pivoting.js b/docs/pages/x/react-data-grid/pivoting.js index 274f9790e35c..30ebec854900 100644 --- a/docs/pages/x/react-data-grid/pivoting.js +++ b/docs/pages/x/react-data-grid/pivoting.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/pivoting/pivoting.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/pivoting/pivoting.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/recipes-editing.js b/docs/pages/x/react-data-grid/recipes-editing.js index 52341237e7de..9353af94f3d7 100644 --- a/docs/pages/x/react-data-grid/recipes-editing.js +++ b/docs/pages/x/react-data-grid/recipes-editing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/recipes-editing/recipes-editing.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/recipes-editing/recipes-editing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/recipes-row-grouping.js b/docs/pages/x/react-data-grid/recipes-row-grouping.js index 60cbfc6c999f..d9057913ef70 100644 --- a/docs/pages/x/react-data-grid/recipes-row-grouping.js +++ b/docs/pages/x/react-data-grid/recipes-row-grouping.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/recipes-row-grouping/recipes-row-grouping.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/recipes-row-grouping/recipes-row-grouping.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-definition.js b/docs/pages/x/react-data-grid/row-definition.js index a0200f666419..3815759335e5 100644 --- a/docs/pages/x/react-data-grid/row-definition.js +++ b/docs/pages/x/react-data-grid/row-definition.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-definition/row-definition.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-definition/row-definition.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-grouping.js b/docs/pages/x/react-data-grid/row-grouping.js index d3b1bb3ed228..5f59bb46ca73 100644 --- a/docs/pages/x/react-data-grid/row-grouping.js +++ b/docs/pages/x/react-data-grid/row-grouping.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-grouping/row-grouping.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-grouping/row-grouping.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-height.js b/docs/pages/x/react-data-grid/row-height.js index cc84668d40ea..54c43a8dcba0 100644 --- a/docs/pages/x/react-data-grid/row-height.js +++ b/docs/pages/x/react-data-grid/row-height.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-height/row-height.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-height/row-height.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-ordering.js b/docs/pages/x/react-data-grid/row-ordering.js index 3fd9eadd08d5..08cc8d0c4c38 100644 --- a/docs/pages/x/react-data-grid/row-ordering.js +++ b/docs/pages/x/react-data-grid/row-ordering.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-ordering/row-ordering.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-ordering/row-ordering.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-pinning.js b/docs/pages/x/react-data-grid/row-pinning.js index 296e34cb6327..9d3cb5cc87da 100644 --- a/docs/pages/x/react-data-grid/row-pinning.js +++ b/docs/pages/x/react-data-grid/row-pinning.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-pinning/row-pinning.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-pinning/row-pinning.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-recipes.js b/docs/pages/x/react-data-grid/row-recipes.js index 8402f18c1315..1e83ecfbc474 100644 --- a/docs/pages/x/react-data-grid/row-recipes.js +++ b/docs/pages/x/react-data-grid/row-recipes.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-recipes/row-recipes.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-recipes/row-recipes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-selection.js b/docs/pages/x/react-data-grid/row-selection.js index 5559aa8aa839..981927779de5 100644 --- a/docs/pages/x/react-data-grid/row-selection.js +++ b/docs/pages/x/react-data-grid/row-selection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-selection/row-selection.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-selection/row-selection.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-spanning.js b/docs/pages/x/react-data-grid/row-spanning.js index f6d7073bd13a..f41458657362 100644 --- a/docs/pages/x/react-data-grid/row-spanning.js +++ b/docs/pages/x/react-data-grid/row-spanning.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-spanning/row-spanning.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-spanning/row-spanning.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/row-updates.js b/docs/pages/x/react-data-grid/row-updates.js index bc2c0642c532..b1208c38e8be 100644 --- a/docs/pages/x/react-data-grid/row-updates.js +++ b/docs/pages/x/react-data-grid/row-updates.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/row-updates/row-updates.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/row-updates/row-updates.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/scrolling.js b/docs/pages/x/react-data-grid/scrolling.js index fe59ae7b233f..82c1c76c9915 100644 --- a/docs/pages/x/react-data-grid/scrolling.js +++ b/docs/pages/x/react-data-grid/scrolling.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/scrolling/scrolling.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/scrolling/scrolling.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/aggregation.js b/docs/pages/x/react-data-grid/server-side-data/aggregation.js index 35594f6fa641..bfcbd582f587 100644 --- a/docs/pages/x/react-data-grid/server-side-data/aggregation.js +++ b/docs/pages/x/react-data-grid/server-side-data/aggregation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/aggregation.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/aggregation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/index.js b/docs/pages/x/react-data-grid/server-side-data/index.js index 8d183d6d499c..d9df4aa83ae5 100644 --- a/docs/pages/x/react-data-grid/server-side-data/index.js +++ b/docs/pages/x/react-data-grid/server-side-data/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/index.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js b/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js index 9b9c08c05e85..17c80ea529aa 100644 --- a/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js +++ b/docs/pages/x/react-data-grid/server-side-data/infinite-loading.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/infinite-loading.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/infinite-loading.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js b/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js index f0b78beb6cac..a5a2bfb0671a 100644 --- a/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js +++ b/docs/pages/x/react-data-grid/server-side-data/lazy-loading.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/lazy-loading.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/lazy-loading.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/row-grouping.js b/docs/pages/x/react-data-grid/server-side-data/row-grouping.js index 06017357e71e..0ca6eb198e2f 100644 --- a/docs/pages/x/react-data-grid/server-side-data/row-grouping.js +++ b/docs/pages/x/react-data-grid/server-side-data/row-grouping.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/row-grouping.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/row-grouping.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/server-side-data/tree-data.js b/docs/pages/x/react-data-grid/server-side-data/tree-data.js index 6d122e9e139f..0f161a986cc3 100644 --- a/docs/pages/x/react-data-grid/server-side-data/tree-data.js +++ b/docs/pages/x/react-data-grid/server-side-data/tree-data.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/server-side-data/tree-data.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/server-side-data/tree-data.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/sorting.js b/docs/pages/x/react-data-grid/sorting.js index 4420b66875ec..f130b2e4b274 100644 --- a/docs/pages/x/react-data-grid/sorting.js +++ b/docs/pages/x/react-data-grid/sorting.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/sorting/sorting.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/sorting/sorting.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/state.js b/docs/pages/x/react-data-grid/state.js index 5987027592ae..4c09f99a195e 100644 --- a/docs/pages/x/react-data-grid/state.js +++ b/docs/pages/x/react-data-grid/state.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/state/state.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/state/state.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/style-recipes.js b/docs/pages/x/react-data-grid/style-recipes.js index bdfb64e5b91b..df8e4a1a13f6 100644 --- a/docs/pages/x/react-data-grid/style-recipes.js +++ b/docs/pages/x/react-data-grid/style-recipes.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/style-recipes/style-recipes.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/style-recipes/style-recipes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/style.js b/docs/pages/x/react-data-grid/style.js index 3d5db41d56f9..e6da5d356eb4 100644 --- a/docs/pages/x/react-data-grid/style.js +++ b/docs/pages/x/react-data-grid/style.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/style/style.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/style/style.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/tree-data.js b/docs/pages/x/react-data-grid/tree-data.js index 42a0f874094d..9c15aa65bd0f 100644 --- a/docs/pages/x/react-data-grid/tree-data.js +++ b/docs/pages/x/react-data-grid/tree-data.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/tree-data/tree-data.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/tree-data/tree-data.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/virtualization.js b/docs/pages/x/react-data-grid/virtualization.js index 0b6c704b8c67..c28f42096671 100644 --- a/docs/pages/x/react-data-grid/virtualization.js +++ b/docs/pages/x/react-data-grid/virtualization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/virtualization/virtualization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/data-grid/virtualization/virtualization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/adapters-locale.js b/docs/pages/x/react-date-pickers/adapters-locale.js index 5d8fa68201e1..cd83f2be8bd2 100644 --- a/docs/pages/x/react-date-pickers/adapters-locale.js +++ b/docs/pages/x/react-date-pickers/adapters-locale.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/adapters-locale/adapters-locale.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/adapters-locale/adapters-locale.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/base-concepts.js b/docs/pages/x/react-date-pickers/base-concepts.js index bef093e9f012..ba857eac006f 100644 --- a/docs/pages/x/react-date-pickers/base-concepts.js +++ b/docs/pages/x/react-date-pickers/base-concepts.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/base-concepts/base-concepts.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/base-concepts/base-concepts.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/calendar-systems.js b/docs/pages/x/react-date-pickers/calendar-systems.js index 83655dd7be99..ff3f9cd73d01 100644 --- a/docs/pages/x/react-date-pickers/calendar-systems.js +++ b/docs/pages/x/react-date-pickers/calendar-systems.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/calendar-systems/calendar-systems.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/calendar-systems/calendar-systems.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/custom-components.js b/docs/pages/x/react-date-pickers/custom-components.js index 0b8538617bdc..5381b1492cc2 100644 --- a/docs/pages/x/react-date-pickers/custom-components.js +++ b/docs/pages/x/react-date-pickers/custom-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-components/custom-components.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/custom-components/custom-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/custom-field.js b/docs/pages/x/react-date-pickers/custom-field.js index a61d4354da7b..59f9121bc2d9 100644 --- a/docs/pages/x/react-date-pickers/custom-field.js +++ b/docs/pages/x/react-date-pickers/custom-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-field/custom-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/custom-field/custom-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/custom-layout.js b/docs/pages/x/react-date-pickers/custom-layout.js index 856ce743606f..c463f55ce6af 100644 --- a/docs/pages/x/react-date-pickers/custom-layout.js +++ b/docs/pages/x/react-date-pickers/custom-layout.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-layout/custom-layout.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/custom-layout/custom-layout.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/custom-opening-button.js b/docs/pages/x/react-date-pickers/custom-opening-button.js index 9cacfc0c8bf4..f5057c1fce5f 100644 --- a/docs/pages/x/react-date-pickers/custom-opening-button.js +++ b/docs/pages/x/react-date-pickers/custom-opening-button.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/custom-opening-button/custom-opening-button.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/custom-opening-button/custom-opening-button.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-calendar.js b/docs/pages/x/react-date-pickers/date-calendar.js index 59c3e550f89d..a992e4b0de5d 100644 --- a/docs/pages/x/react-date-pickers/date-calendar.js +++ b/docs/pages/x/react-date-pickers/date-calendar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-calendar/date-calendar.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-calendar/date-calendar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-field.js b/docs/pages/x/react-date-pickers/date-field.js index b304c9916a82..2a74bf38ae97 100644 --- a/docs/pages/x/react-date-pickers/date-field.js +++ b/docs/pages/x/react-date-pickers/date-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-field/date-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-field/date-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-picker.js b/docs/pages/x/react-date-pickers/date-picker.js index 0b557edd38ec..35a6e789235b 100644 --- a/docs/pages/x/react-date-pickers/date-picker.js +++ b/docs/pages/x/react-date-pickers/date-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-picker/date-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-picker/date-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-range-calendar.js b/docs/pages/x/react-date-pickers/date-range-calendar.js index 42f1d68f4722..f83696366364 100644 --- a/docs/pages/x/react-date-pickers/date-range-calendar.js +++ b/docs/pages/x/react-date-pickers/date-range-calendar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-range-calendar/date-range-calendar.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-range-calendar/date-range-calendar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-range-field.js b/docs/pages/x/react-date-pickers/date-range-field.js index 59f98fca25b5..ce78c1cc5917 100644 --- a/docs/pages/x/react-date-pickers/date-range-field.js +++ b/docs/pages/x/react-date-pickers/date-range-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-range-field/date-range-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-range-field/date-range-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-range-picker.js b/docs/pages/x/react-date-pickers/date-range-picker.js index dfff7f7f0ba7..ab25b03483bc 100644 --- a/docs/pages/x/react-date-pickers/date-range-picker.js +++ b/docs/pages/x/react-date-pickers/date-range-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-range-picker/date-range-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-range-picker/date-range-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-time-field.js b/docs/pages/x/react-date-pickers/date-time-field.js index e2028fceeda1..51acf836d94c 100644 --- a/docs/pages/x/react-date-pickers/date-time-field.js +++ b/docs/pages/x/react-date-pickers/date-time-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-time-field/date-time-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-time-field/date-time-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-time-picker.js b/docs/pages/x/react-date-pickers/date-time-picker.js index 660b03930113..6df664fdb28e 100644 --- a/docs/pages/x/react-date-pickers/date-time-picker.js +++ b/docs/pages/x/react-date-pickers/date-time-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-time-picker/date-time-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-time-picker/date-time-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-time-range-field.js b/docs/pages/x/react-date-pickers/date-time-range-field.js index 2fb043f9890e..dd23aeaec0b9 100644 --- a/docs/pages/x/react-date-pickers/date-time-range-field.js +++ b/docs/pages/x/react-date-pickers/date-time-range-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-time-range-field/date-time-range-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-time-range-field/date-time-range-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/date-time-range-picker.js b/docs/pages/x/react-date-pickers/date-time-range-picker.js index e0402806e46b..74b37d9ea661 100644 --- a/docs/pages/x/react-date-pickers/date-time-range-picker.js +++ b/docs/pages/x/react-date-pickers/date-time-range-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/date-time-range-picker/date-time-range-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/date-time-range-picker/date-time-range-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/digital-clock.js b/docs/pages/x/react-date-pickers/digital-clock.js index ac943c96310b..78ad04990f96 100644 --- a/docs/pages/x/react-date-pickers/digital-clock.js +++ b/docs/pages/x/react-date-pickers/digital-clock.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/digital-clock/digital-clock.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/digital-clock/digital-clock.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/faq.js b/docs/pages/x/react-date-pickers/faq.js index 983e8f5de7c6..d99c53ff3582 100644 --- a/docs/pages/x/react-date-pickers/faq.js +++ b/docs/pages/x/react-date-pickers/faq.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/faq/faq.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/faq/faq.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/fields.js b/docs/pages/x/react-date-pickers/fields.js index 6967295bb2bd..ad138ea92cfc 100644 --- a/docs/pages/x/react-date-pickers/fields.js +++ b/docs/pages/x/react-date-pickers/fields.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/fields/fields.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/fields/fields.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/getting-started.js b/docs/pages/x/react-date-pickers/getting-started.js index a185eb514873..a158c4ae22ba 100644 --- a/docs/pages/x/react-date-pickers/getting-started.js +++ b/docs/pages/x/react-date-pickers/getting-started.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/getting-started/getting-started.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/getting-started/getting-started.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/index.js b/docs/pages/x/react-date-pickers/index.js index 49f0406222f2..b3933fe81dc2 100644 --- a/docs/pages/x/react-date-pickers/index.js +++ b/docs/pages/x/react-date-pickers/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/lifecycle.js b/docs/pages/x/react-date-pickers/lifecycle.js index f3a7821d27d7..b16c0700668d 100644 --- a/docs/pages/x/react-date-pickers/lifecycle.js +++ b/docs/pages/x/react-date-pickers/lifecycle.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/lifecycle/lifecycle.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/lifecycle/lifecycle.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/localization.js b/docs/pages/x/react-date-pickers/localization.js index 623484139d4f..67d9e53cc02a 100644 --- a/docs/pages/x/react-date-pickers/localization.js +++ b/docs/pages/x/react-date-pickers/localization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/localization/localization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/localization/localization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/playground.js b/docs/pages/x/react-date-pickers/playground.js index c027e5b07176..3efc9f595745 100644 --- a/docs/pages/x/react-date-pickers/playground.js +++ b/docs/pages/x/react-date-pickers/playground.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/playground/playground.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/playground/playground.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/shortcuts.js b/docs/pages/x/react-date-pickers/shortcuts.js index 94e59a643237..4ab7a714e078 100644 --- a/docs/pages/x/react-date-pickers/shortcuts.js +++ b/docs/pages/x/react-date-pickers/shortcuts.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/shortcuts/shortcuts.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/shortcuts/shortcuts.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-clock.js b/docs/pages/x/react-date-pickers/time-clock.js index 1da4a3e17d02..0d5cfb635c0b 100644 --- a/docs/pages/x/react-date-pickers/time-clock.js +++ b/docs/pages/x/react-date-pickers/time-clock.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-clock/time-clock.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-clock/time-clock.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-field.js b/docs/pages/x/react-date-pickers/time-field.js index 4f259ee3ac23..8766af0f99cc 100644 --- a/docs/pages/x/react-date-pickers/time-field.js +++ b/docs/pages/x/react-date-pickers/time-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-field/time-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-field/time-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-picker.js b/docs/pages/x/react-date-pickers/time-picker.js index 29550735e526..dbcc5d72a326 100644 --- a/docs/pages/x/react-date-pickers/time-picker.js +++ b/docs/pages/x/react-date-pickers/time-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-picker/time-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-picker/time-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-range-field.js b/docs/pages/x/react-date-pickers/time-range-field.js index 433160ae48bb..9cf50ac31f83 100644 --- a/docs/pages/x/react-date-pickers/time-range-field.js +++ b/docs/pages/x/react-date-pickers/time-range-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-range-field/time-range-field.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-range-field/time-range-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/time-range-picker.js b/docs/pages/x/react-date-pickers/time-range-picker.js index e0a5ded2c459..2d3f40437cc0 100644 --- a/docs/pages/x/react-date-pickers/time-range-picker.js +++ b/docs/pages/x/react-date-pickers/time-range-picker.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/time-range-picker/time-range-picker.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/time-range-picker/time-range-picker.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/timezone.js b/docs/pages/x/react-date-pickers/timezone.js index 23ff5978628f..89100e048080 100644 --- a/docs/pages/x/react-date-pickers/timezone.js +++ b/docs/pages/x/react-date-pickers/timezone.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/timezone/timezone.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/timezone/timezone.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/validation.js b/docs/pages/x/react-date-pickers/validation.js index e569857fa449..a1775e8a5497 100644 --- a/docs/pages/x/react-date-pickers/validation.js +++ b/docs/pages/x/react-date-pickers/validation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/validation/validation.md?@mui/markdown'; +import * as pageProps from 'docsx/data/date-pickers/validation/validation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/getting-started.js b/docs/pages/x/react-tree-view/getting-started.js index a13676cf3b51..f0279289f29b 100644 --- a/docs/pages/x/react-tree-view/getting-started.js +++ b/docs/pages/x/react-tree-view/getting-started.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/getting-started/getting-started.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/getting-started/getting-started.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/index.js b/docs/pages/x/react-tree-view/index.js index 515674eeef71..b0930dcc0fab 100644 --- a/docs/pages/x/react-tree-view/index.js +++ b/docs/pages/x/react-tree-view/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/customization.js b/docs/pages/x/react-tree-view/rich-tree-view/customization.js new file mode 100644 index 000000000000..87547ab6f441 --- /dev/null +++ b/docs/pages/x/react-tree-view/rich-tree-view/customization.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/customization/customization.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-tree-view/rich-tree-view/expansion.js b/docs/pages/x/react-tree-view/rich-tree-view/expansion.js index 1bfd853d1510..4fd7c767e9ae 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/expansion.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/expansion.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/expansion/expansion.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/expansion/expansion.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/focus.js b/docs/pages/x/react-tree-view/rich-tree-view/focus.js new file mode 100644 index 000000000000..66eaf318950d --- /dev/null +++ b/docs/pages/x/react-tree-view/rich-tree-view/focus.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/focus/focus.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-tree-view/rich-tree-view/headless.js b/docs/pages/x/react-tree-view/rich-tree-view/headless.js index 1e37db1bcc68..af96db7a61ca 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/headless.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/headless.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/headless/headless.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/headless/headless.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/items.js b/docs/pages/x/react-tree-view/rich-tree-view/items.js index 6e5a250799f0..04a90fe070dc 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/items.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/items.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/items/items.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/items/items.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/rich-tree-view/selection.js b/docs/pages/x/react-tree-view/rich-tree-view/selection.js index 799c8ff04f09..2e47e4936d17 100644 --- a/docs/pages/x/react-tree-view/rich-tree-view/selection.js +++ b/docs/pages/x/react-tree-view/rich-tree-view/selection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/rich-tree-view/selection/selection.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/rich-tree-view/selection/selection.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/customization.js b/docs/pages/x/react-tree-view/simple-tree-view/customization.js index 2d8abf569cdf..167e049bc924 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/customization.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/customization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/customization/customization.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/customization/customization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/expansion.js b/docs/pages/x/react-tree-view/simple-tree-view/expansion.js index a683fd872355..442cd953bcae 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/expansion.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/expansion.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/expansion/expansion.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/expansion/expansion.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/focus.js b/docs/pages/x/react-tree-view/simple-tree-view/focus.js new file mode 100644 index 000000000000..3e324f2b93a4 --- /dev/null +++ b/docs/pages/x/react-tree-view/simple-tree-view/focus.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/focus/focus.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-tree-view/simple-tree-view/items.js b/docs/pages/x/react-tree-view/simple-tree-view/items.js index 0a8eff89d0b3..feb509dfc372 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/items.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/items.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/items/items.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/items/items.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/simple-tree-view/selection.js b/docs/pages/x/react-tree-view/simple-tree-view/selection.js index f700b2f911cf..a7ff23bffbcb 100644 --- a/docs/pages/x/react-tree-view/simple-tree-view/selection.js +++ b/docs/pages/x/react-tree-view/simple-tree-view/selection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/simple-tree-view/selection/selection.md?@mui/markdown'; +import * as pageProps from 'docsx/data/tree-view/simple-tree-view/selection/selection.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/whats-new.js b/docs/pages/x/whats-new.js index d30bf447441f..45e23d5801f7 100644 --- a/docs/pages/x/whats-new.js +++ b/docs/pages/x/whats-new.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/whats-new/whats-new.md?@mui/markdown'; +import * as pageProps from 'docsx/data/whats-new/whats-new.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/public/_redirects b/docs/public/_redirects index 5852a23a91e3..5ae696d4b99d 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -3,7 +3,7 @@ # Avoid conflicts with the other Next.js apps hosted under https://mui.com/ /x/_next/* /_next/:splat -# For links that we can't edit later on, e.g. hosted in the code published on npm or sent by email +# For links that we can't edit later on, for example hosted in the code published on npm or sent by email # should all be prefixed with x- @@ -21,7 +21,8 @@ /r/x-premium-svg-link https://mui.com/x/introduction/licensing/#premium-plan 302 # Legacy redirection - +# Added in chronological order (the last line is the most recent one) +# To be removed 3+ years after being introduced # 2021 /fr/* /:splat 200 /de/* /:splat 200 @@ -57,5 +58,6 @@ /x/api/date-pickers/next-date-picker/ /x/api/date-pickers/date-picker/ 301 /x/react-date-pickers/calendar/ /x/react-date-pickers/date-calendar/ 301 /x/react-date-pickers/legacy-date-time-picker/ /x/react-date-pickers/date-time-picker/ 301 +# 2024 # Proxies 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 000000000000..1d95238f8d4d 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 000000000000..99a079e2bd2a Binary files /dev/null and b/docs/public/static/docs-infra/forking-an-example.png differ diff --git a/docs/public/static/x/component-illustrations/bar-dark.png b/docs/public/static/x/component-illustrations/bar-dark.png index ec4cd7d647b2..dcc4a139e9e1 100644 Binary files a/docs/public/static/x/component-illustrations/bar-dark.png and b/docs/public/static/x/component-illustrations/bar-dark.png differ diff --git a/docs/public/static/x/component-illustrations/bar-light.png b/docs/public/static/x/component-illustrations/bar-light.png index 45053e0367c2..bd080584c8f4 100644 Binary files a/docs/public/static/x/component-illustrations/bar-light.png and b/docs/public/static/x/component-illustrations/bar-light.png differ diff --git a/docs/public/static/x/component-illustrations/funnel-dark.png b/docs/public/static/x/component-illustrations/funnel-dark.png new file mode 100644 index 000000000000..4b7e255e5964 Binary files /dev/null and b/docs/public/static/x/component-illustrations/funnel-dark.png differ diff --git a/docs/public/static/x/component-illustrations/funnel-light.png b/docs/public/static/x/component-illustrations/funnel-light.png new file mode 100644 index 000000000000..aac71cae1052 Binary files /dev/null and b/docs/public/static/x/component-illustrations/funnel-light.png differ diff --git a/docs/public/static/x/component-illustrations/gantt-dark.png b/docs/public/static/x/component-illustrations/gantt-dark.png new file mode 100644 index 000000000000..fe7bec17b719 Binary files /dev/null and b/docs/public/static/x/component-illustrations/gantt-dark.png differ diff --git a/docs/public/static/x/component-illustrations/gantt-light.png b/docs/public/static/x/component-illustrations/gantt-light.png new file mode 100644 index 000000000000..c47e502227e3 Binary files /dev/null and b/docs/public/static/x/component-illustrations/gantt-light.png differ diff --git a/docs/public/static/x/component-illustrations/gauge-dark.png b/docs/public/static/x/component-illustrations/gauge-dark.png new file mode 100644 index 000000000000..2df99f2f37a9 Binary files /dev/null and b/docs/public/static/x/component-illustrations/gauge-dark.png differ diff --git a/docs/public/static/x/component-illustrations/gauge-light.png b/docs/public/static/x/component-illustrations/gauge-light.png new file mode 100644 index 000000000000..046b0a82312a Binary files /dev/null and b/docs/public/static/x/component-illustrations/gauge-light.png differ diff --git a/docs/public/static/x/component-illustrations/heatmap-dark.png b/docs/public/static/x/component-illustrations/heatmap-dark.png new file mode 100644 index 000000000000..ec126145b51d Binary files /dev/null and b/docs/public/static/x/component-illustrations/heatmap-dark.png differ diff --git a/docs/public/static/x/component-illustrations/heatmap-light.png b/docs/public/static/x/component-illustrations/heatmap-light.png new file mode 100644 index 000000000000..c5831c4b8561 Binary files /dev/null and b/docs/public/static/x/component-illustrations/heatmap-light.png differ diff --git a/docs/public/static/x/component-illustrations/lines-dark.png b/docs/public/static/x/component-illustrations/lines-dark.png index bebb27684350..49ac50ee0b3e 100644 Binary files a/docs/public/static/x/component-illustrations/lines-dark.png and b/docs/public/static/x/component-illustrations/lines-dark.png differ diff --git a/docs/public/static/x/component-illustrations/lines-light.png b/docs/public/static/x/component-illustrations/lines-light.png index 19eb28cf0f54..94bc5fb70260 100644 Binary files a/docs/public/static/x/component-illustrations/lines-light.png and b/docs/public/static/x/component-illustrations/lines-light.png differ diff --git a/docs/public/static/x/component-illustrations/pie-dark.png b/docs/public/static/x/component-illustrations/pie-dark.png index 855c898b4925..1750ac914a10 100644 Binary files a/docs/public/static/x/component-illustrations/pie-dark.png and b/docs/public/static/x/component-illustrations/pie-dark.png differ diff --git a/docs/public/static/x/component-illustrations/pie-light.png b/docs/public/static/x/component-illustrations/pie-light.png index e34c2bb1a89c..c8857bc88218 100644 Binary files a/docs/public/static/x/component-illustrations/pie-light.png and b/docs/public/static/x/component-illustrations/pie-light.png differ diff --git a/docs/public/static/x/component-illustrations/radar-dark.png b/docs/public/static/x/component-illustrations/radar-dark.png new file mode 100644 index 000000000000..e04512b40c45 Binary files /dev/null and b/docs/public/static/x/component-illustrations/radar-dark.png differ diff --git a/docs/public/static/x/component-illustrations/radar-light.png b/docs/public/static/x/component-illustrations/radar-light.png new file mode 100644 index 000000000000..f630d9d7ccc8 Binary files /dev/null and b/docs/public/static/x/component-illustrations/radar-light.png differ diff --git a/docs/public/static/x/component-illustrations/sankey-dark.png b/docs/public/static/x/component-illustrations/sankey-dark.png new file mode 100644 index 000000000000..18b92bb1dece Binary files /dev/null and b/docs/public/static/x/component-illustrations/sankey-dark.png differ diff --git a/docs/public/static/x/component-illustrations/sankey-light.png b/docs/public/static/x/component-illustrations/sankey-light.png new file mode 100644 index 000000000000..021db634aef8 Binary files /dev/null and b/docs/public/static/x/component-illustrations/sankey-light.png differ diff --git a/docs/public/static/x/component-illustrations/scatter-dark.png b/docs/public/static/x/component-illustrations/scatter-dark.png index 5c9b8ae4d930..e65c79a74fed 100644 Binary files a/docs/public/static/x/component-illustrations/scatter-dark.png and b/docs/public/static/x/component-illustrations/scatter-dark.png differ diff --git a/docs/public/static/x/component-illustrations/scatter-light.png b/docs/public/static/x/component-illustrations/scatter-light.png index d1776c2384c4..cd35d4a863e1 100644 Binary files a/docs/public/static/x/component-illustrations/scatter-light.png and b/docs/public/static/x/component-illustrations/scatter-light.png differ diff --git a/docs/public/static/x/component-illustrations/sparkline-dark.png b/docs/public/static/x/component-illustrations/sparkline-dark.png index ac2678df8863..e23c450fb09a 100644 Binary files a/docs/public/static/x/component-illustrations/sparkline-dark.png and b/docs/public/static/x/component-illustrations/sparkline-dark.png differ diff --git a/docs/public/static/x/component-illustrations/sparkline-light.png b/docs/public/static/x/component-illustrations/sparkline-light.png index d3673971bc5f..cebbb4324e24 100644 Binary files a/docs/public/static/x/component-illustrations/sparkline-light.png and b/docs/public/static/x/component-illustrations/sparkline-light.png differ diff --git a/docs/public/static/x/component-illustrations/treemap-dark.png b/docs/public/static/x/component-illustrations/treemap-dark.png new file mode 100644 index 000000000000..c400e94cef44 Binary files /dev/null and b/docs/public/static/x/component-illustrations/treemap-dark.png differ diff --git a/docs/public/static/x/component-illustrations/treemap-light.png b/docs/public/static/x/component-illustrations/treemap-light.png new file mode 100644 index 000000000000..c25130450189 Binary files /dev/null and b/docs/public/static/x/component-illustrations/treemap-light.png differ diff --git a/docs/public/static/x/watermark-dark.png b/docs/public/static/x/watermark-dark.png index 09c5dd851364..2275f8c25aa6 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 49cc374b7339..53e19304d1e1 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/api/buildInterfacesDocumentation.ts b/docs/scripts/api/buildInterfacesDocumentation.ts index d21706c22965..fe5d16a3bf28 100644 --- a/docs/scripts/api/buildInterfacesDocumentation.ts +++ b/docs/scripts/api/buildInterfacesDocumentation.ts @@ -370,7 +370,7 @@ export default async function buildInterfacesDocumentation( path.resolve(apiPagesFolder, project.documentationFolderName, `${slug}.js`), `import * as React from 'react'; import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; - import * as pageProps from './${slug}.md?@mui/markdown'; + import * as pageProps from './${slug}.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/scripts/createXTypeScriptProjects.ts b/docs/scripts/createXTypeScriptProjects.ts index 88de3ba97072..b5bc86f9850a 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 91a170452907..dbc2280c520d 100644 --- a/docs/scripts/generateProptypes.ts +++ b/docs/scripts/generateProptypes.ts @@ -5,11 +5,36 @@ import * as prettier from 'prettier'; import { getPropTypesFromFile, injectPropTypesInFile, -} from '@mui/monorepo/packages/typescript-to-proptypes'; -import { fixBabelGeneratorIssues, fixLineEndings } from '@mui-internal/docs-utilities'; +} from '@mui/internal-scripts/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', + 'month', + ]; + + if (T_DATE_PROPS.includes(name)) { + return true; + } + } + + return false; + }; + const components = getPropTypesFromFile({ filePath: sourceFile, project, @@ -47,8 +72,13 @@ async function generateProptypes(project: XTypeScriptProject, sourceFile: string return false; } + if (isTDate(name)) { + return false; + } + return undefined; }, + shouldUseObjectForDate: ({ name }) => isTDate(name), }); if (components.length === 0) { diff --git a/docs/scripts/reportBrokenLinks.js b/docs/scripts/reportBrokenLinks.js index b63814708e95..9b22cad9c045 100644 --- a/docs/scripts/reportBrokenLinks.js +++ b/docs/scripts/reportBrokenLinks.js @@ -11,7 +11,6 @@ function save(lines) { } const UNSUPPORTED_PATHS = ['/careers/', '/store/']; -const UNSUPPORTED_ANCHORS_PATHS = ['/api/']; const buffer = []; @@ -27,35 +26,36 @@ const availableLinksCore = {}; const usedLinksX = {}; const usedLinksCore = {}; -parseDocFolder(path.join(docsSpaceRoot, './pages/'), availableLinksX, usedLinksX, ''); +parseDocFolder(path.join(docsSpaceRoot, './pages/'), availableLinksX, usedLinksX); parseDocFolder( path.resolve(__dirname, '../../node_modules/@mui/monorepo/docs/pages/'), availableLinksCore, usedLinksCore, - '', ); -function getPageUrlFromLink(link) { +function removeApiLinkHash(link) { + // Determine if the link is an API path + // for example /x/api/data-grid/, /material-ui/api/button/, /system/api/box/ + const isApiPath = link.match(/^\/[\w-]+\/api\//); + if (!isApiPath) { + return link; + } const [rep] = link.split('/#'); - return rep; + // if the link actually includes a hash, we need to re-add the necessary `/` at the end + return link.includes('/#') ? `${rep}/` : rep; } const usedLinks = { ...usedLinksCore, ...usedLinksX }; const availableLinks = { ...availableLinksCore, ...availableLinksX }; -const removeUnsupportedHash = (link) => { - const doNotSupportAnchors = UNSUPPORTED_ANCHORS_PATHS.some((unsupportedPath) => - link.includes(unsupportedPath), - ); - const rep = doNotSupportAnchors ? getPageUrlFromLink(link) : link; - return rep; -}; write('Broken links found by `yarn docs:link-check` that exist:\n'); Object.keys(usedLinks) .filter((link) => link.startsWith('/')) - .filter((link) => !availableLinks[removeUnsupportedHash(link)]) - // unstyled sections are added by scripts (can not be found in markdown) - .filter((link) => !link.includes('#unstyled')) + .filter((link) => !availableLinks[removeApiLinkHash(link)]) + // these url segments are specific to Base UI and added by scripts (can not be found in markdown) + .filter((link) => + ['components-api', 'hooks-api', '#unstyled'].every((str) => !link.includes(str)), + ) .filter((link) => UNSUPPORTED_PATHS.every((unsupportedPath) => !link.includes(unsupportedPath))) .sort() .forEach((linkKey) => { @@ -66,7 +66,7 @@ Object.keys(usedLinks) console.log('available anchors on the same page:'); console.log( Object.keys(availableLinks) - .filter((link) => getPageUrlFromLink(link) === getPageUrlFromLink(linkKey)) + .filter((link) => removeApiLinkHash(link) === removeApiLinkHash(linkKey)) .sort() .map(getAnchor) .join('\n'), diff --git a/docs/src/modules/components/ChartComponentsGrid.js b/docs/src/modules/components/ChartComponentsGrid.js index 01ff00ecee36..c981309f64ca 100644 --- a/docs/src/modules/components/ChartComponentsGrid.js +++ b/docs/src/modules/components/ChartComponentsGrid.js @@ -4,9 +4,11 @@ import Card from '@mui/material/Card'; import CardMedia from '@mui/material/CardMedia'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; -import Link from 'docs/src/modules/components/Link'; +import Chip from '@mui/material/Chip'; +import Stack from '@mui/material/Stack'; +import { Link } from '@mui/docs/Link'; -function components() { +function getComponents() { return [ { title: 'Bar Chart', @@ -33,18 +35,70 @@ function components() { href: '/x/react-charts/scatter/', }, { - title: 'Sparkline Chart', + title: 'Sparkline', srcLight: '/static/x/component-illustrations/sparkline-light.png', srcDark: '/static/x/component-illustrations/sparkline-dark.png', href: '/x/react-charts/sparkline/', }, + { + title: 'Gauge', + srcLight: '/static/x/component-illustrations/gauge-light.png', + srcDark: '/static/x/component-illustrations/gauge-dark.png', + href: '/x/react-charts/gauge/', + }, + { + title: 'Radar Chart', + srcLight: '/static/x/component-illustrations/radar-light.png', + srcDark: '/static/x/component-illustrations/radar-dark.png', + href: '/x/react-charts/radar/', + planned: true, + }, + { + title: 'Treemap', + srcLight: '/static/x/component-illustrations/treemap-light.png', + srcDark: '/static/x/component-illustrations/treemap-dark.png', + href: '/x/react-charts/tree-map/', + planned: true, + }, + { + title: 'Heatmap', + srcLight: '/static/x/component-illustrations/heatmap-light.png', + srcDark: '/static/x/component-illustrations/heatmap-dark.png', + href: '/x/react-charts/heat-map/', + planned: true, + pro: true, + }, + { + title: 'Funnel Chart', + srcLight: '/static/x/component-illustrations/funnel-light.png', + srcDark: '/static/x/component-illustrations/funnel-dark.png', + href: '/x/react-charts/funnel/', + planned: true, + pro: true, + }, + { + title: 'Sankey Chart', + srcLight: '/static/x/component-illustrations/sankey-light.png', + srcDark: '/static/x/component-illustrations/sankey-dark.png', + href: '/x/react-charts/sankey/', + planned: true, + pro: true, + }, + { + title: 'Gantt Chart', + srcLight: '/static/x/component-illustrations/gantt-light.png', + srcDark: '/static/x/component-illustrations/gantt-dark.png', + href: '/x/react-charts/gantt/', + planned: true, + pro: true, + }, ]; } export default function ChartComponentsGrid() { return ( - {components().map((component) => ( + {getComponents().map((component) => ( ({ aspectRatio: '16 / 9', background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - borderBottom: '1px solid', - borderColor: 'divider', + opacity: component.planned ? 0.4 : 1, + filter: component.planned ? 'grayscale(100%)' : undefined, ...theme.applyDarkStyles({ + opacity: component.planned ? 0.4 : 1, content: `url(${component.srcDark})`, background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - borderColor: 'divider', }), })} /> - - {component.title} - + + {component.title} + + {component.pro && } + {component.planned && ( + ({ + ml: 'auto', + height: 20, + backgroundColor: 'grey.50', + borderColor: 'grey.200', + '.MuiChip-label': { + px: '6px', + fontSize: '0.65rem', + letterSpacing: '.04rem', + textTransform: 'uppercase', + color: 'text.primary', + }, + ...theme.applyDarkStyles({ + backgroundColor: 'divider', + borderColor: 'divider', + }), + })} + /> + )} + ))} diff --git a/docs/src/modules/components/CustomizationPlayground.tsx b/docs/src/modules/components/CustomizationPlayground.tsx index cb1fd626fc99..c4a099370294 100644 --- a/docs/src/modules/components/CustomizationPlayground.tsx +++ b/docs/src/modules/components/CustomizationPlayground.tsx @@ -21,7 +21,6 @@ import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; import Alert from '@mui/material/Alert'; -import { grey } from '@mui/material/colors'; import pick from 'lodash/pick'; import { useCustomizationPlayground, @@ -35,8 +34,9 @@ import { const PlaygroundWrapper = styled('div')(({ theme }) => ({ display: 'flex', + border: '1px solid', + borderColor: alpha(theme.palette.grey[500], 0.2), borderRadius: theme.shape.borderRadius, - border: `1px solid ${grey[200]}`, padding: theme.spacing(2), gap: theme.spacing(2), justifyContent: 'space-between', @@ -54,7 +54,8 @@ const PlaygroundDemoArea = styled('div')(({ theme }) => ({ const PlaygroundConfigArea = styled('div')(({ theme }) => ({ padding: theme.spacing(2), backgroundColor: alpha(theme.palette.primary.light, 0.05), - border: `1px solid ${grey[200]}`, + border: '1px solid', + borderColor: alpha(theme.palette.grey[500], 0.2), borderRadius: '4px', [theme.breakpoints.down('lg')]: { display: 'flex', @@ -74,45 +75,62 @@ const ConfigSectionWrapper = styled('div')(({ theme }) => ({ })); const ConfigLabel = styled(Typography)(({ theme }) => ({ - marginTop: theme.spacing(2), + marginTop: theme.spacing(4), marginBottom: theme.spacing(1), fontWeight: theme.typography.fontWeightBold, - fontSize: theme.typography.pxToRem(12), - textTransform: 'uppercase', + fontSize: theme.typography.pxToRem(14), letterSpacing: '.08rem', + '&:first-of-type': { + marginTop: theme.spacing(1), + }, + '&:last-of-type': { + marginTop: theme.spacing(4), + }, })); const ConfigItemLabel = styled(Typography)(({ theme }) => ({ ...theme.typography.caption, letterSpacing: '.08rem', - textTransform: 'uppercase', color: theme.palette.text.secondary, - fontSize: theme.typography.pxToRem(11), + fontSize: theme.typography.pxToRem(12), fontweight: 600, })); const SlotItemsWrapper = styled('div')(({ theme }) => ({ display: 'flex', - gap: theme.spacing(0.5), + gap: theme.spacing(1), flexWrap: 'wrap', })); const SlotItem = styled(Button)(({ theme }) => ({ borderWidth: 1, - borderRadius: theme.spacing(2), + borderRadius: '99px', textTransform: 'none', padding: theme.spacing(0.1, 1), })); const TabsWrapper = styled('div')(({ theme }) => ({ display: 'flex', - alignItems: 'center', + alignItems: 'end', justifyContent: 'space-between', - marginBottom: theme.spacing(1), - gap: theme.spacing(1), [theme.breakpoints.down('sm')]: { flexDirection: 'column', alignItems: 'flex-start', + gap: theme.spacing(4), + }, +})); +const StyledTabs = styled(Tabs)(({ theme }) => ({ + mt: 1, + mb: '-16px', + '& .MuiTabs-indicator': { + display: 'flex', + justifyContent: 'center', + backgroundColor: 'transparent', + }, + '& .MuiTabs-indicatorSpan': { + maxWidth: '60%', + width: '100%', + backgroundColor: theme.palette.primary.main, }, })); @@ -124,13 +142,18 @@ type TabsProps = { function StylingApproachTabs({ value, onChange, options }: TabsProps) { return ( - - +
+ }} + > {(Object.keys(options) as Array)?.map((option) => ( ))} - - + +
); } @@ -154,7 +177,7 @@ function StylingRecommendation({ if (isMobile) { return ( - + {displayedMessage} ); @@ -163,7 +186,7 @@ function StylingRecommendation({ return ( - + ); } @@ -268,6 +291,7 @@ function NumericTokensSlider({ max={20} marks step={1} + valueLabelDisplay="auto" /> ))} @@ -308,25 +332,6 @@ const CustomizationPlayground = function CustomizationPlayground({ return ( - {selectedDemo && customizationOptions && selectedCustomizationOption && ( - - - { - setSelectedCustomizationOption(newValue); - }} - value={selectedCustomizationOption} - options={customizationOptions} - /> - {selectedExample && ( - - )} - {' '} - - )} @@ -400,7 +405,25 @@ const CustomizationPlayground = function CustomizationPlayground({ )} - + {selectedDemo && customizationOptions && selectedCustomizationOption && ( + + + { + setSelectedCustomizationOption(newValue); + }} + value={selectedCustomizationOption} + options={customizationOptions} + /> + {selectedExample && ( + + )} + + + )} {shouldBeInteractive && ( )} diff --git a/docs/src/modules/components/DataGridInstallationInstructions.js b/docs/src/modules/components/DataGridInstallationInstructions.js index 030004edd155..fd41a7bddc3e 100644 --- a/docs/src/modules/components/DataGridInstallationInstructions.js +++ b/docs/src/modules/components/DataGridInstallationInstructions.js @@ -4,9 +4,9 @@ import InstallationInstructions from './InstallationInstructions'; // #default-branch-switch const packages = { - Community: '@mui/x-data-grid@next', - Pro: '@mui/x-data-grid-pro@next', - Premium: '@mui/x-data-grid-premium@next', + Community: '@mui/x-data-grid', + Pro: '@mui/x-data-grid-pro', + Premium: '@mui/x-data-grid-premium', }; export default function DataGridInstallationInstructions() { diff --git a/docs/src/modules/components/DemoPropsForm.tsx b/docs/src/modules/components/DemoPropsForm.tsx index 8f0d4a5eaefb..6133c340f41c 100644 --- a/docs/src/modules/components/DemoPropsForm.tsx +++ b/docs/src/modules/components/DemoPropsForm.tsx @@ -32,7 +32,7 @@ const shallowEqual = (item1: { [k: string]: any }, item2: { [k: string]: any }) type DataType = { /** - * Name of the prop, e.g. 'children' + * Name of the prop, for example 'children' */ propName: Extract; /** @@ -367,14 +367,15 @@ export default function ChartDemoPropsForm( ? (props[propName] as number) : (defaultValue as string) } - onChange={(event) => + onChange={(event) => { + if (Number.isNaN(Number.parseFloat(event.target.value))) { + return; + } setProps((latestProps) => ({ ...latestProps, - [propName]: Number.isNaN(event.target.value) - ? undefined - : Number.parseFloat(event.target.value), - })) - } + [propName]: Number.parseFloat(event.target.value), + })); + }} sx={{ textTransform: 'capitalize', [`& .${inputClasses.root}`]: { diff --git a/docs/src/modules/components/LocalizationTable.js b/docs/src/modules/components/LocalizationTable.js index 842caad4c6a9..a06ef6d54b82 100644 --- a/docs/src/modules/components/LocalizationTable.js +++ b/docs/src/modules/components/LocalizationTable.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { styled } from '@mui/material/styles'; -import Link from 'docs/src/modules/components/Link'; +import { Link } from '@mui/docs/Link'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; const Root = styled('div')(({ theme }) => ({ diff --git a/docs/src/modules/components/PickersInstallationInstructions.js b/docs/src/modules/components/PickersInstallationInstructions.js index 81a2cf652e9e..2651d0ca1158 100644 --- a/docs/src/modules/components/PickersInstallationInstructions.js +++ b/docs/src/modules/components/PickersInstallationInstructions.js @@ -4,8 +4,8 @@ import InstallationInstructions from './InstallationInstructions'; // #default-branch-switch const packages = { - Community: '@mui/x-date-pickers@next', - Pro: '@mui/x-date-pickers-pro@next', + Community: '@mui/x-date-pickers', + Pro: '@mui/x-date-pickers-pro', }; const peerDependency = { diff --git a/docs/src/modules/components/PickersRenderingInstructions.js b/docs/src/modules/components/PickersRenderingInstructions.js index c5fe8c848b3d..c42d8104486c 100644 --- a/docs/src/modules/components/PickersRenderingInstructions.js +++ b/docs/src/modules/components/PickersRenderingInstructions.js @@ -21,7 +21,16 @@ export default function PickersRenderingInstructions() { const commandLines = [ `import { LocalizationProvider } from '${componentPackage}';`, + ...(libraryUsed === 'date-fns' + ? ['// If you are using date-fns v2.x, please import `AdapterDateFns`'] + : []), `import { ${adapterName} } from '${componentPackage}/${adapterName}'`, + ...(libraryUsed === 'date-fns' + ? [ + '// If you are using date-fns v3.x, please import the v3 adapter', + `import { ${adapterName} } from '${componentPackage}/AdapterDateFnsV3'`, + ] + : []), '', 'function App({ children }) {', ' return (', diff --git a/docs/src/modules/components/WhatsNewLayout.js b/docs/src/modules/components/WhatsNewLayout.js new file mode 100644 index 000000000000..9ed6e778bc59 --- /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.0', + 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: 'MUI X 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: 'MUI X Data Grid v5.15.0', + 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/dataGridLayoutConfig.tsx b/docs/src/modules/utils/dataGridLayoutConfig.tsx new file mode 100644 index 000000000000..2c0e535c4287 --- /dev/null +++ b/docs/src/modules/utils/dataGridLayoutConfig.tsx @@ -0,0 +1,8 @@ +const defaultLayout = 'expanded'; +const layoutStorageKey = { + slots: 'dataGrid_apiPage_slots', + props: 'dataGrid_apiPage_props', + classes: 'dataGrid_apiPage_classes', +} as const; + +export default { defaultLayout, layoutStorageKey }; 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 8f912fa149a2..bdf5ce224037 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 8489b12c389f..000000000000 --- 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/src/modules/utils/postProcessImport.ts b/docs/src/modules/utils/postProcessImport.ts index 9418831f9930..6366a0be16c0 100644 --- a/docs/src/modules/utils/postProcessImport.ts +++ b/docs/src/modules/utils/postProcessImport.ts @@ -21,7 +21,7 @@ export const ADAPTER_TO_LIBRARY: Record = { const PICKERS_ADAPTER_REGEX = /^@mui\/(lab|x-date-pickers(?:-pro)?)\/(?Adapter.*)/; export const postProcessImport = (importName: string): Record | null => { - // e.g. date-fns + // for example date-fns const dateAdapterMatch = PICKERS_ADAPTER_REGEX.exec(importName); if (dateAdapterMatch !== null) { /** 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 44b71c6c124c..20909993d298 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 52c7ccee6d9e..37cbf6fb2c98 100644 --- a/docs/translations/api-docs/charts/bar-chart/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart/bar-chart.json @@ -2,7 +2,8 @@ "componentDescription": "", "propDescriptions": { "axisHighlight": { - "description": "Object { x, y } that defines how the charts highlight the mouse position along the x- and y-axes. The two properties accept the following values: - 'none': display nothing. - 'line': display a line at the current mouse position. - 'band': display a band at the current mouse position. Only available with band scale." + "description": "The configuration of axes highlight. Default is set to 'band' in the bar direction. Depends on layout prop.", + "seeMoreText": "See {{link}} for more details." }, "bottomAxis": { "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps." @@ -14,21 +15,42 @@ "disableAxisListener": { "description": "If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance." }, + "grid": { "description": "Option to display a cartesian grid in the background." }, "height": { "description": "The height of the chart in px. If not defined, it takes the height of the parent element." }, + "layout": { "description": "The direction of the bar elements." }, "leftAxis": { "description": "Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, "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." }, + "series": { "description": "The series to display in the bar chart." }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, + "tooltip": { + "description": "The configuration of the tooltip.", + "seeMoreText": "See {{link}} for more details." + }, "topAxis": { "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps." }, @@ -44,14 +66,14 @@ }, "classDescriptions": {}, "slotDescriptions": { - "axisContent": "", - "axisLabel": "", - "axisLine": "", - "axisTick": "", - "axisTickLabel": "", - "bar": "", - "itemContent": "", - "legend": "", - "popper": "" + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "axisLabel": "Custom component for axis label.", + "axisLine": "Custom component for the axis main line.", + "axisTick": "Custom component for the axis tick.", + "axisTickLabel": "Custom component for tick label.", + "bar": "The component that renders the bar.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", + "legend": "Custom rendering of the legend.", + "popper": "Custom component for the tooltip 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 a19987e3c988..af7c71ba194b 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 b84aa3efd86a..73f953ae9315 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-grid/charts-grid.json b/docs/translations/api-docs/charts/charts-grid/charts-grid.json new file mode 100644 index 000000000000..6796c887cfcb --- /dev/null +++ b/docs/translations/api-docs/charts/charts-grid/charts-grid.json @@ -0,0 +1,14 @@ +{ + "componentDescription": "", + "propDescriptions": { + "classes": { "description": "Override or extend the styles applied to the component." }, + "horizontal": { "description": "Displays horizontal grid." }, + "vertical": { "description": "Displays vertical grid." } + }, + "classDescriptions": { + "horizontalLine": { "description": "Styles applied to {{nodeName}}.", "nodeName": "x-axes" }, + "line": { "description": "Styles applied to {{nodeName}}.", "nodeName": "every line element" }, + "root": { "description": "Styles applied to the root element." }, + "verticalLine": { "description": "Styles applied to {{nodeName}}.", "nodeName": "y-axes" } + } +} 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 b4c860e2598c..f48685ad6338 100644 --- a/docs/translations/api-docs/charts/charts-legend/charts-legend.json +++ b/docs/translations/api-docs/charts/charts-legend/charts-legend.json @@ -6,6 +6,7 @@ "description": "The direction of the legend layout. The default depends on the chart." }, "hidden": { "description": "Set to true to hide the legend." }, + "position": { "description": "The position of the legend." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } }, @@ -23,5 +24,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 000000000000..f9129ff20bde --- /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-tooltip/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json index 170732a759d7..1eb9f471154a 100644 --- a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json +++ b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json @@ -33,5 +33,9 @@ "nodeName": "the valueCell element" } }, - "slotDescriptions": { "axisContent": "", "itemContent": "", "popper": "" } + "slotDescriptions": { + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", + "popper": "Custom component for the tooltip popper." + } } 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 92bf65e12a76..1e277962d2f4 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 000000000000..4f48245b770e --- /dev/null +++ b/docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json @@ -0,0 +1,24 @@ +{ + "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." + }, + "position": { "description": "The position of the legend." } + }, + "classDescriptions": { + "mark": { "description": "" }, + "root": { "description": "" }, + "series": { "description": "" } + } +} diff --git a/docs/translations/api-docs/charts/gauge-container/gauge-container.json b/docs/translations/api-docs/charts/gauge-container/gauge-container.json new file mode 100644 index 000000000000..06c25cdf282c --- /dev/null +++ b/docs/translations/api-docs/charts/gauge-container/gauge-container.json @@ -0,0 +1,40 @@ +{ + "componentDescription": "", + "propDescriptions": { + "cornerRadius": { + "description": "The radius applied to arc corners (similar to border radius). Set it to '50%' to get rounded arc." + }, + "cx": { + "description": "The x coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the width the drawing area." + }, + "cy": { + "description": "The y coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the height the drawing area." + }, + "disableAxisListener": { + "description": "If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance." + }, + "endAngle": { "description": "The end angle (deg)." }, + "height": { + "description": "The height of the chart in px. If not defined, it takes the height of the parent element." + }, + "innerRadius": { + "description": "The radius between circle center and the begining of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area." + }, + "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." + }, + "outerRadius": { + "description": "The radius between circle center and the end of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area." + }, + "startAngle": { "description": "The start angle (deg)." }, + "value": { + "description": "The value of the gauge. Set to null to not display a value." + }, + "valueMax": { "description": "The maximal value of the gauge." }, + "valueMin": { "description": "The minimal value of the gauge." }, + "width": { + "description": "The width of the chart in px. If not defined, it takes the width of the parent element." + } + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/charts/gauge/gauge.json b/docs/translations/api-docs/charts/gauge/gauge.json new file mode 100644 index 000000000000..9e20b3914942 --- /dev/null +++ b/docs/translations/api-docs/charts/gauge/gauge.json @@ -0,0 +1,51 @@ +{ + "componentDescription": "", + "propDescriptions": { + "cornerRadius": { + "description": "The radius applied to arc corners (similar to border radius). Set it to '50%' to get rounded arc." + }, + "cx": { + "description": "The x coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the width the drawing area." + }, + "cy": { + "description": "The y coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the height the drawing area." + }, + "disableAxisListener": { + "description": "If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance." + }, + "endAngle": { "description": "The end angle (deg)." }, + "height": { + "description": "The height of the chart in px. If not defined, it takes the height of the parent element." + }, + "innerRadius": { + "description": "The radius between circle center and the begining of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area." + }, + "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." + }, + "outerRadius": { + "description": "The radius between circle center and the end of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area." + }, + "startAngle": { "description": "The start angle (deg)." }, + "value": { + "description": "The value of the gauge. Set to null to not display a value." + }, + "valueMax": { "description": "The maximal value of the gauge." }, + "valueMin": { "description": "The minimal value of the gauge." }, + "width": { + "description": "The width of the chart in px. If not defined, it takes the width of the parent element." + } + }, + "classDescriptions": { + "referenceArc": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the arc diplaying the range of available values" + }, + "root": { "description": "Styles applied to the root element." }, + "valueArc": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the arc diplaying the value" + }, + "valueText": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the value text" } + } +} 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 a6d9fe50d903..8da425ba637d 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -2,7 +2,8 @@ "componentDescription": "", "propDescriptions": { "axisHighlight": { - "description": "Object { x, y } that defines how the charts highlight the mouse position along the x- and y-axes. The two properties accept the following values: - 'none': display nothing. - 'line': display a line at the current mouse position. - 'band': display a band at the current mouse position. Only available with band scale." + "description": "The configuration of axes highlight.", + "seeMoreText": "See {{link}} for more details." }, "bottomAxis": { "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps." @@ -17,6 +18,7 @@ "disableLineItemHighlight": { "description": "If true, render the line highlight item." }, + "grid": { "description": "Option to display a cartesian grid in the background." }, "height": { "description": "The height of the chart in px. If not defined, it takes the height of the parent element." }, @@ -26,12 +28,27 @@ "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." }, + "onAreaClick": { "description": "Callback fired when an area element is clicked." }, + "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." + } + }, + "onLineClick": { "description": "Callback fired when a line element is clicked." }, + "onMarkClick": { "description": "Callback fired when a mark element is clicked." }, "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." }, + "series": { "description": "The series to display in the line chart." }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, + "tooltip": { + "description": "The configuration of the tooltip.", + "seeMoreText": "See {{link}} for more details." + }, "topAxis": { "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps." }, @@ -48,16 +65,16 @@ "classDescriptions": {}, "slotDescriptions": { "area": "The component that renders the area.", - "axisContent": "", - "axisLabel": "", - "axisLine": "", - "axisTick": "", - "axisTickLabel": "", - "itemContent": "", - "legend": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "axisLabel": "Custom component for axis label.", + "axisLine": "Custom component for the axis main line.", + "axisTick": "Custom component for the axis tick.", + "axisTickLabel": "Custom component for tick label.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", + "legend": "Custom rendering of the legend.", "line": "The component that renders the line.", "lineHighlight": "", "mark": "", - "popper": "" + "popper": "Custom component for the tooltip popper." } } 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 32105cc21e58..85bdfcd68a9a 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 c338ac1652e5..521be5851919 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 58bfec3d2112..72d44f2ee1d9 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 c9c6863b0053..8293d8d7baaa 100644 --- a/docs/translations/api-docs/charts/pie-chart/pie-chart.json +++ b/docs/translations/api-docs/charts/pie-chart/pie-chart.json @@ -1,6 +1,10 @@ { "componentDescription": "", "propDescriptions": { + "axisHighlight": { + "description": "The configuration of axes highlight.", + "seeMoreText": "See {{link}} for more details." + }, "bottomAxis": { "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps." }, @@ -17,14 +21,22 @@ "leftAxis": { "description": "Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps." }, + "legend": { "description": "The props of the legend." }, "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 a pie arc is clicked." }, "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." }, + "series": { "description": "The series to display in the pie chart." }, "skipAnimation": { "description": "If true, animations are skipped." }, "slotProps": { "description": "The props used for each component slot." }, + "slots": { "description": "Overridable component slots." }, + "tooltip": { + "description": "The configuration of the tooltip.", + "seeMoreText": "See {{link}} for more details." + }, "topAxis": { "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps." }, @@ -40,15 +52,15 @@ }, "classDescriptions": {}, "slotDescriptions": { - "axisContent": "", - "axisLabel": "", - "axisLine": "", - "axisTick": "", - "axisTickLabel": "", - "itemContent": "", - "legend": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "axisLabel": "Custom component for axis label.", + "axisLine": "Custom component for the axis main line.", + "axisTick": "Custom component for the axis tick.", + "axisTickLabel": "Custom component for tick label.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", + "legend": "Custom rendering of the legend.", "pieArc": "", "pieArcLabel": "", - "popper": "" + "popper": "Custom component for the tooltip 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 bf05960bf879..2fe4ec8dec4c 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 d23370f5a9a7..4aa4a64d3ea6 100644 --- a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json @@ -1,6 +1,10 @@ { "componentDescription": "", "propDescriptions": { + "axisHighlight": { + "description": "The configuration of axes highlight.", + "seeMoreText": "See {{link}} for more details." + }, "bottomAxis": { "description": "Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps." }, @@ -14,6 +18,7 @@ "disableVoronoi": { "description": "If true, the interaction will not use the Voronoi cell and fall back to hover events." }, + "grid": { "description": "Option to display a cartesian grid in the background." }, "height": { "description": "The height of the chart in px. If not defined, it takes the height of the parent element." }, @@ -23,11 +28,23 @@ "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." }, + "series": { "description": "The series to display in the scatter chart." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, + "tooltip": { + "description": "The configuration of the tooltip.", + "seeMoreText": "See {{link}} for more details." + }, "topAxis": { "description": "Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps." }, @@ -46,14 +63,14 @@ }, "classDescriptions": {}, "slotDescriptions": { - "axisContent": "", - "axisLabel": "", - "axisLine": "", - "axisTick": "", - "axisTickLabel": "", - "itemContent": "", - "legend": "", - "popper": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "axisLabel": "Custom component for axis label.", + "axisLine": "Custom component for the axis main line.", + "axisTick": "Custom component for the axis tick.", + "axisTickLabel": "Custom component for tick label.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", + "legend": "Custom rendering of the legend.", + "popper": "Custom component for the tooltip 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 f2d38cfd3073..6d95fc6a93fb 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 f93d4cbd8c79..512086dda520 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 6e43932009df..e17bf6529969 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 @@ -41,12 +41,12 @@ "classDescriptions": {}, "slotDescriptions": { "area": "The component that renders the area.", - "axisContent": "", - "bar": "", - "itemContent": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "bar": "The component that renders the bar.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", "line": "The component that renders the line.", "lineHighlight": "", "mark": "", - "popper": "" + "popper": "Custom component for the tooltip popper." } } 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 212ba37fe1a6..43e271be7723 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 @@ -36,8 +36,8 @@ "clipboardCopyCellDelimiter": { "description": "The character used to separate cell values when copying to the clipboard." }, - "columnBuffer": { - "description": "Number of extra columns to be rendered before/after the visible slice." + "columnBufferPx": { + "description": "Column region in pixels to render before/after the viewport" }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." @@ -45,9 +45,6 @@ "columns": { "description": "Set of columns of type GridColDef[]." }, - "columnThreshold": { - "description": "Number of rows from the columnBuffer that can be visible before a new slice is rendered." - }, "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, @@ -233,7 +230,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." @@ -249,6 +246,10 @@ "details": "Additional details for this callback." } }, + "onBeforeClipboardPasteStart": { + "description": "Callback fired before the clipboard paste operation starts. Use it to confirm or cancel the paste operation.", + "typeDescriptions": { "params": "Params passed to the callback." } + }, "onCellClick": { "description": "Callback fired when any cell is clicked.", "typeDescriptions": { @@ -390,6 +391,10 @@ "details": "Additional details for this callback." } }, + "onDensityChange": { + "description": "Callback fired when the density changes.", + "typeDescriptions": { "density": "New density value." } + }, "onDetailPanelExpandedRowIdsChange": { "description": "Callback fired when the detail panel of a row is opened or closed.", "typeDescriptions": { @@ -482,6 +487,10 @@ "details": "Additional details for this callback." } }, + "onRowCountChange": { + "description": "Callback fired when the row count has changed.", + "typeDescriptions": { "count": "Updated row count." } + }, "onRowDoubleClick": { "description": "Callback fired when a double click event comes from a row container element.", "typeDescriptions": { @@ -490,13 +499,6 @@ "details": "Additional details for this callback." } }, - "onRowEditCommit": { - "description": "Callback fired when the row changes are committed.", - "typeDescriptions": { - "id": "The row id.", - "event": "The event that caused this prop to be called." - } - }, "onRowEditStart": { "description": "Callback fired when the row turns to edit mode.", "typeDescriptions": { @@ -573,9 +575,7 @@ "Promise | R": "The final values to update the row." } }, - "rowBuffer": { - "description": "Number of extra rows to be rendered before/after the visible slice." - }, + "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" }, "rowCount": { "description": "Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows." }, @@ -598,9 +598,6 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, - "rowThreshold": { - "description": "Number of rows from the rowBuffer that can be visible before a new slice is rendered." - }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, @@ -679,7 +676,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" }, - "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cell--editable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -690,6 +686,10 @@ "nodeName": "the cell element", "conditions": "the cell is in edit mode" }, + "cell--flex": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the cell element in flex display mode" + }, "cell--pinnedLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -743,11 +743,6 @@ "cell--withLeftBorder": { "description": "Styles applied the cell if showColumnVerticalBorder={true}." }, - "cell--withRenderer": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the cell element", - "conditions": "the cell has a custom renderer" - }, "cell--withRightBorder": { "description": "Styles applied the cell if showColumnVerticalBorder={true}." }, @@ -755,10 +750,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell checkbox element" }, - "cellContent": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the element that wraps the cell content" - }, "cellEmpty": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the empty cell element" @@ -771,10 +762,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the selection checkbox element" }, - "columnGroupHeader": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column group header element" - }, "columnHeader": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the column header element" @@ -823,11 +810,8 @@ "nodeName": "the column header", "conditions": "the type of the column is number" }, - "columnHeader--showColumnBorder": { - "description": "Styles applied to {{nodeName}} when {{conditions}}.", - "nodeName": "the column group header cell", - "conditions": "show column border" - }, + "columnHeader--pinnedLeft": { "description": "" }, + "columnHeader--pinnedRight": { "description": "" }, "columnHeader--sortable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header", @@ -838,6 +822,7 @@ "nodeName": "the column header", "conditions": "the column is sorted" }, + "columnHeader--withLeftBorder": { "description": "" }, "columnHeader--withRightBorder": { "description": "Styles applied the column header if showColumnVerticalBorder={true}." }, @@ -849,24 +834,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the column header's draggable container element" }, - "columnHeaderDropZone": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column headers wrapper", - "conditions": "a column is being dragged" - }, - "columnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers" - }, - "columnHeadersInner": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers's inner element" - }, - "columnHeadersInner--scrollable": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column headers's inner element", - "conditions": "there is a horizontal scrollbar" - }, "columnHeaderTitle": { "description": "Styles applied to the column header's title element;" }, @@ -902,10 +869,6 @@ "nodeName": "the column header separator", "conditions": "the side is "right"" }, - "columnsManagement": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the columns management body" - }, "columnsManagementFooter": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the columns management footer element" @@ -930,10 +893,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel element" }, - "detailPanels": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the detail panels wrapper element" - }, "detailPanelToggleCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel toggle cell element" @@ -951,15 +910,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" }, - "filler": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the filler row" }, - "filler--pinnedLeft": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the filler row pinned left section" - }, - "filler--pinnedRight": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the filler row pinned right section" - }, "filterForm": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" @@ -1053,7 +1003,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the overlay wrapper inner element" }, - "panel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel element" }, "panelContent": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel content element" @@ -1071,18 +1020,6 @@ "nodeName": "the panel wrapper element" }, "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" }, - "pinnedColumnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the pinned column headers" - }, - "pinnedColumnHeaders--left": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the left pinned column headers" - }, - "pinnedColumnHeaders--right": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the right pinned column headers" - }, "pinnedColumns": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the pinned columns" @@ -1124,7 +1061,6 @@ "nodeName": "the root element", "conditions": "user selection is disabled" }, - "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" }, "row--detailPanelExpanded": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the row", @@ -1246,5 +1182,79 @@ "withVerticalBorder": { "description": "Styles applied the grid if showColumnVerticalBorder={true}." } + }, + "slotDescriptions": { + "baseButton": "The custom Button component used in the grid.", + "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "baseChip": "The custom Chip component used in the grid.", + "baseFormControl": "The custom FormControl component used in the grid.", + "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputAdornment": "The custom InputAdornment component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", + "basePopper": "The custom Popper component used in the grid.", + "baseSelect": "The custom Select component used in the grid.", + "baseSelectOption": "The custom SelectOption component used in the grid.", + "baseTextField": "The custom TextField component used in the grid.", + "baseTooltip": "The custom Tooltip component used in the grid.", + "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "booleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "cell": "Component rendered for each cell.", + "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", + "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "columnMenuAggregationIcon": "Icon displayed in column menu for aggregation", + "columnMenuClearIcon": "Icon displayed in column menu for clearing values", + "columnMenuFilterIcon": "Icon displayed in column menu for filter", + "columnMenuGroupIcon": "Icon displayed in column menu for grouping", + "columnMenuHideIcon": "Icon displayed in column menu for hiding column", + "columnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "columnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "columnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "columnMenuPinRightIcon": "Icon displayed in column menu for right pinning", + "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnMenuUngroupIcon": "Icon displayed in column menu for ungrouping", + "columnReorderIcon": "Icon displayed on the column reorder button.", + "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "columnSelectorIcon": "Icon displayed on the column menu selector tab.", + "columnsManagement": "Component used inside Grid Columns panel to manage columns.", + "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "columnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "densityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "detailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "detailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "detailPanels": "Component responsible for rendering the detail panels.", + "exportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "filterPanel": "Filter panel component rendered when clicking the filter button.", + "filterPanelAddIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelDeleteIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelRemoveAllIcon": "Icon displayed for deleting all the active filters from filter panel.", + "footer": "Footer component rendered at the bottom of the grid viewport.", + "footerRowCount": "Row count component rendered in the footer", + "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "headerFilterCell": "Component responsible for showing menu adornment in Header filter row", + "headerFilterMenu": "Component responsible for showing menu in Header filter row", + "loadIcon": "Icon displayed on the input while processing.", + "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "pagination": "Pagination component rendered in the grid footer by default.", + "panel": "Panel component wrapping the filters and columns panels.", + "quickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "quickFilterIcon": "Icon displayed on the quick filter input.", + "row": "Component rendered for each row.", + "rowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "skeletonCell": "Component rendered for each skeleton cell.", + "toolbar": "Toolbar component rendered inside the Header component.", + "treeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "treeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed" } } 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 d16d75277d3d..714f0c82153d 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 @@ -29,8 +29,8 @@ "clipboardCopyCellDelimiter": { "description": "The character used to separate cell values when copying to the clipboard." }, - "columnBuffer": { - "description": "Number of extra columns to be rendered before/after the visible slice." + "columnBufferPx": { + "description": "Column region in pixels to render before/after the viewport" }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." @@ -38,9 +38,6 @@ "columns": { "description": "Set of columns of type GridColDef[]." }, - "columnThreshold": { - "description": "Number of rows from the columnBuffer that can be visible before a new slice is rendered." - }, "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, @@ -214,7 +211,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." @@ -351,6 +348,10 @@ "details": "Additional details for this callback." } }, + "onDensityChange": { + "description": "Callback fired when the density changes.", + "typeDescriptions": { "density": "New density value." } + }, "onDetailPanelExpandedRowIdsChange": { "description": "Callback fired when the detail panel of a row is opened or closed.", "typeDescriptions": { @@ -439,6 +440,10 @@ "details": "Additional details for this callback." } }, + "onRowCountChange": { + "description": "Callback fired when the row count has changed.", + "typeDescriptions": { "count": "Updated row count." } + }, "onRowDoubleClick": { "description": "Callback fired when a double click event comes from a row container element.", "typeDescriptions": { @@ -447,13 +452,6 @@ "details": "Additional details for this callback." } }, - "onRowEditCommit": { - "description": "Callback fired when the row changes are committed.", - "typeDescriptions": { - "id": "The row id.", - "event": "The event that caused this prop to be called." - } - }, "onRowEditStart": { "description": "Callback fired when the row turns to edit mode.", "typeDescriptions": { @@ -523,9 +521,7 @@ "Promise | R": "The final values to update the row." } }, - "rowBuffer": { - "description": "Number of extra rows to be rendered before/after the visible slice." - }, + "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" }, "rowCount": { "description": "Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows." }, @@ -544,9 +540,6 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, - "rowThreshold": { - "description": "Number of rows from the rowBuffer that can be visible before a new slice is rendered." - }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, @@ -621,7 +614,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" }, - "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cell--editable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -632,6 +624,10 @@ "nodeName": "the cell element", "conditions": "the cell is in edit mode" }, + "cell--flex": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the cell element in flex display mode" + }, "cell--pinnedLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -685,11 +681,6 @@ "cell--withLeftBorder": { "description": "Styles applied the cell if showColumnVerticalBorder={true}." }, - "cell--withRenderer": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the cell element", - "conditions": "the cell has a custom renderer" - }, "cell--withRightBorder": { "description": "Styles applied the cell if showColumnVerticalBorder={true}." }, @@ -697,10 +688,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell checkbox element" }, - "cellContent": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the element that wraps the cell content" - }, "cellEmpty": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the empty cell element" @@ -713,10 +700,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the selection checkbox element" }, - "columnGroupHeader": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column group header element" - }, "columnHeader": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the column header element" @@ -765,11 +748,8 @@ "nodeName": "the column header", "conditions": "the type of the column is number" }, - "columnHeader--showColumnBorder": { - "description": "Styles applied to {{nodeName}} when {{conditions}}.", - "nodeName": "the column group header cell", - "conditions": "show column border" - }, + "columnHeader--pinnedLeft": { "description": "" }, + "columnHeader--pinnedRight": { "description": "" }, "columnHeader--sortable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header", @@ -780,6 +760,7 @@ "nodeName": "the column header", "conditions": "the column is sorted" }, + "columnHeader--withLeftBorder": { "description": "" }, "columnHeader--withRightBorder": { "description": "Styles applied the column header if showColumnVerticalBorder={true}." }, @@ -791,24 +772,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the column header's draggable container element" }, - "columnHeaderDropZone": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column headers wrapper", - "conditions": "a column is being dragged" - }, - "columnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers" - }, - "columnHeadersInner": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers's inner element" - }, - "columnHeadersInner--scrollable": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column headers's inner element", - "conditions": "there is a horizontal scrollbar" - }, "columnHeaderTitle": { "description": "Styles applied to the column header's title element;" }, @@ -844,10 +807,6 @@ "nodeName": "the column header separator", "conditions": "the side is "right"" }, - "columnsManagement": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the columns management body" - }, "columnsManagementFooter": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the columns management footer element" @@ -872,10 +831,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel element" }, - "detailPanels": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the detail panels wrapper element" - }, "detailPanelToggleCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel toggle cell element" @@ -893,15 +848,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" }, - "filler": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the filler row" }, - "filler--pinnedLeft": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the filler row pinned left section" - }, - "filler--pinnedRight": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the filler row pinned right section" - }, "filterForm": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" @@ -995,7 +941,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the overlay wrapper inner element" }, - "panel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel element" }, "panelContent": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel content element" @@ -1013,18 +958,6 @@ "nodeName": "the panel wrapper element" }, "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" }, - "pinnedColumnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the pinned column headers" - }, - "pinnedColumnHeaders--left": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the left pinned column headers" - }, - "pinnedColumnHeaders--right": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the right pinned column headers" - }, "pinnedColumns": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the pinned columns" @@ -1066,7 +999,6 @@ "nodeName": "the root element", "conditions": "user selection is disabled" }, - "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" }, "row--detailPanelExpanded": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the row", @@ -1188,5 +1120,76 @@ "withVerticalBorder": { "description": "Styles applied the grid if showColumnVerticalBorder={true}." } + }, + "slotDescriptions": { + "baseButton": "The custom Button component used in the grid.", + "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "baseChip": "The custom Chip component used in the grid.", + "baseFormControl": "The custom FormControl component used in the grid.", + "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputAdornment": "The custom InputAdornment component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", + "basePopper": "The custom Popper component used in the grid.", + "baseSelect": "The custom Select component used in the grid.", + "baseSelectOption": "The custom SelectOption component used in the grid.", + "baseTextField": "The custom TextField component used in the grid.", + "baseTooltip": "The custom Tooltip component used in the grid.", + "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "booleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "cell": "Component rendered for each cell.", + "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", + "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "columnMenuClearIcon": "Icon displayed in column menu for clearing values", + "columnMenuFilterIcon": "Icon displayed in column menu for filter", + "columnMenuHideIcon": "Icon displayed in column menu for hiding column", + "columnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "columnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "columnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "columnMenuPinRightIcon": "Icon displayed in column menu for right pinning", + "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnReorderIcon": "Icon displayed on the column reorder button.", + "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "columnSelectorIcon": "Icon displayed on the column menu selector tab.", + "columnsManagement": "Component used inside Grid Columns panel to manage columns.", + "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "columnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "densityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "detailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "detailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "detailPanels": "Component responsible for rendering the detail panels.", + "exportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "filterPanel": "Filter panel component rendered when clicking the filter button.", + "filterPanelAddIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelDeleteIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelRemoveAllIcon": "Icon displayed for deleting all the active filters from filter panel.", + "footer": "Footer component rendered at the bottom of the grid viewport.", + "footerRowCount": "Row count component rendered in the footer", + "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "headerFilterCell": "Component responsible for showing menu adornment in Header filter row", + "headerFilterMenu": "Component responsible for showing menu in Header filter row", + "loadIcon": "Icon displayed on the input while processing.", + "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "pagination": "Pagination component rendered in the grid footer by default.", + "panel": "Panel component wrapping the filters and columns panels.", + "quickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "quickFilterIcon": "Icon displayed on the quick filter input.", + "row": "Component rendered for each row.", + "rowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "skeletonCell": "Component rendered for each skeleton cell.", + "toolbar": "Toolbar component rendered inside the Header component.", + "treeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "treeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed" } } 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 feed9462a9c0..18b8f9aee4f1 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 @@ -14,6 +14,10 @@ "autoPageSize": { "description": "If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar." }, + "autosizeOnMount": { + "description": "If true, columns are autosized after the datagrid is mounted." + }, + "autosizeOptions": { "description": "The options for autosize when user-initiated." }, "cellModesModel": { "description": "Controls the modes of the cells." }, "checkboxSelection": { "description": "If true, the Data Grid will display an extra column with checkboxes for selecting rows." @@ -22,8 +26,8 @@ "clipboardCopyCellDelimiter": { "description": "The character used to separate cell values when copying to the clipboard." }, - "columnBuffer": { - "description": "Number of extra columns to be rendered before/after the visible slice." + "columnBufferPx": { + "description": "Column region in pixels to render before/after the viewport" }, "columnHeaderHeight": { "description": "Sets the height in pixel of the column headers in the Data Grid." @@ -31,15 +35,16 @@ "columns": { "description": "Set of columns of type GridColDef[]." }, - "columnThreshold": { - "description": "Number of rows from the columnBuffer that can be visible before a new slice is rendered." - }, "columnVisibilityModel": { "description": "Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef." }, "density": { "description": "Set the density of the Data Grid." }, + "disableAutosize": { + "description": "If true, column autosizing on header separator double-click is disabled." + }, "disableColumnFilter": { "description": "If true, column filters are disabled." }, "disableColumnMenu": { "description": "If true, the column menu is disabled." }, + "disableColumnResize": { "description": "If true, resizing columns is disabled." }, "disableColumnSelector": { "description": "If true, hiding/showing columns is disabled." }, @@ -150,7 +155,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." @@ -264,6 +269,14 @@ "details": "Additional details for this callback." } }, + "onColumnResize": { + "description": "Callback fired while a column is being resized.", + "typeDescriptions": { + "params": "With all properties from GridColumnResizeParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, "onColumnVisibilityModelChange": { "description": "Callback fired when the column visibility model changes.", "typeDescriptions": { @@ -271,6 +284,18 @@ "details": "Additional details for this callback." } }, + "onColumnWidthChange": { + "description": "Callback fired when the width of a column is changed.", + "typeDescriptions": { + "params": "With all properties from GridColumnResizeParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onDensityChange": { + "description": "Callback fired when the density changes.", + "typeDescriptions": { "density": "New density value." } + }, "onFilterModelChange": { "description": "Callback fired when the Filter model changes before the filters are applied.", "typeDescriptions": { @@ -337,6 +362,10 @@ "details": "Additional details for this callback." } }, + "onRowCountChange": { + "description": "Callback fired when the row count has changed.", + "typeDescriptions": { "count": "Updated row count." } + }, "onRowDoubleClick": { "description": "Callback fired when a double click event comes from a row container element.", "typeDescriptions": { @@ -345,13 +374,6 @@ "details": "Additional details for this callback." } }, - "onRowEditCommit": { - "description": "Callback fired when the row changes are committed.", - "typeDescriptions": { - "id": "The row id.", - "event": "The event that caused this prop to be called." - } - }, "onRowEditStart": { "description": "Callback fired when the row turns to edit mode.", "typeDescriptions": { @@ -402,9 +424,7 @@ "Promise | R": "The final values to update the row." } }, - "rowBuffer": { - "description": "Number of extra rows to be rendered before/after the visible slice." - }, + "rowBufferPx": { "description": "Row region in pixels to render before/after the viewport" }, "rowCount": { "description": "Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows." }, @@ -419,9 +439,6 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, - "rowThreshold": { - "description": "Number of rows from the rowBuffer that can be visible before a new slice is rendered." - }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, @@ -487,7 +504,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" }, - "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cell--editable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -498,6 +514,10 @@ "nodeName": "the cell element", "conditions": "the cell is in edit mode" }, + "cell--flex": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the cell element in flex display mode" + }, "cell--pinnedLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -551,11 +571,6 @@ "cell--withLeftBorder": { "description": "Styles applied the cell if showColumnVerticalBorder={true}." }, - "cell--withRenderer": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the cell element", - "conditions": "the cell has a custom renderer" - }, "cell--withRightBorder": { "description": "Styles applied the cell if showColumnVerticalBorder={true}." }, @@ -563,10 +578,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell checkbox element" }, - "cellContent": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the element that wraps the cell content" - }, "cellEmpty": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the empty cell element" @@ -579,10 +590,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the selection checkbox element" }, - "columnGroupHeader": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column group header element" - }, "columnHeader": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the column header element" @@ -631,11 +638,8 @@ "nodeName": "the column header", "conditions": "the type of the column is number" }, - "columnHeader--showColumnBorder": { - "description": "Styles applied to {{nodeName}} when {{conditions}}.", - "nodeName": "the column group header cell", - "conditions": "show column border" - }, + "columnHeader--pinnedLeft": { "description": "" }, + "columnHeader--pinnedRight": { "description": "" }, "columnHeader--sortable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the column header", @@ -646,6 +650,7 @@ "nodeName": "the column header", "conditions": "the column is sorted" }, + "columnHeader--withLeftBorder": { "description": "" }, "columnHeader--withRightBorder": { "description": "Styles applied the column header if showColumnVerticalBorder={true}." }, @@ -657,24 +662,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the column header's draggable container element" }, - "columnHeaderDropZone": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column headers wrapper", - "conditions": "a column is being dragged" - }, - "columnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers" - }, - "columnHeadersInner": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers's inner element" - }, - "columnHeadersInner--scrollable": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the column headers's inner element", - "conditions": "there is a horizontal scrollbar" - }, "columnHeaderTitle": { "description": "Styles applied to the column header's title element;" }, @@ -710,10 +697,6 @@ "nodeName": "the column header separator", "conditions": "the side is "right"" }, - "columnsManagement": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the columns management body" - }, "columnsManagementFooter": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the columns management footer element" @@ -738,10 +721,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel element" }, - "detailPanels": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the detail panels wrapper element" - }, "detailPanelToggleCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel toggle cell element" @@ -759,15 +738,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the input component" }, - "filler": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the filler row" }, - "filler--pinnedLeft": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the filler row pinned left section" - }, - "filler--pinnedRight": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the filler row pinned right section" - }, "filterForm": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the root of the filter form component" @@ -861,7 +831,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the overlay wrapper inner element" }, - "panel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel element" }, "panelContent": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel content element" @@ -879,18 +848,6 @@ "nodeName": "the panel wrapper element" }, "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" }, - "pinnedColumnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the pinned column headers" - }, - "pinnedColumnHeaders--left": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the left pinned column headers" - }, - "pinnedColumnHeaders--right": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the right pinned column headers" - }, "pinnedColumns": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the pinned columns" @@ -932,7 +889,6 @@ "nodeName": "the root element", "conditions": "user selection is disabled" }, - "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" }, "row--detailPanelExpanded": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the row", @@ -1054,5 +1010,72 @@ "withVerticalBorder": { "description": "Styles applied the grid if showColumnVerticalBorder={true}." } + }, + "slotDescriptions": { + "baseButton": "The custom Button component used in the grid.", + "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "baseChip": "The custom Chip component used in the grid.", + "baseFormControl": "The custom FormControl component used in the grid.", + "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputAdornment": "The custom InputAdornment component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", + "basePopper": "The custom Popper component used in the grid.", + "baseSelect": "The custom Select component used in the grid.", + "baseSelectOption": "The custom SelectOption component used in the grid.", + "baseTextField": "The custom TextField component used in the grid.", + "baseTooltip": "The custom Tooltip component used in the grid.", + "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "booleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "cell": "Component rendered for each cell.", + "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", + "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "columnMenuClearIcon": "Icon displayed in column menu for clearing values", + "columnMenuFilterIcon": "Icon displayed in column menu for filter", + "columnMenuHideIcon": "Icon displayed in column menu for hiding column", + "columnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "columnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnReorderIcon": "Icon displayed on the column reorder button.", + "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "columnSelectorIcon": "Icon displayed on the column menu selector tab.", + "columnsManagement": "Component used inside Grid Columns panel to manage columns.", + "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "columnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "densityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "detailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "detailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "detailPanels": "Component responsible for rendering the detail panels.", + "exportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "filterPanel": "Filter panel component rendered when clicking the filter button.", + "filterPanelAddIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelDeleteIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelRemoveAllIcon": "Icon displayed for deleting all the active filters from filter panel.", + "footer": "Footer component rendered at the bottom of the grid viewport.", + "footerRowCount": "Row count component rendered in the footer", + "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "loadIcon": "Icon displayed on the input while processing.", + "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "pagination": "Pagination component rendered in the grid footer by default.", + "panel": "Panel component wrapping the filters and columns panels.", + "quickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "quickFilterIcon": "Icon displayed on the quick filter input.", + "row": "Component rendered for each row.", + "rowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "skeletonCell": "Component rendered for each skeleton cell.", + "toolbar": "Toolbar component rendered inside the Header component.", + "treeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "treeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed" } } diff --git a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json index 7cd6b5135e36..4fb2face3be8 100644 --- a/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-calendar/date-calendar.json @@ -4,6 +4,7 @@ "autoFocus": { "description": "If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered." }, + "classes": { "description": "Override or extend the styles applied to the component." }, "dayOfWeekFormatter": { "description": "Formats the day of week displayed in the calendar header.", "typeDescriptions": { @@ -77,7 +78,7 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." diff --git a/docs/translations/api-docs/date-pickers/date-field/date-field.json b/docs/translations/api-docs/date-pickers/date-field/date-field.json index 21890db62454..e023b91557cb 100644 --- a/docs/translations/api-docs/date-pickers/date-field/date-field.json +++ b/docs/translations/api-docs/date-pickers/date-field/date-field.json @@ -86,10 +86,10 @@ "description": "If true, the label is displayed as required and the input element is required." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." diff --git a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json index 68f51d15176a..35ceea6728aa 100644 --- a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json @@ -1,16 +1,21 @@ { "componentDescription": "", "propDescriptions": { + "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, "onViewChange": { "description": "Callback called when a toolbar is clicked", "typeDescriptions": { "view": "The view to open" } }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." }, - "view": { "description": "Currently visible picker view." } + "view": { "description": "Currently visible picker view." }, + "views": { "description": "Available views." } }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, diff --git a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json index 0e15c5cd2bde..b668d9cce6fa 100644 --- a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json @@ -113,10 +113,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." @@ -184,7 +184,7 @@ "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json index e766f5c5c234..f8ea0bbeb6f7 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar/date-range-calendar.json @@ -8,6 +8,7 @@ "description": "Range positions available for selection. This list is checked against when checking if a next range position can be selected.
Used on Date Time Range pickers with current rangePosition to force a finish selection after just one range position selection." }, "calendars": { "description": "The number of calendars to render." }, + "classes": { "description": "Override or extend the styles applied to the component." }, "currentMonthCalendarPosition": { "description": "Position the current month is rendered in." }, "dayOfWeekFormatter": { "description": "Formats the day of week displayed in the calendar header.", @@ -93,7 +94,7 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", diff --git a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json index 6ce5b1f46f76..6198bb709b0e 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json @@ -1,11 +1,21 @@ { "componentDescription": "", "propDescriptions": { + "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, + "onViewChange": { + "description": "Callback called when a toolbar is clicked", + "typeDescriptions": { "view": "The view to open" } + }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." - } + }, + "view": { "description": "Currently visible picker view." }, + "views": { "description": "Available views." } }, "classDescriptions": { "container": { diff --git a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json index eb22b1e23a00..c611e6d21646 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json @@ -122,10 +122,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", @@ -174,7 +174,7 @@ "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", - "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-field/date-time-field.json b/docs/translations/api-docs/date-pickers/date-time-field/date-time-field.json index 039cb389ead3..4e77982370d0 100644 --- a/docs/translations/api-docs/date-pickers/date-time-field/date-time-field.json +++ b/docs/translations/api-docs/date-pickers/date-time-field/date-time-field.json @@ -103,10 +103,10 @@ "description": "If true, the label is displayed as required and the input element is required." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." diff --git a/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json b/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json index dd1a91b2539c..57e9f88d0d2c 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker-tabs/date-time-picker-tabs.json @@ -8,6 +8,9 @@ "description": "Callback called when a tab is clicked.", "typeDescriptions": { "view": "The view to open" } }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, "timeIcon": { "description": "Time tab icon." }, "view": { "description": "Currently visible picker view." } }, diff --git a/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json index 07cd4628d852..fa51d520fd07 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json @@ -7,6 +7,9 @@ "description": "Callback called when a toolbar is clicked", "typeDescriptions": { "view": "The view to open" } }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." @@ -14,7 +17,8 @@ "toolbarTitle": { "description": "If provided, it will be used instead of dateTimePickerToolbarTitle from localization." }, - "view": { "description": "Currently visible picker view." } + "view": { "description": "Currently visible picker view." }, + "views": { "description": "Available views." } }, "classDescriptions": { "ampmLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "am/pm labels" }, diff --git a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json index 13371c238fdd..ed02c1200ef9 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json @@ -133,10 +133,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." @@ -224,7 +224,7 @@ "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "tabs": "Tabs enabling toggling between date and time pickers.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json index b53e1ece571d..40d062cc2ac9 100644 --- a/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json +++ b/docs/translations/api-docs/date-pickers/date-time-range-picker-tabs/date-time-range-picker-tabs.json @@ -8,6 +8,9 @@ "description": "Callback called when a tab is clicked.", "typeDescriptions": { "view": "The view to open" } }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, "timeIcon": { "description": "Time tab icon." }, "view": { "description": "Currently visible picker view." } }, diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json index b5619c2e336c..2819a2b5a12f 100644 --- a/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json @@ -1,16 +1,21 @@ { "componentDescription": "", "propDescriptions": { + "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, "onViewChange": { "description": "Callback called when a toolbar is clicked", "typeDescriptions": { "view": "The view to open" } }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." }, - "view": { "description": "Currently visible picker view." } + "view": { "description": "Currently visible picker view." }, + "views": { "description": "Available views." } }, "classDescriptions": { "endToolbar": { diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json index 59370c227246..0f72e517db20 100644 --- a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json @@ -146,10 +146,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", @@ -222,7 +222,7 @@ "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "tabs": "Tabs enabling toggling between date and time pickers.", - "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json index 7417406bf04b..b79689614dc6 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json @@ -110,10 +110,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." @@ -178,7 +178,7 @@ "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json index e8ff63d1170d..37f5382422fb 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json @@ -119,10 +119,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", @@ -168,7 +168,7 @@ "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", - "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json index d5f526e8584f..31eb2d4af4ac 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json @@ -130,10 +130,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." @@ -218,7 +218,7 @@ "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "tabs": "Tabs enabling toggling between date and time pickers.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json index 6d7cc6b7db13..0ab25ea155fd 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json @@ -143,10 +143,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", @@ -216,7 +216,7 @@ "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "tabs": "Tabs enabling toggling between date and time pickers.", - "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/desktop-time-picker/desktop-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-time-picker/desktop-time-picker.json index 7e6c1133b42c..897981187fe0 100644 --- a/docs/translations/api-docs/date-pickers/desktop-time-picker/desktop-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-time-picker/desktop-time-picker.json @@ -90,7 +90,7 @@ "description": "The date used to generate the new value when both value and defaultValue are empty." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableTime": { "description": "Disable specific time.", @@ -148,7 +148,7 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json index c8fce2d4fb48..1e0eaf91dca0 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json @@ -110,10 +110,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." @@ -172,7 +172,7 @@ "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json index 01bb3ecedd3d..030601daceb3 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json @@ -116,10 +116,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", @@ -164,7 +164,7 @@ "shortcuts": "Custom component for the shortcuts.", "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", - "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json index 39aca2fc7046..0dec4b4e84de 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json @@ -130,10 +130,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." @@ -201,7 +201,7 @@ "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "tabs": "Tabs enabling toggling between date and time pickers.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json index 81d3254bc4b8..135c8a9594b2 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json @@ -140,10 +140,10 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", @@ -212,7 +212,7 @@ "switchViewButton": "Button displayed to switch between different calendar views.", "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", "tabs": "Tabs enabling toggling between date and time pickers.", - "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render a date or time inside the default field. It is rendered twice: once for the start element and once for the end element.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/mobile-time-picker/mobile-time-picker.json b/docs/translations/api-docs/date-pickers/mobile-time-picker/mobile-time-picker.json index b74c526f7afd..80fd21ef71fd 100644 --- a/docs/translations/api-docs/date-pickers/mobile-time-picker/mobile-time-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-time-picker/mobile-time-picker.json @@ -90,7 +90,7 @@ "description": "The date used to generate the new value when both value and defaultValue are empty." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableTime": { "description": "Disable specific time.", @@ -131,7 +131,7 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json index 70fc7d15b6f4..3249b81c4e44 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json @@ -1,7 +1,11 @@ { "componentDescription": "", "propDescriptions": { + "autoFocus": { + "description": "If true, the input element is focused during the first mount." + }, "classes": { "description": "Override or extend the styles applied to the component." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, @@ -47,10 +51,10 @@ "description": "The date used to generate a part of the new value that is not present in the format when both value and defaultValue are empty. For example, on time fields it will be used to determine the date to set." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json index ed82c7258704..5a80d81c50d9 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field/multi-input-date-time-range-field.json @@ -2,7 +2,11 @@ "componentDescription": "", "propDescriptions": { "ampm": { "description": "12h/24h view for hour selection clock." }, + "autoFocus": { + "description": "If true, the input element is focused during the first mount." + }, "classes": { "description": "Override or extend the styles applied to the component." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, @@ -64,10 +68,10 @@ "description": "The date used to generate a part of the new value that is not present in the format when both value and defaultValue are empty. For example, on time fields it will be used to determine the date to set." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", diff --git a/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json index 4032ca4f894b..36121c5af67d 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-time-range-field/multi-input-time-range-field.json @@ -2,7 +2,11 @@ "componentDescription": "", "propDescriptions": { "ampm": { "description": "12h/24h view for hour selection clock." }, + "autoFocus": { + "description": "If true, the input element is focused during the first mount." + }, "classes": { "description": "Override or extend the styles applied to the component." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, @@ -56,7 +60,7 @@ "description": "The date used to generate a part of the new value that is not present in the format when both value and defaultValue are empty. For example, on time fields it will be used to determine the date to set." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableTime": { "description": "Disable specific time.", diff --git a/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json b/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json index 2802347c6104..1fc772c256d8 100644 --- a/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json +++ b/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json @@ -1,9 +1,13 @@ { "componentDescription": "", "propDescriptions": { + "classes": { "description": "Override or extend the styles applied to the component." }, "orientation": { "description": "Force rendering in particular orientation." }, "slotProps": { "description": "The props used for each component slot." }, - "slots": { "description": "Overridable component slots." } + "slots": { "description": "Overridable component slots." }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + } }, "classDescriptions": { "contentWrapper": { diff --git a/docs/translations/api-docs/date-pickers/pickers-range-calendar-header/pickers-range-calendar-header.json b/docs/translations/api-docs/date-pickers/pickers-range-calendar-header/pickers-range-calendar-header.json new file mode 100644 index 000000000000..a152174c7d95 --- /dev/null +++ b/docs/translations/api-docs/date-pickers/pickers-range-calendar-header/pickers-range-calendar-header.json @@ -0,0 +1,31 @@ +{ + "componentDescription": "", + "propDescriptions": { + "calendars": { "description": "The number of calendars rendered." }, + "classes": { "description": "Override or extend the styles applied to the component." }, + "format": { "description": "Format used to display the date." }, + "month": { "description": "Month used for this header." }, + "monthIndex": { "description": "Index of the month used for this header." }, + "slotProps": { "description": "The props used for each component slot." }, + "slots": { "description": "Overridable component slots." }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + } + }, + "classDescriptions": { + "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label element" }, + "labelContainer": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the label container element" + }, + "root": { "description": "Styles applied to the root element." }, + "switchViewButton": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the switch view button element" + }, + "switchViewIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the switch view icon element" + } + } +} diff --git a/docs/translations/api-docs/date-pickers/pickers-sections-list.json b/docs/translations/api-docs/date-pickers/pickers-sections-list.json new file mode 100644 index 000000000000..ebdaf7ab80b8 --- /dev/null +++ b/docs/translations/api-docs/date-pickers/pickers-sections-list.json @@ -0,0 +1,22 @@ +{ + "componentDescription": "", + "propDescriptions": { + "slotProps": { + "description": "The props used for each component slot.", + "deprecated": "", + "typeDescriptions": {} + }, + "slots": { + "description": "Overridable component slots.", + "deprecated": "", + "typeDescriptions": {} + } + }, + "classDescriptions": { + "sectionContent": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the content of a section" + } + }, + "slotDescriptions": { "root": "", "section": "", "sectionContent": "", "sectionSeparator": "" } +} diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json index 7c070143e8f4..4b27f2a62221 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field/single-input-date-range-field.json @@ -10,6 +10,7 @@ "color": { "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, @@ -86,10 +87,10 @@ "description": "If true, the label is displayed as required and the input element is required." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json index 29e4d03fa583..2fd5f3960613 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field/single-input-date-time-range-field.json @@ -11,6 +11,7 @@ "color": { "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, @@ -103,10 +104,10 @@ "description": "If true, the label is displayed as required and the input element is required." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json index 61b335bea6c2..d14d95e0e73b 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field/single-input-time-range-field.json @@ -11,6 +11,7 @@ "color": { "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, + "dateSeparator": { "description": "String displayed between the start and the end dates." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, @@ -95,7 +96,7 @@ "description": "If true, the label is displayed as required and the input element is required." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableTime": { "description": "Disable specific time.", diff --git a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json index 39559f2e8f02..b59bbd0f3453 100644 --- a/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-picker/static-date-picker.json @@ -88,7 +88,7 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json index 97198fdef5c1..5c312fa77d83 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker/static-date-range-picker.json @@ -93,7 +93,7 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "position": "The date to test, 'start' or 'end'.", diff --git a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json index c50bd09bffb6..cda54bc81038 100644 --- a/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-time-picker/static-date-time-picker.json @@ -108,7 +108,7 @@ "typeDescriptions": { "React.ReactNode": "The node to render when loading." } }, "shouldDisableDate": { - "description": "Disable specific date.
Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", + "description": "Disable specific date.
Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.", "typeDescriptions": { "day": "The date to test.", "boolean": "If true the date will be disabled." diff --git a/docs/translations/api-docs/date-pickers/time-field/time-field.json b/docs/translations/api-docs/date-pickers/time-field/time-field.json index 61b335bea6c2..afe127369650 100644 --- a/docs/translations/api-docs/date-pickers/time-field/time-field.json +++ b/docs/translations/api-docs/date-pickers/time-field/time-field.json @@ -95,7 +95,7 @@ "description": "If true, the label is displayed as required and the input element is required." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableTime": { "description": "Disable specific time.", diff --git a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json index 15a1b594f546..e0a4f0248d90 100644 --- a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json +++ b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json @@ -1,16 +1,21 @@ { "componentDescription": "", "propDescriptions": { + "classes": { "description": "Override or extend the styles applied to the component." }, "hidden": { "description": "If true, show the toolbar even in desktop mode." }, "onViewChange": { "description": "Callback called when a toolbar is clicked", "typeDescriptions": { "view": "The view to open" } }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + }, "toolbarFormat": { "description": "Toolbar date format." }, "toolbarPlaceholder": { "description": "Toolbar value placeholder—it is displayed when the value is empty." }, - "view": { "description": "Currently visible picker view." } + "view": { "description": "Currently visible picker view." }, + "views": { "description": "Available views." } }, "classDescriptions": { "ampmLabel": { diff --git a/docs/translations/api-docs/date-pickers/time-picker/time-picker.json b/docs/translations/api-docs/date-pickers/time-picker/time-picker.json index a31efe793627..c766c72c5bb5 100644 --- a/docs/translations/api-docs/date-pickers/time-picker/time-picker.json +++ b/docs/translations/api-docs/date-pickers/time-picker/time-picker.json @@ -93,7 +93,7 @@ "description": "The date used to generate the new value when both value and defaultValue are empty." }, "selectedSections": { - "description": "The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally." + "description": "The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally." }, "shouldDisableTime": { "description": "Disable specific time.", @@ -154,7 +154,7 @@ "previousIconButton": "Button allowing to switch to the left view.", "rightArrowIcon": "Icon displayed in the right view switch button.", "shortcuts": "Custom component for the shortcuts.", - "textField": "Form control with an input to render the value inside the default field. Receives the same props as @mui/material/TextField.", + "textField": "Form control with an input to render the value inside the default field.", "toolbar": "Custom component for the toolbar rendered above the views." } } diff --git a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json index aa886207beaa..14b108942357 100644 --- a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json +++ b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json @@ -1,19 +1,22 @@ { "componentDescription": "", "propDescriptions": { + "apiRef": { + "description": "The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef()." + }, "classes": { "description": "Override or extend the styles applied to the component." }, - "defaultExpandedNodes": { - "description": "Expanded node ids. Used when the item's expansion is not controlled." + "defaultExpandedItems": { + "description": "Expanded item ids. Used when the item's expansion is not controlled." }, - "defaultSelectedNodes": { - "description": "Selected node ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string." + "defaultSelectedItems": { + "description": "Selected item ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string." }, "disabledItemsFocusable": { "description": "If true, will allow focus on disabled items." }, "disableSelection": { "description": "If true selection is disabled." }, - "expandedNodes": { - "description": "Expanded node ids. Used when the item's expansion is controlled." + "expandedItems": { + "description": "Expanded item ids. Used when the item's expansion is controlled." }, "getItemId": { "description": "Used to determine the string label for a given item.", @@ -36,46 +39,46 @@ "multiSelect": { "description": "If true ctrl and shift will trigger multiselect." }, - "onExpandedNodesChange": { + "onExpandedItemsChange": { "description": "Callback fired when tree items are expanded/collapsed.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeIds": "The ids of the expanded nodes." + "itemIds": "The ids of the expanded items." } }, - "onNodeExpansionToggle": { + "onItemExpansionToggle": { "description": "Callback fired when a tree item is expanded or collapsed.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeId": "The nodeId of the modified node.", - "isExpanded": "true if the node has just been expanded, false if it has just been collapsed." + "itemId": "The itemId of the modified item.", + "isExpanded": "true if the item has just been expanded, false if it has just been collapsed." } }, - "onNodeFocus": { + "onItemFocus": { "description": "Callback fired when tree items are focused.", "typeDescriptions": { "event": "The event source of the callback Warning: This is a generic event not a focus event.", - "nodeId": "The id of the node focused.", - "value": "of the focused node." + "itemId": "The id of the focused item.", + "value": "of the focused item." } }, - "onNodeSelectionToggle": { + "onItemSelectionToggle": { "description": "Callback fired when a tree item is selected or deselected.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeId": "The nodeId of the modified node.", - "isSelected": "true if the node has just been selected, false if it has just been deselected." + "itemId": "The itemId of the modified item.", + "isSelected": "true if the item has just been selected, false if it has just been deselected." } }, - "onSelectedNodesChange": { + "onSelectedItemsChange": { "description": "Callback fired when tree items are selected/deselected.", "typeDescriptions": { "event": "The event source of the callback", - "nodeIds": "The ids of the selected nodes. When multiSelect is true, this is an array of strings; when false (default) a string." + "itemIds": "The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string." } }, - "selectedNodes": { - "description": "Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string." + "selectedItems": { + "description": "Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, diff --git a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json index cda74e515ac5..24f8592c31a0 100644 --- a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json +++ b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json @@ -1,20 +1,23 @@ { "componentDescription": "", "propDescriptions": { + "apiRef": { + "description": "The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef()." + }, "children": { "description": "The content of the component." }, "classes": { "description": "Override or extend the styles applied to the component." }, - "defaultExpandedNodes": { - "description": "Expanded node ids. Used when the item's expansion is not controlled." + "defaultExpandedItems": { + "description": "Expanded item ids. Used when the item's expansion is not controlled." }, - "defaultSelectedNodes": { - "description": "Selected node ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string." + "defaultSelectedItems": { + "description": "Selected item ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string." }, "disabledItemsFocusable": { "description": "If true, will allow focus on disabled items." }, "disableSelection": { "description": "If true selection is disabled." }, - "expandedNodes": { - "description": "Expanded node ids. Used when the item's expansion is controlled." + "expandedItems": { + "description": "Expanded item ids. Used when the item's expansion is controlled." }, "id": { "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id." @@ -22,46 +25,46 @@ "multiSelect": { "description": "If true ctrl and shift will trigger multiselect." }, - "onExpandedNodesChange": { + "onExpandedItemsChange": { "description": "Callback fired when tree items are expanded/collapsed.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeIds": "The ids of the expanded nodes." + "itemIds": "The ids of the expanded items." } }, - "onNodeExpansionToggle": { + "onItemExpansionToggle": { "description": "Callback fired when a tree item is expanded or collapsed.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeId": "The nodeId of the modified node.", - "isExpanded": "true if the node has just been expanded, false if it has just been collapsed." + "itemId": "The itemId of the modified item.", + "isExpanded": "true if the item has just been expanded, false if it has just been collapsed." } }, - "onNodeFocus": { + "onItemFocus": { "description": "Callback fired when tree items are focused.", "typeDescriptions": { "event": "The event source of the callback Warning: This is a generic event not a focus event.", - "nodeId": "The id of the node focused.", - "value": "of the focused node." + "itemId": "The id of the focused item.", + "value": "of the focused item." } }, - "onNodeSelectionToggle": { + "onItemSelectionToggle": { "description": "Callback fired when a tree item is selected or deselected.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeId": "The nodeId of the modified node.", - "isSelected": "true if the node has just been selected, false if it has just been deselected." + "itemId": "The itemId of the modified item.", + "isSelected": "true if the item has just been selected, false if it has just been deselected." } }, - "onSelectedNodesChange": { + "onSelectedItemsChange": { "description": "Callback fired when tree items are selected/deselected.", "typeDescriptions": { "event": "The event source of the callback", - "nodeIds": "The ids of the selected nodes. When multiSelect is true, this is an array of strings; when false (default) a string." + "itemIds": "The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string." } }, - "selectedNodes": { - "description": "Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string." + "selectedItems": { + "description": "Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, diff --git a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json new file mode 100644 index 000000000000..2278abc442be --- /dev/null +++ b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json @@ -0,0 +1,49 @@ +{ + "componentDescription": "", + "propDescriptions": { + "children": { "description": "The content of the component." }, + "classes": { "description": "Override or extend the styles applied to the component." }, + "disabled": { "description": "If true, the item is disabled." }, + "id": { "description": "The id attribute of the item. If not provided, it will be generated." }, + "itemId": { "description": "The id of the item. Must be unique." }, + "label": { "description": "The label of the item." }, + "onFocus": { + "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor a item's focus." + }, + "slotProps": { "description": "The props used for each component slot." }, + "slots": { "description": "Overridable component slots." } + }, + "classDescriptions": { + "disabled": { + "description": "State class applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the element", + "conditions": "disabled" + }, + "expanded": { + "description": "State class applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the content element", + "conditions": "expanded" + }, + "focused": { + "description": "State class applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the content element", + "conditions": "focused" + }, + "selected": { + "description": "State class applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the content element", + "conditions": "selected" + } + }, + "slotDescriptions": { + "collapseIcon": "The icon used to collapse the node.", + "content": "The component that renders the content of the item. (e.g.: everything related to this item, not to its children).", + "endIcon": "The icon displayed next to an end node.", + "expandIcon": "The icon used to expand the node.", + "groupTransition": "The component that renders the children of the item.", + "icon": "The icon to display next to the tree node's label.", + "iconContainer": "The component that renders the icon.", + "label": "The component that renders the item label.", + "root": "The component that renders the root." + } +} diff --git a/docs/translations/api-docs/tree-view/tree-item/tree-item.json b/docs/translations/api-docs/tree-view/tree-item/tree-item.json index 89b5efa0432e..e1cf3bc28949 100644 --- a/docs/translations/api-docs/tree-view/tree-item/tree-item.json +++ b/docs/translations/api-docs/tree-view/tree-item/tree-item.json @@ -4,26 +4,20 @@ "children": { "description": "The content of the component." }, "classes": { "description": "Override or extend the styles applied to the component." }, "ContentComponent": { - "description": "The component used for the content node.", + "description": "The component used to render the content of the item.", "requiresRef": true }, "ContentProps": { "description": "Props applied to ContentComponent." }, - "disabled": { "description": "If true, the node is disabled." }, - "label": { "description": "The tree node label." }, - "nodeId": { "description": "The id of the node." }, + "disabled": { "description": "If true, the item is disabled." }, + "itemId": { "description": "The id of the item." }, + "label": { "description": "The tree item label." }, "onFocus": { - "description": "This prop isn't supported. Use the onNodeFocus callback on the tree if you need to monitor a node's focus." + "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor a item's focus." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." - }, - "TransitionComponent": { - "description": "The component used for the transition. Follow this guide to learn more about the requirements for this component." - }, - "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { @@ -46,10 +40,6 @@ "nodeName": "the content element", "conditions": "focused" }, - "group": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the transition component" - }, "iconContainer": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the tree node icon" @@ -63,9 +53,10 @@ } }, "slotDescriptions": { - "collapseIcon": "The icon used to collapse the node.", - "endIcon": "The icon displayed next to an end node.", - "expandIcon": "The icon used to expand the node.", - "icon": "The icon to display next to the tree node's label." + "collapseIcon": "The icon used to collapse the item.", + "endIcon": "The icon displayed next to an end item.", + "expandIcon": "The icon used to expand the item.", + "groupTransition": "The component that animates to appearance / disappearance of the item's children.", + "icon": "The icon to display next to the tree item's label." } } diff --git a/docs/translations/api-docs/tree-view/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view/tree-view.json index e07f766020c0..c6d01a54bd44 100644 --- a/docs/translations/api-docs/tree-view/tree-view/tree-view.json +++ b/docs/translations/api-docs/tree-view/tree-view/tree-view.json @@ -1,20 +1,23 @@ { - "componentDescription": "This component has been deprecated in favor of the new `SimpleTreeView` component.\nYou can have a look at how to migrate to the new component in the v7 [migration guide](https://next.mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)", + "componentDescription": "This component has been deprecated in favor of the new `SimpleTreeView` component.\nYou can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)", "propDescriptions": { + "apiRef": { + "description": "The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef()." + }, "children": { "description": "The content of the component." }, "classes": { "description": "Override or extend the styles applied to the component." }, - "defaultExpandedNodes": { - "description": "Expanded node ids. Used when the item's expansion is not controlled." + "defaultExpandedItems": { + "description": "Expanded item ids. Used when the item's expansion is not controlled." }, - "defaultSelectedNodes": { - "description": "Selected node ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string." + "defaultSelectedItems": { + "description": "Selected item ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string." }, "disabledItemsFocusable": { "description": "If true, will allow focus on disabled items." }, "disableSelection": { "description": "If true selection is disabled." }, - "expandedNodes": { - "description": "Expanded node ids. Used when the item's expansion is controlled." + "expandedItems": { + "description": "Expanded item ids. Used when the item's expansion is controlled." }, "id": { "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id." @@ -22,46 +25,46 @@ "multiSelect": { "description": "If true ctrl and shift will trigger multiselect." }, - "onExpandedNodesChange": { + "onExpandedItemsChange": { "description": "Callback fired when tree items are expanded/collapsed.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeIds": "The ids of the expanded nodes." + "itemIds": "The ids of the expanded items." } }, - "onNodeExpansionToggle": { + "onItemExpansionToggle": { "description": "Callback fired when a tree item is expanded or collapsed.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeId": "The nodeId of the modified node.", - "isExpanded": "true if the node has just been expanded, false if it has just been collapsed." + "itemId": "The itemId of the modified item.", + "isExpanded": "true if the item has just been expanded, false if it has just been collapsed." } }, - "onNodeFocus": { + "onItemFocus": { "description": "Callback fired when tree items are focused.", "typeDescriptions": { "event": "The event source of the callback Warning: This is a generic event not a focus event.", - "nodeId": "The id of the node focused.", - "value": "of the focused node." + "itemId": "The id of the focused item.", + "value": "of the focused item." } }, - "onNodeSelectionToggle": { + "onItemSelectionToggle": { "description": "Callback fired when a tree item is selected or deselected.", "typeDescriptions": { "event": "The event source of the callback.", - "nodeId": "The nodeId of the modified node.", - "isSelected": "true if the node has just been selected, false if it has just been deselected." + "itemId": "The itemId of the modified item.", + "isSelected": "true if the item has just been selected, false if it has just been deselected." } }, - "onSelectedNodesChange": { + "onSelectedItemsChange": { "description": "Callback fired when tree items are selected/deselected.", "typeDescriptions": { "event": "The event source of the callback", - "nodeIds": "The ids of the selected nodes. When multiSelect is true, this is an array of strings; when false (default) a string." + "itemIds": "The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string." } }, - "selectedNodes": { - "description": "Selected node ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string." + "selectedItems": { + "description": "Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." }, diff --git a/docs/tsconfig.json b/docs/tsconfig.json index d5ad1e0aa583..71d443e218e6 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/docsTech/processing.md b/docsTech/processing.md index 600f63e9356d..bc39ac111e58 100644 --- a/docsTech/processing.md +++ b/docsTech/processing.md @@ -14,7 +14,7 @@ For each pattern, you will find a list of where such pattern is used, why it is - Pipe-processing - Plugin state enrichment - - Add custom behavior to an api method + - Add custom behavior to an API method - Feature limitation - Component children processing - Family-processing @@ -39,8 +39,8 @@ We can classify the pipe-processing into several categories: A few possible reasons could be to: -- Add some columns (eg: processor of the Selection plugin) -- Re-order the columns (eg: processor of the Column Pinning plugin). +- Add some columns (for example processor of the Selection plugin) +- Re-order the columns (for example processor of the Column Pinning plugin). **Example**: @@ -78,7 +78,7 @@ useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addCustomFeatureColumn); **Why register to this processing** -- Modify the base height of a row or add the height of some custom elements (eg: processor of the Detail Panel plugin increases the row height when the detail panel is open). +- Modify the base height of a row or add the height of some custom elements (for example processor of the Detail Panel plugin increases the row height when the detail panel is open). **Example**: @@ -107,7 +107,7 @@ useGridRegisterPipeProcessor(apiRef, 'rowHeight', addCustomFeatureHeight); **Publisher**: `useGridRows` plugin before updating `state.rows`. -**Why register to this processing**: Add some rows (eg: processor of the Aggregation plugin). +**Why register to this processing**: Add some rows (for example processor of the Aggregation plugin). **Example**: @@ -142,9 +142,9 @@ const addGroupFooterRows = React.useCallback>(( useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addGroupFooterRows); ``` -### Add custom behavior to an api method +### Add custom behavior to an API method -**Goal**: To add some data on the value returned by an api method (eg: `exportState`) or to apply some custom behavior based on the input value of an api method (eg: `restoreState`) +**Goal**: To add some data on the value returned by an API method (for example `exportState`) or to apply some custom behavior based on the input value of an API method (for example `restoreState`) #### List @@ -238,7 +238,7 @@ useGridRegisterPipeProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft); ### Feature limitation -**Goal**: To block the application of another plugin (eg: `canBeReorder`) +**Goal**: To block the application of another plugin (for example `canBeReorder`) #### List diff --git a/package.json b/package.json index 279364aaa3fb..896c4ac9af1b 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "version": "7.0.0-beta.0", + "version": "7.0.0-beta.7", "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", @@ -37,6 +37,7 @@ "test:karma": "cross-env NODE_ENV=test TZ=UTC karma start test/karma.conf.js", "test:karma:parallel": "cross-env NODE_ENV=test TZ=UTC PARALLEL=true karma start test/karma.conf.js", "test:unit": "cross-env NODE_ENV=test TZ=UTC mocha -n expose_gc", + "test:charts:unit": "cross-env NODE_ENV=test TZ=UTC mocha -n expose_gc --config packages/x-charts/.mocharc.js", "test:e2e": "cross-env NODE_ENV=production yarn test:e2e:build && concurrently --success first --kill-others \"yarn test:e2e:run\" \"yarn test:e2e:server\"", "test:e2e:build": "webpack --config test/e2e/webpack.config.js", "test:e2e:dev": "concurrently \"yarn test:e2e:build --watch\" \"yarn test:e2e:server\"", @@ -57,59 +58,58 @@ "release:changelog": "node scripts/releaseChangelog.mjs", "release:version": "lerna version --exact --no-changelog --no-push --no-git-tag-version --no-private", "release:build": "lerna run --parallel --no-private --scope \"@mui/*\" build", - "release:publish": "lerna publish from-package --no-private --dist-tag next --contents build", - "release:publish:dry-run": "lerna publish from-package --dist-tag next --contents build --registry=\"http://localhost:4873/\"", + "release:publish": "lerna publish from-package --no-private --dist-tag latest --contents build", + "release:publish:dry-run": "lerna publish from-package --dist-tag latest --contents build --registry=\"http://localhost:4873/\"", "release:tag": "node scripts/releaseTag.mjs", "validate": "concurrently \"yarn prettier && yarn eslint\" \"yarn proptypes\" \"yarn docs:typescript:formatted\" \"yarn docs:api\"" }, "devDependencies": { - "@argos-ci/core": "^1.5.1", + "@argos-ci/core": "^1.5.4", "@babel/cli": "^7.23.9", - "@babel/core": "^7.23.9", + "@babel/core": "^7.24.0", "@babel/node": "^7.23.9", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@babel/plugin-transform-object-assign": "^7.23.3", "@babel/plugin-transform-react-constant-elements": "^7.23.3", - "@babel/plugin-transform-runtime": "^7.23.9", - "@babel/preset-env": "^7.23.9", + "@babel/plugin-transform-runtime": "^7.24.0", + "@babel/preset-env": "^7.24.0", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", "@babel/register": "^7.23.7", - "@babel/traverse": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0", "@emotion/cache": "^11.11.0", - "@emotion/react": "^11.11.3", + "@emotion/react": "^11.11.4", "@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.14", + "@mui/material": "^5.15.14", "@mui/monorepo": "https://github.com/mui/material-ui.git#master", - "@mui/utils": "^5.15.6", + "@mui/utils": "^5.15.14", "@next/eslint-plugin-next": "14.0.4", "@octokit/plugin-retry": "^6.0.1", "@octokit/rest": "^20.0.2", - "@playwright/test": "1.41.1", - "@testing-library/react": "^14.1.2", + "@playwright/test": "1.41.2", + "@testing-library/react": "^14.2.1", "@types/babel__core": "^7.20.5", - "@types/chai": "^4.3.11", + "@types/chai": "^4.3.12", "@types/chai-dom": "^1.11.3", "@types/enzyme": "3.10.12", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.10", + "@types/node": "^18.19.23", "@types/prettier": "^2.7.3", - "@types/react": "^18.2.48", - "@types/react-dom": "^18.2.18", + "@types/react": "^18.2.60", + "@types/react-dom": "^18.2.19", "@types/react-test-renderer": "^18.0.7", "@types/requestidlecallback": "^0.3.7", "@types/sinon": "^10.0.20", "@types/yargs": "^17.0.32", - "@typescript-eslint/eslint-plugin": "^6.20.0", - "@typescript-eslint/parser": "^6.20.0", - "autoprefixer": "^10.4.17", - "axe-core": "4.8.3", + "@typescript-eslint/eslint-plugin": "^6.21.0", + "@typescript-eslint/parser": "^6.21.0", + "autoprefixer": "^10.4.18", + "axe-core": "4.8.4", "babel-loader": "^9.1.3", "babel-plugin-istanbul": "^6.1.1", "babel-plugin-module-resolver": "^5.0.0", @@ -120,21 +120,21 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "chai": "^4.4.1", "chai-dom": "^1.12.0", - "compression-webpack-plugin": "^11.0.0", + "compression-webpack-plugin": "^11.1.0", "concurrently": "^8.2.2", "cross-env": "^7.0.3", "danger": "^11.3.1", "enzyme": "^3.11.0", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.1.0", "eslint-import-resolver-webpack": "^0.13.8", "eslint-plugin-filenames": "^1.3.2", "eslint-plugin-import": "^2.29.1", - "eslint-plugin-jsdoc": "^48.0.4", + "eslint-plugin-jsdoc": "^48.2.0", "eslint-plugin-jsx-a11y": "^6.8.0", - "eslint-plugin-mocha": "^10.2.0", + "eslint-plugin-mocha": "^10.3.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", @@ -146,19 +146,19 @@ "jss": "^10.10.0", "jss-plugin-template": "^10.10.0", "jss-rtl": "^0.3.0", - "karma": "^6.4.2", + "karma": "^6.4.3", "karma-chrome-launcher": "^3.2.0", "karma-mocha": "^2.0.1", "karma-parallel": "^0.3.1", "karma-sourcemap-loader": "^0.4.0", - "karma-webpack": "^5.0.0", - "lerna": "^8.0.2", + "karma-webpack": "^5.0.1", + "lerna": "^8.1.2", "markdownlint-cli2": "^0.12.1", - "mocha": "^10.2.0", + "mocha": "^10.3.0", "nyc": "^15.1.0", "patch-package": "^7.0.2", "postinstall-postinstall": "^2.1.0", - "prettier": "^3.2.4", + "prettier": "^3.2.5", "pretty-quick": "^4.0.0", "process": "^0.11.10", "react": "^18.2.0", @@ -168,10 +168,11 @@ "sinon": "^16.1.3", "stream-browserify": "^3.0.0", "string-replace-loader": "^3.1.0", + "tsx": "^4.7.0", "typescript": "^5.3.3", "unist-util-visit": "^2.0.3", "util": "^0.12.5", - "webpack": "^5.90.0", + "webpack": "^5.90.3", "webpack-cli": "^5.1.4", "yargs": "^17.7.2", "yarn-deduplicate": "^6.0.2" @@ -182,8 +183,6 @@ "workspaces": { "packages": [ "packages/*", - "!packages/grid", - "packages/grid/*", "docs" ], "nohoist": [ @@ -192,6 +191,6 @@ }, "resolutions": { "**/react-is": "^18.2.0", - "**/@types/node": "^18.19.10" + "**/@types/node": "^18.19.23" } } diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json index e4736000ce38..87cdbf6ee1ce 100644 --- a/packages/eslint-plugin-material-ui/package.json +++ b/packages/eslint-plugin-material-ui/package.json @@ -5,9 +5,9 @@ "description": "Custom eslint rules for MUI X.", "main": "src/index.js", "devDependencies": { - "@types/eslint": "^8.56.2", + "@types/eslint": "^8.56.5", "@typescript-eslint/experimental-utils": "^5.62.0", - "@typescript-eslint/parser": "^6.20.0" + "@typescript-eslint/parser": "^6.21.0" }, "scripts": { "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000" 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 4477ca841852..000000000000 --- 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 38ffa2e91df8..000000000000 --- 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-pro/src/components/GridColumnHeaders.tsx b/packages/grid/x-data-grid-pro/src/components/GridColumnHeaders.tsx deleted file mode 100644 index 6a03a203063c..000000000000 --- a/packages/grid/x-data-grid-pro/src/components/GridColumnHeaders.tsx +++ /dev/null @@ -1,321 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { refType, unstable_composeClasses as composeClasses } from '@mui/utils'; -import { styled } from '@mui/material/styles'; -import { - getDataGridUtilityClass, - gridClasses, - GridColumnHeaderSeparatorSides, - GridPinnedColumnPosition, - useGridSelector, - gridVisiblePinnedColumnDefinitionsSelector, -} from '@mui/x-data-grid'; -import { - GridBaseColumnHeaders, - GridColumnHeadersInner, - GridPinnedColumnFields, - UseGridColumnHeadersProps, -} from '@mui/x-data-grid/internals'; -import { useGridRootProps } from '../hooks/utils/useGridRootProps'; -import { useGridApiContext } from '../hooks/utils/useGridApiContext'; -import { DataGridProProcessedProps } from '../models/dataGridProProps'; -import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders'; -import { GridScrollArea } from './GridScrollArea'; - -type OwnerState = DataGridProProcessedProps & { - leftPinnedColumns: GridPinnedColumnFields['left']; - rightPinnedColumns: GridPinnedColumnFields['right']; -}; - -const useUtilityClasses = (ownerState: OwnerState) => { - const { leftPinnedColumns, rightPinnedColumns, classes } = ownerState; - - const slots = { - leftPinnedColumns: [ - 'pinnedColumnHeaders', - leftPinnedColumns && leftPinnedColumns.length > 0 && `pinnedColumnHeaders--left`, - ], - rightPinnedColumns: [ - 'pinnedColumnHeaders', - rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`, - 'withBorderColor', - ], - }; - - return composeClasses(slots, getDataGridUtilityClass, classes); -}; - -interface GridColumnHeadersPinnedColumnHeadersProps { - side: GridPinnedColumnPosition; - showCellVerticalBorder: boolean; -} - -const GridColumnHeadersPinnedColumnHeaders = styled('div', { - name: 'MuiDataGrid', - slot: 'PinnedColumnHeaders', - overridesResolver: (_, styles) => [ - { [`&.${gridClasses['pinnedColumnHeaders--left']}`]: styles['pinnedColumnHeaders--left'] }, - { [`&.${gridClasses['pinnedColumnHeaders--right']}`]: styles['pinnedColumnHeaders--right'] }, - styles.pinnedColumnHeaders, - ], -})<{ ownerState: OwnerState & GridColumnHeadersPinnedColumnHeadersProps }>(({ ownerState }) => ({ - position: 'sticky', - zIndex: 5, - top: 0, - display: 'flex', - flexDirection: 'column', - boxSizing: 'border-box', - backgroundColor: 'var(--DataGrid-pinnedBackground)', - ...(ownerState.side === GridPinnedColumnPosition.LEFT && { left: 0 }), - ...(ownerState.side === GridPinnedColumnPosition.RIGHT && { right: 0 }), - [`&.${gridClasses['pinnedColumnHeaders--left']}`]: { - left: 0, - '& > [role="row"] > [role="columnheader"]:last-of-type': { - borderRight: '1px solid var(--DataGrid-rowBorderColor)', - }, - }, - [`&.${gridClasses['pinnedColumnHeaders--right']}`]: { - right: 0, - '& > [role="row"] > [role="columnheader"]:first-of-type': { - borderLeft: '1px solid var(--DataGrid-rowBorderColor)', - }, - }, -})); - -const Filler = styled('div')({ - flex: 1, - backgroundColor: 'var(--DataGrid-containerBackground)', -}); - -GridColumnHeadersPinnedColumnHeaders.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - ownerState: PropTypes.object.isRequired, -} as any; - -interface DataGridProColumnHeadersProps - extends React.HTMLAttributes, - Omit { - innerRef?: React.Ref; -} - -const GridColumnHeaders = React.forwardRef( - function GridColumnHeaders(props, ref) { - const { - style, - className, - innerRef, - visibleColumns, - sortColumnLookup, - filterColumnLookup, - columnHeaderTabIndexState, - columnGroupHeaderTabIndexState, - columnHeaderFocus, - columnGroupHeaderFocus, - headerGroupingMaxDepth, - columnMenuState, - columnVisibility, - columnGroupsHeaderStructure, - hasOtherElementInTabSequence, - ...other - } = props; - const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - - const visiblePinnedColumns = useGridSelector( - apiRef, - gridVisiblePinnedColumnDefinitionsSelector, - ); - - const { - isDragging, - renderContext, - getInnerProps, - getColumnHeaders, - getColumnFilters, - getColumnGroupHeaders, - } = useGridColumnHeaders({ - innerRef, - visibleColumns, - sortColumnLookup, - filterColumnLookup, - columnHeaderTabIndexState, - hasOtherElementInTabSequence, - columnGroupHeaderTabIndexState, - columnHeaderFocus, - columnGroupHeaderFocus, - headerGroupingMaxDepth, - columnMenuState, - columnVisibility, - columnGroupsHeaderStructure, - }); - - const ownerState = { - ...rootProps, - leftPinnedColumns: visiblePinnedColumns.left.map((c) => c.field), - rightPinnedColumns: visiblePinnedColumns.right.map((c) => c.field), - classes: rootProps.classes, - }; - const classes = useUtilityClasses(ownerState); - - const leftRenderContext = - renderContext && visiblePinnedColumns.left.length - ? { - ...renderContext, - firstColumnIndex: 0, - lastColumnIndex: visiblePinnedColumns.left.length, - } - : null; - - const rightRenderContext = - renderContext && visiblePinnedColumns.right.length - ? { - ...renderContext, - firstColumnIndex: visibleColumns.length - visiblePinnedColumns.right.length, - lastColumnIndex: visibleColumns.length, - } - : null; - - const innerProps = getInnerProps(); - - const pinnedColumnHeadersProps = { - role: innerProps.role, - }; - - return ( - - {leftRenderContext && ( - - {getColumnGroupHeaders({ - position: GridPinnedColumnPosition.LEFT, - renderContext: leftRenderContext, - minFirstColumn: leftRenderContext.firstColumnIndex, - maxLastColumn: leftRenderContext.lastColumnIndex, - })} - {getColumnHeaders( - { - position: GridPinnedColumnPosition.LEFT, - renderContext: leftRenderContext, - minFirstColumn: leftRenderContext.firstColumnIndex, - maxLastColumn: leftRenderContext.lastColumnIndex, - }, - { disableReorder: true }, - )} - {getColumnFilters({ - position: GridPinnedColumnPosition.LEFT, - renderContext: leftRenderContext, - minFirstColumn: leftRenderContext.firstColumnIndex, - maxLastColumn: leftRenderContext.lastColumnIndex, - })} - - )} - - - - {getColumnGroupHeaders({ - renderContext, - minFirstColumn: visiblePinnedColumns.left.length, - maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length, - })} - {getColumnHeaders({ - renderContext, - minFirstColumn: visiblePinnedColumns.left.length, - maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length, - })} - {getColumnFilters({ - renderContext, - minFirstColumn: visiblePinnedColumns.left.length, - maxLastColumn: visibleColumns.length - visiblePinnedColumns.right.length, - })} - - - - {rightRenderContext && ( - - {getColumnGroupHeaders({ - position: GridPinnedColumnPosition.RIGHT, - renderContext: rightRenderContext, - minFirstColumn: rightRenderContext.firstColumnIndex, - maxLastColumn: rightRenderContext.lastColumnIndex, - })} - {getColumnHeaders( - { - position: GridPinnedColumnPosition.RIGHT, - renderContext: rightRenderContext, - minFirstColumn: rightRenderContext.firstColumnIndex, - maxLastColumn: rightRenderContext.lastColumnIndex, - }, - { disableReorder: true, separatorSide: GridColumnHeaderSeparatorSides.Left }, - )} - {getColumnFilters({ - position: GridPinnedColumnPosition.RIGHT, - renderContext: rightRenderContext, - minFirstColumn: rightRenderContext.firstColumnIndex, - maxLastColumn: rightRenderContext.lastColumnIndex, - })} - - )} - - ); - }, -); - -GridColumnHeaders.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "yarn proptypes" | - // ---------------------------------------------------------------------- - columnGroupHeaderFocus: PropTypes.shape({ - depth: PropTypes.number.isRequired, - field: PropTypes.string.isRequired, - }), - columnGroupHeaderTabIndexState: PropTypes.shape({ - depth: PropTypes.number.isRequired, - field: PropTypes.string.isRequired, - }), - columnGroupsHeaderStructure: PropTypes.arrayOf( - PropTypes.arrayOf( - PropTypes.shape({ - columnFields: PropTypes.arrayOf(PropTypes.string).isRequired, - groupId: PropTypes.string, - }), - ), - ).isRequired, - columnHeaderFocus: PropTypes.shape({ - field: PropTypes.string.isRequired, - }), - columnHeaderTabIndexState: PropTypes.shape({ - field: PropTypes.string.isRequired, - }), - columnMenuState: PropTypes.shape({ - field: PropTypes.string, - open: PropTypes.bool.isRequired, - }).isRequired, - columnVisibility: PropTypes.object.isRequired, - filterColumnLookup: PropTypes.object.isRequired, - hasOtherElementInTabSequence: PropTypes.bool.isRequired, - headerGroupingMaxDepth: PropTypes.number.isRequired, - innerRef: refType, - sortColumnLookup: PropTypes.object.isRequired, - visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, -} as any; - -export { GridColumnHeaders }; diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/columnResizeSelector.ts b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/columnResizeSelector.ts deleted file mode 100644 index c5978d6ddd81..000000000000 --- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/columnResizeSelector.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createSelector } from '@mui/x-data-grid/internals'; -import { GridStatePro } from '../../../models/gridStatePro'; - -export const gridColumnResizeSelector = (state: GridStatePro) => state.columnResize; - -export const gridResizingColumnFieldSelector = createSelector( - gridColumnResizeSelector, - (columnResize) => columnResize.resizingColumnField, -); diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts b/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts deleted file mode 100644 index 1842c9359977..000000000000 --- a/packages/grid/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.ts +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { - useGridSelector, - GridEventListener, - GridScrollParams, - useGridApiEventHandler, - useGridApiOptionHandler, - gridVisibleColumnDefinitionsSelector, - gridRowsMetaSelector, -} from '@mui/x-data-grid'; -import { useGridVisibleRows } from '@mui/x-data-grid/internals'; -import { GridRowScrollEndParams } from '../../../models'; -import { GridPrivateApiPro } from '../../../models/gridApiPro'; -import { DataGridProProcessedProps } from '../../../models/dataGridProProps'; - -/** - * @requires useGridColumns (state) - * @requires useGridDimensions (method) - can be after - * @requires useGridScroll (method - */ -export const useGridInfiniteLoader = ( - apiRef: React.MutableRefObject, - props: Pick< - DataGridProProcessedProps, - 'onRowsScrollEnd' | 'scrollEndThreshold' | 'pagination' | 'paginationMode' | 'rowsLoadingMode' - >, -): void => { - const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector); - const currentPage = useGridVisibleRows(apiRef, props); - const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector); - const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1); - - const isInScrollBottomArea = React.useRef(false); - - const handleRowsScrollEnd = React.useCallback( - (scrollPosition: GridScrollParams) => { - const dimensions = apiRef.current.getRootDimensions(); - - // Prevent the infite loading working in combination with lazy loading - if (!dimensions.isReady || props.rowsLoadingMode !== 'client') { - return; - } - - const scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height; - const viewportPageSize = apiRef.current.getViewportPageSize(); - - if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) { - isInScrollBottomArea.current = false; - } - - if ( - scrollPositionBottom >= contentHeight - props.scrollEndThreshold && - !isInScrollBottomArea.current - ) { - const rowScrollEndParam: GridRowScrollEndParams = { - visibleColumns, - viewportPageSize, - visibleRowsCount: currentPage.rows.length, - }; - apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam); - isInScrollBottomArea.current = true; - } - }, - [ - contentHeight, - props.scrollEndThreshold, - props.rowsLoadingMode, - visibleColumns, - apiRef, - currentPage.rows.length, - ], - ); - - const handleGridScroll = React.useCallback>( - ({ left, top }) => { - handleRowsScrollEnd({ left, top }); - }, - [handleRowsScrollEnd], - ); - - useGridApiEventHandler(apiRef, 'scrollPositionChange', handleGridScroll); - useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd); -}; diff --git a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts b/packages/grid/x-data-grid-pro/src/utils/domUtils.ts deleted file mode 100644 index 367624301cbe..000000000000 --- a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts +++ /dev/null @@ -1,139 +0,0 @@ -import { gridClasses } from '@mui/x-data-grid'; -import { findParentElementFromClassName } from '@mui/x-data-grid/internals'; -import { GridPrivateApiPro } from '../models/gridApiPro'; - -export function getFieldFromHeaderElem(colCellEl: Element): string { - return colCellEl.getAttribute('data-field')!; -} - -export function findHeaderElementFromField(elem: Element, field: string): HTMLDivElement { - return elem.querySelector(`[data-field="${field}"]`)!; -} - -export function findGroupHeaderElementsFromField(elem: Element, field: string): Element[] { - return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []); -} - -export function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateApiPro) { - const root = findParentElementFromClassName(col, gridClasses.root); - if (!root) { - throw new Error('MUI X: The root element is not found.'); - } - - const ariaColIndex = col.getAttribute('aria-colindex'); - if (!ariaColIndex) { - return []; - } - - const colIndex = Number(ariaColIndex) - 1; - const cells: Element[] = []; - - if (!api.virtualScrollerRef?.current) { - return []; - } - - queryRows(api).forEach((rowElement) => { - const rowId = rowElement.getAttribute('data-id'); - if (!rowId) { - return; - } - - let columnIndex = colIndex; - - const cellColSpanInfo = api.unstable_getCellColSpanInfo(rowId, colIndex); - if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) { - columnIndex = cellColSpanInfo.leftVisibleCellIndex; - } - const cell = rowElement.querySelector(`[data-colindex="${columnIndex}"]`); - if (cell) { - cells.push(cell); - } - }); - - return cells; -} - -export function findGridElement(api: GridPrivateApiPro, klass: keyof typeof gridClasses) { - return api.rootElementRef.current!.querySelector(`.${gridClasses[klass]}`)! as HTMLElement; -} - -export function findLeftPinnedCellsAfterCol(api: GridPrivateApiPro, col: HTMLElement) { - const colIndex = parseCellColIndex(col); - if (colIndex === null) { - return []; - } - - const cells: HTMLElement[] = []; - - queryRows(api).forEach((rowElement) => { - const rowId = rowElement.getAttribute('data-id'); - if (!rowId) { - return; - } - - const rightPinnedCells = rowElement.querySelectorAll(`.${gridClasses['cell--pinnedLeft']}`); - rightPinnedCells.forEach((cell) => { - const currentColIndex = parseCellColIndex(cell); - if (currentColIndex !== null && currentColIndex > colIndex) { - cells.push(cell as HTMLElement); - } - }); - }); - - return cells; -} - -export function findRightPinnedCellsBeforeCol(api: GridPrivateApiPro, col: HTMLElement) { - const colIndex = parseCellColIndex(col); - if (colIndex === null) { - return []; - } - - const cells: HTMLElement[] = []; - - queryRows(api).forEach((rowElement) => { - const rowId = rowElement.getAttribute('data-id'); - if (!rowId) { - return; - } - - const rightPinnedCells = rowElement.querySelectorAll(`.${gridClasses['cell--pinnedRight']}`); - rightPinnedCells.forEach((cell) => { - const currentColIndex = parseCellColIndex(cell); - if (currentColIndex !== null && currentColIndex < colIndex) { - cells.push(cell as HTMLElement); - } - }); - }); - - return cells; -} - -export function findGridHeader(api: GridPrivateApiPro, field: string) { - const headers = api.columnHeadersContainerElementRef!.current!; - return headers.querySelector(`:scope > div > div > [data-field="${field}"][role="columnheader"]`); -} - -export function findGridCells(api: GridPrivateApiPro, field: string) { - const container = api.virtualScrollerRef!.current!; - return Array.from( - container.querySelectorAll( - `:scope > div > div > div > [data-field="${field}"][role="gridcell"]`, - ), - ); -} - -function queryRows(api: GridPrivateApiPro) { - return api.virtualScrollerRef.current!.querySelectorAll( - // Use > to ignore rows from nested data grids (e.g. in detail panel) - `:scope > div > div > .${gridClasses.row}`, - ); -} - -function parseCellColIndex(col: Element) { - const ariaColIndex = col.getAttribute('aria-colindex'); - if (!ariaColIndex) { - return null; - } - return Number(ariaColIndex) - 1; -} diff --git a/packages/grid/x-data-grid/src/components/GridPagination.tsx b/packages/grid/x-data-grid/src/components/GridPagination.tsx deleted file mode 100644 index 92c2717b2eae..000000000000 --- a/packages/grid/x-data-grid/src/components/GridPagination.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import TablePagination, { - tablePaginationClasses, - TablePaginationProps, -} from '@mui/material/TablePagination'; -import { styled } from '@mui/material/styles'; -import { useGridSelector } from '../hooks/utils/useGridSelector'; -import { useGridApiContext } from '../hooks/utils/useGridApiContext'; -import { useGridRootProps } from '../hooks/utils/useGridRootProps'; -import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter'; - -import { gridPaginationModelSelector } from '../hooks/features/pagination/gridPaginationSelector'; - -const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({ - [`& .${tablePaginationClasses.selectLabel}`]: { - display: 'none', - [theme.breakpoints.up('sm')]: { - display: 'block', - }, - }, - [`& .${tablePaginationClasses.input}`]: { - display: 'none', - [theme.breakpoints.up('sm')]: { - display: 'inline-flex', - }, - }, -})) as typeof TablePagination; - -export const GridPagination = React.forwardRef>( - function GridPagination(props, ref) { - const apiRef = useGridApiContext(); - const rootProps = useGridRootProps(); - const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector); - const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector); - - const rowCount = React.useMemo( - () => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, - [rootProps.rowCount, visibleTopLevelRowCount], - ); - - const lastPage = React.useMemo( - () => Math.floor(rowCount / (paginationModel.pageSize || 1)), - [rowCount, paginationModel.pageSize], - ); - - const handlePageSizeChange = React.useCallback( - (event: React.ChangeEvent) => { - const pageSize = Number(event.target.value); - apiRef.current.setPageSize(pageSize); - }, - [apiRef], - ); - - const handlePageChange = React.useCallback( - (_, page) => { - apiRef.current.setPage(page); - }, - [apiRef], - ); - - const isPageSizeIncludedInPageSizeOptions = (pageSize: number) => { - for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) { - const option = rootProps.pageSizeOptions[i]; - if (typeof option === 'number') { - if (option === pageSize) { - return true; - } - } else if (option.value === pageSize) { - return true; - } - } - return false; - }; - - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line react-hooks/rules-of-hooks - const warnedOnceMissingInPageSizeOptions = React.useRef(false); - - const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize; - if ( - !warnedOnceMissingInPageSizeOptions.current && - !rootProps.autoPageSize && - !isPageSizeIncludedInPageSizeOptions(pageSize) - ) { - console.warn( - [ - `MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`, - `Add it to show the pagination select.`, - ].join('\n'), - ); - - warnedOnceMissingInPageSizeOptions.current = true; - } - } - - const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) - ? rootProps.pageSizeOptions - : []; - - return ( - - ); - }, -); diff --git a/packages/grid/x-data-grid/src/components/GridScrollbarFillerCell.tsx b/packages/grid/x-data-grid/src/components/GridScrollbarFillerCell.tsx deleted file mode 100644 index 8be0cf5eb44b..000000000000 --- a/packages/grid/x-data-grid/src/components/GridScrollbarFillerCell.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import clsx from 'clsx'; -import { styled } from '@mui/material/styles'; -import { getDataGridUtilityClass as getClassName } from '../constants'; - -const classes = { - root: getClassName('scrollbarFiller'), - header: getClassName('scrollbarFiller--header'), - borderTop: getClassName('scrollbarFiller--borderTop'), - pinnedRight: getClassName('scrollbarFiller--pinnedRight'), -}; - -const Style = styled('div')({ - minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))', - alignSelf: 'stretch', - [`&.${classes.borderTop}`]: { - borderTop: '1px solid var(--DataGrid-rowBorderColor)', - }, - [`&.${classes.pinnedRight}`]: { - backgroundColor: 'var(--DataGrid-pinnedBackground)', - }, - [`&.${classes.pinnedRight}:not(.${classes.header})`]: { - position: 'sticky', - right: 0, - }, - [`&:not(.${classes.header}):not(.${classes.pinnedRight})`]: { - transform: 'translate3d(var(--DataGrid-offsetLeft), 0, 0)', - }, -}); - -function GridScrollbarFillerCell({ - header, - borderTop = true, - pinnedRight, -}: { - header?: boolean; - borderTop?: boolean; - pinnedRight?: boolean; -}) { - return ( -