Skip to content

v8.0.0-alpha.13

Pre-release
Pre-release
Compare
Choose a tag to compare
@alexfauquette alexfauquette released this 28 Feb 16:07
· 1 commit to master since this release
v8.0.0-alpha.13
7746150
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

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/[email protected]

@mui/[email protected] pro

Same changes as in @mui/[email protected], plus:

@mui/[email protected] premium

Same changes as in @mui/[email protected], 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/[email protected]

@mui/[email protected] pro

Same changes as in @mui/[email protected].

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/[email protected]

@mui/[email protected] pro

Same changes as in @mui/[email protected], plus:

Tree View

@mui/[email protected]

Internal changes.

@mui/[email protected] pro

Same changes as in @mui/[email protected].

@mui/[email protected]

Docs

Contributors

noherczeg, romgrk, and 17 other contributors
Assets 2
Loading