Advanced filtering customization recipes.
+## Persisting filters in local storage + +You can persist the filters in the local storage to keep the filters applied after the page is reloaded. + +In the demo below, the [`React.useSyncExternalStore` hook](https://react.dev/reference/react/useSyncExternalStore) is used to synchronize the filters with the local storage. + +{{"demo": "FilteringLocalStorage.js", "bg": "inline", "defaultCodeOpen": false}} + ## Quick filter outside of the grid The [Quick Filter](/x/react-data-grid/filtering/quick-filter/) component is typically used in the Data Grid's Toolbar component slot. diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js index 59520ac9e4153..294ebacdbea2c 100644 --- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js +++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js @@ -62,11 +62,20 @@ function CustomHeaderFilter(props) { return (These react date picker and time picker components let users select date or time values.
- -{{"component": "@mui/docs/ComponentLinkHeader"}} - -## Overview - -{{"demo": "CommonlyUsedComponents.js"}} - -## Community or Pro plan? - -The Date and Time Pickers are available in two packages: - -- `@mui/x-date-pickers`, which is MIT licensed (free forever) and contains all the components to edit a date and/or a time. -- `@mui/x-date-pickers-pro`, which is [commercially licensed](/x/introduction/licensing/#pro-plan) and contains additional components to edit date and/or time ranges. - -## Date library - -The Date and Time Pickers are focused on UI/UX and, like most other picker components available, require a third-party library to format, parse, and mutate dates. - -MUI's components let you choose which library you prefer for this purpose. -This gives you the flexibility to implement any date library you may already be using in your application, without adding an extra one to your bundle. +{{"component": "modules/components/overview/XLogo.tsx"}} -To achieve this, both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` export a set of **adapters** that expose the date manipulation libraries under a unified API. - -### Available libraries - -The Date and Time Pickers currently support the following date libraries: - -- [Day.js](https://day.js.org/) -- [date-fns](https://date-fns.org/) -- [Luxon](https://moment.github.io/luxon/#/) -- [Moment.js](https://momentjs.com/) - -:::info -If you are using a non-Gregorian calendar (such as Jalali or Hijri), please refer to the [Support for other calendar systems](/x/react-date-pickers/calendar-systems/) page. -::: - -### Recommended library - -If you are already using one of the libraries listed above in your application, then you can keep using it with the Date and Time Pickers as well. -This will avoid bundling two libraries. - -If you don't have your own requirements or don't manipulate dates outside of MUIĀ X components, then the recommendation is to use `dayjs` because it has the smallest impact on your application's bundle size. - -Here is the weight added to your gzipped bundle size by each of these libraries when used inside the Date and Time Pickers: - -| Library | Gzipped size | -| :---------------- | -----------: | -| `dayjs@1.11.5` | 6.77 kB | -| `date-fns@2.29.3` | 19.39 kB | -| `luxon@3.0.4` | 23.26 kB | -| `moment@2.29.4` | 20.78 kB | - -:::info -The results above were obtained in October 2022 with the latest version of each library. -The bundling of the JavaScript modules was done by a Create React App, and no locale was loaded for any of the libraries. +# MUIĀ X Date and Time Pickers -The results may vary in your application depending on the version of each library, the locale, and the bundler used. -::: +A collection of React UI components for selecting dates, times, and ranges.
-## What's next? +{{"component": "modules/components/overview/MainDemo.tsx"}} -Continue to the [next page](/x/react-date-pickers/getting-started/) and learn how to prepare your application for the Date and Time Pickers. +{{"component": "modules/components/overview/FeatureHighlight.tsx"}} +{{"component": "modules/components/overview/CommunityOrPro.tsx"}} +{{"component": "modules/components/overview/Keyboard.tsx"}} +{{"component": "modules/components/overview/Internationalization.tsx"}} +{{"component": "modules/components/overview/DateLibraries.tsx"}} diff --git a/docs/data/date-pickers/timezone/timezone.md b/docs/data/date-pickers/timezone/timezone.md index a095bfc9a124b..5e1eb1fe02f7e 100644 --- a/docs/data/date-pickers/timezone/timezone.md +++ b/docs/data/date-pickers/timezone/timezone.md @@ -11,7 +11,7 @@ packageName: '@mui/x-date-pickers'Date and Time Pickers support UTC and timezones.
:::warning -UTC and timezone support is an ongoing topic. +UTC and timezones support is an ongoing effort. Only `AdapterDayjs`, `AdapterLuxon` and `AdapterMoment` are currently compatible with UTC dates and timezones. ::: @@ -184,7 +184,7 @@ const date2 = DateTime.fromISO('2022-04-17T15:30', { zone: 'UTC' }); const date3 = DateTime.fromSQL('2022-04-17 15:30:00', { zone: 'UTC' }); ``` -Please check out the documentation of the [UTC and timezone on Luxon](https://moment.github.io/luxon/#/zones) for more details. +Please check out the documentation of the [UTC and timezones on Luxon](https://moment.github.io/luxon/#/zones) for more details. ::: You can then pass your UTC date to your picker: @@ -234,7 +234,7 @@ const date1 = DateTime.fromISO('2022-04-17T15:30', { zone: 'America/New_York' }) const date2 = DateTime.fromSQL('2022-04-17 15:30:00', { zone: 'America/New_York' }); ``` -Please check out the documentation of the [UTC and timezone on Luxon](https://moment.github.io/luxon/#/zones) for more details. +Please check out the documentation of the [UTC and timezones on Luxon](https://moment.github.io/luxon/#/zones) for more details. ::: You can then pass your date in the wanted timezone to your picker: @@ -262,7 +262,7 @@ function App() { {{"demo": "LuxonTimezone.js", "defaultCodeOpen": false}} :::info -Please check out the documentation of the [UTC and timezone on Luxon](https://moment.github.io/luxon/#/zones) for more details on how to manipulate the timezones. +Please check out the documentation of the [UTC and timezones on Luxon](https://moment.github.io/luxon/#/zones) for more details on how to manipulate the timezones. ::: ## Usage with Moment diff --git a/docs/data/date-pickers/validation/validation.md b/docs/data/date-pickers/validation/validation.md index 2f9bb23631e63..f1cead013c477 100644 --- a/docs/data/date-pickers/validation/validation.md +++ b/docs/data/date-pickers/validation/validation.md @@ -19,7 +19,7 @@ But the same props are available on: - all the other variants of this picker; - For exampleāthe validation props showcased with `DatePicker` are also available on: + For example, the validation props showcased with `DatePicker` are also available on: - `DesktopDatePicker` - `MobileDatePicker` @@ -27,21 +27,21 @@ But the same props are available on: - the field used by this picker; - For exampleāthe validation props showcased with `DatePicker` are also available on `DateField`. + For example, the validation props showcased with `DatePicker` are also available on `DateField`. - the view components; - For exampleāthe validation props showcased with `TimePicker` are also available on `TimeClock` and `DigitalClock`. + For example, the validation props showcased with `TimePicker` are also available on `TimeClock` and `DigitalClock`. ::: ## Invalid values feedback -On the fieldāit enables its error state. +On the field, it enables its error state. {{"demo": "ValidationBehaviorInput.js", "defaultCodeOpen": false}} -On the calendar and clock viewsāthe invalid values are displayed as disabled to prevent their selection. +On the calendar and clock views, the invalid values are displayed as disabled to prevent their selection. {{"demo": "ValidationBehaviorView.js", "defaultCodeOpen": false}} @@ -52,20 +52,20 @@ All pickers support the past and future validation. The `disablePast` prop prevents the selection all values before today for date pickers and the selection of all values before the current time for time pickers. For date time pickers, it will combine both. -- On the `day` viewāall the days before today won't be selectable. -- On the `month` and `year` viewsāall the values ending before today won't be selectable. -- On the `hours` and `minutes` viewsāall the values ending before the current time won't be selectable. -- On the `seconds` viewāall the values before the current second won't be selectable. +- On the `day` view, all the days before today won't be selectable. +- On the `month` and `year` views, all the values ending before today won't be selectable. +- On the `hours` and `minutes` views, all the values ending before the current time won't be selectable. +- On the `seconds` view, all the values before the current second won't be selectable. {{"demo": "DateValidationDisablePast.js", "defaultCodeOpen": false}} The `disableFuture` prop prevents the selection all values after today for date pickers and the selection of all values after the current time for time pickers. For date time pickers, it will combine both. -- On the `day` viewāall the days after today won't be selectable. -- On the `month` and `year` viewsāall the values beginning after today won't be selectable. -- On the `hours` and `minutes` viewsāall the values beginning after the current time won't be selectable. -- On the `seconds` viewāall the values after the current second won't be selectable. +- On the `day` view, all the days after today won't be selectable. +- On the `month` and `year` views, all the values beginning after today won't be selectable. +- On the `hours` and `minutes` views, all the values beginning after the current time won't be selectable. +- On the `seconds` view, all the values after the current second won't be selectable. {{"demo": "DateValidationDisableFuture.js", "defaultCodeOpen": false}} @@ -82,8 +82,8 @@ All the props described below are available on all the components supporting dat The `minDate` prop prevents the selection of all values before `props.minDate`. -- On the `day` viewāall the days before the `minDate` won't be selectable. -- On the `month` and `year` viewsāall the values ending before the `minDate` won't be selectable. +- On the `day` view, all the days before the `minDate` won't be selectable. +- On the `month` and `year` views, all the values ending before the `minDate` won't be selectable. {{"demo": "DateValidationMinDate.js", "defaultCodeOpen": false}} @@ -93,8 +93,8 @@ The default value of `minDate` is `1900-01-01`. The `maxDate` prop prevents the selection of all values after `props.maxDate`. -- On the `day` viewāall the days after the `maxDate` won't be selectable. -- On the `month` and `year` viewsāall the values starting after the `maxDate` won't be selectable. +- On the `day` view, all the days after the `maxDate` won't be selectable. +- On the `month` and `year` views, all the values starting after the `maxDate` won't be selectable. {{"demo": "DateValidationMaxDate.js", "defaultCodeOpen": false}} @@ -106,13 +106,13 @@ The default value of `maxDate` is `2099-12-31`. The `shouldDisableDate` prop prevents the selection of all dates for which it returns `true`. -In the example belowāthe weekends are not selectable: +In the example below, the weekends are not selectable: {{"demo": "DateValidationShouldDisableDate.js", "defaultCodeOpen": false}} :::warning `shouldDisableDate` only prevents the selection of disabled dates on the `day` view. -For performance reasonsāwhen rendering the `month` viewāwe are not calling the callback for every day of each month to see which one should be disabled (same for the `year` view). +For performance reasons, when rendering the `month` view, we are not calling the callback for every day of each month to see which one should be disabled (same for the `year` view). If you know that all days of some months are disabled, you can provide the [`shouldDisableMonth`](#disable-specific-months) prop to disable them in the `month` view. Same with the [`shouldDisableYear`](#disable-specific-years) prop for the `year` view. @@ -124,9 +124,9 @@ Please note that `shouldDisableDate` will execute on every date rendered in the #### Disable specific dates in range components [](/x/introduction/licensing/#pro-plan) -For components supporting date range edition (`DateRangePicker`, `DateTimeRangePicker`)āthe `shouldDisableDate` prop receives a second argument to differentiate the start and the end date. +For components supporting date range edition (`DateRangePicker`, `DateTimeRangePicker`), the `shouldDisableDate` prop receives a second argument to differentiate the start and the end date. -In the example belowāthe start date cannot be in the weekend but the end date can. +In the example below, the start date cannot be in the weekend but the end date can. {{"demo": "DateRangeValidationShouldDisableDate.js", "defaultCodeOpen": false}} @@ -192,7 +192,7 @@ shouldDisableTime={(value, view) => } ``` -In the example belowāthe last quarter of each hour is not selectable. +In the example below, the last quarter of each hour is not selectable. {{"demo": "TimeValidationShouldDisableTime.js", "defaultCodeOpen": false}} @@ -234,7 +234,7 @@ For now, you cannot use `maxDateTime` and `maxTime` together. ## Show the error -To render the current errorāyou can subscribe to the `onError` callback which is called every time the error changes. +To render the current error, you can subscribe to the `onError` callback which is called every time the error changes. You can then use the `helperText` prop of the `TextField` to pass your error message to your input as shown below. Try to type a date that is inside the first quarter of 2022āthe error will go away. diff --git a/docs/data/introduction/licensing/licensing.md b/docs/data/introduction/licensing/licensing.md index 14142fdb118cc..d5aa641adefa1 100644 --- a/docs/data/introduction/licensing/licensing.md +++ b/docs/data/introduction/licensing/licensing.md @@ -106,21 +106,21 @@ You can also use it for the development of code not intended for production (for You don't need to contact us to use these components for the above cases. You will need to purchase a commercial license in order to remove the watermarks and console warnings. -## How many developer seats do I need? +## How many developer licenses do I need? -The number of seats purchased on your license must correspond to the number of concurrent developers contributing changes to the front-end code of the project that uses MUIĀ X Pro or Premium. +The number of licenses purchased must correspond to the number of concurrent developers contributing changes to the front-end code of the project that uses MUIĀ X Pro or Premium. - **Example 1.** Company 'A' is developing an application named 'AppA'. The app needs to render 10K rows of data in a table and allow users to group, filter, and sort. The dev team adds MUIĀ X Pro to the project to satisfy this requirement. Five front-end and ten back-end developers are working on 'AppA'. Only one developer is tasked with maintaining the Data Grid, but there are five total developers who work on the front-end. - Company 'A' must purchase five seats. + Company 'A' must purchase five licenses. - **Example 2.** A UI development team at Company 'B' creates its own UI library for internal development that includes MUIĀ X Pro components. The teams working on 'AppY' and 'AppZ' both adopt this new library. 'AppY' has five front-end developers, and 'AppZ' has three; additionally, there are two front-end developers on the company's UI development team. - Company 'B' must purchase ten seats. + Company 'B' must purchase ten licenses. This is [the relevant clause in the EULA.](https://mui.com/legal/mui-x-eula/#required-quantity-of-licenses) diff --git a/docs/data/introduction/roadmap/roadmap.md b/docs/data/introduction/roadmap/roadmap.md index 166c0c5ed07ed..7aa56833ef053 100644 --- a/docs/data/introduction/roadmap/roadmap.md +++ b/docs/data/introduction/roadmap/roadmap.md @@ -4,7 +4,7 @@ ## MUIĀ X roadmap -To learn more about our plans for MUIĀ X, visit the [public roadmap](https://github.com/mui/mui-x/projects/1). +To learn more about our plans for MUIĀ X, visit the [public roadmap](https://github.com/orgs/mui/projects/35). :::warning We operate in a dynamic environment,so things are subject to change. diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md index 2977168121811..3f65903d7dfbf 100644 --- a/docs/data/introduction/support/support.md +++ b/docs/data/introduction/support/support.md @@ -94,13 +94,12 @@ This includes issues introduced by external sources, like browser upgrades or ch ### Supported versions -- MUIĀ X v7: ā Stable major (Continuous support). -- MUIĀ X v6: ā ļø Long-term support (Guaranteed Support for security issues and regressions). -- MUIĀ X v5: š § No longer supported. -- MUIĀ X v4: š § No longer supported. -- MUIĀ X v3: š § Never existed. -- MUIĀ X v2: š § Never existed. -- MUIĀ X v1: š § Never existed. +| MUIĀ X version | Release | Supported | +| ------------: | :--------- | :------------------------------------------------------------------ | +| ^7.0.0 | 2024-03-23 | ā Stable major (Continuous support) | +| ^6.0.0 | 2023-03-03 | ā ļø Long-term support (Support for security issues and regressions). | +| ^5.0.0 | 2021-11-23 | ā | +| ^4.0.0 | 2021-09-28 | ā | ## Community diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 62ed986c8ca8c..dfa4c550422ee 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -1,4 +1,4 @@ -import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage'; +import type { MuiPage } from 'docs/src/MuiPage'; import dataGridComponentApi from './data-grid-component-api-pages'; import pickersComponentApi from './date-pickers-component-api-pages'; import chartsComponentApi from './charts-component-api-pages'; @@ -354,7 +354,7 @@ const pages: MuiPage[] = [ }, { pathname: '/x/react-date-pickers/timezone', - title: 'UTC and timezone', + title: 'UTC and timezones', }, { pathname: '/x/react-date-pickers/calendar-systems' }, ], @@ -510,6 +510,7 @@ 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' }, ], }, diff --git a/docs/data/tree-view-component-api-pages.ts b/docs/data/tree-view-component-api-pages.ts index 61b41b8740452..c46698f0ed3dd 100644 --- a/docs/data/tree-view-component-api-pages.ts +++ b/docs/data/tree-view-component-api-pages.ts @@ -1,4 +1,4 @@ -import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage'; +import type { MuiPage } from 'docs/src/MuiPage'; const apiPages: MuiPage[] = [ { diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js index 9f943fa5f5545..eedcc6b8fe7b3 100644 --- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js +++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.js @@ -35,10 +35,7 @@ const MUI_X_PRODUCTS = [ ]; const CustomTreeItem = styled(TreeItem)(({ theme }) => ({ - color: - theme.palette.mode === 'light' - ? theme.palette.grey[800] - : theme.palette.grey[200], + color: theme.palette.grey[200], [`& .${treeItemClasses.content}`]: { borderRadius: theme.spacing(0.5), padding: theme.spacing(0.5, 1), @@ -50,18 +47,23 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({ }, [`& .${treeItemClasses.iconContainer}`]: { borderRadius: '50%', - backgroundColor: - theme.palette.mode === 'light' - ? alpha(theme.palette.primary.main, 0.25) - : theme.palette.primary.dark, - color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.dark, padding: theme.spacing(0, 1.2), + ...theme.applyStyles('light', { + backgroundColor: alpha(theme.palette.primary.main, 0.25), + }), + ...theme.applyStyles('dark', { + color: theme.palette.primary.contrastText, + }), }, [`& .${treeItemClasses.groupTransition}`]: { marginLeft: 15, paddingLeft: 18, borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`, }, + ...theme.applyStyles('light', { + color: theme.palette.grey[800], + }), })); export default function CustomStyling() { diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx index dd1a123cb753c..de8fc4bd6f5cf 100644 --- a/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx +++ b/docs/data/tree-view/rich-tree-view/customization/CustomStyling.tsx @@ -36,11 +36,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ ]; const CustomTreeItem = styled(TreeItem)(({ theme }) => ({ - color: - theme.palette.mode === 'light' - ? theme.palette.grey[800] - : theme.palette.grey[200], - + color: theme.palette.grey[200], [`& .${treeItemClasses.content}`]: { borderRadius: theme.spacing(0.5), padding: theme.spacing(0.5, 1), @@ -52,18 +48,23 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({ }, [`& .${treeItemClasses.iconContainer}`]: { borderRadius: '50%', - backgroundColor: - theme.palette.mode === 'light' - ? alpha(theme.palette.primary.main, 0.25) - : theme.palette.primary.dark, - color: theme.palette.mode === 'dark' && theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.dark, padding: theme.spacing(0, 1.2), + ...theme.applyStyles('light', { + backgroundColor: alpha(theme.palette.primary.main, 0.25), + }), + ...theme.applyStyles('dark', { + color: theme.palette.primary.contrastText, + }), }, [`& .${treeItemClasses.groupTransition}`]: { marginLeft: 15, paddingLeft: 18, borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`, }, + ...theme.applyStyles('light', { + color: theme.palette.grey[800], + }), })); export default function CustomStyling() { diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js index a02a1e86667bd..45d30698d9307 100644 --- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js +++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.js @@ -80,14 +80,14 @@ function DotIcon() { } const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({ - color: - theme.palette.mode === 'light' - ? theme.palette.grey[800] - : theme.palette.grey[400], + color: theme.palette.grey[400], position: 'relative', [`& .${treeItemClasses.groupTransition}`]: { marginLeft: theme.spacing(3.5), }, + ...theme.applyStyles('light', { + color: theme.palette.grey[800], + }), })); const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ @@ -100,10 +100,10 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ fontWeight: 500, [`&.Mui-expanded `]: { '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': { - color: - theme.palette.mode === 'light' - ? theme.palette.primary.main - : theme.palette.primary.dark, + color: theme.palette.primary.dark, + ...theme.applyStyles('light', { + color: theme.palette.primary.main, + }), }, '&::before': { content: '""', @@ -113,22 +113,25 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ top: '44px', height: 'calc(100% - 48px)', width: '1.5px', - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.grey[300] - : theme.palette.grey[700], + backgroundColor: theme.palette.grey[700], + ...theme.applyStyles('light', { + backgroundColor: theme.palette.grey[300], + }), }, }, '&:hover': { backgroundColor: alpha(theme.palette.primary.main, 0.1), - color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white', + color: 'white', + ...theme.applyStyles('light', { + color: theme.palette.primary.main, + }), }, [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: { - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.primary.main - : theme.palette.primary.dark, + backgroundColor: theme.palette.primary.dark, color: theme.palette.primary.contrastText, + ...theme.applyStyles('light', { + backgroundColor: theme.palette.primary.main, + }), }, })); diff --git a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx index b57e0a3fb7204..70cb94cbb040b 100644 --- a/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx +++ b/docs/data/tree-view/rich-tree-view/customization/FileExplorer.tsx @@ -98,14 +98,14 @@ declare module 'react' { } const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({ - color: - theme.palette.mode === 'light' - ? theme.palette.grey[800] - : theme.palette.grey[400], + color: theme.palette.grey[400], position: 'relative', [`& .${treeItemClasses.groupTransition}`]: { marginLeft: theme.spacing(3.5), }, + ...theme.applyStyles('light', { + color: theme.palette.grey[800], + }), })) as unknown as typeof TreeItem2Root; const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ @@ -118,10 +118,10 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ fontWeight: 500, [`&.Mui-expanded `]: { '&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon': { - color: - theme.palette.mode === 'light' - ? theme.palette.primary.main - : theme.palette.primary.dark, + color: theme.palette.primary.dark, + ...theme.applyStyles('light', { + color: theme.palette.primary.main, + }), }, '&::before': { content: '""', @@ -131,22 +131,25 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({ top: '44px', height: 'calc(100% - 48px)', width: '1.5px', - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.grey[300] - : theme.palette.grey[700], + backgroundColor: theme.palette.grey[700], + ...theme.applyStyles('light', { + backgroundColor: theme.palette.grey[300], + }), }, }, '&:hover': { backgroundColor: alpha(theme.palette.primary.main, 0.1), - color: theme.palette.mode === 'light' ? theme.palette.primary.main : 'white', + color: 'white', + ...theme.applyStyles('light', { + color: theme.palette.primary.main, + }), }, [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: { - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.primary.main - : theme.palette.primary.dark, + backgroundColor: theme.palette.primary.dark, color: theme.palette.primary.contrastText, + ...theme.applyStyles('light', { + backgroundColor: theme.palette.primary.main, + }), }, })); diff --git a/docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.js b/docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.js new file mode 100644 index 0000000000000..6d8aff8043d64 --- /dev/null +++ b/docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.js @@ -0,0 +1,35 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +import { useTreeViewApiRef } from '@mui/x-tree-view/hooks'; +import { MUI_X_PRODUCTS } from './products'; + +export default function ApiMethodUpdateItemLabel() { + const [isLabelUpdated, setIsLabelUpdated] = React.useState(false); + const apiRef = useTreeViewApiRef(); + + const handleUpdateLabel = () => { + if (isLabelUpdated) { + apiRef.current.updateItemLabel('grid', 'Data Grid'); + setIsLabelUpdated(false); + } else { + apiRef.current.updateItemLabel('grid', 'New Label'); + setIsLabelUpdated(true); + } + }; + + return ( +Learn how to edit the label of Tree View items.
+ +## Enable label editing + +You can use the `isItemEditable` prop to enable editing. +If set to `true`, this prop will enable label editing on all items: + +{{"demo": "LabelEditingAllItems.js"}} + +:::success +If an item is editable, the editing state can be toggled by double clicking on it, or by pressing Enter on the keyboard when the item is in focus. + +Once an item is in editing state, the value of the label can be edited. Pressing Enter again or bluring the item will save the new value. Pressing Esc will cancel the action and restore the item to its original state. + +::: + +## Limit editing to some items + +If you pass a method to `isItemEditable`, only the items for which the method returns `true` will be editable: + +{{"demo": "LabelEditingSomeItems.js"}} + +### Limit editing to leaves + +You can limit the editing to just the leaves of the tree. + +{{"demo": "EditLeaves.js"}} + +## Track item label change + +Use the `onItemLabelChange` prop to trigger an action when the label of an item changes. + +{{"demo": "EditingCallback.js"}} + +## Change the default behavior + +By default, blurring the tree item saves the new value if there is one. +To modify this behavior, use the `slotProps` of the `TreeItem2`. + +{{"demo": "CustomBehavior.js"}} + +## Validation + +You can override the event handlers of the `labelInput` and implement a custom validation logic using the interaction methods from `useTreeItem2Utils`. + +{{"demo": "Validation.js"}} + +## Enable editing using only icons + +The demo below shows how to entirely override the editing behavior, and implement it using icons. + +{{"demo": "EditWithIcons.js"}} + +## Create a custom labelInput + +The demo below shows how to use a different component in the `labelInput` slot. + +{{"demo": "CustomLabelInput.js"}} + +## Imperative API + +:::success +To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows: + +```tsx +const apiRef = useTreeViewApiRef(); + +returnChartsYAxisProps."
},
@@ -76,7 +80,8 @@
},
"yAxis": {
"description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of AxisConfig objects."
- }
+ },
+ "zoom": { "description": "The list of zoom data related to each axis." }
},
"classDescriptions": {}
}
diff --git a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
index 152217da8fe54..a268da37e6cf3 100644
--- a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
+++ b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json
@@ -25,6 +25,7 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the markCell element"
},
+ "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
"root": { "description": "Styles applied to the root element." },
"row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
"table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
diff --git a/docs/translations/api-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json b/docs/translations/api-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json
index ef97ccfe86a31..3e7c7c6cc6e98 100644
--- a/docs/translations/api-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json
+++ b/docs/translations/api-docs/charts/default-charts-axis-tooltip-content/default-charts-axis-tooltip-content.json
@@ -19,6 +19,7 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the markCell element"
},
+ "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
"root": { "description": "Styles applied to the root element." },
"row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
"table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
diff --git a/docs/translations/api-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json b/docs/translations/api-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json
index 36fe7b5f92e50..c7ea4d31307fb 100644
--- a/docs/translations/api-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json
+++ b/docs/translations/api-docs/charts/default-charts-item-tooltip-content/default-charts-item-tooltip-content.json
@@ -23,6 +23,7 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the markCell element"
},
+ "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
"root": { "description": "Styles applied to the root element." },
"row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
"table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
diff --git a/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json b/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json
index 36fe7b5f92e50..c7ea4d31307fb 100644
--- a/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json
+++ b/docs/translations/api-docs/charts/default-heatmap-tooltip/default-heatmap-tooltip.json
@@ -23,6 +23,7 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the markCell element"
},
+ "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" },
"root": { "description": "Styles applied to the root element." },
"row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" },
"table": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the table element" },
diff --git a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json
index a262e0ac15bf2..bc67c9eba65b4 100644
--- a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json
+++ b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json
@@ -46,6 +46,10 @@
},
"onLineClick": { "description": "Callback fired when a line element is clicked." },
"onMarkClick": { "description": "Callback fired when a mark element is clicked." },
+ "onZoomChange": {
+ "description": "Callback fired when the zoom has changed.",
+ "typeDescriptions": { "zoomData": "Updated zoom data." }
+ },
"rightAxis": {
"description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps."
},
@@ -70,7 +74,8 @@
},
"yAxis": {
"description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of AxisConfig objects."
- }
+ },
+ "zoom": { "description": "The list of zoom data related to each axis." }
},
"classDescriptions": {}
}
diff --git a/docs/translations/api-docs/charts/line-series-type.json b/docs/translations/api-docs/charts/line-series-type.json
index ff576209272d0..824efbcd4acb1 100644
--- a/docs/translations/api-docs/charts/line-series-type.json
+++ b/docs/translations/api-docs/charts/line-series-type.json
@@ -3,6 +3,9 @@
"propertiesDescriptions": {
"type": { "description": "" },
"area": { "description": "" },
+ "baseline": {
+ "description": "The value of the line at the base of the series area.
- 'min' the area will fill the space under the line.
- 'max' the area will fill the space above the line.
- number the area will fill the space between this value and the line
true, line and area connect points separated by null values."
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index a8b79b49fb93e..baba2f9ae0045 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -202,6 +202,9 @@
"ignoreValueFormatterDuringExport": {
"description": "If true, the Data Grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export."
},
+ "indeterminateCheckboxAction": {
+ "description": "If select, a group header checkbox in indeterminate state (like "Select All" checkbox) will select all the rows under it. If deselect, it will deselect all the rows under it. Works only if checkboxSelection is enabled."
+ },
"initialState": {
"description": "The initial state of the DataGridPremium. The data in it is set in the state on initialization but isn't controlled. If one of the data in initialState is also being controlled, then the control state wins."
},
@@ -223,7 +226,7 @@
"description": "Determines if a row can be selected.",
"typeDescriptions": {
"params": "With all properties from GridRowParams.",
- "boolean": "A boolean indicating if the cell is selectable."
+ "boolean": "A boolean indicating if the row is selectable."
}
},
"keepColumnPositionIfDraggedOutside": {
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 914817291c87f..91cce7101fd81 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -183,6 +183,9 @@
"ignoreValueFormatterDuringExport": {
"description": "If true, the Data Grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export."
},
+ "indeterminateCheckboxAction": {
+ "description": "If select, a group header checkbox in indeterminate state (like "Select All" checkbox) will select all the rows under it. If deselect, it will deselect all the rows under it. Works only if checkboxSelection is enabled."
+ },
"initialState": {
"description": "The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins."
},
@@ -204,7 +207,7 @@
"description": "Determines if a row can be selected.",
"typeDescriptions": {
"params": "With all properties from GridRowParams.",
- "boolean": "A boolean indicating if the cell is selectable."
+ "boolean": "A boolean indicating if the row is selectable."
}
},
"keepColumnPositionIfDraggedOutside": {
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 08fa6f50e6c46..b799ebbc72064 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -136,6 +136,9 @@
"ignoreValueFormatterDuringExport": {
"description": "If true, the Data Grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export."
},
+ "indeterminateCheckboxAction": {
+ "description": "If select, a group header checkbox in indeterminate state (like "Select All" checkbox) will select all the rows under it. If deselect, it will deselect all the rows under it. Works only if checkboxSelection is enabled."
+ },
"initialState": {
"description": "The initial state of the DataGrid. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins."
},
@@ -150,7 +153,7 @@
"description": "Determines if a row can be selected.",
"typeDescriptions": {
"params": "With all properties from GridRowParams.",
- "boolean": "A boolean indicating if the cell is selectable."
+ "boolean": "A boolean indicating if the row is selectable."
}
},
"keepNonExistentRowsSelected": {
diff --git a/docs/translations/api-docs/data-grid/grid-cell-params.json b/docs/translations/api-docs/data-grid/grid-cell-params.json
index 39d3bbcc36617..b9be4d64e27e5 100644
--- a/docs/translations/api-docs/data-grid/grid-cell-params.json
+++ b/docs/translations/api-docs/data-grid/grid-cell-params.json
@@ -1,6 +1,7 @@
{
"interfaceDescription": "Object passed as parameter in the column GridColDef cell renderer.",
"propertiesDescriptions": {
+ "api": { "description": "GridApi that let you manipulate the grid." },
"cellMode": { "description": "The mode of the cell." },
"colDef": { "description": "The column of the row that the current cell belongs to." },
"field": { "description": "The column field of the cell that triggered the event." },
diff --git a/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json b/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json
index bcd6e7bdb9053..3a33b96c08bd8 100644
--- a/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json
+++ b/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json
@@ -8,7 +8,7 @@
"description": "Used to determine if a given item can move to some new position.",
"typeDescriptions": {
"params": "The params describing the item re-ordering.",
- "params.itemId": "The id of the item to check.",
+ "params.itemId": "The id of the item that is being moved to a new position.",
"params.oldPosition": "The old position of the item.",
"params.newPosition": "The new position of the item.",
"boolean": "true if the item can move to the new position."
@@ -55,6 +55,9 @@
"boolean": "true if the item should be disabled."
}
},
+ "isItemEditable": {
+ "description": "Determines if a given item is editable or not. Make sure to also enable the labelEditing experimental feature: <RichTreeViewPro experimentalFeatures={{ labelEditing: true }} />. By default, the items are not editable."
+ },
"isItemReorderable": {
"description": "Used to determine if a given item can be reordered.",
"typeDescriptions": {
@@ -100,6 +103,13 @@
"itemId": "The id of the focused item."
}
},
+ "onItemLabelChange": {
+ "description": "Callback fired when the label of an item changes.",
+ "typeDescriptions": {
+ "itemId": "The id of the item that was edited.",
+ "newLabel": "The new label of the items."
+ }
+ },
"onItemPositionChange": {
"description": "Callback fired when a tree item is moved in the tree.",
"typeDescriptions": {
diff --git a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
index 3b94a5f524426..3ba5993e51879 100644
--- a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
+++ b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json
@@ -45,6 +45,9 @@
"boolean": "true if the item should be disabled."
}
},
+ "isItemEditable": {
+ "description": "Determines if a given item is editable or not. Make sure to also enable the labelEditing experimental feature: <RichTreeViewPro experimentalFeatures={{ labelEditing: true }} />. By default, the items are not editable."
+ },
"itemChildrenIndentation": {
"description": "Horizontal indentation between an item and its children. Examples: 24, "24px", "2rem", "2em"."
},
@@ -80,6 +83,13 @@
"itemId": "The id of the focused item."
}
},
+ "onItemLabelChange": {
+ "description": "Callback fired when the label of an item changes.",
+ "typeDescriptions": {
+ "itemId": "The id of the item that was edited.",
+ "newLabel": "The new label of the items."
+ }
+ },
"onItemSelectionToggle": {
"description": "Callback fired when a tree item is selected or deselected.",
"typeDescriptions": {
diff --git a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json
index 6a5f8d2ae8321..1ec2e89e98d8e 100644
--- a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json
+++ b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json
@@ -23,6 +23,15 @@
"nodeName": "the element",
"conditions": "disabled"
},
+ "editable": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the content of the items that are editable"
+ },
+ "editing": {
+ "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the content element",
+ "conditions": "editing is enabled"
+ },
"expanded": {
"description": "State class applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the content element",
@@ -50,6 +59,7 @@
"icon": "The icon to display next to the tree item's label.",
"iconContainer": "The component that renders the icon.",
"label": "The component that renders the item label.",
+ "labelInput": "The component that renders the input to edit the label when the item is editable and is currently being edited.",
"root": "The component that renders the root."
}
}
diff --git a/docs/translations/api-docs/tree-view/tree-item/tree-item.json b/docs/translations/api-docs/tree-view/tree-item/tree-item.json
index 596c008d70f16..f0febee14167b 100644
--- a/docs/translations/api-docs/tree-view/tree-item/tree-item.json
+++ b/docs/translations/api-docs/tree-view/tree-item/tree-item.json
@@ -41,6 +41,15 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the drag and drop overlay"
},
+ "editable": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the content of the items that are editable"
+ },
+ "editing": {
+ "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the content element",
+ "conditions": "editing is enabled"
+ },
"expanded": {
"description": "State class applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the content element",
@@ -56,6 +65,11 @@
"nodeName": "the tree item icon"
},
"label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label element" },
+ "labelInput": {
+ "description": "Styles applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the input element that is visible",
+ "conditions": "editing is enabled"
+ },
"root": { "description": "Styles applied to the root element." },
"selected": {
"description": "State class applied to {{nodeName}} when {{conditions}}.",
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index a552a39f3001a..1975578452299 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -10,6 +10,12 @@
"esModuleInterop": true,
"incremental": true
},
- "include": ["pages/**/*.ts*", "data/**/*", "src/modules/components/**/*", "next.config.mjs"],
+ "include": [
+ "pages/**/*.ts*",
+ "data/**/*",
+ "src/modules/components/**/*",
+ "next.config.mjs",
+ "docs-env.d.ts"
+ ],
"exclude": ["docs/.next", "docs/export", "pages/playground"]
}
diff --git a/netlify.toml b/netlify.toml
index 767f5a910c795..4d663716bd273 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -10,7 +10,6 @@
[build.environment]
NODE_VERSION = "18"
NODE_OPTIONS = "--max_old_space_size=4096"
- PNPM_FLAGS = "--shamefully-hoist"
[[plugins]]
- package = "./node_modules/@mui/monorepo/packages/netlify-plugin-cache-docs"
+ package = "./packages/netlify-plugin-cache-docs"
diff --git a/netlify/functions/deploy-succeeded.js b/netlify/functions/deploy-succeeded.js
index d59ce476da813..ad2d1a868b5ae 100644
--- a/netlify/functions/deploy-succeeded.js
+++ b/netlify/functions/deploy-succeeded.js
@@ -1,5 +1,3 @@
-const fetch = require('node-fetch');
-
/**
* @param {object} event
* @param {string} event.body - https://jsoneditoronline.org/#left=cloud.fb1a4fa30a4f475fa6887071c682e2c1
diff --git a/package.json b/package.json
index 1967ff6c811cc..ea094081d8f06 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "version": "7.12.0",
+ "version": "7.15.0",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
@@ -8,7 +8,7 @@
"docs:serve": "pnpm --filter docs serve",
"docs:create-playground": "pnpm --filter docs create-playground",
"docs:api": "NODE_OPTIONS=--max-old-space-size=4096 pnpm docs:api:build && pnpm docs:api:buildX",
- "docs:api:build": "cross-env BABEL_ENV=development babel-node -i \"/node_modules/(?!@mui)/\" -x .ts,.tsx,.js ./scripts/buildApiDocs/index.ts",
+ "docs:api:build": "tsx ./scripts/buildApiDocs/index.ts",
"docs:api:buildX": "cross-env BABEL_ENV=development babel-node -i \"/node_modules/(?!@mui)/\" -x .ts,.tsx,.js ./docs/scripts/api/buildApi.ts",
"docs:link-check": "cross-env BABEL_ENV=development babel-node -i \"/node_modules/(?!@mui)/\" --extensions \".tsx,.ts,.js\" ./docs/scripts/reportBrokenLinks.js",
"docs:build": "pnpm --filter docs build",
@@ -55,6 +55,7 @@
"typescript": "lerna run --no-bail --parallel typescript",
"typescript:ci": "lerna run --concurrency 1 --no-bail --no-sort typescript",
"use-react-version": "node scripts/useReactVersion.mjs",
+ "use-material-ui-v6": "node scripts/useMaterialUIv6.mjs",
"build:codesandbox": "lerna run --concurrency 3 --no-private --scope \"@mui/*\" build",
"install:codesandbox": "pnpm install --no-frozen-lockfile",
"release:changelog": "node scripts/releaseChangelog.mjs",
@@ -69,54 +70,55 @@
"devDependencies": {
"@actions/core": "^1.10.1",
"@actions/github": "^6.0.0",
- "@argos-ci/core": "^2.4.0",
+ "@argos-ci/core": "^2.5.1",
"@babel/cli": "^7.24.8",
"@babel/core": "^7.25.2",
"@babel/node": "^7.25.0",
- "@babel/plugin-transform-class-properties": "^7.24.7",
+ "@babel/plugin-transform-class-properties": "^7.25.4",
"@babel/plugin-transform-object-rest-spread": "^7.24.7",
- "@babel/plugin-transform-private-methods": "^7.24.7",
+ "@babel/plugin-transform-private-methods": "^7.25.4",
"@babel/plugin-transform-private-property-in-object": "^7.24.7",
"@babel/plugin-transform-react-constant-elements": "^7.25.1",
- "@babel/plugin-transform-runtime": "^7.24.7",
- "@babel/preset-env": "^7.25.2",
+ "@babel/plugin-transform-runtime": "^7.25.4",
+ "@babel/preset-env": "^7.25.4",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@babel/register": "^7.24.6",
- "@babel/traverse": "^7.25.2",
- "@babel/types": "^7.25.2",
+ "@babel/traverse": "^7.25.4",
+ "@babel/types": "^7.25.4",
"@emotion/cache": "^11.13.1",
- "@emotion/react": "^11.13.0",
+ "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
- "@mui/icons-material": "^5.16.5",
- "@mui/internal-markdown": "^1.0.8",
- "@mui/internal-test-utils": "^1.0.5",
- "@mui/material": "^5.16.5",
- "@mui/monorepo": "github:mui/material-ui#4a82b6b0e0395db8fa0a0d49b6b76de4516b1579",
- "@mui/utils": "^5.16.5",
- "@next/eslint-plugin-next": "14.2.5",
+ "@mui/icons-material": "^5.16.7",
+ "@mui/internal-babel-plugin-resolve-imports": "1.0.17",
+ "@mui/internal-markdown": "^1.0.11",
+ "@mui/internal-test-utils": "^1.0.11",
+ "@mui/material": "^5.16.7",
+ "@mui/monorepo": "github:mui/material-ui#8b8732eabd272226fdc858cdfc1dce8b0ce4b294",
+ "@mui/utils": "^5.16.6",
+ "@next/eslint-plugin-next": "14.2.7",
"@octokit/plugin-retry": "^7.1.1",
- "@octokit/rest": "^21.0.1",
+ "@octokit/rest": "^21.0.2",
"@playwright/test": "^1.44.1",
"@types/babel__core": "^7.20.5",
"@types/babel__traverse": "^7.20.6",
- "@types/chai": "^4.3.16",
+ "@types/chai": "^4.3.19",
"@types/chai-dom": "^1.11.3",
"@types/fs-extra": "^11.0.4",
"@types/karma": "^6.3.8",
"@types/lodash": "^4.17.7",
"@types/mocha": "^10.0.7",
- "@types/node": "^18.19.42",
- "@types/react": "^18.3.3",
+ "@types/node": "^18.19.47",
+ "@types/react": "^18.3.4",
"@types/react-dom": "^18.3.0",
"@types/react-test-renderer": "^18.3.0",
"@types/requestidlecallback": "^0.3.7",
"@types/sinon": "^17.0.3",
- "@types/yargs": "^17.0.32",
- "@typescript-eslint/eslint-plugin": "^7.16.1",
- "@typescript-eslint/parser": "^7.16.1",
- "autoprefixer": "^10.4.19",
- "axe-core": "4.9.1",
+ "@types/yargs": "^17.0.33",
+ "@typescript-eslint/eslint-plugin": "^7.18.0",
+ "@typescript-eslint/parser": "^7.18.0",
+ "autoprefixer": "^10.4.20",
+ "axe-core": "4.10.0",
"babel-loader": "^9.1.3",
"babel-plugin-istanbul": "^7.0.0",
"babel-plugin-module-resolver": "^5.0.2",
@@ -141,34 +143,35 @@
"eslint-import-resolver-webpack": "^0.13.8",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "^2.29.1",
- "eslint-plugin-jsdoc": "^48.8.3",
+ "eslint-plugin-jsdoc": "^48.11.0",
"eslint-plugin-jsx-a11y": "^6.9.0",
"eslint-plugin-material-ui": "workspace:^",
- "eslint-plugin-mocha": "^10.4.3",
+ "eslint-plugin-mocha": "^10.5.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
"eslint-plugin-react-hooks": "^4.6.2",
+ "eslint-plugin-testing-library": "^6.3.0",
"fast-glob": "^3.3.2",
"format-util": "^1.0.5",
"fs-extra": "^11.2.0",
"glob-gitignore": "^1.0.14",
- "globby": "^14.0.1",
+ "globby": "^14.0.2",
"html-webpack-plugin": "^5.6.0",
- "jsdom": "24.1.1",
+ "jsdom": "24.1.3",
"jss": "^10.10.0",
"jss-plugin-template": "^10.10.0",
"jss-rtl": "^0.3.0",
- "karma": "^6.4.3",
+ "karma": "^6.4.4",
"karma-chrome-launcher": "^3.2.0",
"karma-mocha": "^2.0.1",
"karma-parallel": "^0.3.1",
"karma-sourcemap-loader": "^0.4.0",
"karma-webpack": "^5.0.1",
- "lerna": "^8.1.7",
+ "lerna": "^8.1.8",
"lodash": "^4.17.21",
"markdownlint-cli2": "^0.13.0",
- "mocha": "^10.7.0",
+ "mocha": "^10.7.3",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"nyc": "^17.0.0",
@@ -178,28 +181,28 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"remark": "^13.0.0",
- "rimraf": "^5.0.9",
+ "rimraf": "^5.0.10",
"serve": "^14.2.3",
"sinon": "^16.1.3",
"stream-browserify": "^3.0.0",
"string-replace-loader": "^3.1.0",
"terser-webpack-plugin": "^5.3.10",
- "tsx": "^4.16.2",
+ "tsx": "^4.18.0",
"typescript": "^5.5.4",
- "unist-util-visit": "^2.0.3",
+ "unist-util-visit": "^5.0.0",
"util": "^0.12.5",
- "webpack": "^5.92.1",
+ "webpack": "^5.94.0",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^5.1.4",
"yargs": "^17.7.2"
},
"resolutions": {
"react-is": "^18.3.1",
- "@types/node": "^18.19.42"
+ "@types/node": "^18.19.47"
},
- "packageManager": "pnpm@9.6.0",
+ "packageManager": "pnpm@9.8.0",
"engines": {
- "pnpm": "9.6.0"
+ "pnpm": "9.8.0"
},
"pnpm": {
"patchedDependencies": {
diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json
index c5f013fb9f826..2a8687a71bd3a 100644
--- a/packages/eslint-plugin-material-ui/package.json
+++ b/packages/eslint-plugin-material-ui/package.json
@@ -5,9 +5,9 @@
"description": "Custom eslint rules for MUI X.",
"main": "src/index.js",
"devDependencies": {
- "@types/eslint": "^8.56.11",
- "@typescript-eslint/utils": "^7.16.1",
- "@typescript-eslint/parser": "^7.16.1"
+ "@types/eslint": "^8.56.12",
+ "@typescript-eslint/utils": "^7.18.0",
+ "@typescript-eslint/parser": "^7.18.0"
},
"scripts": {
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000"
diff --git a/packages/netlify-plugin-cache-docs/index.js b/packages/netlify-plugin-cache-docs/index.js
new file mode 100644
index 0000000000000..e8530f898af36
--- /dev/null
+++ b/packages/netlify-plugin-cache-docs/index.js
@@ -0,0 +1 @@
+module.exports = require('@mui/monorepo/packages/netlify-plugin-cache-docs');
diff --git a/packages/netlify-plugin-cache-docs/manifest.yml b/packages/netlify-plugin-cache-docs/manifest.yml
new file mode 100644
index 0000000000000..46be74dddcce9
--- /dev/null
+++ b/packages/netlify-plugin-cache-docs/manifest.yml
@@ -0,0 +1 @@
+name: netlify-plugin-cache-docs
diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
index 28536720a38f9..00d4063a8ae87 100644
--- a/packages/x-charts-pro/package.json
+++ b/packages/x-charts-pro/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-charts-pro",
- "version": "7.0.0-alpha.0",
+ "version": "7.0.0-alpha.3",
"description": "The Pro plan edition of the Charts components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -39,12 +39,11 @@
"directory": "packages/x-charts-pro"
},
"dependencies": {
- "@babel/runtime": "^7.25.0",
- "@mui/system": "^5.16.5",
- "@mui/utils": "^5.16.5",
+ "@babel/runtime": "^7.25.4",
+ "@mui/utils": "^5.16.6",
"@mui/x-charts": "workspace:*",
- "@mui/x-license": "workspace:*",
"@mui/x-charts-vendor": "workspace:*",
+ "@mui/x-license": "workspace:*",
"@react-spring/rafz": "^9.7.4",
"@react-spring/web": "^9.7.4",
"clsx": "^2.1.1",
@@ -53,7 +52,8 @@
"peerDependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
- "@mui/material": "^5.15.14",
+ "@mui/material": "^5.15.14 || ^6.0.0",
+ "@mui/system": "^5.15.14 || ^6.0.0",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
@@ -66,11 +66,13 @@
}
},
"devDependencies": {
+ "@mui/material": "^5.16.7",
+ "@mui/system": "^5.16.7",
"@react-spring/core": "^9.7.4",
"@react-spring/shared": "^9.7.4",
"@types/prop-types": "^15.7.12",
"csstype": "^3.1.3",
- "rimraf": "^5.0.9"
+ "rimraf": "^5.0.10"
},
"engines": {
"node": ">=14.0.0"
diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
index 9f03659068b1b..e7c1e3c3cac0d 100644
--- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
+++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart';
import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -16,6 +17,12 @@ import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
import { useZoom } from '../context/ZoomProvider/useZoom';
import { ZoomProps } from '../context/ZoomProvider';
+function BarChartPlotZoom(props: BarPlotProps) {
+ const { isInteracting } = useZoom();
+
+ return