@mui/x-charts 7.0.0-beta.7 → 7.0.0

package/CHANGELOG.md

@@ -3,6 +3,189 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.0.0
+
+_Mar 22, 2024_
+
+We're excited to [announce the first v7 stable release](https://mui.com/blog/mui-x-v7/)! 🎉🚀
+
+This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements.
+Migration guides are available with a complete list of the breaking changes:
+
+- [Data Grid](https://mui.com/x/migration/migration-data-grid-v6/)
+- [Date and Time Pickers](https://mui.com/x/migration/migration-pickers-v6/)
+- [Tree View](https://mui.com/x/migration/migration-tree-view-v6/)
+- [Charts](https://mui.com/x/migration/migration-charts-v6/)
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve the usage of custom `viewRenderers` on `DateTimePicker` (#12441) @LukasTy
+- ✨ Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- 🕹️ Support controlled `density` for the Data Grid (#12332) @MBilalShafi
+- 🎁 Dynamic virtualization range for the Data Grid (#12353) @romgrk
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `density` is a [controlled prop](https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically) now, if you were previously passing the `density` prop to the Data Grid, you will need to do one of the following:
+
+  1. Move it to the `initialState.density` to initialize it.
+
+  ```diff
+   <DataGrid
+  -  density="compact"
+  +  initialState={{ density: "compact" }}
+   />
+  ```
+
+  2. Move it to the state and use `onDensityChange` callback to update the `density` prop accordingly for it to work as expected.
+
+  ```diff
+  + const [density, setDensity] = React.useState<GridDensity>('compact');
+   <DataGrid
+  -  density="compact"
+  +  density={density}
+  +  onDensityChange={(newDensity) => setDensity(newDensity)}
+   />
+  ```
+
+- The selector `gridDensityValueSelector` was removed, use the `gridDensitySelector` instead.
+
+- The props `rowBuffer` and `columnBuffer` were renamed to `rowBufferPx` and `columnBufferPx`.
+  Their value is now a pixel value rather than a number of items. Their default value is now `150`.
+
+- The props `rowThreshold` and `columnThreshold` have been removed.
+  If you had the `rowThreshold` prop set to `0` to force new rows to be rendered more often – this is no longer necessary.
+
+#### `@mui/x-data-grid@7.0.0`
+
+- [DataGrid] Allow to control the grid density (#12332) @MBilalShafi
+- [DataGrid] Dynamic virtualization range (#12353) @romgrk
+- [DataGrid] Fix `ElementType` usage (#12479) @cherniavskii
+- [DataGrid] Fix cell value formatting on copy (#12357) @sai6855
+- [DataGrid] Fix checkbox selection is keeping selection when filtering (#11751) @g1mishra
+- [DataGrid] Make `rows` an optional prop (#12478) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.0.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0`.
+
+#### `@mui/x-data-grid-premium@7.0.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0`, plus:
+
+- [DataGridPremium] Add support for confirmation before clipboard paste (#12225) @cherniavskii
+- [DataGridPremium] Fix single grouping column sorting (#9679) @cherniavskii
+- [DataGridPremium] Fix boolean cell not rendered in group rows (#12492) @sai6855
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `DesktopDateTimePicker` view rendering has been optimized by using the same technique as for `DesktopDateTimeRangePicker`.
+  - The `dateTimeViewRenderers` have been removed in favor of reusing existing time view renderers (`renderTimeViewClock`, `renderDigitalClockTimeView` and `renderMultiSectionDigitalClockTimeView`) and date view renderer (`renderDateViewCalendar`).
+  - Passing `renderTimeViewClock` to time view renderers will no longer revert to the old behavior of rendering only date or time view.
+
+#### `@mui/x-date-pickers@7.0.0`
+
+- [fields] Allow to override the separator between the start and the end date in all range fields (#12174) @flaviendelangle
+- [fields] Support format without separator (#12489) @flaviendelangle
+- [pickers] Use renderer interceptor on `DesktopDateTimePicker` (#12441) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0`, plus:
+
+- [DateTimeRangePicker] Add component `JSDoc` (#12518) @LukasTy
+- [DateTimeRangePicker] Fix views behavior regression (#12529) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.0.0`
+
+- [charts] Fix small typo in `CartesianContextProvider` (#12461) @Janpot
+
+### Tree View
+
+#### Breaking changes
+
+- The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+
+```diff
+ <TreeView>
+-    <TreeItem label="Item 1" nodeId="one">
++    <TreeItem label="Item 1" itemId="one">
+ </TreeView>
+```
+
+- The focus is now applied to the Tree Item root element instead of the Tree View root element.
+
+  This change will allow new features that require the focus to be on the Tree Item,
+  like the drag and drop reordering of items.
+  It also solves several issues with focus management,
+  like the inability to scroll to the focused item when a lot of items are rendered.
+
+  This will mostly impact how you write tests to interact with the Tree View:
+
+  For example, if you were writing a test with `react-testing-library`, here is what the changes could look like:
+
+  ```diff
+   it('test example on first item', () => {
+  -  const { getByRole } = render(
+  +  const { getAllByRole } = render(
+       <SimpleTreeView>
+         <TreeItem nodeId="one" />
+         <TreeItem nodeId="two" />
+      </SimpleTreeView>
+     );
+
+  -  const tree = getByRole('tree');
+  +  const firstTreeItem = getAllByRole('treeitem')[0];
+     act(() => {
+  -    tree.focus();
+  +    firstTreeItem.focus();
+     });
+  -  fireEvent.keyDown(tree, { key: 'ArrowDown' });
+  +  fireEvent.keyDown(firstTreeItem, { key: 'ArrowDown' });
+   })
+  ```
+
+#### `@mui/x-tree-view@7.0.0`
+
+- [TreeView] Rename `nodeId` to `itemId` (#12418) @noraleonte
+- [TreeView] Set focus on the focused Tree Item instead of the Tree View (#12226) @flaviendelangle
+- [TreeView] Update JSDoc of the `ContentComponent` prop to avoid using the word "node" (#12476) @flaviendelangle
+
+### `@mui/x-codemod@7.0.0`
+
+- [codemod] Add a codemod and update the grid migration guide (#12488) @MBilalShafi
+
+### Docs
+
+- [docs] Finalize migration guide (#12501) @noraleonte
+- [docs] Fix nested cells alignment in the popular features demo (#12450) @cherniavskii
+- [docs] Fix some Vale errors (#12469) @oliviertassinari
+- [docs] Remove mentions of pre release (#12513) @noraleonte
+- [docs] Update branch name and tags (#12498) @cherniavskii
+- [docs] Update links to v6 (#12496) @cherniavskii
+- [docs] Update links to v7 docs (#12500) @noraleonte
+- [docs] Update supported versions (#12508) @joserodolfofreitas
+- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
+
+### Core
+
+- [core] Bump `@mui/material` peer dependency for all packages (#12516) @LukasTy
+- [core] Fix `no-restricted-imports` ESLint rule not working for Data Grid packages (#12477) @cherniavskii
+- [core] Lower the frequency of `no-response` action runs (#12491) @michaldudak
+- [core] Remove leftover `legacy` `browserlistrc` entry (#12415) @LukasTy
+- [core] Update NPM tag (#12511) @cherniavskii
+- [core] Update supported browsers (browserlistrc) (#12521) @LukasTy
+- [core] Use Circle CI context @oliviertassinari
+- [license] Fix grammar on expired license error message (#12460) @joserodolfofreitas
+
 ## 7.0.0-beta.7
 
 _Mar 14, 2024_
@@ -90,7 +273,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
 - [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
 - [docs] Add missing luxon `Info` import (#12427) @LukasTy
 - [docs] Improve slots definitions for charts (#12408) @alexfauquette
-- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
 - [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
 - [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
 
@@ -252,7 +435,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 ### Docs
 
 - [docs] Fix image layout shift when loading @oliviertassinari
-- [docs] Match Material UI repo comment for redirections @oliviertassinari
+- [docs] Match Material UI repo comment for redirections @oliviertassinari
 - [docs] Non breaking spaces @oliviertassinari
 - [docs] Polish the Date Picker playground (#11869) @zanivan
 - [docs] Standardize WAI-ARIA references @oliviertassinari
@@ -263,9 +446,9 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.5`.
 - [core] Remove grid folder from `getComponentInfo` RegExp (#12241) @flaviendelangle
 - [core] Remove `window.` reference for common globals @oliviertassinari
 - [core] Use runtime agnostic setTimeout type @oliviertassinari
-- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
+- [docs-infra] Fix Stack Overflow breaking space @oliviertassinari
 - [docs-infra] Fix missing non breaking spaces @oliviertassinari
-- [github] Update `no-response` workflow (#12193) @MBilalShafi
+- [infra] Update `no-response` workflow (#12193) @MBilalShafi
 - [infra] Fix missing permission reset @oliviertassinari
 
 ## 7.0.0-beta.4
@@ -282,7 +465,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 ### Breaking changes
 
-- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
+- The support for IE11 has been removed from all MUI X packages. The `legacy` bundle that used to support old browsers like IE11 is no longer included.
 
 ### Data Grid
 
@@ -324,7 +507,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
 - The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
   This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
 
- When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
+  When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
 
   ```diff
     function MyCustomTextField(props) {
@@ -392,7 +575,7 @@ These components are no longer exported from `@mui/x-charts`:
 ### Docs
 
 - [docs] Add recipe for hiding separator on non-resizable columns (#12134) @michelengelen
-- [docs] Add small improvements to the Gauge Chart page (#12076) @danilo-leal
+- [docs] Add small improvements to the Gauge page (#12076) @danilo-leal
 - [docs] Add the 'point' scaleType to the axis documentation (#12179) @alexfauquette
 - [docs] Clarify Pickers 'Component composition' section (#12097) @LukasTy
 - [docs] Fix "Licensing" page link (#12156) @LukasTy
@@ -975,7 +1158,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 
 - [charts] Do not propagate `innerRadius` and `outerRadius` to the DOM (#11689) @alexfauquette
 - [charts] Fix default `stackOffset` for `LineChart` (#11647) @alexfauquette
-- [charts] Remove a TS ignore (#11688) @alexfauquette
+- [charts] Remove a TypeScript ignore (#11688) @alexfauquette
 
 ### Tree View
 
@@ -1404,7 +1587,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.7`.
 - [core] Fix release changelog (#11496) @romgrk
 - [core] Fix use of ::before & ::after (#11515) @oliviertassinari
 - [core] Localize the issue template to MUI X (#11511) @oliviertassinari
-- [core] Regen api files (#11542) @flaviendelangle
+- [core] Regenerate API files (#11542) @flaviendelangle
 - [core] Remove issue emoji @oliviertassinari
 - [core] Sync the release instructions with MUI Core @oliviertassinari
 - [core] Yaml format match most common convention @oliviertassinari
@@ -1447,7 +1630,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
 - The `filterModel` now supports `Date` objects as values for `date` and `dateTime` column types.
   The `filterModel` still accepts strings as values for `date` and `dateTime` column types,
-  but all updates to the `filterModel` coming from the UI (e.g. filter panel) will set the value as a `Date` object.
+  but all updates to the `filterModel` coming from the UI (for example filter panel) will set the value as a `Date` object.
 
 #### `@mui/x-data-grid@7.0.0-alpha.6`
 
@@ -1658,7 +1841,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus:
 ### Core
 
 - [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi
-- [github] Update `no-response` workflow (#11369) @MBilalShafi
+- [infra] Update `no-response` workflow (#11369) @MBilalShafi
 - [test] Fix flaky screenshots (#11388) @cherniavskii
 
 ## 7.0.0-alpha.4
@@ -1896,7 +2079,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
 
 - [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11144) @michelengelen
 - [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
-- [charts] Fix TS config (#11259) @alexfauquette
+- [charts] Fix TypeScript config (#11259) @alexfauquette
 - [charts] Fix error with empty dataset (#11063) @alexfauquette
 - [charts] Fix export strategy (#11235) @alexfauquette
 - [charts] Remove outdated prop-types (#11045) @alexfauquette

package/README.md

@@ -15,7 +15,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.0",
+  "@mui/material": "^5.15.14",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/context/CartesianContextProvider.js

@@ -100,7 +100,7 @@ function CartesianContextProvider(props) {
       return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis), [null, null]);
     };
     const allXAxis = [...(xAxis?.map((axis, index) => (0, _extends2.default)({
-      id: `deaultized-x-axis-${index}`
+      id: `defaultized-x-axis-${index}`
     }, axis)) ?? []),
     // Allows to specify an axis with id=DEFAULT_X_AXIS_KEY
     ...(xAxis === undefined || xAxis.findIndex(({
@@ -151,7 +151,7 @@ function CartesianContextProvider(props) {
       });
     });
     const allYAxis = [...(yAxis?.map((axis, index) => (0, _extends2.default)({
-      id: `deaultized-y-axis-${index}`
+      id: `defaultized-y-axis-${index}`
     }, axis)) ?? []), ...(yAxis === undefined || yAxis.findIndex(({
       id
     }) => id === _constants.DEFAULT_Y_AXIS_KEY) === -1 ? [{

package/esm/BarChart/BarChart.js

@@ -58,10 +58,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const defaultAxisConfig = {
     scaleType: 'band',
     data: Array.from({
-      length: Math.max(...series.map(s => {
-        var _ref, _s$data;
-        return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
-      }))
+      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
     }, (_, index) => index)
   };
   const defaultizedAxisHighlight = _extends({}, hasHorizontalSeries ? {
@@ -79,16 +76,16 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     width: width,
     height: height,
     margin: margin,
-    xAxis: xAxis != null ? xAxis : hasHorizontalSeries ? undefined : [_extends({
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
       id: DEFAULT_X_AXIS_KEY
-    }, defaultAxisConfig)],
-    yAxis: yAxis != null ? yAxis : hasHorizontalSeries ? [_extends({
+    }, defaultAxisConfig)]),
+    yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
       id: DEFAULT_Y_AXIS_KEY
-    }, defaultAxisConfig)] : undefined,
+    }, defaultAxisConfig)] : undefined),
     colors: colors,
     dataset: dataset,
     sx: sx,
-    disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none' && !onAxisClick,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/_jsx(ChartsGrid, {

package/esm/BarChart/BarElement.js

@@ -41,7 +41,6 @@ export const BarElementPath = styled(animated.rect, {
   opacity: ownerState.isFaded && 0.3 || 1
 }));
 function BarElement(props) {
-  var _slots$bar;
   const {
       id,
       dataIndex,
@@ -77,10 +76,10 @@ function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Bar = (_slots$bar = slots == null ? void 0 : slots.bar) != null ? _slots$bar : BarElementPath;
+  const Bar = slots?.bar ?? BarElementPath;
   const barProps = useSlotProps({
     elementType: Bar,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.bar,
+    externalSlotProps: slotProps?.bar,
     additionalProps: _extends({}, other, getInteractionItemProps({
       type: 'bar',
       seriesId: id,

package/esm/BarChart/BarPlot.js

@@ -38,8 +38,7 @@ function getBandSize({
   };
 }
 const useAggregatedData = () => {
-  var _React$useContext$bar;
-  const seriesData = (_React$useContext$bar = React.useContext(SeriesContext).bar) != null ? _React$useContext$bar : {
+  const seriesData = React.useContext(SeriesContext).bar ?? {
     series: {},
     stackingGroups: [],
     seriesOrder: []
@@ -61,9 +60,8 @@ const useAggregatedData = () => {
     ids: groupIds
   }, groupIndex) => {
     return groupIds.flatMap(seriesId => {
-      var _series$seriesId$xAxi, _series$seriesId$yAxi;
-      const xAxisKey = (_series$seriesId$xAxi = series[seriesId].xAxisKey) != null ? _series$seriesId$xAxi : defaultXAxisId;
-      const yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
+      const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
+      const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
       const xAxisConfig = xAxis[xAxisKey];
       const yAxisConfig = yAxis[yAxisKey];
       const verticalLayout = series[seriesId].layout === 'vertical';
@@ -102,7 +100,6 @@ const useAggregatedData = () => {
         color
       } = series[seriesId];
       return stackedData.map((values, dataIndex) => {
-        var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.min(...valueCoordinates);
         const maxValueCoord = Math.max(...valueCoordinates);
@@ -110,8 +107,8 @@ const useAggregatedData = () => {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
-          x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _yAxis$yAxisKey$data[dataIndex]) + barOffset,
+          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
           xOrigin: xScale(0),
           yOrigin: yScale(0),
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,

package/esm/BarChart/extremums.js

@@ -1,10 +1,9 @@
 const getBaseExtremum = params => {
-  var _axis$data, _axis$data2;
   const {
     axis
   } = params;
-  const minX = Math.min(...((_axis$data = axis.data) != null ? _axis$data : []));
-  const maxX = Math.max(...((_axis$data2 = axis.data) != null ? _axis$data2 : []));
+  const minX = Math.min(...(axis.data ?? []));
+  const maxX = Math.max(...(axis.data ?? []));
   return [minX, maxX];
 };
 const getValueExtremum = params => {

package/esm/BarChart/formatter.js

@@ -4,7 +4,6 @@ import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
 let warnOnce = false;
 const formatter = (params, dataset) => {
-  var _ref;
   const {
     seriesOrder,
     series
@@ -12,7 +11,7 @@ const formatter = (params, dataset) => {
   const stackingGroups = getStackingGroups(params);
 
   // Create a data set with format adapted to d3
-  const d3Dataset = (_ref = dataset) != null ? _ref : [];
+  const d3Dataset = dataset ?? [];
   seriesOrder.forEach(id => {
     const data = series[id].data;
     if (data !== undefined) {
@@ -41,10 +40,7 @@ const formatter = (params, dataset) => {
       // Use dataKey if needed and available
       const dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).value((d, key) => {
-      var _d$key;
-      return (_d$key = d[key]) != null ? _d$key : 0;
-    }) // defaultize null value to 0
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
     .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;

package/esm/ChartsAxis/ChartsAxis.js

@@ -11,15 +11,14 @@ const getAxisId = propsValue => {
     return null;
   }
   if (typeof propsValue === 'object') {
-    var _propsValue$axisId;
-    return (_propsValue$axisId = propsValue.axisId) != null ? _propsValue$axisId : null;
+    return propsValue.axisId ?? null;
   }
   return propsValue;
 };
 const mergeProps = (axisConfig, slots, slotProps) => {
   return typeof axisConfig === 'object' ? _extends({}, axisConfig, {
-    slots: _extends({}, slots, axisConfig == null ? void 0 : axisConfig.slots),
-    slotProps: _extends({}, slotProps, axisConfig == null ? void 0 : axisConfig.slotProps)
+    slots: _extends({}, slots, axisConfig?.slots),
+    slotProps: _extends({}, slotProps, axisConfig?.slotProps)
   }) : {
     slots,
     slotProps

package/esm/ChartsLegend/ChartsLegend.js

@@ -31,7 +31,6 @@ const defaultProps = {
   direction: 'row'
 };
 function ChartsLegend(inProps) {
-  var _slots$legend;
   const props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsLegend'
@@ -50,10 +49,10 @@ function ChartsLegend(inProps) {
   const drawingArea = React.useContext(DrawingContext);
   const series = React.useContext(SeriesContext);
   const seriesToDisplay = getSeriesToDisplay(series);
-  const ChartLegendRender = (_slots$legend = slots == null ? void 0 : slots.legend) != null ? _slots$legend : DefaultChartsLegend;
+  const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;
   const chartLegendRenderProps = useSlotProps({
     elementType: ChartLegendRender,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.legend,
+    externalSlotProps: slotProps?.legend,
     additionalProps: {
       position,
       direction,

package/esm/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -26,7 +26,6 @@ function ChartsOnAxisClickHandler(props) {
       return () => {};
     }
     const handleMouseClick = event => {
-      var _USED_AXIS_ID$data;
       event.preventDefault();
       const isXaxis = (axis.x && axis.x.index) !== undefined;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
@@ -36,8 +35,7 @@ function ChartsOnAxisClickHandler(props) {
       }
       const seriesValues = {};
       Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
-        var _series$seriesType;
-        (_series$seriesType = series[seriesType]) == null || _series$seriesType.seriesOrder.forEach(seriesId => {
+        series[seriesType]?.seriesOrder.forEach(seriesId => {
           const seriesItem = series[seriesType].series[seriesId];
           const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey;
           if (axisKey === undefined || axisKey === USED_AXIS_ID) {
@@ -45,7 +43,7 @@ function ChartsOnAxisClickHandler(props) {
           }
         });
       });
-      const axisValue = (_USED_AXIS_ID$data = (isXaxis ? xAxis : yAxis)[USED_AXIS_ID].data) == null ? void 0 : _USED_AXIS_ID$data[dataIndex];
+      const axisValue = (isXaxis ? xAxis : yAxis)[USED_AXIS_ID].data?.[dataIndex];
       onAxisClick(event, {
         dataIndex,
         axisValue,

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -49,7 +49,6 @@ export function getXReferenceLineClasses(classes) {
 }
 let warnedOnce = false;
 function ChartsXReferenceLine(props) {
-  var _spacing$x, _spacing$y;
   const {
     x,
     label = '',
@@ -77,8 +76,8 @@ function ChartsXReferenceLine(props) {
   }
   const d = `M ${xPosition} ${top} l 0 ${height}`;
   const classes = getXReferenceLineClasses(inClasses);
-  const spacingX = typeof spacing === 'object' ? (_spacing$x = spacing.x) != null ? _spacing$x : 0 : spacing;
-  const spacingY = typeof spacing === 'object' ? (_spacing$y = spacing.y) != null ? _spacing$y : 0 : spacing;
+  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
+  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
   const textParams = _extends({
     x: xPosition + spacingX,
     text: label,

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -49,7 +49,6 @@ export function getYReferenceLineClasses(classes) {
   }, getReferenceLineUtilityClass, classes);
 }
 function ChartsYReferenceLine(props) {
-  var _spacing$x, _spacing$y;
   const {
     y,
     label = '',
@@ -77,8 +76,8 @@ function ChartsYReferenceLine(props) {
   }
   const d = `M ${left} ${yPosition} l ${width} 0`;
   const classes = getYReferenceLineClasses(inClasses);
-  const spacingX = typeof spacing === 'object' ? (_spacing$x = spacing.x) != null ? _spacing$x : 0 : spacing;
-  const spacingY = typeof spacing === 'object' ? (_spacing$y = spacing.y) != null ? _spacing$y : 0 : spacing;
+  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
+  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
   const textParams = _extends({
     y: yPosition - spacingY,
     text: label,

package/esm/ChartsText/ChartsText.js

@@ -17,7 +17,7 @@ function ChartsText(props) {
       text
     } = props,
     textProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const _ref = styleProps != null ? styleProps : {},
+  const _ref = styleProps ?? {},
     {
       angle,
       textAnchor,

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -42,7 +42,7 @@ function ChartsAxisTooltipContent(props) {
   const relevantAxis = React.useMemo(() => {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
-  const Content = content != null ? content : DefaultChartsAxisTooltipContent;
+  const Content = content ?? DefaultChartsAxisTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,
     externalSlotProps: contentProps,

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -14,7 +14,7 @@ function ChartsItemTooltipContent(props) {
     contentProps
   } = props;
   const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
-  const Content = content != null ? content : DefaultChartsItemTooltipContent;
+  const Content = content ?? DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,
     externalSlotProps: contentProps,

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -49,7 +49,6 @@ const ChartsTooltipRoot = styled(Popper, {
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
 function ChartsTooltip(props) {
-  var _slots$popper, _slots$itemContent, _slots$axisContent;
   const themeProps = useThemeProps({
     props,
     name: 'MuiChartsTooltip'
@@ -72,10 +71,10 @@ function ChartsTooltip(props) {
   const classes = useUtilityClasses({
     classes: themeProps.classes
   });
-  const PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
+  const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({
     elementType: PopperComponent,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.popper,
+    externalSlotProps: slotProps?.popper,
     additionalProps: {
       open: popperOpen,
       placement: 'right-start',
@@ -90,16 +89,16 @@ function ChartsTooltip(props) {
     children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
         itemData: displayedData,
-        content: (_slots$itemContent = slots == null ? void 0 : slots.itemContent) != null ? _slots$itemContent : itemContent,
-        contentProps: slotProps == null ? void 0 : slotProps.itemContent,
+        content: slots?.itemContent ?? itemContent,
+        contentProps: slotProps?.itemContent,
         sx: {
           mx: 2
         },
         classes: classes
       }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
         axisData: displayedData,
-        content: (_slots$axisContent = slots == null ? void 0 : slots.axisContent) != null ? _slots$axisContent : axisContent,
-        contentProps: slotProps == null ? void 0 : slotProps.axisContent,
+        content: slots?.axisContent ?? axisContent,
+        contentProps: slotProps?.axisContent,
         sx: {
           mx: 2
         },