@mui/x-codemod - npm Package Versions

7.10.0

Jul 11, 2024

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

• 🎁 Add selectors to support showing child row count in footer in the Data Grid
• ✨ New APIs for retrieving current item tree and item's children IDs in the Tree View
• 🌍 Improve Spanish (es-ES) locale on the Data Grid
• 🐞 Bugfixes
• 📚 Documentation improvements

Data Grid

7.9.0

Jul 5, 2024

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

• 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See Loading overlay docs for more details.
• 🌳 Add selectItem() and getItemDOMElement() methods to the TreeView component public API
• ⛏️ Make the usePickersTranslations hook public in the pickers component
• 🐞 Bugfixes

Data Grid

7.8.0

Jun 28, 2024

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

• 🛰 Introduce server-side data source for improved server integration in the Data Grid.

  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.

  To enable, provide a getRows function to the unstable_dataSource prop on the Data Grid component.

  const dataSource = {
    getRows: async (params: GridServerGetRowsParams) => {
      const data = await fetch(
        `https://api.example.com/data?${new URLSearchParams({
          page: params.page,
          pageSize: params.pageSize,
          sortModel: JSON.stringify(params.sortModel),
          filterModel: JSON.stringify(params.filterModel),
        }).toString()}`,
      );
      return {
        rows: data.rows,
        totalRows: data.totalRows,
      };
    },
  }
  <DataGridPro
    unstable_dataSource={dataSource}
    {...otherProps}
  />
  

  See server-side data documentation for more details.

• 📈 Support Date data on the BarChart component

• ↕️ Support custom column sort icons on the Data Grid

• 🖱️ Support modifying the expansion trigger on the Tree View components

Data Grid

7.7.0

Jun 13, 2024

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

• 🎁 Allow customization of the Pickers month and the year buttons
• 🌍 Improve Persian (fa-IR), Portuguese (pt-PT), and Russian (ru-RU) locales on the Data Grid
• 🌍 Improve Korean (ko-KR) and Persian (fa-IR) locales on the Date and Time Pickers
• 🐞 Bugfixes
• 📚 Documentation improvements

Data Grid

7.6.0

May 30, 2024

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

• 🎁 Allow to define and customize the indentation of nested items in the Tree View
• ✨ Allow charts highlights to be controlled
• 🌍 Improve Persian (fa-IR) locale on the Data Grid
• 🐞 Bugfixes
• 📚 Documentation improvements

Data Grid

7.0.0

Mar 22, 2024

We're excited to announce the first v7 stable release! 🎉🚀

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
• Date and Time Pickers
• Tree View
• Charts

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 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.

   <DataGrid
  -  density="compact"
  +  initialState={{ density: "compact" }}
   />
  

  1. Move it to the state and use onDensityChange callback to update the density prop accordingly for it to work as expected.

  + 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-charts-pro@7.0.0-beta.7

Same changes as in @mui/x-charts@7.22.2.

@mui/x-charts-pro@7.0.0-beta.6

Same changes as in @mui/x-charts@7.22.0.

Tree View

@mui/x-charts-pro@7.0.0-beta.0

Same changes as in @mui/x-charts@7.16.0, plus:

• [charts-pro] Fix props and automated documentation on BarChartPro and LineChartPro (#14391) @JCQuintas

Tree View

7.0.0-alpha.9

Jan 19, 2024

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

• 🎁 The Data Grid headers have been refactored to bring immense improvements to scrolling, state management, and overall performance of the grid.
• ⚙️ The Data Grid disabled column-specific features like filtering, sorting, grouping, etc. could now be accessed programmatically. See the related docs section.
• 🚀 Uplift the Simple Tree View customization examples (#11424) @noraleonte
• 🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) on the Data Grid @BCaspari
• 🐞 Bugfixes
• 💔 Bump @mui/material peer dependency for all packages (#11692) @LukasTy The minimum required version of @mui/material is now 5.15.0.

Data Grid

Breaking changes

• The ariaV7 experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default. If you were using the ariaV7 flag, you can remove it from the experimentalFeatures prop:

  -<DataGrid experimentalFeatures={{ ariaV7: true }} />
  +<DataGrid />
  

  The most notable changes that might affect your application or tests are:

  • The role="grid" attribute along with related ARIA attributes are now applied to the inner div element instead of the root div element:

    -<div class="MuiDataGrid-root" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false">
    +<div class="MuiDataGrid-root">
       <div class="MuiDataGrid-toolbarContainer"></div>
    -    <div class="MuiDataGrid-main"></div>
    +    <div class="MuiDataGrid-main" role="grid" aria-colcount="5" aria-rowcount="101" aria-multiselectable="false"></div>
       <div class="MuiDataGrid-footerContainer"></div>
     </div>
    

  • When the Tree data feature is used, the grid role is now role="treegrid" instead of role="grid".

  • The Data Grid cells now have role="gridcell" instead of role="cell".

  • The buttons in toolbar composable components GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensity, and GridToolbarExport are now wrapped with a tooltip component and have a consistent interface. To override some props corresponding to the toolbar buttons or their corresponding tooltips, you can use the slotProps prop. Following is an example diff. See Toolbar section for more details.

      function CustomToolbar() {
        return (
          <GridToolbarContainer>
          <GridToolbarColumnsButton />
          <GridToolbarFilterButton
      -     title="Custom filter" // 🛑 This was previously forwarded to the tooltip component
      +     slotProps={{ tooltip: { title: 'Custom filter' } }} // ✅ This is the correct way now
          />
          <GridToolbarDensitySelector
      -     variant="outlined"    // 🛑 This was previously forwarded to the button component
      +     slotProps={{ button: { variant: 'outlined' } }} // ✅ This is the correct way now
          />
          </GridToolbarContainer>
        );
      }
    

• Column grouping is now enabled by default. The flag columnGrouping is no longer needed to be passed to the experimentalFeatures prop to enable it.

  -<DataGrid experimentalFeatures={{ columnGrouping: true }} />
  +<DataGrid />
  

• The column grouping API methods getColumnGroupPath and getAllGroupDetails are no longer prefixed with unstable_.

• The column grouping selectors gridFocusColumnGroupHeaderSelector and gridTabIndexColumnGroupHeaderSelector are no longer prefixed with unstable_.

• The disabled column specific features like hiding, sorting, filtering, pinning, row grouping, etc could now be controlled programmatically using initialState, respective controlled models, or the API object. See the related docs section.