Skip to content

Releases: mui/mui-x

v6.0.0-alpha.2

07 Oct 10:08
bccae7b
Compare
Choose a tag to compare
v6.0.0-alpha.2 Pre-release
Pre-release

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

  • 🚀 Further progress on stabilizing new date field components
  • 🎁 Improve support for theme augmentation in the DataGrid (#6269) @cherniavskii
  • 🌍 Add Japanese (ja-JP) locale to pickers (#6365) @sho918
  • 📚 Documentation improvements
  • 🐞 Bugfixes

@mui/x-data-grid@v6.0.0-alpha.2 / @mui/x-data-grid-pro@v6.0.0-alpha.2 / @mui/x-data-grid-premium@v6.0.0-alpha.2

Breaking changes

  • 🎁 The aggregation is no longer experimental.

    You can now use the aggregation without the experimentalFeatures.aggregation flag enabled.

    <DataGridPremium
    -  experimentalFeatures={{ aggregation: true }}
    />

    The aggregation of the columns through the column menu is now enabled by default on DataGridPremium. You can set disableAggregation={true} to disable it.

Changes

@mui/x-date-pickers@v6.0.0-alpha.2 / @mui/x-date-pickers-pro@v6.0.0-alpha.2

Breaking changes

  • The renderDay prop has been replaced by a Day component slot.
    You can find more information about this pattern in the MUI Base documentation.

    // Same for any other date, date time or date range picker.
    <DatePicker
    -  renderDay={(_, dayProps) => <CustomDay {...dayProps} />}
    +  components={{ Day: CustomDay }}
    />

Changes

Docs

Core

v5.17.6

06 Oct 15:58
5390832
Compare
Choose a tag to compare

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

  • 🌍 Add Japanese (ja-JP) locale to pickers (#6365) @sho918
  • 🎁 Improve support for theme augmentation in the DataGrid (#6406) @cherniavskii
  • 🐞 Bugfixes

@mui/x-data-grid@v5.17.6 / @mui/x-data-grid-pro@v5.17.6 / @mui/x-data-grid-premium@v5.17.6

Changes

@mui/x-date-pickers@v5.0.4 / @mui/x-date-pickers-pro@v5.0.4

Changes

Docs

v6.0.0-alpha.1

29 Sep 23:03
8f07ecc
Compare
Choose a tag to compare
v6.0.0-alpha.1 Pre-release
Pre-release

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

@mui/x-data-grid@v6.0.0-alpha.1 / @mui/x-data-grid-pro@v6.0.0-alpha.1 / @mui/x-data-grid-premium@v6.0.0-alpha.1

Breaking changes

  • New internal rows structure for v6 (#4927) @flaviendelangle

    Some selectors related to the rows have been renamed to better describe the type of rows they are returning:

    -const result = gridRowsIdToIdLookupSelector(apiRef);
    +const result = gridRowsDataRowIdToIdLookupSelector(apiRef);
    -const result = gridRowTreeDepthSelector(apiRef);
    +const result = gridRowMaximumTreeDepthSelector(apiRef);

    The format of the tree nodes (the element accessible in params.node or with the apiRef.current.getRowNode method) have changed.
    You have a new type property, which can be useful, for example, to apply custom behavior on groups.
    Here is an example of the old and new approach showing how to apply a custom value formatter in groups for the grouping column:

     <DataGridPremium 
       groupingColDef={() => ({
         valueFormatter: (params) => {
           if (params.id == null) {
             return params.value;
           }
    
           const rowNode = apiRef.current.getRowNode(params.id!)!;
    -      if (rowNode.children?.length) {
    +      if (rowNode.type === 'group') {
             return `by ${rowNode.groupingKey ?? ''}`;
           }
    
           return params.value;
         }
       })}
     />
  • The GridFeatureModeConstant constant no longer exists (#6077) @DanailH

    -import { GridFeatureModeConstant } from '@mui/x-data-grid';

Changes

@mui/x-date-pickers@v6.0.0-alpha.1 / @mui/x-date-pickers-pro@v6.0.0-alpha.1

Breaking changes

  • [pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle

    The value prop of the pickers now expects a parsed value.
    Until now, it was possible to provide any format that your date management library was able to parse.
    For instance, you could pass value={new Date()} when using AdapterDayjs.

    This brought a lot of confusion so we decided to remove this behavior.
    The format expected by the value prop is now the same as for any other prop holding a date.
    Here is the syntax to initialize a date picker at the current date for each adapter:

    // Date-fns
    <DatePicker value={new Date()} />
    
    // Dayjs
    import dayjs from 'dayjs'
    <DatePicker value={dayjs()} />
    
    // Moment
    import moment from 'moment'
    <DatePicker value={moment()} />
    
    // Luxon
    import { DateTime } from 'luxon'
    <DatePicker value={DateTime.now()} />

Changes

Docs

Core

v5.17.5

29 Sep 23:37
c25410b
Compare
Choose a tag to compare

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

  • 🎁 Add theme augmentation module to DataGridPremium (#6316) @cherniavskii
  • 👀 Fix blank space when changing page with dynamic row height (#6320) @m4theushw
  • 📚 Improve controlled editing demo to make easier to reuse it (#6306) @cherniavskii
  • 🐞 Bugfixes

@mui/x-data-grid@v5.17.5 / @mui/x-data-grid-pro@v5.17.5 / @mui/x-data-grid-premium@v5.17.5

Changes

Docs

  • [docs] Pass model change callbacks in controlled grid editing demos (#6306) @cherniavskii

Core

v6.0.0-alpha.0

23 Sep 15:11
1165f87
Compare
Choose a tag to compare
v6.0.0-alpha.0 Pre-release
Pre-release

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

  • 🌍 Add a localeText prop to all pickers to customize the translations (#6212) @flaviendelangle
  • 🌍 Add Finnish (fi-FI) locale to the pickers (#6219) @PetroSilenius
  • 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
  • 📚 Documentation improvements
  • 🐞 Bugfixes

@mui/x-data-grid@v6.0.0-alpha.0 / @mui/x-data-grid-pro@v6.0.0-alpha.0 / @mui/x-data-grid-premium@v6.0.0-alpha.0

Breaking changes

  • The deprecated hide column property has been removed in favor of the columnVisibilityModel prop and initial state. (#5999) @flaviendelangle

     <DataGrid
       columns={[
         field: 'id,
    -    hide: true,
       ]}
    +  initialState={{
    +    columns: {
    +      columnVisibilityModel: { id: false },
    +    }
    +  }}
     />

    You can find more information about this new API on our documentation.

  • The GridEvents enum is now a TypeScript type. (#6003) @flaviendelangle

    -apiRef.current.subscribeEvent(GridEvents.rowClick', handleRowClick)
    +apiRef.current.subscribeEvent('rowClick', handleRowClick)

Changes

@mui/x-date-pickers@v6.0.0-alpha.0 / @mui/x-date-pickers-pro@v6.0.0-alpha.0

Breaking changes

  • All the deprecated props that allowed you to set the text displayed in the pickers have been removed.

    You can now use the localText prop available on all picker components:

    Removed prop Property in the new localText prop
    endText end
    getClockLabelText clockLabelText
    getHoursClockNumberText hoursClockNumberText
    getMinutesClockNumberText minutesClockNumberText
    getSecondsClockNumberText secondsClockNumberText
    getViewSwitchingButtonText calendarViewSwitchingButtonAriaLabel
    leftArrowButtonText openPreviousView (or previousMonth when the button changes the visible month)
    rightArrowButtonText openNextView (or nextMonth when the button changes the visible month)
    startText start

    For instance if you want to replace the startText / endText

    <DateRangePicker
    -  startText="From"
    -  endText="To"
    +  localeText={{
    +    start: 'From',
    +    end: 'To',
    +  }}
    />

You can find more information about the new api, including how to set those translations on all your components at once in the documentation

  • The component slots LeftArrowButton and RightArrowButton have been renamed PreviousIconButton and NextIconButton to better describe there usage:

    <DatePicker 
      components={{
    -   LeftArrowButton: CustomButton,  
    +   PreviousIconButton: CustomButton,
    
    -   RightArrowButton: CustomButton,
    +   NextIconButton: CustomButton,
      }}
    
      componentsProps={{
    -   leftArrowButton: {},  
    +   previousIconButton: {},
    
    -   rightArrowButton: {},
    +   nextIconButton: {},
      }}
    />
  • The date prop has been renamed value on MonthPicker / YearPicker, ClockPicker and CalendarPicker.

    - <MonthPicker date={dayjs()} onChange={handleMonthChange} />
    + <MonthPicker value={dayjs()} onChange={handleMonthChange} />
    
    - <YearPicker date={dayjs()} onChange={handleYearChange} />
    + <YearPicker value={dayjs()} onChange={handleYearChange} />
    
    - <ClockPicker date={dayjs()} onChange={handleTimeChange} />
    + <ClockPicker value={dayjs()} onChange={handleTimeChange} />
    
    - <CalendarPicker date={dayjs()} onChange={handleDateChange} />
    + <CalendarPicker value={dayjs()} onChange={handleDateChange} />

Changes

Docs

Core

v5.17.4

23 Sep 14:49
147beb6
Compare
Choose a tag to compare

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

@mui/x-data-grid@v5.17.4 / @mui/x-data-grid-pro@v5.17.4 / @mui/x-data-grid-premium@v5.17.4

Changes

@mui/x-date-pickers@v5.0.3 / @mui/x-date-pickers-pro@v5.0.3

Changes

Docs

Core

v5.17.3

16 Sep 13:41
9ae5ec5
Compare
Choose a tag to compare

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

  • 📝 Fix lost characters when typing into fields in the DataGrid (#5646) @m4theushw
  • 🌏 New locale and improvements for pickers
  • 🎁 Improve support to theme augmentation for pickers

@mui/x-data-grid@v5.17.3 / @mui/x-data-grid-pro@v5.17.3 / @mui/x-data-grid-premium@v5.17.3

Changes

  • [DataGrid] Only update input with value prop if debounce is off (#5646) @m4theushw

@mui/x-date-pickers@v5.0.2 / @mui/x-date-pickers-pro@v5.0.2

Changes

Docs

Core

v5.17.2

09 Sep 09:32
Compare
Choose a tag to compare

This release will the last regular release for our v5 packages.
From now on, we'll be focusing on developing MUI X v6.
You can check the roadmap for more details on what's coming next.

And if you'd like to help, please consider volunteering to give us a user interview.
We'd love to know more about your use cases, pain points and expectations for the future.

The v5 packages will only get new versions to patch critical bug fixes.

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

  • 📃 Add support for column grouping when exporting to Excel (#5895) @alexfauquette
  • 🐞 Bugfixes

@mui/x-data-grid@v5.17.2 / @mui/x-data-grid-pro@v5.17.2 / @mui/x-data-grid-premium@v5.17.2

Changes

  • [DataGrid] Revert mode if cell/row couldn't be saved due to validation error (#5897) @m4theushw
  • [DataGridPremium] Export column grouping in Excel (#5895) @alexfauquette

@mui/x-date-pickers@v5.0.1 / @mui/x-date-pickers-pro@v5.0.1

Changes

Docs

  • [docs] Add Recipes section

Core

v5.17.1

05 Sep 10:59
f36808e
Compare
Choose a tag to compare

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

  • 🐞 Bugfixes

@mui/x-data-grid@v5.17.1 / @mui/x-data-grid-pro@v5.17.1 / @mui/x-data-grid-premium@v5.17.1

Changes

v5.17.0

02 Sep 13:54
0ea9329
Compare
Choose a tag to compare

🎉 We are excited to finally introduce a stable release (v5.0.0) for the @mui/x-date-pickers and @mui/x-date-pickers-pro packages!

If you are still using picker components from the lab, take a look at the migration guide.

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

  • 🎁 Implement Lazy loading (#5214) @DanailH

    Pro users now can try the experimental lazy loading feature.
    In a few steps, you can load your data on demand, as the rows are displayed.

    To enable this feature, add experimentalFeatures={{ lazyLoading: true }}.
    Lazy Loading requires a few other settings.
    See the documentation to explore the example in detail.

  • 🚀 Improve pickers focus management (#5820) @alexfauquette

  • 🎉 Enable disabling day on date range picker depending on position (#5773) @alexfauquette

  • ✨ Various improvements

  • 📚 Documentation improvements

  • 🐞 Bugfixes

@mui/x-data-grid@v5.17.0 / @mui/x-data-grid-pro@v5.17.0 / @mui/x-data-grid-premium@v5.17.0

Changes

@mui/x-date-pickers@v5.0.0 / @mui/x-date-pickers-pro@v5.0.0

Changes

Docs

Core