Skip to content

Releases: mui/mui-x

v7.0.0-alpha.1

17 Nov 15:23
4dac1ee
Compare
Choose a tag to compare
v7.0.0-alpha.1 Pre-release
Pre-release

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

  • 🐞 Bugfixes
  • 📚 Documentation improvements

Date Pickers

@mui/x-date-pickers@7.0.0-alpha.1 / @mui/x-date-pickers-pro@7.0.0-alpha.1 pro

Breaking changes

  • The string argument of the dayOfWeekFormatter prop has been replaced in favor of the date object to allow more flexibility.

     <DateCalendar
       // If you were still using the day string, you can get it back with your date library.
    -  dayOfWeekFormatter={dayStr => `${dayStr}.`}
    +  dayOfWeekFormatter={day => `${day.format('dd')}.`}
    
       // If you were already using the day object, just remove the first argument.
    -  dayOfWeekFormatter={(_dayStr, day) => `${day.format('dd')}.`}
    +  dayOfWeekFormatter={day => `${day.format('dd')}.`}
     />
  • The imports related to the calendarHeader slot have been moved from @mui/x-date-pickers/DateCalendar to @mui/x-date-pickers/PIckersCalendarHeader:

     export {
       pickersCalendarHeaderClasses,
       PickersCalendarHeaderClassKey,
       PickersCalendarHeaderClasses,
       PickersCalendarHeader,
       PickersCalendarHeaderProps,
       PickersCalendarHeaderSlotsComponent,
       PickersCalendarHeaderSlotsComponentsProps,
       ExportedPickersCalendarHeaderProps,
    -} from '@mui/x-date-pickers/DateCalendar';
    +} from '@mui/x-date-pickers/PickersCalendarHeader';
    
  • The monthAndYear format has been removed.
    It was used in the header of the calendar views, you can replace it with the new format prop of the calendarHeader slot:

     <LocalizationProvider
       adapter={AdapterDayJS}
    -  formats={{ monthAndYear: 'MM/YYYY' }}
     />
       <DatePicker
    +    slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
       />
       <DateRangePicker
    +    slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
       />
     <LocalizationProvider />
  • The adapter.getDiff method have been removed, you can directly use your date library:

     // For Day.js
    -const diff = adapter.getDiff(value, comparing, unit);
    +const diff = value.diff(comparing, unit);
    
     // For Luxon
    -const diff = adapter.getDiff(value, comparing, unit);
    +const getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => {
    +  const parsedComparing = typeof comparing === 'string'
    +    ? DateTime.fromJSDate(new Date(comparing))
    +    : comparing;
    +  if (unit) {
    +    return Math.floor(value.diff(comparing).as(unit));
    +  }
    +  return value.diff(comparing).as('millisecond');
    +};
    +
    +const diff = getDiff(value, comparing, unit);
    
      // For DateFns
    -const diff = adapter.getDiff(value, comparing, unit);
    +const getDiff = (value: Date, comparing: Date | string, unit?: AdapterUnits) => {
    +  const parsedComparing = typeof comparing === 'string' ? new Date(comparing) : comparing;
    +  switch (unit) {
    +    case 'years':
    +      return dateFns.differenceInYears(value, parsedComparing);
    +    case 'quarters':
    +      return dateFns.differenceInQuarters(value, parsedComparing);
    +    case 'months':
    +      return dateFns.differenceInMonths(value, parsedComparing);
    +    case 'weeks':
    +      return dateFns.differenceInWeeks(value, parsedComparing);
    +    case 'days':
    +      return dateFns.differenceInDays(value, parsedComparing);
    +    case 'hours':
    +      return dateFns.differenceInHours(value, parsedComparing);
    +    case 'minutes':
    +      return dateFns.differenceInMinutes(value, parsedComparing);
    +    case 'seconds':
    +      return dateFns.differenceInSeconds(value, parsedComparing);
    +    default: {
    +      return dateFns.differenceInMilliseconds(value, parsedComparing);
    +    }
    +  }
    +};
    +
    +const diff = getDiff(value, comparing, unit);
    
     // For Moment
    -const diff = adapter.getDiff(value, comparing, unit);
    +const diff = value.diff(comparing, unit);
  • The adapter.getFormatHelperText method have been removed, you can use the adapter.expandFormat instead:

-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format);

And if you need the exact same output you can apply the following transformation:

 // For Day.js
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();

 // For Luxon
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();

 // For DateFns
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();

 // For Moment
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
  • The adapter.getMeridiemText method have been removed, you can use the adapter.setHours, adapter.date and adapter.format methods to recreate its behavior:

    -const meridiem = adapter.getMeridiemText('am');
    +const getMeridiemText = (meridiem: 'am' | 'pm') => {
    +  const date = adapter.setHours(adapter.date()!, meridiem === 'am' ? 2 : 14);
    +  return utils.format(date, 'meridiem');
    +};
    +
    +const meridiem = getMeridiemText('am');
  • The adapter.getMonthArray method have been removed, you can use the adapter.startOfYear and adapter.addMonths methods to recreate its behavior:

    -const monthArray = adapter.getMonthArray(value);
    +const getMonthArray = (year) => {
    +  const firstMonth = utils.startOfYear(year);
    +  const months = [firstMonth];
    +
    +  while (months.length < 12) {
    +    const prevMonth = months[months.length - 1];
    +    months.push(utils.addMonths(prevMonth, 1));
    +  }
    +
    +  return months;
    +}
    +
    +const monthArray = getMonthArray(value);
  • The adapter.getNextMonth method have been removed, you can use the adapter.addMonths method instead:

    -const nextMonth = adapter.getNextMonth(value);
    +const nextMonth = adapter.addMonths(value, 1);
  • The adapter.getPreviousMonth method have been removed, you can use the adapter.addMonths method instead:

    -const previousMonth = adapter.getPreviousMonth(value);
    +const previousMonth = adapter.addMonths(value, -1);
  • The adapter.getWeekdays method have been removed, you can use the adapter.startOfWeek and adapter.addDays methods instead:

    -const weekDays = adapter.getWeekdays(value);
    +const getWeekdays = (value) => {
    +  const start = adapter.startOfWeek(value);
    +  return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff));
    +};
    +
    +const weekDays = getWeekdays(value);
  • The isNull method have been removed, you can replace it with a very basic check:

    -const isNull = adapter.isNull(value);
    +const isNull = value === null;
  • The adapter.mergeDateAndTime method have been removed, you can use the adapter.setHours, adapter.setMinutes, and adapter.setSeconds methods to recreate its behavior:

    -const result = adapter.mergeDateAndTime(valueWithDate, valueWithTime);
    +const mergeDateAndTime = <TDate>(
    +   dateParam,
    +   timeParam,
    + ) => {
    +   let mergedDate = dateParam;
    +   mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
    +   mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
    +   mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
    +
    +   return mergedDate;
    + };
    +
    +const result = mergeDateAndTime(valueWithDate, valueWithTime);
  • The adapter.parseISO method have been removed, you can directly use your date library:

     // For Day.js
    -const value = adapter.parseISO(isoString);
    +const value = dayjs(isoString);
    
     // For Luxon
    -const value = adapter.parseISO(isoString);
    +const value = DateTime.fromISO(isoString);
    
     // For DateFns
    -const value = adapter.parseISO(isoString);
    +const value = dateFns.parseISO(isoString);
    
     // For Moment
    -const value = adapter.parseISO(isoString);
    +const value = moment(isoString, true);
  • The adapter.toISO method have been removed, you can directly use your date library:

    -const isoString = adapter.toISO(value);
    +const isoString = value.toISOString();
    +const isoString = value.toUTC().toISO({ format: 'extended' });
    +const isoString = dateFns.formatISO(value, { format: 'extended' });
    +const isoString = value.toISOString();
  • The adapter.isEqual method used to accept any type of value for its two input and tried to parse them before checking if they were equal.
    The method has been simplified and now only accepts an already-parsed date or null (ie: the same formats used by the value prop in the pickers)

     const adapterDayjs = new AdapterDayjs();
     const adapterLuxon = new AdapterLuxon();
     const adapterDateFns = new AdapterDateFns();
     const adapterMoment = new AdatperMoment();
    
     // Supported formats
     const isEqual = adapterDayjs.isEqual(null, null); // Same for the other adapters
     const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
     const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
     const isEqual = adapterDateFns.isEqual(new Date(), new Date('2022-04-17'));
    
     // Non-supported formats (JS Date)
    -const isEqual = adapterDayjs.isEqual(new Date(), new Date('2022-04-17'));...
Read more

v7.0.0-alpha.0

10 Nov 10:57
9ef001a
Compare
Choose a tag to compare
v7.0.0-alpha.0 Pre-release
Pre-release

We're thrilled to announce the first alpha release of our next major version, v7.
This release introduces a few breaking changes, paving the way for the upcoming features like Pivoting and DateTimeRangePicker.

A special shoutout to thank the 12 contributors who made this release possible. Here are some highlights ✨:

  • 🚀 First v7 alpha release
  • ✨ Fix aggregation label not showing when renderHeader is used (#10961) @cherniavskii
  • 📘 Server side data source early documentation
  • 💫 New recipes added for the data grid
  • 📈 <ChartsReferenceLine /> component is now available
  • 🌍 Add Basque (eu) locale, improve Czech (cs-CZ) and Spanish (es-ES) locales
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

Breaking changes

  • The deprecated components and componentsProps props have been removed. Use slots and slotProps instead. See components section for more details.
  • The print export will now only print the selected rows if there are any.
    If there are no selected rows, it will print all rows. This makes the print export consistent with the other exports.
    You can customize the rows to export by using the getRowsToExport function.
  • The getApplyFilterFnV7 in GridFilterOperator was renamed to getApplyFilterFn.
    If you use getApplyFilterFnV7 directly - rename it to getApplyFilterFn.
  • The signature of the function returned by getApplyFilterFn has changed for performance reasons:
 const getApplyFilterFn: GetApplyFilterFn<any, unknown> = (filterItem) => {
   if (!filterItem.value) {
     return null;
   }
   const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
-  return (cellParams) => {
-    const { value } = cellParams;
+  return (value, row, colDef, apiRef) => {
     return value != null ? filterRegex.test(String(value)) : false;
   };
 }
  • The getApplyQuickFilterFnV7 in GridColDef was renamed to getApplyQuickFilterFn.
    If you use getApplyQuickFilterFnV7 directly - rename it to getApplyQuickFilterFn.
  • The signature of the function returned by getApplyQuickFilterFn has changed for performance reasons:
 const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
   if (!value) {
     return null;
   }
   const filterRegex = new RegExp(escapeRegExp(value), 'i');
-  return (cellParams) => {
-    const { formattedValue } = cellParams;
+  return (value, row, column, apiRef) => {
+    let formattedValue = apiRef.current.getRowFormattedValue(row, column);
     return formattedValue != null ? filterRegex.test(formattedValue.toString()) : false;
   };
 };

@mui/x-data-grid@7.0.0-alpha.0

@mui/x-data-grid-pro@7.0.0-alpha.0 pro

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

  • [DataGridPro] Autosize Columns - Fix headers being cut off (#10666) @gitstart
  • [DataGridPro] Add data source interface and basic documentation (#10543) @MBilalShafi

@mui/x-data-grid-premium@7.0.0-alpha.0 premium

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

Date Pickers

Breaking changes

  • The deprecated components and componentsProps props have been removed. Use slots and slotProps instead.

@mui/x-date-pickers@7.0.0-alpha.0

@mui/x-date-pickers-pro@7.0.0-alpha.0 pro

Same changes as in @mui/x-date-pickers@7.0.0-alpha.0.

Charts / @mui/x-charts@7.0.0-alpha.0

Breaking changes

Types for slots and slotProps got renamed by removing the "Component" which is meaningless for charts.
Unless you imported those types, to create a wrapper, you should not be impacted by this breaking change.

Here is an example of the renaming for the <ChartsTooltip /> component.

-ChartsTooltipSlotsComponent
+ChartsTooltipSlots

-ChartsTooltipSlotComponentProps
+ChartsTooltipSlotProps

@mui/x-codemod@7.0.0-alpha.0

Docs

Core

v6.18.1

09 Nov 11:26
9be9e22
Compare
Choose a tag to compare

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

  • ✨ Fix aggregation label not showing when renderHeader is used (#10961) @cherniavskii
  • 📘 Server side data source early documentation published
  • 📈 <ChartsReferenceLine /> component is now available
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.18.1

@mui/x-data-grid-pro@6.18.1 pro

Same changes as in @mui/x-data-grid@6.18.1, plus:

@mui/x-data-grid-premium@6.18.1 premium

Same changes as in @mui/x-data-grid-pro@6.18.1, plus:

Date Pickers

@mui/x-date-pickers@6.18.1

@mui/x-date-pickers-pro@6.18.1 pro

Same changes as in @mui/x-date-pickers@6.18.1.

Charts / @mui/x-charts@6.18.1

Docs

Core

v6.18.0

03 Nov 14:08
7c69a03
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 ✨:

  • ✨ The data grid allows to ignore diacritics when filtering.
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.18.0

@mui/x-data-grid-pro@6.18.0 pro

Same changes as in @mui/x-data-grid@6.18.0.

@mui/x-data-grid-premium@6.18.0 premium

Same changes as in @mui/x-data-grid-pro@6.18.0.

Date Pickers

@mui/x-date-pickers@6.18.0

@mui/x-date-pickers-pro@6.18.0 pro

Same changes as in @mui/x-date-pickers@6.18.0.

Charts / @mui/x-charts@6.18.0

Docs

Core

  • [core] Generate slot API descriptions based on slots or components (#10879) @LukasTy

v6.17.0

27 Oct 11:58
5505a59
Compare
Choose a tag to compare

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

  • 🎁 The Tree View package is now officially stable!

tree-view-example

  • ✨ Improve the handling of non-numeric values by Data Grid aggregation
  • 🚀 Support lines with different domains on the line charts
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.17.0

@mui/x-data-grid-pro@6.17.0 pro

Same changes as in @mui/x-data-grid@6.17.0, plus:

  • [DataGridPro] Fix undefined values passed to valueFormatter for tree leaf nodes (#10748) @cherniavskii

@mui/x-data-grid-premium@6.17.0 premium

Same changes as in @mui/x-data-grid-pro@6.17.0, plus:

  • [DataGridPremium] Fix avg aggregation to ignore non-numeric values (#10787) @cherniavskii
  • [DataGridPremium] Fix size aggregation to ignore undefined values (#10745) @cherniavskii
  • [DataGridPremium] Fix sum aggregation to ignore non-numeric values (#10730) @cherniavskii
  • [DataGridPremium] Fix cell selection throwing index error on second page and beyond (#10784) @MBilalShafi

v6.16.3

20 Oct 18:53
b99c0d7
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 a Data Grid recipe for saving & restoring state
  • 💫 Support animations on the bar chart
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.16.3

  • [DataGrid] Allow passing readonly arrays to columns and sortingOrder props (#10686) @pcorpet

@mui/x-data-grid-pro@6.16.3 pro

Same changes as in @mui/x-data-grid@6.16.3.

@mui/x-data-grid-premium@6.16.3 premium

Same changes as in @mui/x-data-grid-pro@6.16.3.

Date Pickers

@mui/x-date-pickers@6.16.3

@mui/x-date-pickers-pro@6.16.3 pro

Same changes as in @mui/x-date-pickers@6.16.3, plus:

Charts / @mui/x-charts@6.0.0-alpha.16

Docs

Core

v6.16.2

12 Oct 15:53
723ed37
Compare
Choose a tag to compare

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

Data Grid

@mui/x-data-grid@6.16.2

@mui/x-data-grid-pro@6.16.2 pro

Same changes as in @mui/x-data-grid@6.16.2, plus:

  • [DataGridPro] Improve column grouping and column pinning friendship (#10518) @MBilalShafi

@mui/x-data-grid-premium@6.16.2 premium

Same changes as in @mui/x-data-grid-pro@6.16.2.

Date Pickers

@mui/x-date-pickers@6.16.2

@mui/x-date-pickers-pro@6.16.2 pro

Same changes as in @mui/x-date-pickers@6.16.2.

Charts / @mui/x-charts@6.0.0-alpha.15

Breaking changes

The charts have a new text display mechanism.
It adds line break support and avoids overlapping text in the legend.
This comes with some breaking changes.

  • The DOM structure is modified. An intermediary <tspan /> element has been added. This can impact how your style is applied.

    - <text>The label</text>
    + <text><tspan>The label</tspan></text>
  • The top margin has been reduced from 100 to 50 to benefit from the denser legend.

  • To accurately compute the text size and then place it, styling should be provided as a JS object. For example, to set the legend font size, you should do:

    <PieChart
      {/** ... */}
      slotProps={{
        legend: {
          labelStyle: {
            fontSize: 16,
          },
        },
      }}
    />

    Support for other text elements (axis labels and tick labels) will be implemented in follow-up PR.

Changes

Docs

Core

v6.16.1

06 Oct 09:10
b2caf84
Compare
Choose a tag to compare

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

  • 🥧 Support interaction with pie chart
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.16.1

@mui/x-data-grid-pro@6.16.1 pro

Same changes as in @mui/x-data-grid@6.16.1.

@mui/x-data-grid-premium@6.16.1 premium

Same changes as in @mui/x-data-grid-pro@6.16.1.

Date Pickers

@mui/x-date-pickers@6.16.1

@mui/x-date-pickers-pro@6.16.1 pro

Same changes as in @mui/x-date-pickers@6.16.1, plus:

Charts / @mui/x-charts@6.0.0-alpha.14

Docs

Core

v6.16.0

29 Sep 09:30
295f079
Compare
Choose a tag to compare

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

  • 🎁 Add a clearable behavior to all the single input pickers and fields (#9095) @noraleonte

    The pickers and fields now have an out-of-the box implementation for clearing the field value. You can see the documentation for this behavior on the Date Picker documentation.

    Clearable behavior
  • 💫 Add Date Picker customization playground (#9581) @noraleonte

    You can play around with style customization options on the Date Picker documentation.

    We are thrilled to hear your feedback about this functionality!

  • 🚀 Fix header filters menu auto closing on render (#10483) @MBilalShafi

  • 🎯 Fix column headers scroll when theme scoping is used (#10437) @cherniavskii

  • 🌍 Improve Russian (ru-RU) locale on the data grid

  • 🐞 Bugfixes

  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.16.0

@mui/x-data-grid-pro@6.16.0 pro

Same changes as in @mui/x-data-grid@6.16.0, plus:

@mui/x-data-grid-premium@6.16.0 premium

Same changes as in @mui/x-data-grid-pro@6.16.0.

Date Pickers

@mui/x-date-pickers@6.16.0

@mui/x-date-pickers-pro@6.16.0 pro

Same changes as in @mui/x-date-pickers@6.16.0.

Charts / @mui/x-charts@6.0.0-alpha.13

Tree View / @mui/x-tree-view@6.0.0-beta.0

Docs

Core

v6.15.0

22 Sep 16:05
e363104
Compare
Choose a tag to compare

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

  • 🚀 Implement columns auto-sizing (#10180) @romgrk
  • 🎁 Add support for getRowsToExport option to print export on the data grid (#10084) @zreecespieces
  • 🌍 Improve Finnish (fi-FI) locale
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Data Grid

@mui/x-data-grid@6.15.0

  • [DataGrid] Add support for getRowsToExport option to print export (#10084) @zreecespieces
  • [DataGrid] Fix dev warning about InputLabelProps (#10413) @romgrk
  • [DataGrid] Refactor GridMenu prop onClickAway to onClose (#10411) @romgrk
  • [DataGrid] Restore focus after GridMenu closes (#10412) @romgrk
  • [DataGrid] Fix typing of GridActionsCellItem (#10344) @romgrk
  • [DataGrid] Hide eval from bundlers (#10329) @romgrk
  • [DataGrid] Add border: 0 to unmounted focused cell to avoid layout shifts in that row (#10318) @lauri865

@mui/x-data-grid-pro@6.15.0 pro

Same changes as in @mui/x-data-grid@6.15.0, plus:

@mui/x-data-grid-premium@6.15.0 premium

Same changes as in @mui/x-data-grid-pro@6.15.0.

Date Pickers

@mui/x-date-pickers@6.15.0

@mui/x-date-pickers-pro@6.15.0 pro

Same changes as in @mui/x-date-pickers@6.15.0.

Charts / @mui/x-charts@6.0.0-alpha.12

Tree View / @mui/x-tree-view@6.0.0-alpha.4

Docs

Core