github mui/mui-x v8.0.0-alpha.13
on GitHub

pre-release9 hours ago

We'd like to offer a big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:

  • 📊 Decouple margin and axis-size. A new API to support multiple axes (#16418) @JCQuintas
  • 🗺️ Added Bangla (bn-BD) locale
  • 🗺️ Improve Russian (ru-RU) and Hungarian (hu-HU) locale on the Data Grid

Special thanks go out to the community members for their contributions:
@denpiligrim, @lhilgert9, @noherczeg, @officialkidmax, @pcorpet.
Following are all team members who have contributed to this release:
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @MBilalShafi, @oliviertassinari, @romgrk.

Data Grid

Breaking changes

  • The slots.baseFormControl component was removed.

  • The "Reset" button in the column visibility panel now resets to the initial column visibility model. Previously it was reset to the model that was active at the time the panel was opened. The reset behavior follows these rules:

    1. If an initial columnVisibilityModel is provided, it resets to that model.
    2. If a controlled columnVisibilityModel is provided, it resets to the first model value.
    3. When the columns are updated (via the columns prop or updateColumns() API method), the reset reference point updates to the current columnVisibilityModel.

    To revert to the previous behavior, provide a custom component to the slots.columnsManagement.

  • The deprecated LicenseInfo export has been removed from the @mui/x-data-grid-pro and @mui/x-data-grid-premium packages.
    You have to import it from @mui/x-license instead: 

    - import { LicenseInfo } from '@mui/x-data-grid-pro';
- import { LicenseInfo } from '@mui/x-data-grid-premium';
+ import { LicenseInfo } from '@mui/x-license';

 LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');

  • The row selection model has been changed from GridRowId[] to { type: 'include' | 'exclude'; ids: Set<GridRowId> }.
    Using Set allows for a more efficient row selection management.
    The exclude selection type allows to select all rows except the ones in the ids set.

    This change impacts the following props:

    • rowSelectionModel
    • onRowSelectionModelChange
    • initialState.rowSelectionModel 
    - const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>([]);
+ const [rowSelectionModel, setRowSelectionModel] = React.useState<GridRowSelectionModel>({ type: 'include', ids: new Set() });

    This change also impacts the gridRowSelectionStateSelector selector.
    For convenience, use the gridRowSelectionManagerSelector selector to handle both selection types: 

    - const rowSelection = gridRowSelectionStateSelector(apiRef);
- const isRowSelected = rowSelection.includes(rowId);
+ const rowSelectionManager = gridRowSelectionManagerSelector(apiRef);
+ const isRowSelected = rowSelectionManager.has(rowId);

    There is also a createRowSelectionManager utility function that can be used to manage the row selection: 

    const rowSelectionManager = createRowSelectionManager({
  type: 'include',
  ids: new Set(),
});
rowSelectionManager.select(rowId);
rowSelectionManager.unselect(rowId);
rowSelectionManager.has(rowId);

  • The selectedIdsLookupSelector selector has been removed. Use the gridRowSelectionManagerSelector or gridRowSelectionStateSelector selectors instead.

  • The selectedGridRowsSelector has been renamed to gridRowSelectionIdsSelector.

  • The selectedGridRowsCountSelector has been renamed to gridRowSelectionCountSelector.

  • The data source feature and its related props are now stable. 

     <DataGridPro
-  unstable_dataSource={dataSource}
-  unstable_dataSourceCache={cache}
-  unstable_lazyLoading
-  unstable_lazyLoadingRequestThrottleMs={100}
+  dataSource={dataSource}
+  dataSourceCache={cache}
+  lazyLoading
+  lazyLoadingRequestThrottleMs={100}
 />

  • The data source API is now stable. 

    - apiRef.current.unstable_dataSource.getRows()
+ apiRef.current.dataSource.getRows()

  • The signature of unstable_onDataSourceError() has been updated to support future use-cases. 

     <DataGrid
-  unstable_onDataSourceError={(error: Error, params: GridGetRowsParams) => {
-    if (params.filterModel) {
-      // do something
-    }
-  }}
+  unstable_onDataSourceError={(error: GridGetRowsError | GridUpdateRowError) => {
+    if (error instanceof GridGetRowsError && error.params.filterModel) {
+      // do something
+    }
+  }}
 />

  • Fix the type of the GridSortModel to allow readonly arrays.

  • GridSortItem interface is not exported anymore.

  • The showToolbar prop is now required to display the toolbar.

    It is no longer necessary to pass GridToolbar as a slot to display the default toolbar. 

     <DataGrid
+  showToolbar
-  slots={{
-    toolbar: GridToolbar,
-  }}
 />

@mui/x-data-grid@8.0.0-alpha.13

@mui/x-data-grid-pro@8.0.0-alpha.13 pro

Same changes as in @mui/x-data-grid@8.0.0-alpha.13, plus:

@mui/x-data-grid-premium@8.0.0-alpha.13 premium

Same changes as in @mui/x-data-grid-pro@8.0.0-alpha.13, plus:

Date and Time Pickers

Breaking changes

  • The <DateRangePicker /> now uses a dialog instead of a tooltip to render their view when used with a single input range field.

@mui/x-date-pickers@8.0.0-alpha.13

@mui/x-date-pickers-pro@8.0.0-alpha.13 pro

Same changes as in @mui/x-date-pickers@8.0.0-alpha.13.

Charts

Breaking changes

  • Charts array inputs are now readonly. Allowing externally defined as const to be used as a prop value of the React component. 

    const xAxis = [{ position: 'bottom' }] as const
<BarChart xAxis={xAxis} />

  • Replace topAxis, rightAxis, bottomAxis and leftAxis props by the position property in the axis config.
    If you were using them to place axis, set the position property to the corresponding value 'top' | 'right' | 'bottom' | 'left'.
    If you were disabling an axis by setting it to null, set its position to 'none'. 

     <LineChart
   yAxis={[
     {
       scaleType: 'linear',
+      position: 'right',
     },
   ]}
   series={[{ data: [1, 10, 30, 50, 70, 90, 100], label: 'linear' }]}
   height={400}
-  rightAxis={{}}
 />

  • Remove position prop from ChartsXAxis and ChartsYAxis.
    The position prop has been removed from the ChartsXAxis and ChartsYAxis components. Configure it directly in the axis config. 

     <ChartContainer
   yAxis={[
     {
       id: 'my-axis',
+      position: 'right',
     },
   ]}
 >
-  <ChartsYAxis axisId="my-axis" position="right" />
+  <ChartsYAxis axisId="my-axis" />
 </ChartContainer>

  • Add minTickLabelGap to x-axis, which allows users to define the minimum gap, in pixels, between two tick labels. The default value is 4px. Make sure to check your charts as the spacing between tick labels might have changed.

@mui/x-charts@8.0.0-alpha.13

@mui/x-charts-pro@8.0.0-alpha.13 pro

Same changes as in @mui/x-charts@8.0.0-alpha.13, plus:

Tree View

@mui/x-tree-view@8.0.0-alpha.13

Internal changes.

@mui/x-tree-view-pro@8.0.0-alpha.13 pro

Same changes as in @mui/x-tree-view@8.0.0-alpha.13.

@mui/x-codemod@8.0.0-alpha.13

Docs

Check out latest releases or
releases around mui/mui-x v8.0.0-alpha.13

Don't miss a new mui-x release

NewReleases is sending notifications on new releases.

Get notifications