diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 942c4e9584b74..000d98c93ec67 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
- uses: github/codeql-action/init@ea9e4e37992a54ee68a9622e985e60c8e8f12d9f # v3.27.4
+ uses: github/codeql-action/init@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
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@ea9e4e37992a54ee68a9622e985e60c8e8f12d9f # v3.27.4
+ uses: github/codeql-action/analyze@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
index 900a104519fb8..252d4ba7cce10 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@ea9e4e37992a54ee68a9622e985e60c8e8f12d9f # v3.27.4
+ uses: github/codeql-action/upload-sarif@f09c1c0a94de965c15400f5634aa42fac8fb8f88 # v3.27.5
with:
sarif_file: results.sarif
diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.js b/docs/data/charts/tooltip/ItemTooltipTopElement.js
index 2625c997155f1..a601caee56d57 100644
--- a/docs/data/charts/tooltip/ItemTooltipTopElement.js
+++ b/docs/data/charts/tooltip/ItemTooltipTopElement.js
@@ -72,7 +72,8 @@ export function ItemTooltipTopElement({ children }) {
if (
tooltipData.identifier.type !== 'bar' ||
tooltipData.identifier.dataIndex === undefined ||
- tooltipData.value === null
+ tooltipData.value === null ||
+ svgRef.current === null
) {
// This demo is only about bar charts
return null;
diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.tsx b/docs/data/charts/tooltip/ItemTooltipTopElement.tsx
index d3f359951d83d..a36f5048d00f5 100644
--- a/docs/data/charts/tooltip/ItemTooltipTopElement.tsx
+++ b/docs/data/charts/tooltip/ItemTooltipTopElement.tsx
@@ -78,7 +78,8 @@ export function ItemTooltipTopElement({ children }: React.PropsWithChildren) {
if (
tooltipData.identifier.type !== 'bar' ||
tooltipData.identifier.dataIndex === undefined ||
- tooltipData.value === null
+ tooltipData.value === null ||
+ svgRef.current === null
) {
// This demo is only about bar charts
return null;
diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json
index 8ce145a0b640f..f36d84f29e31a 100644
--- a/docs/data/data-grid/localization/data.json
+++ b/docs/data/data-grid/localization/data.json
@@ -3,192 +3,192 @@
"languageTag": "ar-SD",
"importName": "arSD",
"localeName": "Arabic (Sudan)",
- "missingKeysCount": 19,
- "totalKeysCount": 133,
+ "missingKeysCount": 18,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/arSD.ts"
},
{
"languageTag": "be-BY",
"importName": "beBY",
"localeName": "Belarusian",
- "missingKeysCount": 45,
- "totalKeysCount": 133,
+ "missingKeysCount": 44,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/beBY.ts"
},
{
"languageTag": "bg-BG",
"importName": "bgBG",
"localeName": "Bulgarian",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/bgBG.ts"
},
{
"languageTag": "zh-HK",
"importName": "zhHK",
"localeName": "Chinese (Hong Kong)",
- "missingKeysCount": 19,
- "totalKeysCount": 133,
+ "missingKeysCount": 18,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhHK.ts"
},
{
"languageTag": "zh-CN",
"importName": "zhCN",
"localeName": "Chinese (Simplified)",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 0,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhCN.ts"
},
{
"languageTag": "zh-TW",
"importName": "zhTW",
"localeName": "Chinese (Taiwan)",
- "missingKeysCount": 19,
- "totalKeysCount": 133,
+ "missingKeysCount": 18,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhTW.ts"
},
{
"languageTag": "hr-HR",
"importName": "hrHR",
"localeName": "Croatian",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/hrHR.ts"
},
{
"languageTag": "cs-CZ",
"importName": "csCZ",
"localeName": "Czech",
- "missingKeysCount": 15,
- "totalKeysCount": 133,
+ "missingKeysCount": 14,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/csCZ.ts"
},
{
"languageTag": "da-DK",
"importName": "daDK",
"localeName": "Danish",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts"
},
{
"languageTag": "nl-NL",
"importName": "nlNL",
"localeName": "Dutch",
- "missingKeysCount": 15,
- "totalKeysCount": 133,
+ "missingKeysCount": 14,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nlNL.ts"
},
{
"languageTag": "fi-FI",
"importName": "fiFI",
"localeName": "Finnish",
- "missingKeysCount": 15,
- "totalKeysCount": 133,
+ "missingKeysCount": 14,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/fiFI.ts"
},
{
"languageTag": "fr-FR",
"importName": "frFR",
"localeName": "French",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/frFR.ts"
},
{
"languageTag": "de-DE",
"importName": "deDE",
"localeName": "German",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/deDE.ts"
},
{
"languageTag": "el-GR",
"importName": "elGR",
"localeName": "Greek",
- "missingKeysCount": 19,
- "totalKeysCount": 133,
+ "missingKeysCount": 18,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/elGR.ts"
},
{
"languageTag": "he-IL",
"importName": "heIL",
"localeName": "Hebrew",
- "missingKeysCount": 15,
- "totalKeysCount": 133,
+ "missingKeysCount": 14,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/heIL.ts"
},
{
"languageTag": "hu-HU",
"importName": "huHU",
"localeName": "Hungarian",
- "missingKeysCount": 17,
- "totalKeysCount": 133,
+ "missingKeysCount": 16,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/huHU.ts"
},
{
"languageTag": "is-IS",
"importName": "isIS",
"localeName": "Icelandic",
- "missingKeysCount": 19,
- "totalKeysCount": 133,
+ "missingKeysCount": 18,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/isIS.ts"
},
{
"languageTag": "it-IT",
"importName": "itIT",
"localeName": "Italian",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"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": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/jaJP.ts"
},
{
"languageTag": "ko-KR",
"importName": "koKR",
"localeName": "Korean",
- "missingKeysCount": 46,
- "totalKeysCount": 133,
+ "missingKeysCount": 45,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/koKR.ts"
},
{
"languageTag": "nb-NO",
"importName": "nbNO",
"localeName": "Norwegian (Bokmål)",
- "missingKeysCount": 15,
- "totalKeysCount": 133,
+ "missingKeysCount": 14,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nbNO.ts"
},
{
"languageTag": "nn-NO",
"importName": "nnNO",
"localeName": "Norwegian (Nynorsk)",
- "missingKeysCount": 15,
- "totalKeysCount": 133,
+ "missingKeysCount": 14,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nnNO.ts"
},
{
"languageTag": "fa-IR",
"importName": "faIR",
"localeName": "Persian",
- "missingKeysCount": 15,
- "totalKeysCount": 133,
+ "missingKeysCount": 14,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/faIR.ts"
},
{
"languageTag": "pl-PL",
"importName": "plPL",
"localeName": "Polish",
- "missingKeysCount": 22,
- "totalKeysCount": 133,
+ "missingKeysCount": 21,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/plPL.ts"
},
{
@@ -196,7 +196,7 @@
"importName": "ptPT",
"localeName": "Portuguese",
"missingKeysCount": 0,
- "totalKeysCount": 133,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptPT.ts"
},
{
@@ -204,31 +204,31 @@
"importName": "ptBR",
"localeName": "Portuguese (Brazil)",
"missingKeysCount": 0,
- "totalKeysCount": 133,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts"
},
{
"languageTag": "ro-RO",
"importName": "roRO",
"localeName": "Romanian",
- "missingKeysCount": 19,
- "totalKeysCount": 133,
+ "missingKeysCount": 18,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/roRO.ts"
},
{
"languageTag": "ru-RU",
"importName": "ruRU",
"localeName": "Russian",
- "missingKeysCount": 15,
- "totalKeysCount": 133,
+ "missingKeysCount": 14,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ruRU.ts"
},
{
"languageTag": "sk-SK",
"importName": "skSK",
"localeName": "Slovak",
- "missingKeysCount": 16,
- "totalKeysCount": 133,
+ "missingKeysCount": 15,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/skSK.ts"
},
{
@@ -236,47 +236,47 @@
"importName": "esES",
"localeName": "Spanish",
"missingKeysCount": 0,
- "totalKeysCount": 133,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/esES.ts"
},
{
"languageTag": "sv-SE",
"importName": "svSE",
"localeName": "Swedish",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/svSE.ts"
},
{
"languageTag": "tr-TR",
"importName": "trTR",
"localeName": "Turkish",
- "missingKeysCount": 13,
- "totalKeysCount": 133,
+ "missingKeysCount": 12,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/trTR.ts"
},
{
"languageTag": "uk-UA",
"importName": "ukUA",
"localeName": "Ukrainian",
- "missingKeysCount": 19,
- "totalKeysCount": 133,
+ "missingKeysCount": 18,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ukUA.ts"
},
{
"languageTag": "ur-PK",
"importName": "urPK",
"localeName": "Urdu (Pakistan)",
- "missingKeysCount": 19,
- "totalKeysCount": 133,
+ "missingKeysCount": 18,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/urPK.ts"
},
{
"languageTag": "vi-VN",
"importName": "viVN",
"localeName": "Vietnamese",
- "missingKeysCount": 11,
- "totalKeysCount": 133,
+ "missingKeysCount": 10,
+ "totalKeysCount": 132,
"githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/viVN.ts"
}
]
diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md
index e05e9c6e808ab..ab573ddf7a56f 100644
--- a/docs/data/date-pickers/custom-components/custom-components.md
+++ b/docs/data/date-pickers/custom-components/custom-components.md
@@ -34,8 +34,8 @@ You can override the actions displayed by passing the `actions` prop to the `act
actions: ['clear'],
},
// The actions will be different between desktop and mobile
- actionBar: ({ wrapperVariant }) => ({
- actions: wrapperVariant === 'desktop' ? [] : ['clear'],
+ actionBar: ({ variant }) => ({
+ actions: variant === 'desktop' ? [] : ['clear'],
}),
}}
/>
diff --git a/docs/data/date-pickers/custom-layout/AddComponent.js b/docs/data/date-pickers/custom-layout/AddComponent.js
index d6e0d1db8b6fe..0e904ef3d2889 100644
--- a/docs/data/date-pickers/custom-layout/AddComponent.js
+++ b/docs/data/date-pickers/custom-layout/AddComponent.js
@@ -58,11 +58,11 @@ function RestaurantHeader() {
}
function CustomLayout(props) {
- const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+ const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
return (
{toolbar}
{actionBar}
-
+
{tabs}
{content}
diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx
index 2584a13756edf..9fc41c2b0666b 100644
--- a/docs/data/date-pickers/custom-layout/AddComponent.tsx
+++ b/docs/data/date-pickers/custom-layout/AddComponent.tsx
@@ -59,11 +59,11 @@ function RestaurantHeader() {
}
function CustomLayout(props: PickersLayoutProps) {
- const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+ const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
return (
) {
{toolbar}
{actionBar}
-
+
{tabs}
{content}
diff --git a/docs/data/date-pickers/custom-layout/custom-layout.md b/docs/data/date-pickers/custom-layout/custom-layout.md
index ca327aaa57b69..0125630db5b10 100644
--- a/docs/data/date-pickers/custom-layout/custom-layout.md
+++ b/docs/data/date-pickers/custom-layout/custom-layout.md
@@ -86,14 +86,17 @@ import {
} from '@mui/x-date-pickers/PickersLayout';
function MyCustomLayout(props) {
- const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+ const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
// Put the action bar before the content
return (
-
+
{toolbar}
{actionBar}
-
+
{tabs}
{content}
diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md
index 5fe6c6f9c75e0..a9dda433ea29c 100644
--- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md
+++ b/docs/data/migration/migration-charts-v7/migration-charts-v7.md
@@ -38,10 +38,10 @@ You can either run it on a specific file, folder, or your entire codebase when c
```bash
-// Charts specific
+# Charts-specific
npx @mui/x-codemod@latest v8.0.0/charts/preset-safe
-// Target the other packages as well
+# Target the other packages as well
npx @mui/x-codemod@latest v8.0.0/preset-safe
```
diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
index 2ed5e027a87fd..4c96cc025e119 100644
--- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
+++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
@@ -30,9 +30,10 @@ The `preset-safe` codemod will automatically adjust the bulk of your code to acc
You can either run it on a specific file, folder, or your entire codebase when choosing the `` argument.
```bash
-// Data Grid specific
+# Data Grid specific
npx @mui/x-codemod@latest v6.0.0/data-grid/preset-safe
-// Target Date and Time Pickers as well
+
+# Target Date and Time Pickers as well
npx @mui/x-codemod@latest v6.0.0/preset-safe
```
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 fd145877d6b2d..da8288a8a8c3b 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
@@ -62,10 +62,10 @@ You can either run it on a specific file, folder, or your entire codebase when c
```bash
-// Data Grid specific
+# Data Grid specific
npx @mui/x-codemod@latest v7.0.0/data-grid/preset-safe
-// Target other MUI X components as well
+# Target other MUI X components as well
npx @mui/x-codemod@latest v7.0.0/preset-safe
```
diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js
index 95819b45ed99f..c2810ae4c1e2f 100644
--- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js
+++ b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.js
@@ -1,100 +1,16 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
-import ModeEditIcon from '@mui/icons-material/ModeEdit';
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
-import {
- pickersLayoutClasses,
- PickersLayoutContentWrapper,
- PickersLayoutRoot,
- usePickerLayout,
-} from '@mui/x-date-pickers/PickersLayout';
-import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
-import { DateField } from '@mui/x-date-pickers/DateField';
-import { DatePickerToolbar } from '@mui/x-date-pickers/DatePicker';
-
-function LayoutWithKeyboardView(props) {
- const { value, onChange } = props;
- const [showKeyboardView, setShowKeyboardView] = React.useState(false);
-
- const { toolbar, tabs, content, actionBar } = usePickerLayout({
- ...props,
- slotProps: {
- ...props.slotProps,
- toolbar: {
- ...props.slotProps?.toolbar,
- // @ts-ignore
- showKeyboardViewSwitch: props.wrapperVariant === 'mobile',
- showKeyboardView,
- setShowKeyboardView,
- },
- },
- });
-
- return (
-
- {toolbar}
- {actionBar}
-
- {tabs}
- {showKeyboardView ? (
-
-
-
- ) : (
- content
- )}
-
-
- );
-}
-
-function ToolbarWithKeyboardViewSwitch(props) {
- const { showKeyboardViewSwitch, showKeyboardView, setShowKeyboardView, ...other } =
- props;
-
- if (showKeyboardViewSwitch) {
- return (
-
-
- setShowKeyboardView((prev) => !prev)}
- >
- {showKeyboardView ? : }
-
-
- );
- }
-
- return ;
-}
export default function MobileKeyboardView() {
return (
-
-
-
+
);
}
diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx
deleted file mode 100644
index 97a25bbfc0363..0000000000000
--- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as React from 'react';
-import { Dayjs } from 'dayjs';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
-import ModeEditIcon from '@mui/icons-material/ModeEdit';
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DateView } from '@mui/x-date-pickers/models';
-import {
- pickersLayoutClasses,
- PickersLayoutContentWrapper,
- PickersLayoutRoot,
- PickersLayoutProps,
- usePickerLayout,
-} from '@mui/x-date-pickers/PickersLayout';
-import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
-import { DateField } from '@mui/x-date-pickers/DateField';
-import {
- DatePickerToolbar,
- DatePickerToolbarProps,
-} from '@mui/x-date-pickers/DatePicker';
-
-function LayoutWithKeyboardView(props: PickersLayoutProps) {
- const { value, onChange } = props;
- const [showKeyboardView, setShowKeyboardView] = React.useState(false);
-
- const { toolbar, tabs, content, actionBar } = usePickerLayout({
- ...props,
- slotProps: {
- ...props.slotProps,
- toolbar: {
- ...props.slotProps?.toolbar,
- // @ts-ignore
- showKeyboardViewSwitch: props.wrapperVariant === 'mobile',
- showKeyboardView,
- setShowKeyboardView,
- },
- },
- });
-
- return (
-
- {toolbar}
- {actionBar}
-
- {tabs}
- {showKeyboardView ? (
-
-
-
- ) : (
- content
- )}
-
-
- );
-}
-
-function ToolbarWithKeyboardViewSwitch(
- props: DatePickerToolbarProps & {
- showKeyboardViewSwitch?: boolean;
- showKeyboardView?: boolean;
- setShowKeyboardView?: React.Dispatch>;
- },
-) {
- const { showKeyboardViewSwitch, showKeyboardView, setShowKeyboardView, ...other } =
- props;
-
- if (showKeyboardViewSwitch) {
- return (
-
-
- setShowKeyboardView!((prev) => !prev)}
- >
- {showKeyboardView ? : }
-
-
- );
- }
-
- return ;
-}
-export default function MobileKeyboardView() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx.preview b/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx.preview
deleted file mode 100644
index 590d8472a0686..0000000000000
--- a/docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
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 08e32ca9a96bc..5158e716d5954 100644
--- a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md
+++ b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md
@@ -30,9 +30,10 @@ The `preset-safe` codemod will automatically adjust the bulk of your code to acc
You can either run it on a specific file, folder, or your entire codebase when choosing the `` argument.
```bash
-// Date and Time Pickers specific
+# Date and Time Pickers specific
npx @mui/x-codemod@latest v6.0.0/pickers/preset-safe
-// Target Data Grid as well
+
+# Target Data Grid as well
npx @mui/x-codemod@latest v6.0.0/preset-safe
```
@@ -171,7 +172,7 @@ The picker components no longer have a keyboard view to render the input inside
- If you want to keep the old keyboard view, you can pass a custom `Layout` component slot to re-introduce the keyboard view.
-{{"demo": "MobileKeyboardView.js", "defaultCodeOpen": false}}
+{{"demo": "MobileKeyboardView.js", "hideToolbar": true, "bg": true}}
:::info
At some point, the mobile pickers should have a prop allowing to have an editable field without opening the modal.
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 bfd68f5aa8442..2cc32ad2fbd6c 100644
--- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md
+++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md
@@ -56,10 +56,10 @@ You can either run it on a specific file, folder, or your entire codebase when c
```bash
-// Date and Time Pickers specific
+# Date and Time Pickers specific
npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe
-// Target other MUI X components as well
+# Target other MUI X components as well
npx @mui/x-codemod@latest v7.0.0/preset-safe
```
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
index 6f68f35c8efc6..b49c70d302114 100644
--- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
+++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -34,10 +34,10 @@ You can either run it on a specific file, folder, or your entire codebase when c
```bash
-// Date and Time Pickers specific
+# Date and Time Pickers specific
npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe
-// Target the other packages as well
+# Target the other packages as well
npx @mui/x-codemod@latest v8.0.0/preset-safe
```
@@ -258,6 +258,22 @@ const theme = createTheme({
### Slot: `layout`
+- The `` and `` components must now receive the `ownerState` returned by `usePickerLayout` instead of their props:
+
+ ```diff
+ -const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+ +const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
+
+ return (
+ -
+ +
+ -
+ +
+
+
+ );
+ ```
+
- The component passed to the `layout` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook:
```diff
@@ -276,6 +292,39 @@ const theme = createTheme({
+console.log(readOnly);
```
+- The component passed to the `layout` slot no longer receives an `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`:
+
+ ```diff
+ +import { useRtl } from '@mui/system/RtlProvider';
+ function CustomLayout(props) {
+ - console.log(props.isRtl);
+ + const isRtl = useRtl();
+ + console.log(isRtl);
+ }
+ ```
+
+- The component passed to the `layout` slot no longer receives an `orientation` and the `isLandscape` props, instead you can use the `usePickerContext` hook:
+
+ ```diff
+ -console.log(props.orientation);
+ +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+ +const { orientation } = usePickerContext();
+ +console.log(orientation);
+ -console.log(props.isLandscape);
+ +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+ +const { orientation } = usePickerContext();
+ +console.log(orientation === 'landscape');
+ ```
+
+- The component passed to the `layout` slot no longer receives a `wrapperVariant` prop, instead you can use the `usePickerContext` hook:
+
+ ```diff
+ -console.log(props.wrapperVariant);
+ +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+ +const { variant } = usePickerContext();
+ +console.log(variant);
+ ```
+
### Slot: `toolbar`
- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook:
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 8660e528c0c06..3b848ccd33bb4 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
@@ -36,10 +36,10 @@ You can either run it on a specific file, folder, or your entire codebase when c
```bash
-// Tree View specific
+# Tree View specific
npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe
-// Target other MUI X components as well
+# Target other MUI X components as well
npx @mui/x-codemod@latest v7.0.0/preset-safe
```
diff --git a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
index 4420a0b036ae0..c4df67ad1b562 100644
--- a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
+++ b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md
@@ -34,10 +34,10 @@ You can either run it on a specific file, folder, or your entire codebase when c
```bash
-// Tree View specific
+# Tree View specific
npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe
-// Target the other packages as well
+# Target the other packages as well
npx @mui/x-codemod@latest v8.0.0/preset-safe
```
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index e3810ebd70049..7da1e4479c8e0 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -90,7 +90,6 @@ const pages: MuiPage[] = [
{
pathname: '/x/react-data-grid/filtering/header-filters',
plan: 'pro',
- newFeature: true,
},
{ pathname: '/x/react-data-grid/filtering-recipes', title: 'Recipes' },
],
@@ -100,7 +99,7 @@ const pages: MuiPage[] = [
pathname: '/x/react-data-grid/selection',
children: [
{ pathname: '/x/react-data-grid/row-selection' },
- { pathname: '/x/react-data-grid/cell-selection', plan: 'premium', newFeature: true },
+ { pathname: '/x/react-data-grid/cell-selection', plan: 'premium' },
],
},
{ pathname: '/x/react-data-grid/virtualization' },
@@ -128,7 +127,7 @@ const pages: MuiPage[] = [
{ pathname: '/x/react-data-grid/aggregation', plan: 'premium' },
{ pathname: '/x/react-data-grid/pivoting', plan: 'premium', planned: true },
{ pathname: '/x/react-data-grid/export' },
- { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste', newFeature: true },
+ { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste' },
{ pathname: '/x/react-data-grid/scrolling' },
{
@@ -349,7 +348,6 @@ const pages: MuiPage[] = [
{
pathname: '/x/react-date-pickers/date-time-range-picker',
title: 'Date Time Range Picker',
- newFeature: true,
},
{
pathname: '/x/react-date-pickers/date-time-range-field',
@@ -419,7 +417,6 @@ const pages: MuiPage[] = [
{
pathname: '/x/react-charts-group',
title: 'Charts',
- newFeature: true,
children: [
{ pathname: '/x/react-charts', title: 'Overview' },
{ pathname: '/x/react-charts/getting-started' },
@@ -469,7 +466,6 @@ const pages: MuiPage[] = [
pathname: '/x/react-charts/heatmap',
title: 'Heatmap',
plan: 'pro',
- unstable: true,
},
{
pathname: '/x/react-charts/main-features',
@@ -488,7 +484,6 @@ const pages: MuiPage[] = [
pathname: '/x/react-charts/zoom-and-pan',
title: 'Zoom and pan',
plan: 'pro',
- unstable: true,
},
],
},
@@ -534,7 +529,6 @@ const pages: MuiPage[] = [
{
pathname: '/x/react-tree-view-group',
title: 'Tree View',
- newFeature: true,
children: [
{ pathname: '/x/react-tree-view', title: 'Overview' },
{ pathname: '/x/react-tree-view/getting-started' },
@@ -558,8 +552,8 @@ const pages: MuiPage[] = [
{ 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' },
- { pathname: '/x/react-tree-view/rich-tree-view/editing' },
- { pathname: '/x/react-tree-view/rich-tree-view/ordering', plan: 'pro' },
+ { pathname: '/x/react-tree-view/rich-tree-view/editing', newFeature: true },
+ { pathname: '/x/react-tree-view/rich-tree-view/ordering', plan: 'pro', newFeature: true },
],
},
{
diff --git a/docs/pages/x/api/date-pickers/pickers-layout.json b/docs/pages/x/api/date-pickers/pickers-layout.json
index e75869f624a4f..56c29a639e392 100644
--- a/docs/pages/x/api/date-pickers/pickers-layout.json
+++ b/docs/pages/x/api/date-pickers/pickers-layout.json
@@ -1,10 +1,6 @@
{
"props": {
- "isRtl": { "type": { "name": "bool" }, "required": true },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
- "orientation": {
- "type": { "name": "enum", "description": "'landscape'
| 'portrait'" }
- },
"slotProps": { "type": { "name": "object" }, "default": "{}" },
"slots": {
"type": { "name": "object" },
diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx
index 6ca16f44532e0..1b574dede42c1 100644
--- a/docs/src/modules/components/overview/mainDemo/Clock.tsx
+++ b/docs/src/modules/components/overview/mainDemo/Clock.tsx
@@ -32,11 +32,14 @@ const StyledLayout = styled(PickersLayoutRoot)({
});
function CustomLayout(props: PickersLayoutProps) {
- const { actionBar, content, toolbar } = usePickerLayout(props);
+ const { actionBar, content, toolbar, ownerState } = usePickerLayout(props);
return (
-
+
{toolbar}
-
+
{content}
{actionBar}
diff --git a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
index c8a9df4ce611c..1df001d638f38 100644
--- a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
+++ b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
@@ -60,11 +60,11 @@ interface CustomLayoutProps extends PickersLayoutProps, 'day'>
}
function CustomLayout(props: CustomLayoutProps) {
const { isHorizontal, ...other } = props;
- const { tabs, content, shortcuts } = usePickerLayout(other);
+ const { tabs, content, shortcuts, ownerState } = usePickerLayout(other);
return (
{shortcuts}
-
+
{tabs}
{content}
diff --git a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx
index b6959d39ed3f4..7f09eedfee04a 100644
--- a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx
+++ b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx
@@ -25,10 +25,13 @@ const StyledLayout = styled(PickersLayoutRoot)({
});
function CustomLayout(props: PickersLayoutProps) {
- const { actionBar, content } = usePickerLayout(props);
+ const { actionBar, content, ownerState } = usePickerLayout(props);
return (
-
-
+
+
{content}
{actionBar}
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 57a28904a850c..95c79d94d495a 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
@@ -2,10 +2,6 @@
"componentDescription": "",
"propDescriptions": {
"classes": { "description": "Override or extend the styles applied to the component." },
- "isRtl": {
- "description": "true
if the application is in right-to-left direction."
- },
- "orientation": { "description": "Force rendering in particular orientation." },
"slotProps": { "description": "The props used for each component slot." },
"slots": { "description": "Overridable component slots." },
"sx": {
diff --git a/package.json b/package.json
index ae2dba53e2f87..d8fa45b27fdd5 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
"@types/karma": "^6.3.9",
"@types/lodash": "^4.17.13",
"@types/mocha": "^10.0.10",
- "@types/node": "^20.17.6",
+ "@types/node": "^20.17.7",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/react-test-renderer": "^18.3.0",
@@ -199,7 +199,7 @@
},
"resolutions": {
"react-is": "^18.3.1",
- "@types/node": "^20.17.6"
+ "@types/node": "^20.17.7"
},
"packageManager": "pnpm@9.14.2",
"engines": {
diff --git a/packages/rsc-builder/package.json b/packages/rsc-builder/package.json
index 5db2b59cd7d5c..9775f3113923e 100644
--- a/packages/rsc-builder/package.json
+++ b/packages/rsc-builder/package.json
@@ -9,6 +9,6 @@
},
"devDependencies": {
"@types/mocha": "^10.0.10",
- "@types/node": "^20.17.6"
+ "@types/node": "^20.17.7"
}
}
diff --git a/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx b/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx
index 91ca02d3f8cd8..31cb5e114ae82 100644
--- a/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx
+++ b/packages/x-charts-pro/src/context/ChartDataProviderPro/ChartDataProviderPro.tsx
@@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
import {
ChartDataProviderProps,
DrawingAreaProvider,
- InteractionProvider,
PluginProvider,
SeriesProvider,
AnimationProvider,
- SvgRefProvider,
SizeProvider,
+ ChartProvider,
} from '@mui/x-charts/internals';
import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context';
import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
@@ -39,27 +38,27 @@ function ChartDataProviderPro(props: ChartDataProviderProProps) {
useLicenseVerifier('x-charts-pro', releaseInfo);
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
- {children}
+ {children}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
);
}
diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsXAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsXAxisHighlight.tsx
index d828547af94e0..ea0a1503911b8 100644
--- a/packages/x-charts/src/ChartsAxisHighlight/ChartsXAxisHighlight.tsx
+++ b/packages/x-charts/src/ChartsAxisHighlight/ChartsXAxisHighlight.tsx
@@ -2,9 +2,9 @@
import * as React from 'react';
import { getValueToPositionMapper, useXScale } from '../hooks/useScale';
import { isBandScale } from '../internals/isBandScale';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
-import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
import { useDrawingArea } from '../hooks';
import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types';
import { ChartsAxisHighlightClasses } from './chartsAxisHighlightClasses';
diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsYAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsYAxisHighlight.tsx
index ce996fb544df3..d78ada9a9f020 100644
--- a/packages/x-charts/src/ChartsAxisHighlight/ChartsYAxisHighlight.tsx
+++ b/packages/x-charts/src/ChartsAxisHighlight/ChartsYAxisHighlight.tsx
@@ -2,9 +2,9 @@
import * as React from 'react';
import { getValueToPositionMapper, useYScale } from '../hooks/useScale';
import { isBandScale } from '../internals/isBandScale';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
-import { selectorChartsInteractionYAxis } from '../context/InteractionSelectors';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { selectorChartsInteractionYAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
import { useDrawingArea } from '../hooks';
import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types';
import { ChartsAxisHighlightClasses } from './chartsAxisHighlightClasses';
diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
index de763e59a3283..24b157e3ffe9f 100644
--- a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
+++ b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { useSeries } from '../hooks/useSeries';
import { useSvgRef } from '../hooks';
import { useCartesianContext } from '../context/CartesianProvider';
-import { useStore } from '../internals/useStore';
+import { useStore } from '../internals/store/useStore';
export type ChartsAxisData = {
dataIndex: number;
diff --git a/packages/x-charts/src/ChartsSurface/ChartsSurface.test.tsx b/packages/x-charts/src/ChartsSurface/ChartsSurface.test.tsx
index 8a61ef8212f64..1ea244bf21331 100644
--- a/packages/x-charts/src/ChartsSurface/ChartsSurface.test.tsx
+++ b/packages/x-charts/src/ChartsSurface/ChartsSurface.test.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
import { createRenderer } from '@mui/internal-test-utils';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { expect } from 'chai';
-import { SvgRefProvider } from '../context/SvgRefProvider';
import { SizeProvider } from '../context/SizeProvider';
+import { ChartProvider } from '../internals';
describe('', () => {
// JSDOM doesn't implement SVGElement
@@ -17,16 +17,16 @@ describe('', () => {
const ref = React.createRef();
render(
-
-
+
+
-
- ,
+
+ ,
);
expect(ref.current instanceof SVGElement, 'ref is a SVGElement').to.equal(true);
diff --git a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx
index c8ffec6abaceb..605e8b2f00f0d 100644
--- a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx
+++ b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx
@@ -5,8 +5,8 @@ import * as React from 'react';
import useForkRef from '@mui/utils/useForkRef';
import { useAxisEvents } from '../hooks/useAxisEvents';
import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { useDrawingArea } from '../hooks';
-import { useSurfaceRef } from '../context/SvgRefProvider';
+import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useSvgRef } from '../hooks/useSvgRef';
import { useSize } from '../context/SizeProvider';
export interface ChartsSurfaceProps {
@@ -38,8 +38,8 @@ const ChartsSurface = React.forwardRef(functi
) {
const { width, height, left, right, top, bottom } = useDrawingArea();
const { hasIntrinsicSize } = useSize();
- const surfaceRef = useSurfaceRef();
- const handleRef = useForkRef(surfaceRef, ref);
+ const svgRef = useSvgRef();
+ const handleRef = useForkRef(svgRef, ref);
const themeProps = useThemeProps({ props: inProps, name: 'MuiChartsSurface' });
const { children, disableAxisListener = false, className, title, desc, ...other } = themeProps;
diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx
index 3fcfa1f9234e9..140bfb8f25c77 100644
--- a/packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx
+++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx
@@ -8,14 +8,14 @@ import NoSsr from '@mui/material/NoSsr';
import { useSvgRef } from '../hooks/useSvgRef';
import { TriggerOptions, usePointerType } from './utils';
import { ChartsTooltipClasses } from './chartsTooltipClasses';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
import { useXAxis } from '../hooks';
import {
selectorChartsInteractionItemIsDefined,
selectorChartsInteractionXAxisIsDefined,
selectorChartsInteractionYAxisIsDefined,
-} from '../context/InteractionSelectors';
+} from '../internals/plugins/featurePlugins/useChartInteraction';
export interface ChartsTooltipContainerProps extends Partial {
/**
diff --git a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx
index 01d5edf64255f..25acf0dbeed1a 100644
--- a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx
+++ b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx
@@ -6,8 +6,8 @@ import { ZAxisContext } from '../context/ZAxisContextProvider';
import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
import { SeriesId } from '../models/seriesType/common';
import { CartesianChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
-import { useStore } from '../internals/useStore';
-import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { useSelector } from '../internals/store/useSelector';
import { getLabel } from '../internals/getLabel';
import { isCartesianSeriesType } from '../internals/isCartesian';
import { utcFormatter } from './utils';
@@ -15,7 +15,7 @@ import { useXAxis, useYAxis } from '../hooks/useAxis';
import {
selectorChartsInteractionXAxis,
selectorChartsInteractionYAxis,
-} from '../context/InteractionSelectors';
+} from '../internals/plugins/featurePlugins/useChartInteraction';
export interface UseAxisTooltipReturnValue<
SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType,
diff --git a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx
index 1e487a863e919..ba8806eeb22f6 100644
--- a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx
+++ b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx
@@ -5,19 +5,19 @@ import { useCartesianContext } from '../context/CartesianProvider';
import { ZAxisContext } from '../context/ZAxisContextProvider';
import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
import {
+ ChartItemIdentifier,
ChartSeriesDefaultized,
ChartSeriesType,
ChartsSeriesConfig,
} from '../models/seriesType/config';
import { getLabel } from '../internals/getLabel';
import { CommonSeriesType } from '../models/seriesType/common';
-import { selectorChartsInteractionItem } from '../context/InteractionSelectors';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
-import { ItemInteractionData } from '../internals/plugins/models';
+import { selectorChartsInteractionItem } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
export interface UseItemTooltipReturnValue {
- identifier: ItemInteractionData;
+ identifier: ChartItemIdentifier;
color: string;
label: string | undefined;
value: ChartsSeriesConfig[T]['valueType'];
@@ -60,7 +60,7 @@ export function useItemTooltip(): null | UseItemToolt
)?.(value, { dataIndex: item.dataIndex });
return {
- identifier: item as ItemInteractionData,
+ identifier: item as ChartItemIdentifier,
color: getColor(item.dataIndex),
label,
value,
@@ -75,7 +75,7 @@ export function useItemTooltip(): null | UseItemToolt
)?.(value, { dataIndex: item.dataIndex });
return {
- identifier: item as ItemInteractionData,
+ identifier: item as ChartItemIdentifier,
color: getColor(item.dataIndex),
label,
value,
diff --git a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
index 29d8303317573..638b9c2577f57 100644
--- a/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
+++ b/packages/x-charts/src/ChartsVoronoiHandler/ChartsVoronoiHandler.tsx
@@ -5,7 +5,7 @@ import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import { useCartesianContext } from '../context/CartesianProvider';
import { getValueToPositionMapper } from '../hooks/useScale';
-import { useStore } from '../internals/useStore';
+import { useStore } from '../internals/store/useStore';
import { getSVGPoint } from '../internals/getSVGPoint';
import { ScatterItemIdentifier } from '../models';
import { SeriesId } from '../models/seriesType/common';
@@ -107,10 +107,10 @@ function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
}, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
React.useEffect(() => {
- const element = svgRef.current;
- if (element === null) {
+ if (svgRef.current === null) {
return undefined;
}
+ const element = svgRef.current;
function getClosestPoint(
event: MouseEvent,
diff --git a/packages/x-charts/src/Gauge/GaugeContainer.tsx b/packages/x-charts/src/Gauge/GaugeContainer.tsx
index 6126367e056cf..e9896f22106d4 100644
--- a/packages/x-charts/src/Gauge/GaugeContainer.tsx
+++ b/packages/x-charts/src/Gauge/GaugeContainer.tsx
@@ -6,7 +6,7 @@ import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface';
import { DrawingAreaProvider, DrawingAreaProviderProps } from '../context/DrawingAreaProvider';
import { GaugeProvider, GaugeProviderProps } from './GaugeProvider';
import { SizeProvider, useSize } from '../context/SizeProvider';
-import { SvgRefProvider } from '../context/SvgRefProvider';
+import { ChartProvider } from '../context/ChartProvider';
export interface GaugeContainerProps
extends Omit,
@@ -84,8 +84,8 @@ const GaugeContainer = React.forwardRef(function GaugeContainer(
} = props;
return (
-
-
+
+
-
-
+
+
);
});
diff --git a/packages/x-charts/src/LineChart/CircleMarkElement.tsx b/packages/x-charts/src/LineChart/CircleMarkElement.tsx
index 75caf10d3f589..bb30e379ebbbc 100644
--- a/packages/x-charts/src/LineChart/CircleMarkElement.tsx
+++ b/packages/x-charts/src/LineChart/CircleMarkElement.tsx
@@ -7,9 +7,9 @@ import { animated, useSpring } from '@react-spring/web';
import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
import { useItemHighlighted } from '../context';
import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses';
-import { useSelector } from '../internals/useSelector';
-import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
-import { useStore } from '../internals/useStore';
+import { useSelector } from '../internals/store/useSelector';
+import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { useStore } from '../internals/store/useStore';
export type CircleMarkElementProps = Omit &
Omit, 'ref' | 'id'> & {
diff --git a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
index bd37e6e2ec4bf..d51de6a7ecbf7 100644
--- a/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
+++ b/packages/x-charts/src/LineChart/LineHighlightPlot.tsx
@@ -2,8 +2,8 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { useStore } from '../internals/useStore';
-import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { useSelector } from '../internals/store/useSelector';
import { useCartesianContext } from '../context/CartesianProvider';
import { LineHighlightElement, LineHighlightElementProps } from './LineHighlightElement';
import { getValueToPositionMapper } from '../hooks/useScale';
@@ -11,7 +11,7 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
import getColor from './getColor';
import { useLineSeries } from '../hooks/useSeries';
import { useDrawingArea } from '../hooks/useDrawingArea';
-import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
+import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
export interface LineHighlightPlotSlots {
lineHighlight?: React.JSXElementConstructor;
diff --git a/packages/x-charts/src/LineChart/MarkElement.tsx b/packages/x-charts/src/LineChart/MarkElement.tsx
index a3d9d6f938579..8b3da371d9d90 100644
--- a/packages/x-charts/src/LineChart/MarkElement.tsx
+++ b/packages/x-charts/src/LineChart/MarkElement.tsx
@@ -8,9 +8,9 @@ import { getSymbol } from '../internals/getSymbol';
import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
import { useItemHighlighted } from '../context';
import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses';
-import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
-import { useSelector } from '../internals/useSelector';
-import { useStore } from '../internals/useStore';
+import { selectorChartsInteractionXAxis } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { useSelector } from '../internals/store/useSelector';
+import { useStore } from '../internals/store/useStore';
const MarkElementPath = styled(animated.path, {
name: 'MuiMarkElement',
diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx
index 515efa382cf79..431eb57d61eb0 100644
--- a/packages/x-charts/src/ScatterChart/Scatter.tsx
+++ b/packages/x-charts/src/ScatterChart/Scatter.tsx
@@ -8,12 +8,12 @@ import {
} from '../models/seriesType/scatter';
import { getValueToPositionMapper } from '../hooks/useScale';
import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { useStore } from '../internals/useStore';
-import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/store/useStore';
+import { useSelector } from '../internals/store/useSelector';
import { D3Scale } from '../models/axis';
import { useHighlighted } from '../context';
import { useDrawingArea } from '../hooks/useDrawingArea';
-import { selectorChartsInteractionIsVoronoiEnabled } from '../context/InteractionSelectors';
+import { selectorChartsInteractionIsVoronoiEnabled } from '../internals/plugins/featurePlugins/useChartInteraction';
export interface ScatterProps {
series: DefaultizedScatterSeriesType;
diff --git a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx
index 5f7618e39f855..e9c03e79cb78f 100644
--- a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx
+++ b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import { MakeOptional } from '@mui/x-internals/types';
import { DrawingAreaProvider, DrawingAreaProviderProps } from '../DrawingAreaProvider';
import { SeriesProvider, SeriesProviderProps } from '../SeriesProvider';
-import { InteractionProvider } from '../InteractionProvider';
import { CartesianProvider, CartesianProviderProps } from '../CartesianProvider';
import { PluginProvider, PluginProviderProps } from '../PluginProvider';
import { useChartDataProviderProps } from './useChartDataProviderProps';
@@ -13,7 +12,7 @@ import { AnimationProvider, AnimationProviderProps } from '../AnimationProvider'
import { ZAxisContextProvider, ZAxisContextProviderProps } from '../ZAxisContextProvider';
import { HighlightedProvider, HighlightedProviderProps } from '../HighlightedProvider';
import { SizeProvider, SizeProviderProps } from '../SizeProvider';
-import { SvgRefProvider } from '../SvgRefProvider';
+import { ChartProvider } from '../ChartProvider';
export type ChartDataProviderProps = Omit<
SizeProviderProps &
@@ -55,25 +54,23 @@ function ChartDataProvider(props: ChartDataProviderProps) {
} = useChartDataProviderProps(props);
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
- {children}
-
+ {children}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
);
}
diff --git a/packages/x-charts/src/context/ChartProvider/ChartContext.tsx b/packages/x-charts/src/context/ChartProvider/ChartContext.tsx
new file mode 100644
index 0000000000000..2ada7c3027eff
--- /dev/null
+++ b/packages/x-charts/src/context/ChartProvider/ChartContext.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ChartContextValue } from './ChartProvider.types';
+
+/**
+ * @ignore - internal component.
+ */
+export const ChartContext = React.createContext | null>(null);
+
+if (process.env.NODE_ENV !== 'production') {
+ ChartContext.displayName = 'ChartContext';
+}
diff --git a/packages/x-charts/src/context/ChartProvider/ChartProvider.tsx b/packages/x-charts/src/context/ChartProvider/ChartProvider.tsx
new file mode 100644
index 0000000000000..cc29f6764e2d9
--- /dev/null
+++ b/packages/x-charts/src/context/ChartProvider/ChartProvider.tsx
@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCharts } from '../../internals/store/useCharts';
+import { ChartProviderProps } from './ChartProvider.types';
+import { ChartContext } from './ChartContext';
+
+function ChartProvider(props: ChartProviderProps) {
+ const { children } = props;
+
+ const { contextValue } = useCharts([], {});
+
+ return {children};
+}
+
+export { ChartProvider };
diff --git a/packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts b/packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts
new file mode 100644
index 0000000000000..feb2fa13caf96
--- /dev/null
+++ b/packages/x-charts/src/context/ChartProvider/ChartProvider.types.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+ ChartAnyPluginSignature,
+ ChartInstance,
+ ChartPublicAPI,
+} from '../../internals/plugins/models';
+import { ChartStore } from '../../internals/plugins/utils/ChartStore';
+
+export type ChartContextValue<
+ TSignatures extends readonly ChartAnyPluginSignature[],
+ TOptionalSignatures extends readonly ChartAnyPluginSignature[] = [],
+> = {
+ /**
+ * And object with all the methods needed to interact with the chart.
+ */
+ instance: ChartInstance;
+ /**
+ * A subset of the `instance` method that are exposed to the developers.
+ */
+ publicAPI: ChartPublicAPI;
+ /**
+ * The internal state of the chart.
+ */
+ store: ChartStore;
+ /**
+ * The ref to the .
+ */
+ svgRef: React.RefObject;
+};
+
+// export interface ChartProviderProps {
+export interface ChartProviderProps {
+ // value: ChartContextValue;
+ children: React.ReactNode;
+}
diff --git a/packages/x-charts/src/context/ChartProvider/index.ts b/packages/x-charts/src/context/ChartProvider/index.ts
new file mode 100644
index 0000000000000..9296fcb189bad
--- /dev/null
+++ b/packages/x-charts/src/context/ChartProvider/index.ts
@@ -0,0 +1,3 @@
+export * from './ChartProvider';
+export * from './ChartProvider.types';
+export * from './useChartContext';
diff --git a/packages/x-charts/src/context/ChartProvider/useChartContext.ts b/packages/x-charts/src/context/ChartProvider/useChartContext.ts
new file mode 100644
index 0000000000000..9b8d7d767c1ce
--- /dev/null
+++ b/packages/x-charts/src/context/ChartProvider/useChartContext.ts
@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+import { ChartAnyPluginSignature } from '../../internals/plugins/models';
+import { ChartContext } from './ChartContext';
+import { ChartContextValue } from './ChartProvider.types';
+
+export const useChartContext = <
+ TSignatures extends readonly ChartAnyPluginSignature[],
+ TOptionalSignatures extends readonly ChartAnyPluginSignature[] = [],
+>() => {
+ const context = React.useContext(ChartContext) as ChartContextValue<
+ TSignatures,
+ TOptionalSignatures
+ >;
+ if (context == null) {
+ throw new Error(
+ [
+ 'MUI X: Could not find the Chart context.',
+ 'It looks like you rendered your component outside of a ChartDataProvider.',
+ 'This can also happen if you are bundling multiple versions of the library.',
+ ].join('\n'),
+ );
+ }
+
+ return context;
+};
diff --git a/packages/x-charts/src/context/DrawingAreaProvider/DrawingAreaContext.tsx b/packages/x-charts/src/context/DrawingAreaProvider/DrawingAreaContext.tsx
index 58cd82373e2bb..3d0fb05a40b78 100644
--- a/packages/x-charts/src/context/DrawingAreaProvider/DrawingAreaContext.tsx
+++ b/packages/x-charts/src/context/DrawingAreaProvider/DrawingAreaContext.tsx
@@ -2,21 +2,13 @@
import * as React from 'react';
import { DrawingAreaState } from './DrawingArea.types';
-export const DrawingAreaContext = React.createContext<
- DrawingAreaState & {
- /**
- * A random id used to distinguish each chart on the same page.
- */
- chartId: string;
- }
->({
+export const DrawingAreaContext = React.createContext({
top: 0,
left: 0,
bottom: 0,
right: 0,
height: 300,
width: 400,
- chartId: '',
isPointInside: () => false,
});
diff --git a/packages/x-charts/src/context/InteractionProvider.tsx b/packages/x-charts/src/context/InteractionProvider.tsx
deleted file mode 100644
index f31eac1c155d4..0000000000000
--- a/packages/x-charts/src/context/InteractionProvider.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-import * as React from 'react';
-import { useCharts } from '../internals/useCharts';
-import { ChartStore } from '../internals/plugins/utils/ChartStore';
-
-export const ChartsContext = React.createContext<{ store: ChartStore } | null>(null);
-
-if (process.env.NODE_ENV !== 'production') {
- ChartsContext.displayName = 'ChartsContext';
-}
-
-function InteractionProvider(props: React.PropsWithChildren) {
- const { children } = props;
-
- const { contextValue } = useCharts();
- return {children};
-}
-
-export { InteractionProvider };
diff --git a/packages/x-charts/src/context/InteractionSelectors.ts b/packages/x-charts/src/context/InteractionSelectors.ts
index c911baeae2162..7df8523f6f9b6 100644
--- a/packages/x-charts/src/context/InteractionSelectors.ts
+++ b/packages/x-charts/src/context/InteractionSelectors.ts
@@ -1,7 +1,8 @@
+import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
import { ChartState } from '../internals/plugins/models';
import { createSelector } from '../internals/plugins/utils/selectors';
-function selectInteraction(state: ChartState) {
+function selectInteraction(state: ChartState<[UseChartInteractionSignature]>) {
return state.interaction;
}
diff --git a/packages/x-charts/src/context/SvgRefProvider/SvgRef.types.ts b/packages/x-charts/src/context/SvgRefProvider/SvgRef.types.ts
deleted file mode 100644
index 92449792410f5..0000000000000
--- a/packages/x-charts/src/context/SvgRefProvider/SvgRef.types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-export interface SvgRefProviderProps {
- children: React.ReactNode;
-}
-
-export type SvgRefState = {
- svgRef: React.Ref;
- surfaceRef: React.Ref;
-};
diff --git a/packages/x-charts/src/context/SvgRefProvider/SvgRefContext.tsx b/packages/x-charts/src/context/SvgRefProvider/SvgRefContext.tsx
deleted file mode 100644
index 139761daee622..0000000000000
--- a/packages/x-charts/src/context/SvgRefProvider/SvgRefContext.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-import * as React from 'react';
-import { Initializable } from '../context.types';
-import { SvgRefState } from './SvgRef.types';
-
-export const SvgRefContext = React.createContext>({
- isInitialized: false,
- data: {
- svgRef: { current: null },
- surfaceRef: { current: null },
- },
-});
-
-if (process.env.NODE_ENV !== 'production') {
- SvgRefContext.displayName = 'SvgRefContext';
-}
diff --git a/packages/x-charts/src/context/SvgRefProvider/SvgRefProvider.tsx b/packages/x-charts/src/context/SvgRefProvider/SvgRefProvider.tsx
deleted file mode 100644
index fec512d29a826..0000000000000
--- a/packages/x-charts/src/context/SvgRefProvider/SvgRefProvider.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import { SvgRefProviderProps } from './SvgRef.types';
-import { SvgRefContext } from './SvgRefContext';
-
-export function SvgRefProvider(props: SvgRefProviderProps) {
- const { children } = props;
- const svgRef = React.useRef(null);
- const surfaceRef = useForkRef(svgRef);
-
- const refValue = React.useMemo(
- () => ({ isInitialized: true, data: { svgRef, surfaceRef } }),
- [svgRef, surfaceRef],
- );
-
- return {children};
-}
diff --git a/packages/x-charts/src/context/SvgRefProvider/index.ts b/packages/x-charts/src/context/SvgRefProvider/index.ts
deleted file mode 100644
index f6d75d4f23d6a..0000000000000
--- a/packages/x-charts/src/context/SvgRefProvider/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './SvgRef.types';
-export * from './SvgRefProvider';
-export * from './SvgRefContext';
-export * from './useSurfaceRef';
diff --git a/packages/x-charts/src/context/SvgRefProvider/useSurfaceRef.ts b/packages/x-charts/src/context/SvgRefProvider/useSurfaceRef.ts
deleted file mode 100644
index 5c05ae4d12008..0000000000000
--- a/packages/x-charts/src/context/SvgRefProvider/useSurfaceRef.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-import * as React from 'react';
-import { SvgRefContext } from './SvgRefContext';
-
-export function useSurfaceRef(): React.MutableRefObject {
- const { isInitialized, data } = React.useContext(SvgRefContext);
-
- if (!isInitialized) {
- throw new Error(
- [
- 'MUI X: Could not find the svg ref context.',
- 'It looks like you rendered your component outside of a ChartsContainer parent component.',
- ].join('\n'),
- );
- }
-
- return data.surfaceRef as React.MutableRefObject;
-}
diff --git a/packages/x-charts/src/hooks/useAxisEvents.ts b/packages/x-charts/src/hooks/useAxisEvents.ts
index 2860ba00e32e5..9d57cde0890cb 100644
--- a/packages/x-charts/src/hooks/useAxisEvents.ts
+++ b/packages/x-charts/src/hooks/useAxisEvents.ts
@@ -6,7 +6,7 @@ import { AxisDefaultized } from '../models/axis';
import { getSVGPoint } from '../internals/getSVGPoint';
import { useSvgRef } from './useSvgRef';
import { useDrawingArea } from './useDrawingArea';
-import { useStore } from '../internals/useStore';
+import { useStore } from '../internals/store/useStore';
function getAsANumber(value: number | Date) {
return value instanceof Date ? value.getTime() : value;
diff --git a/packages/x-charts/src/hooks/useChartId.ts b/packages/x-charts/src/hooks/useChartId.ts
index 644d0acfaab6a..f51899a80ef61 100644
--- a/packages/x-charts/src/hooks/useChartId.ts
+++ b/packages/x-charts/src/hooks/useChartId.ts
@@ -1,9 +1,9 @@
'use client';
-import * as React from 'react';
-import { DrawingAreaContext } from '../context/DrawingAreaProvider';
+import { useStore } from '../internals/store/useStore';
+import { useSelector } from '../internals/store/useSelector';
+import { selectorChartId } from '../internals/plugins/corePlugins/useChartId/useChartId.selectors';
export function useChartId() {
- const { chartId } = React.useContext(DrawingAreaContext);
-
- return React.useMemo(() => chartId, [chartId]);
+ const store = useStore();
+ return useSelector(store, selectorChartId);
}
diff --git a/packages/x-charts/src/hooks/useInteractionItemProps.ts b/packages/x-charts/src/hooks/useInteractionItemProps.ts
index 7a99e65b8f3d2..8e6aee6c538ae 100644
--- a/packages/x-charts/src/hooks/useInteractionItemProps.ts
+++ b/packages/x-charts/src/hooks/useInteractionItemProps.ts
@@ -2,7 +2,7 @@
import * as React from 'react';
import { SeriesItemIdentifier } from '../models';
import { useHighlighted } from '../context';
-import { useStore } from '../internals/useStore';
+import { useStore } from '../internals/store/useStore';
export const useInteractionItemProps = (skip?: boolean) => {
const store = useStore();
diff --git a/packages/x-charts/src/hooks/useSvgRef.test.tsx b/packages/x-charts/src/hooks/useSvgRef.test.tsx
index d03aca479c9dd..46348937f0dc9 100644
--- a/packages/x-charts/src/hooks/useSvgRef.test.tsx
+++ b/packages/x-charts/src/hooks/useSvgRef.test.tsx
@@ -2,18 +2,13 @@ import * as React from 'react';
import { expect } from 'chai';
import { ErrorBoundary, createRenderer, reactMajor, screen } from '@mui/internal-test-utils';
import { useSvgRef } from './useSvgRef';
-import { SvgRefProvider, useSurfaceRef } from '../context/SvgRefProvider';
+import { ChartProvider } from '../context/ChartProvider';
function UseSvgRef() {
const ref = useSvgRef();
- return {ref.current?.id}
;
-}
-
-function UseSurfaceRef({ children }: any) {
- const ref = useSurfaceRef();
return (
);
}
@@ -30,14 +25,12 @@ describe('useSvgRef', () => {
const errorRef = React.createRef();
- const errorMessage1 = 'MUI X: Could not find the svg ref context.';
- const errorMessage2 =
- 'It looks like you rendered your component outside of a ChartsContainer parent component.';
- const errorMessage3 = 'The above error occurred in the component:';
- const expextedError =
- reactMajor < 19
- ? [errorMessage1, errorMessage2, errorMessage3]
- : `${errorMessage1}\n${errorMessage2}`;
+ const errorMessages = [
+ 'MUI X: Could not find the Chart context.',
+ 'It looks like you rendered your component outside of a ChartDataProvider.',
+ 'The above error occurred in the component',
+ ];
+ const expextedError = reactMajor < 19 ? errorMessages : errorMessages.slice(0, 2).join('\n');
expect(() =>
render(
@@ -49,18 +42,16 @@ describe('useSvgRef', () => {
expect((errorRef.current as any).errors).to.have.length(1);
expect((errorRef.current as any).errors[0].toString()).to.include(
- 'MUI X: Could not find the svg ref context.',
+ 'MUI X: Could not find the Chart context.',
);
});
it('should not throw an error when parent context is present', async () => {
function RenderDrawingProvider() {
return (
-
-
-
-
-
+
+
+
);
}
diff --git a/packages/x-charts/src/hooks/useSvgRef.ts b/packages/x-charts/src/hooks/useSvgRef.ts
index ef1e3fe842ac0..5a76dc4f2de90 100644
--- a/packages/x-charts/src/hooks/useSvgRef.ts
+++ b/packages/x-charts/src/hooks/useSvgRef.ts
@@ -1,11 +1,11 @@
'use client';
import * as React from 'react';
-import { SvgRefContext } from '../context/SvgRefProvider';
+import { useChartContext } from '../context/ChartProvider';
-export function useSvgRef(): React.MutableRefObject {
- const { isInitialized, data } = React.useContext(SvgRefContext);
+export function useSvgRef(): React.RefObject {
+ const context = useChartContext();
- if (!isInitialized) {
+ if (!context) {
throw new Error(
[
'MUI X: Could not find the svg ref context.',
@@ -14,5 +14,5 @@ export function useSvgRef(): React.MutableRefObject {
);
}
- return data.svgRef as React.MutableRefObject;
+ return context.svgRef;
}
diff --git a/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsAxesGradients.tsx b/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsAxesGradients.tsx
index 68d6958c233fa..7443e5754dc5c 100644
--- a/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsAxesGradients.tsx
+++ b/packages/x-charts/src/internals/components/ChartsAxesGradients/ChartsAxesGradients.tsx
@@ -1,13 +1,12 @@
import * as React from 'react';
import { useCartesianContext } from '../../../context/CartesianProvider';
-import { DrawingAreaContext } from '../../../context/DrawingAreaProvider';
-import { useDrawingArea } from '../../../hooks';
+import { useChartId, useDrawingArea } from '../../../hooks';
import ChartsPiecewiseGradient from './ChartsPiecewiseGradient';
import ChartsContinuousGradient from './ChartsContinuousGradient';
import { AxisId } from '../../../models/axis';
export function useChartGradient() {
- const { chartId } = React.useContext(DrawingAreaContext);
+ const chartId = useChartId();
return React.useCallback(
(axisId: AxisId, direction: 'x' | 'y') => `${chartId}-gradient-${direction}-${axisId}`,
[chartId],
diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts
index c96a644c9b588..a41e2313e99fd 100644
--- a/packages/x-charts/src/internals/index.ts
+++ b/packages/x-charts/src/internals/index.ts
@@ -27,7 +27,6 @@ export * from './computeAxisValue';
export * from '../context/CartesianProvider';
export * from '../context/DrawingAreaProvider';
-export * from '../context/InteractionProvider';
export * from '../context/SeriesProvider';
export * from '../context/ZAxisContextProvider';
export * from '../context/PluginProvider';
@@ -36,7 +35,7 @@ export type * from '../context/context.types';
export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
export * from '../context/ChartDataProvider';
export * from '../context/SizeProvider';
-export * from '../context/SvgRefProvider';
+export * from '../context/ChartProvider';
// series configuration
export * from '../models/seriesType/config';
diff --git a/packages/x-charts/src/internals/plugins/allPlugins.ts b/packages/x-charts/src/internals/plugins/allPlugins.ts
new file mode 100644
index 0000000000000..85c3b5f2fedfd
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/allPlugins.ts
@@ -0,0 +1,4 @@
+// This file should be removed after creating all plugins in favor of a file per chart type.
+import { useChartInteraction } from './featurePlugins/useChartInteraction';
+
+export const ALL_PLUGINS = [useChartInteraction] as const;
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/corePlugins.ts b/packages/x-charts/src/internals/plugins/corePlugins/corePlugins.ts
new file mode 100644
index 0000000000000..f2b8e5ac1ef55
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/corePlugins/corePlugins.ts
@@ -0,0 +1,12 @@
+import { ConvertPluginsIntoSignatures } from '../models/helpers';
+import { useChartId, UseChartIdParameters } from './useChartId';
+
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+export const CHART_CORE_PLUGINS = [useChartId] as const;
+
+export type ChartCorePluginSignatures = ConvertPluginsIntoSignatures;
+
+export interface ChartCorePluginParameters extends UseChartIdParameters {}
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/index.ts b/packages/x-charts/src/internals/plugins/corePlugins/index.ts
new file mode 100644
index 0000000000000..ed67ec43a2f8f
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/corePlugins/index.ts
@@ -0,0 +1,2 @@
+export { CHART_CORE_PLUGINS } from './corePlugins';
+export type { ChartCorePluginSignatures, ChartCorePluginParameters } from './corePlugins';
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/index.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/index.ts
new file mode 100644
index 0000000000000..40532968814f5
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/index.ts
@@ -0,0 +1,6 @@
+export { useChartId } from './useChartId';
+export type {
+ UseChartIdSignature,
+ UseChartIdParameters,
+ UseChartIdDefaultizedParameters,
+} from './useChartId.types';
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.selectors.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.selectors.ts
new file mode 100644
index 0000000000000..d8bae09c652df
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.selectors.ts
@@ -0,0 +1,11 @@
+import { createSelector, ChartRootSelector } from '../../utils/selectors';
+import { UseChartIdSignature } from './useChartId.types';
+
+const selectorChartIdState: ChartRootSelector = (state) => state.id;
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartId = createSelector(selectorChartIdState, (idState) => idState.chartId);
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.ts
new file mode 100644
index 0000000000000..bdd0f65b2021b
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.ts
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ChartPlugin } from '../../models';
+import { UseChartIdSignature } from './useChartId.types';
+import { createChartDefaultId } from './useChartId.utils';
+
+export const useChartId: ChartPlugin = ({ params, store }) => {
+ React.useEffect(() => {
+ store.update((prevState) => {
+ if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+ return prevState;
+ }
+
+ return {
+ ...prevState,
+ id: { ...prevState.id, chartId: params.id ?? createChartDefaultId() },
+ };
+ });
+ }, [store, params.id]);
+ return {};
+};
+
+useChartId.params = {
+ id: true,
+};
+
+useChartId.getInitialState = ({ id }) => ({
+ id: { chartId: createChartDefaultId(), providedChartId: id },
+});
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.types.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.types.ts
new file mode 100644
index 0000000000000..99df1544ece60
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.types.ts
@@ -0,0 +1,24 @@
+import { ChartPluginSignature } from '../../models';
+
+export interface UseChartIdParameters {
+ /**
+ * 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.
+ */
+ id?: string;
+}
+
+export type UseChartIdDefaultizedParameters = UseChartIdParameters;
+
+export interface UseChartIdState {
+ id: {
+ chartId: string;
+ providedChartId: string | undefined;
+ };
+}
+
+export type UseChartIdSignature = ChartPluginSignature<{
+ params: UseChartIdParameters;
+ defaultizedParams: UseChartIdDefaultizedParameters;
+ state: UseChartIdState;
+}>;
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.utils.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.utils.ts
new file mode 100644
index 0000000000000..b2b6c221cbc57
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.utils.ts
@@ -0,0 +1,5 @@
+let globalChartDefaultId = 0;
+export const createChartDefaultId = () => {
+ globalChartDefaultId += 1;
+ return `mui-chart-${globalChartDefaultId}`;
+};
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/index.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/index.ts
new file mode 100644
index 0000000000000..4d2d22e38dc29
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/index.ts
@@ -0,0 +1,3 @@
+export { useChartInteraction } from './useChartInteraction';
+export * from './useChartInteraction.selectors';
+export type { UseChartInteractionSignature } from './useChartInteraction.types';
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.ts
new file mode 100644
index 0000000000000..da74793e5a451
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.ts
@@ -0,0 +1,45 @@
+import { ChartRootSelector, createSelector } from '../../utils/selectors';
+import { UseChartInteractionSignature } from './useChartInteraction.types';
+
+const selectInteraction: ChartRootSelector = (state) =>
+ state.interaction;
+
+export const selectorChartsInteractionItem = createSelector(
+ selectInteraction,
+ (interaction) => interaction.item,
+);
+
+export const selectorChartsInteractionAxis = createSelector(
+ selectInteraction,
+ (interaction) => interaction.axis,
+);
+
+export const selectorChartsInteractionXAxis = createSelector(
+ selectInteraction,
+ (interaction) => interaction.axis.x,
+);
+
+export const selectorChartsInteractionYAxis = createSelector(
+ selectInteraction,
+ (interaction) => interaction.axis.y,
+);
+
+export const selectorChartsInteractionItemIsDefined = createSelector(
+ selectorChartsInteractionItem,
+ (item) => item !== null,
+);
+
+export const selectorChartsInteractionXAxisIsDefined = createSelector(
+ selectorChartsInteractionXAxis,
+ (x) => x !== null,
+);
+
+export const selectorChartsInteractionYAxisIsDefined = createSelector(
+ selectorChartsInteractionYAxis,
+ (y) => y !== null,
+);
+
+export const selectorChartsInteractionIsVoronoiEnabled = createSelector(
+ selectInteraction,
+ (interaction) => interaction.isVoronoiEnabled,
+);
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.ts
new file mode 100644
index 0000000000000..2dca0b61cbbe5
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.ts
@@ -0,0 +1,83 @@
+import useEventCallback from '@mui/utils/useEventCallback';
+import { ChartPlugin } from '../../models';
+import { AxisInteractionData, UseChartInteractionSignature } from './useChartInteraction.types';
+import { ChartItemIdentifier, ChartSeriesType } from '../../../../models/seriesType/config';
+
+export const useChartInteraction: ChartPlugin = ({ store }) => {
+ const cleanInteraction = useEventCallback(() => {
+ store.update((prev) => ({
+ ...prev,
+ interaction: { ...prev.interaction, axis: { x: null, y: null }, item: null },
+ }));
+ });
+
+ const setItemInteraction = useEventCallback((newItem: ChartItemIdentifier) => {
+ store.update((prev) => ({
+ ...prev,
+ interaction: {
+ ...prev.interaction,
+ item: newItem,
+ },
+ }));
+ });
+
+ const setAxisInteraction = useEventCallback(
+ ({ x: newStateX, y: newStateY }: Partial) => {
+ store.update((prev) => ({
+ ...prev,
+ interaction: {
+ ...prev.interaction,
+ axis: {
+ // A bit verbose, but prevent losing the x value if only y got modified.
+ ...prev.interaction.axis,
+ ...(prev.interaction.axis.x?.index !== newStateX?.index ||
+ prev.interaction.axis.x?.value !== newStateX?.value
+ ? { x: newStateX }
+ : {}),
+ ...(prev.interaction.axis.y?.index !== newStateY?.index ||
+ prev.interaction.axis.y?.value !== newStateY?.value
+ ? { y: newStateY }
+ : {}),
+ },
+ },
+ }));
+ },
+ );
+
+ const enableVoronoid = useEventCallback(() => {
+ store.update((prev) => ({
+ ...prev,
+ interaction: {
+ ...prev.interaction,
+ isVoronoiEnabled: true,
+ },
+ }));
+ });
+
+ const disableVoronoid = useEventCallback(() => {
+ store.update((prev) => ({
+ ...prev,
+ interaction: {
+ ...prev.interaction,
+ isVoronoiEnabled: false,
+ },
+ }));
+ });
+
+ return {
+ params: {},
+ instance: {
+ cleanInteraction,
+ setItemInteraction,
+ setAxisInteraction,
+ enableVoronoid,
+ disableVoronoid,
+ },
+ };
+};
+
+useChartInteraction.getInitialState = () => ({
+ interaction: { item: null, axis: { x: null, y: null }, isVoronoiEnabled: false },
+});
+
+useChartInteraction.params = {};
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.ts
new file mode 100644
index 0000000000000..76c97c2c803c8
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.ts
@@ -0,0 +1,63 @@
+import { ChartPluginSignature } from '../../models';
+import { ChartItemIdentifier, ChartSeriesType } from '../../../../models/seriesType/config';
+
+export interface UseChartInteractionInstance {
+ /**
+ * Remove all interaction.
+ */
+ cleanInteraction: () => void;
+ /**
+ * Setter for the item the user is interacting with.
+ * @param {ChartItemIdentifier} newItem The identifier of the item.
+ */
+ setItemInteraction: (newItem: ChartItemIdentifier) => void;
+ /**
+ * Set the new axis the user is interacting with.
+ * @param {Partial} newAxis The new axis identifier.
+ */
+ setAxisInteraction: (newAxis: Partial) => void;
+ /**
+ * Enable the voronoi computation.
+ */
+ enableVoronoid: () => void;
+ /**
+ * Disable the voronoi computation.
+ */
+ disableVoronoid: () => void;
+}
+
+export type AxisInteractionData = {
+ x: null | {
+ value: number | Date | string;
+ // Set to -1 if no index.
+ index: number;
+ };
+ y: null | {
+ value: number | Date | string;
+ // Set to -1 if no index.
+ index: number;
+ };
+};
+
+export interface UseChartInteractionState {
+ interaction: {
+ /**
+ * The item currently interacting.
+ */
+ item: null | ChartItemIdentifier;
+ /**
+ * The x- and y-axes currently interacting.
+ */
+ axis: AxisInteractionData;
+ /**
+ * Set to `true` when `VoronoiHandler` is active.
+ * Used to prevent collision with mouseEnter events.
+ */
+ isVoronoiEnabled?: boolean;
+ };
+}
+
+export type UseChartInteractionSignature = ChartPluginSignature<{
+ instance: UseChartInteractionInstance;
+ state: UseChartInteractionState;
+}>;
diff --git a/packages/x-charts/src/internals/plugins/models/chart.ts b/packages/x-charts/src/internals/plugins/models/chart.ts
new file mode 100644
index 0000000000000..88fb89d69f7a9
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/models/chart.ts
@@ -0,0 +1,28 @@
+import type { ChartAnyPluginSignature } from './plugin';
+import type { MergeSignaturesProperty } from './helpers';
+import type { ChartCorePluginSignatures } from '../corePlugins';
+
+export type ChartInstance<
+ TSignatures extends readonly ChartAnyPluginSignature[],
+ TOptionalSignatures extends readonly ChartAnyPluginSignature[] = [],
+> = MergeSignaturesProperty<[...ChartCorePluginSignatures, ...TSignatures], 'instance'> &
+ Partial>;
+
+export type ChartPublicAPI<
+ TSignatures extends readonly ChartAnyPluginSignature[],
+ TOptionalSignatures extends readonly ChartAnyPluginSignature[] = [],
+> = MergeSignaturesProperty<[...ChartCorePluginSignatures, ...TSignatures], 'publicAPI'> &
+ Partial>;
+
+export type ChartStateCacheKey = { id: number };
+
+export type ChartState<
+ TSignatures extends readonly ChartAnyPluginSignature[],
+ TOptionalSignatures extends readonly ChartAnyPluginSignature[] = [],
+> = MergeSignaturesProperty<[...ChartCorePluginSignatures, ...TSignatures], 'state'> &
+ Partial> & {
+ /**
+ * The key used to identify the chart in the global cache object.
+ */
+ cacheKey: ChartStateCacheKey;
+ };
diff --git a/packages/x-charts/src/internals/plugins/models/helpers.ts b/packages/x-charts/src/internals/plugins/models/helpers.ts
new file mode 100644
index 0000000000000..2e2e6287ad1fc
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/models/helpers.ts
@@ -0,0 +1,37 @@
+import type { ChartAnyPluginSignature, ChartPlugin } from './plugin';
+
+type IsAny = 0 extends 1 & T ? true : false;
+
+export type OptionalIfEmpty = keyof B extends never
+ ? Partial>
+ : IsAny extends true
+ ? Partial>
+ : Record;
+
+export type MergeSignaturesProperty<
+ TSignatures extends readonly any[],
+ TProperty extends keyof ChartAnyPluginSignature,
+> = TSignatures extends readonly [plugin: infer P, ...otherPlugin: infer R]
+ ? P extends ChartAnyPluginSignature
+ ? P[TProperty] & MergeSignaturesProperty
+ : {}
+ : {};
+
+export type ConvertPluginsIntoSignatures<
+ TPlugins extends readonly ChartPlugin[],
+> = TPlugins extends readonly [plugin: infer TPlugin, ...otherPlugin: infer R]
+ ? R extends readonly ChartPlugin[]
+ ? TPlugin extends ChartPlugin
+ ? readonly [TSignature, ...ConvertPluginsIntoSignatures]
+ : never
+ : never
+ : [];
+
+export type ConvertSignaturesIntoPlugins =
+ TSignatures extends readonly [signature: infer TSignature, ...otherSignatures: infer R]
+ ? R extends readonly ChartAnyPluginSignature[]
+ ? TSignature extends ChartAnyPluginSignature
+ ? readonly [ChartPlugin, ...ConvertSignaturesIntoPlugins]
+ : never
+ : never
+ : [];
diff --git a/packages/x-charts/src/internals/plugins/models/index.ts b/packages/x-charts/src/internals/plugins/models/index.ts
index ba5ae5bd5f5fe..326d7260e125b 100644
--- a/packages/x-charts/src/internals/plugins/models/index.ts
+++ b/packages/x-charts/src/internals/plugins/models/index.ts
@@ -1,39 +1,3 @@
-import { ChartItemIdentifier, ChartSeriesType } from '../../../models/seriesType/config';
-
-export type ItemInteractionData = ChartItemIdentifier;
-
-export type AxisInteractionData = {
- x: null | {
- value: number | Date | string;
- // Set to -1 if no index.
- index: number;
- };
- y: null | {
- value: number | Date | string;
- // Set to -1 if no index.
- index: number;
- };
-};
-
-type InteractionState = {
- /**
- * The item currently interacting.
- */
- item: null | ItemInteractionData;
- /**
- * The x- and y-axes currently interacting.
- */
- axis: AxisInteractionData;
- /**
- * Set to `true` when `VoronoiHandler` is active.
- * Used to prevent collision with mouseEnter events.
- */
- isVoronoiEnabled?: boolean;
-};
-
-export type ChartStateCacheKey = { id: number };
-
-export type ChartState = {
- interaction: InteractionState;
- cacheKey: ChartStateCacheKey;
-};
+export * from './helpers';
+export * from './plugin';
+export * from './chart';
diff --git a/packages/x-charts/src/internals/plugins/models/plugin.ts b/packages/x-charts/src/internals/plugins/models/plugin.ts
new file mode 100644
index 0000000000000..405020c1bff71
--- /dev/null
+++ b/packages/x-charts/src/internals/plugins/models/plugin.ts
@@ -0,0 +1,87 @@
+import * as React from 'react';
+
+import type { MergeSignaturesProperty, OptionalIfEmpty } from './helpers';
+import type { ChartCorePluginSignatures } from '../corePlugins';
+import { ChartStore } from '../utils/ChartStore';
+
+export interface ChartPluginOptions {
+ instance: ChartUsedInstance;
+ params: ChartUsedDefaultizedParams;
+ store: ChartUsedStore;
+ svgRef: React.RefObject;
+ plugins: ChartPlugin[];
+}
+
+type ChartResponse = OptionalIfEmpty<
+ 'publicAPI',
+ TSignature['publicAPI']
+> &
+ OptionalIfEmpty<'instance', TSignature['instance']>;
+
+export type ChartPluginSignature<
+ T extends {
+ params?: {};
+ defaultizedParams?: {};
+ instance?: {};
+ publicAPI?: {};
+ state?: {};
+ dependencies?: readonly ChartAnyPluginSignature[];
+ optionalDependencies?: readonly ChartAnyPluginSignature[];
+ },
+> = {
+ params: T extends { params: {} } ? T['params'] : {};
+ defaultizedParams: T extends { defaultizedParams: {} } ? T['defaultizedParams'] : {};
+ instance: T extends { instance: {} } ? T['instance'] : {};
+ state: T extends { state: {} } ? T['state'] : {};
+ publicAPI: T extends { publicAPI: {} } ? T['publicAPI'] : {};
+ dependencies: T extends { dependencies: Array } ? T['dependencies'] : [];
+ optionalDependencies: T extends { optionalDependencies: Array }
+ ? T['optionalDependencies']
+ : [];
+};
+
+export type ChartAnyPluginSignature = {
+ state: any;
+ instance: any;
+ params: any;
+ defaultizedParams: any;
+ dependencies: any;
+ optionalDependencies: any;
+ publicAPI: any;
+};
+
+type ChartRequiredPlugins = [
+ ...ChartCorePluginSignatures,
+ ...TSignature['dependencies'],
+];
+
+type PluginPropertyWithDependencies<
+ TSignature extends ChartAnyPluginSignature,
+ TProperty extends keyof ChartAnyPluginSignature,
+> = TSignature[TProperty] &
+ MergeSignaturesProperty, TProperty> &
+ Partial>;
+
+export type ChartUsedParams =
+ PluginPropertyWithDependencies;
+
+type ChartUsedDefaultizedParams =
+ PluginPropertyWithDependencies;
+
+export type ChartUsedInstance =
+ PluginPropertyWithDependencies & {
+ /**
+ * Private property only defined in TypeScript to be able to access the plugin signature from the instance object.
+ */
+ $$signature: TSignature;
+ };
+
+export type ChartUsedStore = ChartStore<
+ [TSignature, ...TSignature['dependencies']]
+>;
+
+export type ChartPlugin = {
+ (options: ChartPluginOptions): ChartResponse;
+ getInitialState?: (params: ChartUsedDefaultizedParams) => TSignature['state'];
+ params: Record;
+};
diff --git a/packages/x-charts/src/internals/plugins/utils/ChartStore.ts b/packages/x-charts/src/internals/plugins/utils/ChartStore.ts
index f4cdbc2324d9d..9961a38dd4ecf 100644
--- a/packages/x-charts/src/internals/plugins/utils/ChartStore.ts
+++ b/packages/x-charts/src/internals/plugins/utils/ChartStore.ts
@@ -1,20 +1,23 @@
-import type { ChartState } from '../models'; // For now this is fixed. Will need to support generic if we add plugins
+import type { ChartState } from '../models/chart';
+import type { ChartAnyPluginSignature } from '../models/plugin';
type Listener = (value: T) => void;
-export type StoreUpdater = (prevState: ChartState) => ChartState;
+export type StoreUpdater = (
+ prevState: ChartState,
+) => ChartState;
-export class ChartStore {
- public value: ChartState;
+export class ChartStore {
+ public value: ChartState;
- private listeners: Set>;
+ private listeners: Set>>;
- constructor(value: ChartState) {
+ constructor(value: ChartState) {
this.value = value;
this.listeners = new Set();
}
- public subscribe = (fn: Listener) => {
+ public subscribe = (fn: Listener>) => {
this.listeners.add(fn);
return () => {
this.listeners.delete(fn);
@@ -25,7 +28,7 @@ export class ChartStore {
return this.value;
};
- public update = (updater: StoreUpdater) => {
+ public update = (updater: StoreUpdater) => {
const newState = updater(this.value);
if (newState !== this.value) {
this.value = newState;
diff --git a/packages/x-charts/src/internals/plugins/utils/ChartsStore.ts b/packages/x-charts/src/internals/plugins/utils/ChartsStore.ts
deleted file mode 100644
index 04278c9284818..0000000000000
--- a/packages/x-charts/src/internals/plugins/utils/ChartsStore.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ChartState } from '../models'; // For now this is fixed. Will need to support generic if we add plugins
-
-type Listener = (value: T) => void;
-
-export type StoreUpdater = (prevState: ChartState) => ChartState;
-
-export class ChartsStore {
- public value: ChartState;
-
- private listeners: Set>;
-
- constructor(value: ChartState) {
- this.value = value;
- this.listeners = new Set();
- }
-
- public subscribe = (fn: Listener) => {
- this.listeners.add(fn);
- return () => {
- this.listeners.delete(fn);
- };
- };
-
- public getSnapshot = () => {
- return this.value;
- };
-
- public update = (updater: StoreUpdater) => {
- const newState = updater(this.value);
- if (newState !== this.value) {
- this.value = newState;
- this.listeners.forEach((l) => l(newState));
- }
- };
-}
diff --git a/packages/x-charts/src/internals/plugins/utils/selectors.ts b/packages/x-charts/src/internals/plugins/utils/selectors.ts
index a91ac4a1a0fa5..5f87f1395cb24 100644
--- a/packages/x-charts/src/internals/plugins/utils/selectors.ts
+++ b/packages/x-charts/src/internals/plugins/utils/selectors.ts
@@ -1,5 +1,5 @@
import { lruMemoize, createSelectorCreator, CreateSelectorFunction } from 'reselect';
-import { ChartState, ChartStateCacheKey } from '../models';
+import { ChartAnyPluginSignature, ChartState, ChartStateCacheKey } from '../models';
const reselectCreateSelector = createSelectorCreator({
memoize: lruMemoize,
@@ -14,7 +14,11 @@ const cache = new WeakMap<
Map, any>
>();
-export type ChartsRootSelector = (state: ChartState) => ChartState[keyof ChartState];
+export type ChartRootSelector = <
+ TSignatures extends [TSignature],
+>(
+ state: ChartState,
+) => TSignature['state'][keyof TSignature['state']];
export type ChartsSelector = (state: TState, args: TArgs) => TResult;
@@ -23,7 +27,7 @@ export type ChartsSelector = (state: TState, args: TArgs
*
*/
export const createSelector = ((...createSelectorArgs: any) => {
- const selector: ChartsSelector = (state, selectorArgs) => {
+ const selector: ChartsSelector, any, any> = (state, selectorArgs) => {
const cacheKey = state.cacheKey;
// If there is no cache for the current chart instance, create one.
diff --git a/packages/x-charts/src/internals/store/useCharts.ts b/packages/x-charts/src/internals/store/useCharts.ts
new file mode 100644
index 0000000000000..ac61c10a1804a
--- /dev/null
+++ b/packages/x-charts/src/internals/store/useCharts.ts
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { ChartStore } from '../plugins/utils/ChartStore';
+import {
+ ChartAnyPluginSignature,
+ ChartInstance,
+ ChartPlugin,
+ ChartPublicAPI,
+ ChartState,
+ ConvertSignaturesIntoPlugins,
+} from '../plugins/models';
+import { CHART_CORE_PLUGINS, ChartCorePluginSignatures } from '../plugins/corePlugins';
+import { UseChartBaseProps } from './useCharts.types';
+import { UseChartInteractionState } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
+
+export function useChartApiInitialization(
+ inputApiRef: React.MutableRefObject | undefined,
+): T {
+ const fallbackPublicApiRef = React.useRef({}) as React.MutableRefObject;
+
+ if (inputApiRef) {
+ if (inputApiRef.current == null) {
+ // eslint-disable-next-line react-compiler/react-compiler
+ inputApiRef.current = {} as T;
+ }
+ return inputApiRef.current;
+ }
+
+ return fallbackPublicApiRef.current;
+}
+
+let globalId = 0;
+
+export function useCharts<
+ TSignatures extends readonly ChartAnyPluginSignature[],
+ TProps extends Partial>,
+>(inPlugins: ConvertSignaturesIntoPlugins, props: TProps) {
+ type TSignaturesWithCorePluginSignatures = readonly [
+ ...ChartCorePluginSignatures,
+ ...TSignatures,
+ ];
+
+ const plugins = React.useMemo(
+ () =>
+ [
+ ...CHART_CORE_PLUGINS,
+ ...inPlugins,
+ ] as unknown as ConvertSignaturesIntoPlugins,
+ [inPlugins],
+ );
+
+ const pluginParams = {}; // To generate when plugins use params.
+ const instanceRef = React.useRef({} as ChartInstance);
+ const instance = instanceRef.current as ChartInstance;
+ const publicAPI = useChartApiInitialization>(props.apiRef);
+ const innerSvgRef: React.RefObject = React.useRef(null);
+
+ const storeRef = React.useRef | null>(null);
+ if (storeRef.current == null) {
+ // eslint-disable-next-line react-compiler/react-compiler
+ globalId += 1;
+
+ const initialState = {
+ // TODO remove when the interaction moves to plugin
+ interaction: {
+ item: null,
+ axis: { x: null, y: null },
+ },
+ cacheKey: { id: globalId },
+ } as ChartState & UseChartInteractionState;
+
+ plugins.forEach((plugin) => {
+ if (plugin.getInitialState) {
+ Object.assign(initialState, plugin.getInitialState({}));
+ }
+ });
+ storeRef.current = new ChartStore(initialState);
+ }
+
+ const runPlugin = (plugin: ChartPlugin) => {
+ const pluginResponse = plugin({
+ instance,
+ params: pluginParams,
+ plugins: plugins as ChartPlugin[],
+ store: storeRef.current as ChartStore,
+ svgRef: innerSvgRef,
+ });
+
+ if (pluginResponse.publicAPI) {
+ Object.assign(publicAPI, pluginResponse.publicAPI);
+ }
+
+ if (pluginResponse.instance) {
+ Object.assign(instance, pluginResponse.instance);
+ }
+ };
+
+ plugins.forEach(runPlugin);
+
+ const contextValue = React.useMemo(
+ () => ({
+ store: storeRef.current as ChartStore &
+ UseChartInteractionState,
+ publicAPI,
+ instance,
+ svgRef: innerSvgRef,
+ }),
+ [instance, publicAPI],
+ );
+
+ return { contextValue };
+}
diff --git a/packages/x-charts/src/internals/store/useCharts.types.ts b/packages/x-charts/src/internals/store/useCharts.types.ts
new file mode 100644
index 0000000000000..1b229c8470ae9
--- /dev/null
+++ b/packages/x-charts/src/internals/store/useCharts.types.ts
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ChartAnyPluginSignature, ChartPublicAPI } from '../plugins/models';
+
+export interface UseChartBaseProps {
+ apiRef: React.MutableRefObject | undefined> | undefined;
+}
diff --git a/packages/x-charts/src/internals/store/useSelector.ts b/packages/x-charts/src/internals/store/useSelector.ts
new file mode 100644
index 0000000000000..801d5663743cd
--- /dev/null
+++ b/packages/x-charts/src/internals/store/useSelector.ts
@@ -0,0 +1,23 @@
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+import { ChartAnyPluginSignature, ChartState } from '../plugins/models';
+import { ChartsSelector } from '../plugins/utils/selectors';
+import { ChartStore } from '../plugins/utils/ChartStore';
+
+const defaultCompare = Object.is;
+
+export const useSelector = (
+ store: ChartStore,
+ selector: ChartsSelector, TArgs, TValue>,
+ args: TArgs = undefined as TArgs,
+ equals: (a: TValue, b: TValue) => boolean = defaultCompare,
+): TValue => {
+ const selectorWithArgs = (state: ChartState) => selector(state, args);
+
+ return useSyncExternalStoreWithSelector(
+ store.subscribe,
+ store.getSnapshot,
+ store.getSnapshot,
+ selectorWithArgs,
+ equals,
+ );
+};
diff --git a/packages/x-charts/src/internals/useStore.ts b/packages/x-charts/src/internals/store/useStore.ts
similarity index 51%
rename from packages/x-charts/src/internals/useStore.ts
rename to packages/x-charts/src/internals/store/useStore.ts
index f906789004aa9..ba2e8422e4555 100644
--- a/packages/x-charts/src/internals/useStore.ts
+++ b/packages/x-charts/src/internals/store/useStore.ts
@@ -1,9 +1,10 @@
-import * as React from 'react';
-import { ChartsContext } from '../context/InteractionProvider';
-import { ChartStore } from './plugins/utils/ChartStore';
+import { useChartContext } from '../../context/ChartProvider';
+import { ChartStore } from '../plugins/utils/ChartStore';
+import { UseChartInteractionSignature } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
-export function useStore(skipError?: boolean): ChartStore {
- const charts = React.useContext(ChartsContext);
+// This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
+export function useStore(skipError?: boolean): ChartStore<[UseChartInteractionSignature]> {
+ const context = useChartContext();
if (skipError) {
// TODO: Remove once store is used by all charts.
@@ -11,9 +12,9 @@ export function useStore(skipError?: boolean): ChartStore {
// But the Gauge don't have store yet because it does not need the interaction provider.
// Will be fixed when every thing move to the store since every component will have access to it.
// @ts-ignore
- return charts?.store;
+ return context?.store;
}
- if (!charts) {
+ if (!context) {
throw new Error(
[
'MUI X: Could not find the charts context.',
@@ -22,5 +23,5 @@ export function useStore(skipError?: boolean): ChartStore {
);
}
- return charts.store;
+ return context.store;
}
diff --git a/packages/x-charts/src/internals/useCharts.ts b/packages/x-charts/src/internals/useCharts.ts
deleted file mode 100644
index dddafa853ba85..0000000000000
--- a/packages/x-charts/src/internals/useCharts.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { ChartStore } from './plugins/utils/ChartStore';
-import { ChartState } from './plugins/models';
-
-let globalId = 0;
-
-export function useCharts() {
- const storeRef = React.useRef(null);
- if (storeRef.current == null) {
- // eslint-disable-next-line react-compiler/react-compiler
- globalId += 1;
- const initialState: ChartState = {
- interaction: {
- item: null,
- axis: { x: null, y: null },
- },
- cacheKey: { id: globalId },
- };
- storeRef.current = new ChartStore(initialState);
- }
-
- const contextValue = React.useMemo(() => ({ store: storeRef.current as ChartStore }), []);
-
- return { contextValue };
-}
diff --git a/packages/x-charts/src/internals/useSelector.ts b/packages/x-charts/src/internals/useSelector.ts
deleted file mode 100644
index b4940ae5c8d3f..0000000000000
--- a/packages/x-charts/src/internals/useSelector.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
-import { ChartState } from './plugins/models';
-import { ChartsSelector } from './plugins/utils/selectors';
-import { ChartStore } from './plugins/utils/ChartStore';
-
-const defaultCompare = Object.is;
-
-export const useSelector = (
- store: ChartStore,
- selector: ChartsSelector,
- args: TArgs = undefined as TArgs,
- equals: (a: TValue, b: TValue) => boolean = defaultCompare,
-): TValue => {
- const selectorWithArgs = (state: ChartState) => selector(state, args);
-
- return useSyncExternalStoreWithSelector(
- store.subscribe,
- store.getSnapshot,
- store.getSnapshot,
- selectorWithArgs,
- equals,
- );
-};
diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md
index 05de183880cf5..1537575f518eb 100644
--- a/packages/x-codemod/README.md
+++ b/packages/x-codemod/README.md
@@ -39,9 +39,10 @@ Examples:
To pass more options directly to jscodeshift, use `--jscodeshift=...`. For example:
```bash
-// single option
+# single option
npx @mui/x-codemod@next --jscodeshift=--run-in-band
-// multiple options
+
+# multiple options
npx @mui/x-codemod@next --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
```
diff --git a/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx
index 88bb7b1dd69e0..69a67346684e3 100644
--- a/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
import { getCell } from 'test/utils/helperFn';
+import { spy } from 'sinon';
import { expect } from 'chai';
import {
DataGridPremium,
@@ -68,6 +69,19 @@ describe(' - Row selection', () => {
);
}
+ it('should auto select parents when controlling row selection model', () => {
+ const onRowSelectionModelChange = spy();
+ render(
+ ,
+ );
+
+ expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([
+ 3,
+ 4,
+ 'auto-generated-row-category1/Cat B',
+ ]);
+ });
+
it('should select all the children when selecting a parent', () => {
render();
diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx
index ad5d41c588c75..c9e93334b13a4 100644
--- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx
@@ -534,6 +534,18 @@ describe(' - Row selection', () => {
);
}
+ it('should not auto select parents when controlling row selection model', () => {
+ const onRowSelectionModelChange = spy();
+ render(
+ ,
+ );
+
+ expect(onRowSelectionModelChange.callCount).to.equal(0);
+ });
+
it('should select the parent only when selecting it', () => {
render();
@@ -695,6 +707,19 @@ describe(' - Row selection', () => {
);
}
+ it('should auto select parents when controlling row selection model', () => {
+ const onRowSelectionModelChange = spy();
+ render(
+ ,
+ );
+
+ expect(onRowSelectionModelChange.callCount).to.equal(2); // Dev mode calls twice
+ expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal([2, 3, 4, 5, 6, 7, 1]);
+ });
+
it('should select the parent only when selecting it', () => {
render();
diff --git a/packages/x-data-grid/src/components/base/GridOverlays.tsx b/packages/x-data-grid/src/components/base/GridOverlays.tsx
index 6b7988048b3a6..386efae7d726a 100644
--- a/packages/x-data-grid/src/components/base/GridOverlays.tsx
+++ b/packages/x-data-grid/src/components/base/GridOverlays.tsx
@@ -6,12 +6,16 @@ import clsx from 'clsx';
import { minimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
import { useGridSelector } from '../../hooks/utils/useGridSelector';
import { gridDimensionsSelector } from '../../hooks/features/dimensions';
-import { GridOverlayType } from '../../hooks/features/overlays/useGridOverlays';
import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { DataGridProcessedProps } from '../../models/props/DataGridProps';
import { getDataGridUtilityClass } from '../../constants/gridClasses';
import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
+import { GridSlotsComponent } from '../../models';
+
+export type GridOverlayType =
+ | keyof Pick
+ | null;
interface GridOverlaysProps {
overlayType: GridOverlayType;
@@ -66,7 +70,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
return composeClasses(slots, getDataGridUtilityClass, classes);
};
-function GridOverlayWrapper(props: React.PropsWithChildren) {
+export function GridOverlayWrapper(props: React.PropsWithChildren) {
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
@@ -111,30 +115,3 @@ GridOverlayWrapper.propTypes = {
loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay']),
} as any;
-
-GridOverlays.propTypes = {
- // ----------------------------- Warning --------------------------------
- // | These PropTypes are generated from the TypeScript type definitions |
- // | To update them edit the TypeScript types and run "pnpm proptypes" |
- // ----------------------------------------------------------------------
- loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
- overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay']),
-} as any;
-
-export function GridOverlays(props: GridOverlaysProps) {
- const { overlayType } = props;
- const rootProps = useGridRootProps();
-
- if (!overlayType) {
- return null;
- }
-
- const Overlay = rootProps.slots?.[overlayType];
- const overlayProps = rootProps.slotProps?.[overlayType];
-
- return (
-
-
-
- );
-}
diff --git a/packages/x-data-grid/src/components/base/index.ts b/packages/x-data-grid/src/components/base/index.ts
index a67ce548bb138..a7c3aa8d67718 100644
--- a/packages/x-data-grid/src/components/base/index.ts
+++ b/packages/x-data-grid/src/components/base/index.ts
@@ -1,3 +1,2 @@
export * from './GridBody';
export * from './GridFooterPlaceholder';
-export * from './GridOverlays';
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx
index 58feb8f10f10c..bd93594271972 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx
@@ -57,8 +57,8 @@ const GridToolbarColumnsButton = React.forwardRef
}
- {...buttonProps}
onClick={showColumns}
{...rootProps.slotProps?.baseButton}
+ {...buttonProps}
>
{apiRef.current.getLocaleText('toolbarColumns')}
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
index d6c952c6f543c..585e9ff849431 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
@@ -110,8 +110,8 @@ const GridToolbarDensitySelector = React.forwardRef<
{apiRef.current.getLocaleText('toolbarDensity')}
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
index df889bd02870b..0a06d9e234ec0 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
@@ -59,8 +59,8 @@ const GridToolbarExportContainer = React.forwardRef<
{apiRef.current.getLocaleText('toolbarExport')}
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
index 5f7bbb6f473f7..29a4a8c637f63 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
@@ -8,6 +8,7 @@ import {
} from '@mui/utils';
import { ButtonProps } from '@mui/material/Button';
import { TooltipProps } from '@mui/material/Tooltip';
+import { BadgeProps } from '@mui/material/Badge';
import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
import { useGridSelector } from '../../hooks/utils/useGridSelector';
import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector';
@@ -46,7 +47,11 @@ export interface GridToolbarFilterButtonProps {
* The props used for each slot inside.
* @default {}
*/
- slotProps?: { button?: Partial; tooltip?: Partial };
+ slotProps?: {
+ button?: Partial;
+ tooltip?: Partial;
+ badge?: Partial;
+ };
}
const GridToolbarFilterButton = React.forwardRef(
@@ -54,6 +59,7 @@ const GridToolbarFilterButton = React.forwardRef
+
}
- {...buttonProps}
onClick={toggleFilter}
{...rootProps.slotProps?.baseButton}
+ {...buttonProps}
>
{apiRef.current.getLocaleText('toolbarFilters')}
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
index 38859f1f89181..c458d51de8ddd 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
@@ -10,7 +10,6 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
import { GridDimensions, gridDimensionsSelector } from '../../hooks/features/dimensions';
import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
import { useGridOverlays } from '../../hooks/features/overlays/useGridOverlays';
-import { GridOverlays as Overlays } from '../base/GridOverlays';
import { GridHeaders } from '../GridHeaders';
import { GridMainContainer as Container } from './GridMainContainer';
import { GridTopContainer as TopContainer } from './GridTopContainer';
@@ -73,7 +72,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
- const overlaysProps = useGridOverlays();
+ const { getOverlay, overlaysProps } = useGridOverlays();
const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
const virtualScroller = useGridVirtualScroller();
@@ -99,7 +98,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
-
+ {getOverlay()}
diff --git a/packages/x-data-grid/src/constants/localeTextConstants.ts b/packages/x-data-grid/src/constants/localeTextConstants.ts
index e1084f796c1e1..ceaafee36c5ab 100644
--- a/packages/x-data-grid/src/constants/localeTextConstants.ts
+++ b/packages/x-data-grid/src/constants/localeTextConstants.ts
@@ -34,7 +34,6 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
toolbarPromptControlLabel: 'Prompt input',
- toolbarPromptControlDeleteIconLabel: 'Clear',
toolbarPromptControlRecordButtonDefaultLabel: 'Record',
toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/hooks/core/useGridRefs.ts b/packages/x-data-grid/src/hooks/core/useGridRefs.ts
index 815c7f56e3281..98e266fda316d 100644
--- a/packages/x-data-grid/src/hooks/core/useGridRefs.ts
+++ b/packages/x-data-grid/src/hooks/core/useGridRefs.ts
@@ -5,7 +5,7 @@ export const useGridRefs = (
apiRef: React.MutableRefObject,
) => {
const rootElementRef = React.useRef(null);
- const mainElementRef = React.useRef(null);
+ const mainElementRef = React.useRef(null);
const virtualScrollerRef = React.useRef(null);
const virtualScrollbarVerticalRef = React.useRef(null);
const virtualScrollbarHorizontalRef = React.useRef(null);
diff --git a/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts b/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx
similarity index 70%
rename from packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts
rename to packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx
index f3f9f3998423a..5fba040eab27a 100644
--- a/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts
+++ b/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx
@@ -1,14 +1,12 @@
+import * as React from 'react';
import { useGridSelector } from '../../utils';
import { useGridApiContext } from '../../utils/useGridApiContext';
import { useGridRootProps } from '../../utils/useGridRootProps';
import { gridExpandedRowCountSelector } from '../filter';
import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
-import { GridSlotsComponent } from '../../../models/gridSlotsComponent';
-
-export type GridOverlayType =
- | keyof Pick
- | null;
+import { GridOverlayWrapper } from '../../../components/base/GridOverlays';
+import type { GridOverlayType } from '../../../components/base/GridOverlays';
/**
* Uses the grid state to determine which overlay to display.
@@ -43,5 +41,20 @@ export const useGridOverlays = () => {
rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
}
- return { overlayType, loadingOverlayVariant };
+ const overlaysProps = { overlayType, loadingOverlayVariant };
+
+ const getOverlay = () => {
+ if (!overlayType) {
+ return null;
+ }
+ const Overlay = rootProps.slots?.[overlayType];
+ const overlayProps = rootProps.slotProps?.[overlayType];
+ return (
+
+
+
+ );
+ };
+
+ return { getOverlay, overlaysProps };
};
diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
index 7fc8dd13d2ccf..2b67af5958ab7 100644
--- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
+++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
@@ -450,12 +450,8 @@ export const useGridRowSelection = (
/*
* EVENTS
*/
- const isFirstRender = React.useRef(true);
const removeOutdatedSelection = React.useCallback(
(sortModelUpdated = false) => {
- if (isFirstRender.current) {
- return;
- }
const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
const rowsLookup = gridRowsLookupSelector(apiRef);
const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
@@ -786,10 +782,4 @@ export const useGridRowSelection = (
React.useEffect(() => {
runIfRowSelectionIsEnabled(removeOutdatedSelection);
}, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
-
- React.useEffect(() => {
- if (isFirstRender.current) {
- isFirstRender.current = false;
- }
- }, []);
};
diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index ccd1707d75e6d..679b05f8bbbbb 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -6,8 +6,8 @@ import {
} from '@mui/utils';
import useLazyRef from '@mui/utils/useLazyRef';
import useTimeout from '@mui/utils/useTimeout';
-import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
import { useRtl } from '@mui/system/RtlProvider';
+import reactMajor from '@mui/x-internals/reactMajor';
import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -136,7 +136,57 @@ export const useGridVirtualScroller = () => {
const columnsTotalWidth = dimensions.columnsTotalWidth;
const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
- useResizeObserver(mainRef, () => apiRef.current.resize());
+ const mainRefCallback = React.useCallback(
+ (node: HTMLDivElement | null) => {
+ mainRef.current = node;
+
+ if (!node) {
+ return undefined;
+ }
+
+ const initialRect = node.getBoundingClientRect();
+ let lastSize = {
+ width: initialRect.width,
+ height: initialRect.height,
+ };
+
+ apiRef.current.publishEvent('resize', lastSize);
+
+ if (typeof ResizeObserver === 'undefined') {
+ return undefined;
+ }
+
+ const observer = new ResizeObserver((entries) => {
+ const entry = entries[0];
+ if (!entry) {
+ return;
+ }
+
+ const newSize = {
+ width: entry.contentRect.width,
+ height: entry.contentRect.height,
+ };
+
+ if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
+ return;
+ }
+
+ apiRef.current.publishEvent('resize', newSize);
+ lastSize = newSize;
+ });
+
+ observer.observe(node);
+
+ if (reactMajor >= 19) {
+ return () => {
+ mainRef.current = null;
+ observer.disconnect();
+ };
+ }
+ return undefined;
+ },
+ [apiRef, mainRef],
+ );
/*
* Scroll context logic
@@ -550,11 +600,6 @@ export const useGridVirtualScroller = () => {
apiRef.current.publishEvent('virtualScrollerContentSizeChange');
}, [apiRef, contentSize]);
- useEnhancedEffect(() => {
- // FIXME: Is this really necessary?
- apiRef.current.resize();
- }, [apiRef, rowsMeta.currentPageTotalHeight]);
-
useEnhancedEffect(() => {
// TODO a scroll reset should not be necessary
if (enabledForColumns) {
@@ -597,7 +642,7 @@ export const useGridVirtualScroller = () => {
setPanels,
getRows,
getContainerProps: () => ({
- ref: mainRef,
+ ref: mainRefCallback,
}),
getScrollerProps: () => ({
ref: scrollerRef,
diff --git a/packages/x-data-grid/src/locales/arSD.ts b/packages/x-data-grid/src/locales/arSD.ts
index f3feffb41c752..6bf6384234824 100644
--- a/packages/x-data-grid/src/locales/arSD.ts
+++ b/packages/x-data-grid/src/locales/arSD.ts
@@ -36,7 +36,6 @@ const arSDGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/beBY.ts b/packages/x-data-grid/src/locales/beBY.ts
index 0e0154b1b8566..e08dcc017c49c 100644
--- a/packages/x-data-grid/src/locales/beBY.ts
+++ b/packages/x-data-grid/src/locales/beBY.ts
@@ -59,7 +59,6 @@ const beBYGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/bgBG.ts b/packages/x-data-grid/src/locales/bgBG.ts
index 90a521efee20c..06eadc68a47bb 100644
--- a/packages/x-data-grid/src/locales/bgBG.ts
+++ b/packages/x-data-grid/src/locales/bgBG.ts
@@ -35,7 +35,6 @@ const bgBGGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/csCZ.ts b/packages/x-data-grid/src/locales/csCZ.ts
index f6112b47e9717..43ed7268aaf42 100644
--- a/packages/x-data-grid/src/locales/csCZ.ts
+++ b/packages/x-data-grid/src/locales/csCZ.ts
@@ -43,7 +43,6 @@ const csCZGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/daDK.ts b/packages/x-data-grid/src/locales/daDK.ts
index 001669e2c8da1..6e05df468d412 100644
--- a/packages/x-data-grid/src/locales/daDK.ts
+++ b/packages/x-data-grid/src/locales/daDK.ts
@@ -36,7 +36,6 @@ const daDKGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/deDE.ts b/packages/x-data-grid/src/locales/deDE.ts
index 9e1b1cf3be959..64e680eb5428b 100644
--- a/packages/x-data-grid/src/locales/deDE.ts
+++ b/packages/x-data-grid/src/locales/deDE.ts
@@ -36,7 +36,6 @@ const deDEGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/elGR.ts b/packages/x-data-grid/src/locales/elGR.ts
index 6e3c8d0f02d94..db548b4bc7ad1 100644
--- a/packages/x-data-grid/src/locales/elGR.ts
+++ b/packages/x-data-grid/src/locales/elGR.ts
@@ -36,7 +36,6 @@ const elGRGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/esES.ts b/packages/x-data-grid/src/locales/esES.ts
index f4cecbda13d3e..24b78720d0cec 100644
--- a/packages/x-data-grid/src/locales/esES.ts
+++ b/packages/x-data-grid/src/locales/esES.ts
@@ -36,7 +36,6 @@ const esESGrid: Partial = {
toolbarPromptControlWithRecordingPlaceholder: 'Escriba o grabe un prompt…',
toolbarPromptControlRecordingPlaceholder: 'Esperando por un prompt…',
toolbarPromptControlLabel: 'Introduzca un prompt',
- toolbarPromptControlDeleteIconLabel: 'Limpiar',
toolbarPromptControlRecordButtonDefaultLabel: 'Grabar',
toolbarPromptControlRecordButtonActiveLabel: 'Parar de grabar',
toolbarPromptControlSendActionLabel: 'Enviar',
diff --git a/packages/x-data-grid/src/locales/faIR.ts b/packages/x-data-grid/src/locales/faIR.ts
index d653346b0f035..05256edba0f1e 100644
--- a/packages/x-data-grid/src/locales/faIR.ts
+++ b/packages/x-data-grid/src/locales/faIR.ts
@@ -36,7 +36,6 @@ const faIRGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/fiFI.ts b/packages/x-data-grid/src/locales/fiFI.ts
index 0abd2ed8a27e9..4bcd709021b26 100644
--- a/packages/x-data-grid/src/locales/fiFI.ts
+++ b/packages/x-data-grid/src/locales/fiFI.ts
@@ -36,7 +36,6 @@ const fiFIGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/frFR.ts b/packages/x-data-grid/src/locales/frFR.ts
index 865b161b884e9..be535568d8eec 100644
--- a/packages/x-data-grid/src/locales/frFR.ts
+++ b/packages/x-data-grid/src/locales/frFR.ts
@@ -36,7 +36,6 @@ const frFRGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/heIL.ts b/packages/x-data-grid/src/locales/heIL.ts
index 8a6806ba7d1cf..9385edd8fd399 100644
--- a/packages/x-data-grid/src/locales/heIL.ts
+++ b/packages/x-data-grid/src/locales/heIL.ts
@@ -36,7 +36,6 @@ const heILGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/hrHR.ts b/packages/x-data-grid/src/locales/hrHR.ts
index edace0c4ba789..6c1028ad172a4 100644
--- a/packages/x-data-grid/src/locales/hrHR.ts
+++ b/packages/x-data-grid/src/locales/hrHR.ts
@@ -43,7 +43,6 @@ const hrHRGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/huHU.ts b/packages/x-data-grid/src/locales/huHU.ts
index 89ebf8fab800d..f7fbf11010570 100644
--- a/packages/x-data-grid/src/locales/huHU.ts
+++ b/packages/x-data-grid/src/locales/huHU.ts
@@ -35,7 +35,6 @@ const huHUGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/isIS.ts b/packages/x-data-grid/src/locales/isIS.ts
index 83c81b2b2e8a9..409e8ec548c59 100644
--- a/packages/x-data-grid/src/locales/isIS.ts
+++ b/packages/x-data-grid/src/locales/isIS.ts
@@ -36,7 +36,6 @@ const isISGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/itIT.ts b/packages/x-data-grid/src/locales/itIT.ts
index 259bc49e693e5..967f96f2e4340 100644
--- a/packages/x-data-grid/src/locales/itIT.ts
+++ b/packages/x-data-grid/src/locales/itIT.ts
@@ -36,7 +36,6 @@ const itITGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/jaJP.ts b/packages/x-data-grid/src/locales/jaJP.ts
index 2a53da98b87fe..82774b9a22716 100644
--- a/packages/x-data-grid/src/locales/jaJP.ts
+++ b/packages/x-data-grid/src/locales/jaJP.ts
@@ -35,7 +35,6 @@ const jaJPGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/koKR.ts b/packages/x-data-grid/src/locales/koKR.ts
index 66a4d2d7014fc..e717071bf0e1a 100644
--- a/packages/x-data-grid/src/locales/koKR.ts
+++ b/packages/x-data-grid/src/locales/koKR.ts
@@ -35,7 +35,6 @@ const koKRGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/nbNO.ts b/packages/x-data-grid/src/locales/nbNO.ts
index 87cc4d26f459c..87baf3f7a9287 100644
--- a/packages/x-data-grid/src/locales/nbNO.ts
+++ b/packages/x-data-grid/src/locales/nbNO.ts
@@ -36,7 +36,6 @@ const nbNOGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/nlNL.ts b/packages/x-data-grid/src/locales/nlNL.ts
index 981f449015951..f710c2b2f9975 100644
--- a/packages/x-data-grid/src/locales/nlNL.ts
+++ b/packages/x-data-grid/src/locales/nlNL.ts
@@ -36,7 +36,6 @@ const nlNLGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/nnNO.ts b/packages/x-data-grid/src/locales/nnNO.ts
index 987e6b5617781..73184bcb1e773 100644
--- a/packages/x-data-grid/src/locales/nnNO.ts
+++ b/packages/x-data-grid/src/locales/nnNO.ts
@@ -36,7 +36,6 @@ const nnNOGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/plPL.ts b/packages/x-data-grid/src/locales/plPL.ts
index b9e6467e20179..cc5de7359d39a 100644
--- a/packages/x-data-grid/src/locales/plPL.ts
+++ b/packages/x-data-grid/src/locales/plPL.ts
@@ -35,7 +35,6 @@ const plPLGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/ptBR.ts b/packages/x-data-grid/src/locales/ptBR.ts
index d514af7e04606..7d8e46afeb343 100644
--- a/packages/x-data-grid/src/locales/ptBR.ts
+++ b/packages/x-data-grid/src/locales/ptBR.ts
@@ -36,7 +36,6 @@ const ptBRGrid: Partial = {
toolbarPromptControlWithRecordingPlaceholder: 'Digite ou grave um prompt…',
toolbarPromptControlRecordingPlaceholder: 'Ouvindo o prompt…',
toolbarPromptControlLabel: 'Entrada de prompt',
- toolbarPromptControlDeleteIconLabel: 'Limpar',
toolbarPromptControlRecordButtonDefaultLabel: 'Gravar',
toolbarPromptControlRecordButtonActiveLabel: 'Parar gravação',
toolbarPromptControlSendActionLabel: 'Enviar',
diff --git a/packages/x-data-grid/src/locales/ptPT.ts b/packages/x-data-grid/src/locales/ptPT.ts
index af84bf334302c..25607c37c96cb 100644
--- a/packages/x-data-grid/src/locales/ptPT.ts
+++ b/packages/x-data-grid/src/locales/ptPT.ts
@@ -36,7 +36,6 @@ const ptPTGrid: Partial = {
toolbarPromptControlWithRecordingPlaceholder: 'Digite ou grave um prompt…',
toolbarPromptControlRecordingPlaceholder: 'Ouvindo o prompt…',
toolbarPromptControlLabel: 'Entrada de prompt',
- toolbarPromptControlDeleteIconLabel: 'Limpar',
toolbarPromptControlRecordButtonDefaultLabel: 'Gravar',
toolbarPromptControlRecordButtonActiveLabel: 'Parar gravação',
toolbarPromptControlSendActionLabel: 'Enviar',
diff --git a/packages/x-data-grid/src/locales/roRO.ts b/packages/x-data-grid/src/locales/roRO.ts
index 96201ac0c8f86..778b94e1b1725 100644
--- a/packages/x-data-grid/src/locales/roRO.ts
+++ b/packages/x-data-grid/src/locales/roRO.ts
@@ -36,7 +36,6 @@ const roROGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/ruRU.ts b/packages/x-data-grid/src/locales/ruRU.ts
index 26e2df5b2b3b5..e735fb745ec07 100644
--- a/packages/x-data-grid/src/locales/ruRU.ts
+++ b/packages/x-data-grid/src/locales/ruRU.ts
@@ -60,7 +60,6 @@ const ruRUGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/skSK.ts b/packages/x-data-grid/src/locales/skSK.ts
index adac6a559a22b..d49222bf9ec4f 100644
--- a/packages/x-data-grid/src/locales/skSK.ts
+++ b/packages/x-data-grid/src/locales/skSK.ts
@@ -43,7 +43,6 @@ const skSKGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/svSE.ts b/packages/x-data-grid/src/locales/svSE.ts
index 3cb7837c85155..80e3381c27f6a 100644
--- a/packages/x-data-grid/src/locales/svSE.ts
+++ b/packages/x-data-grid/src/locales/svSE.ts
@@ -36,7 +36,6 @@ const svSEGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/trTR.ts b/packages/x-data-grid/src/locales/trTR.ts
index cd7477d8f6d64..e3064ebdcc86d 100644
--- a/packages/x-data-grid/src/locales/trTR.ts
+++ b/packages/x-data-grid/src/locales/trTR.ts
@@ -35,7 +35,6 @@ const trTRGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/ukUA.ts b/packages/x-data-grid/src/locales/ukUA.ts
index fe8e5ea7d42ba..f52cd9579af9a 100644
--- a/packages/x-data-grid/src/locales/ukUA.ts
+++ b/packages/x-data-grid/src/locales/ukUA.ts
@@ -60,7 +60,6 @@ const ukUAGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/urPK.ts b/packages/x-data-grid/src/locales/urPK.ts
index 64a982e1644c5..c60e2ff35aa68 100644
--- a/packages/x-data-grid/src/locales/urPK.ts
+++ b/packages/x-data-grid/src/locales/urPK.ts
@@ -36,7 +36,6 @@ const urPKGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/viVN.ts b/packages/x-data-grid/src/locales/viVN.ts
index 17e744e5c2218..478d77e19cd42 100644
--- a/packages/x-data-grid/src/locales/viVN.ts
+++ b/packages/x-data-grid/src/locales/viVN.ts
@@ -36,7 +36,6 @@ const viVNGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/zhCN.ts b/packages/x-data-grid/src/locales/zhCN.ts
index d5d23dc46a538..cdba5352b3137 100644
--- a/packages/x-data-grid/src/locales/zhCN.ts
+++ b/packages/x-data-grid/src/locales/zhCN.ts
@@ -31,16 +31,15 @@ const zhCNGrid: Partial = {
toolbarQuickFilterDeleteIconLabel: '清除',
// Prompt toolbar field
- // toolbarPromptControlPlaceholder: 'Type a prompt…',
- // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
- // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
- // toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
- // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
- // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
- // toolbarPromptControlSendActionLabel: 'Send',
- // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
- // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
+ toolbarPromptControlPlaceholder: '输入提示词',
+ toolbarPromptControlWithRecordingPlaceholder: '输入提示词或点击录音',
+ toolbarPromptControlRecordingPlaceholder: '正在录音…',
+ toolbarPromptControlLabel: '提示词输入',
+ toolbarPromptControlRecordButtonDefaultLabel: '录音',
+ toolbarPromptControlRecordButtonActiveLabel: '停止录音',
+ toolbarPromptControlSendActionLabel: '发送',
+ toolbarPromptControlSendActionAriaLabel: '发送提示词',
+ toolbarPromptControlErrorMessage: '处理请求时出现错误。请使用其他提示词再试。',
// Export selector toolbar button text
toolbarExport: '导出',
@@ -54,7 +53,7 @@ const zhCNGrid: Partial = {
columnsManagementNoColumns: '没有列',
columnsManagementShowHideAllText: '显示/隐藏所有',
columnsManagementReset: '重置',
- // columnsManagementDeleteIconLabel: 'Clear',
+ columnsManagementDeleteIconLabel: '清除',
// Filter panel text
filterPanelAddFilter: '添加筛选器',
diff --git a/packages/x-data-grid/src/locales/zhHK.ts b/packages/x-data-grid/src/locales/zhHK.ts
index 8b26659f82eec..808184786e511 100644
--- a/packages/x-data-grid/src/locales/zhHK.ts
+++ b/packages/x-data-grid/src/locales/zhHK.ts
@@ -36,7 +36,6 @@ const zhHKGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/locales/zhTW.ts b/packages/x-data-grid/src/locales/zhTW.ts
index c0378c558eb47..2356a46c0f415 100644
--- a/packages/x-data-grid/src/locales/zhTW.ts
+++ b/packages/x-data-grid/src/locales/zhTW.ts
@@ -35,7 +35,6 @@ const zhTWGrid: Partial = {
// toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
// toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
// toolbarPromptControlLabel: 'Prompt input',
- // toolbarPromptControlDeleteIconLabel: 'Clear',
// toolbarPromptControlRecordButtonDefaultLabel: 'Record',
// toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
// toolbarPromptControlSendActionLabel: 'Send',
diff --git a/packages/x-data-grid/src/models/api/gridCoreApi.ts b/packages/x-data-grid/src/models/api/gridCoreApi.ts
index 1dfaf2834b597..c5d7be49b1fd3 100644
--- a/packages/x-data-grid/src/models/api/gridCoreApi.ts
+++ b/packages/x-data-grid/src/models/api/gridCoreApi.ts
@@ -67,7 +67,7 @@ export interface GridCorePrivateApi<
/**
* The React ref of the grid main container div element.
*/
- mainElementRef: React.RefObject;
+ mainElementRef: React.MutableRefObject;
/**
* The React ref of the grid's virtual scroller container element.
*/
diff --git a/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
index 8d68bb07669e7..17a1ea32356d0 100644
--- a/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
+++ b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
@@ -46,7 +46,6 @@ export interface GridLocaleText {
toolbarPromptControlWithRecordingPlaceholder: string;
toolbarPromptControlRecordingPlaceholder: string;
toolbarPromptControlLabel: string;
- toolbarPromptControlDeleteIconLabel: string;
toolbarPromptControlRecordButtonDefaultLabel: string;
toolbarPromptControlRecordButtonActiveLabel: string;
toolbarPromptControlSendActionLabel: string;
diff --git a/packages/x-date-pickers-pro/README.md b/packages/x-date-pickers-pro/README.md
index 7aa6eabaaba4b..7530c5793036f 100644
--- a/packages/x-date-pickers-pro/README.md
+++ b/packages/x-date-pickers-pro/README.md
@@ -20,13 +20,16 @@ The pickers currently support the following date libraries:
- [Moment.js](https://momentjs.com/)
```bash
-// date-fns
+# date-fns
npm install date-fns
-// or dayjs
+
+# or dayjs
npm install dayjs
-// or luxon
+
+# or luxon
npm install luxon
-// or moment
+
+# or moment
npm install moment
```
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx
index b098d57cfb0f3..091038268e6c9 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx
@@ -6,7 +6,6 @@ import {
useDefaultDates,
useUtils,
applyDefaultDate,
- BaseDateValidationProps,
BasePickerInputProps,
PickerViewRendererLookup,
PickerRangeValue,
@@ -23,6 +22,7 @@ import {
ExportedDateRangePickerToolbarProps,
} from './DateRangePickerToolbar';
import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
+import { ValidateDateRangePropsToDefault } from '../validation/validateDateRange';
export interface BaseDateRangePickerSlots extends DateRangeCalendarSlots {
/**
@@ -63,7 +63,7 @@ export interface BaseDateRangePickerProps
}
type UseDateRangePickerDefaultizedProps =
- LocalizedComponent>;
+ LocalizedComponent>;
export function useDateRangePickerDefaultizedProps(
props: Props,
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx
index d3f2d3127fd93..11f4aa361b468 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx
@@ -6,7 +6,6 @@ import {
useDefaultDates,
useUtils,
applyDefaultDate,
- BaseDateValidationProps,
BasePickerInputProps,
PickerViewRendererLookup,
BaseClockProps,
@@ -15,7 +14,6 @@ import {
TimeViewWithMeridiem,
resolveTimeViewsResponse,
UseViewsOptions,
- DateTimeValidationProps,
DateOrTimeViewWithMeridiem,
PickerRangeValue,
} from '@mui/x-date-pickers/internals';
@@ -43,6 +41,10 @@ import {
DateTimeRangePickerTabsProps,
ExportedDateTimeRangePickerTabsProps,
} from './DateTimeRangePickerTabs';
+import {
+ ExportedValidateDateTimeRangeProps,
+ ValidateDateTimeRangePropsToDefault,
+} from '../validation/validateDateTimeRange';
export interface BaseDateTimeRangePickerSlots
extends DateRangeCalendarSlots,
@@ -94,12 +96,11 @@ export interface BaseDateTimeRangePickerProps
'orientation' | 'views' | 'openTo'
>,
ExportedDateRangeCalendarProps,
- BaseDateValidationProps,
+ ExportedValidateDateTimeRangeProps,
DesktopOnlyTimePickerProps,
Partial<
Pick, 'openTo' | 'views'>
- >,
- DateTimeValidationProps {
+ > {
/**
* Overridable component slots.
* @default {}
@@ -120,7 +121,7 @@ export interface BaseDateTimeRangePickerProps
type UseDateTimeRangePickerDefaultizedProps =
LocalizedComponent<
- Omit, 'views'>
+ Omit, 'views'>
> & {
shouldRenderTimeInASingleColumn: boolean;
views: readonly DateTimeRangePickerView[];
diff --git a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts
index 44effa217b603..ac262f477cc22 100644
--- a/packages/x-date-pickers-pro/src/validation/validateDateRange.ts
+++ b/packages/x-date-pickers-pro/src/validation/validateDateRange.ts
@@ -1,3 +1,4 @@
+import type { MakeRequired } from '@mui/x-internals/types';
import { validateDate, Validator } from '@mui/x-date-pickers/validation';
import { BaseDateValidationProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
import { isRangeValid } from '../internals/utils/date-utils';
@@ -12,9 +13,16 @@ export interface ExportedValidateDateRangeProps
extends DayRangeValidationProps,
BaseDateValidationProps {}
+/**
+ * Validation props as received by the validateDateRange method.
+ */
export interface ValidateDateRangeProps
- extends DayRangeValidationProps,
- Required {}
+ extends MakeRequired {}
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateDateRange method.
+ */
+export type ValidateDateRangePropsToDefault = keyof BaseDateValidationProps;
export const validateDateRange: Validator<
PickerRangeValue,
diff --git a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts
index 743360be7d7d7..3296957a4412e 100644
--- a/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts
+++ b/packages/x-date-pickers-pro/src/validation/validateDateTimeRange.ts
@@ -3,8 +3,16 @@ import { validateDateTime, Validator } from '@mui/x-date-pickers/validation';
import { isRangeValid } from '../internals/utils/date-utils';
import { DateTimeRangeValidationError } from '../models';
import { rangeValueManager } from '../internals/utils/valueManagers';
-import { ExportedValidateDateRangeProps, ValidateDateRangeProps } from './validateDateRange';
-import { ExportedValidateTimeRangeProps, ValidateTimeRangeProps } from './validateTimeRange';
+import {
+ ExportedValidateDateRangeProps,
+ ValidateDateRangeProps,
+ ValidateDateRangePropsToDefault,
+} from './validateDateRange';
+import {
+ ExportedValidateTimeRangeProps,
+ ValidateTimeRangeProps,
+ ValidateTimeRangePropsToDefault,
+} from './validateTimeRange';
/**
* Validation props used by the Date Time Range Picker and Date Time Range Field.
@@ -14,10 +22,17 @@ export interface ExportedValidateDateTimeRangeProps
ExportedValidateTimeRangeProps,
DateTimeValidationProps {}
+/**
+ * Validation props as received by the validateDateTimeRange method.
+ */
export interface ValidateDateTimeRangeProps
extends ValidateDateRangeProps,
ValidateTimeRangeProps {}
+export type ValidateDateTimeRangePropsToDefault =
+ | ValidateDateRangePropsToDefault
+ | ValidateTimeRangePropsToDefault;
+
export const validateDateTimeRange: Validator<
PickerRangeValue,
DateTimeRangeValidationError,
diff --git a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts
index 2f5cd591cd86a..82f44de4a4190 100644
--- a/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts
+++ b/packages/x-date-pickers-pro/src/validation/validateTimeRange.ts
@@ -1,3 +1,4 @@
+import type { MakeRequired } from '@mui/x-internals/types';
import { validateTime, Validator } from '@mui/x-date-pickers/validation';
import {
TimeValidationProps,
@@ -15,9 +16,16 @@ export interface ExportedValidateTimeRangeProps
extends BaseTimeValidationProps,
TimeValidationProps {}
+/**
+ * Validation props as received by the validateTimeRange method.
+ */
export interface ValidateTimeRangeProps
- extends Required,
- TimeValidationProps {}
+ extends MakeRequired {}
+
+/**
+ * Name of the props that should be defaulted before being passed to the validateTimeRange method.
+ */
+export type ValidateTimeRangePropsToDefault = keyof BaseTimeValidationProps;
export const validateTimeRange: Validator<
PickerRangeValue,
diff --git a/packages/x-date-pickers/README.md b/packages/x-date-pickers/README.md
index c070227afa4af..db8b1180d889e 100644
--- a/packages/x-date-pickers/README.md
+++ b/packages/x-date-pickers/README.md
@@ -20,13 +20,16 @@ The pickers currently support the following date libraries:
- [Moment.js](https://momentjs.com/)
```bash
-// date-fns
+# date-fns
npm install date-fns
-// or dayjs
+
+# or dayjs
npm install dayjs
-// or luxon
+
+# or luxon
npm install luxon
-// or moment
+
+# or moment
npm install moment
```
diff --git a/packages/x-date-pickers/src/DatePicker/shared.tsx b/packages/x-date-pickers/src/DatePicker/shared.tsx
index 769d39e4e03c6..6c2e372740f8e 100644
--- a/packages/x-date-pickers/src/DatePicker/shared.tsx
+++ b/packages/x-date-pickers/src/DatePicker/shared.tsx
@@ -11,7 +11,6 @@ import { applyDefaultViewProps } from '../internals/utils/views';
import { DateValidationError, DateView } from '../models';
import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
import { applyDefaultDate } from '../internals/utils/date-utils';
-import { BaseDateValidationProps } from '../internals/models/validation';
import { LocalizedComponent, PickersInputLocaleText } from '../locales/utils/pickersLocaleTextApi';
import {
DatePickerToolbar,
@@ -21,6 +20,7 @@ import {
import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
import { DateViewRendererProps } from '../dateViewRenderers';
import { PickerValue } from '../internals/models';
+import { ValidateDatePropsToDefault } from '../validation/validateDate';
export interface BaseDatePickerSlots extends DateCalendarSlots {
/**
@@ -61,7 +61,7 @@ export interface BaseDatePickerProps
}
type UseDatePickerDefaultizedProps = LocalizedComponent<
- DefaultizedProps
+ DefaultizedProps