Skip to content

v7.0.0-beta.4

Pre-release
Pre-release
Compare
Choose a tag to compare
@MBilalShafi MBilalShafi released this 23 Feb 12:44
· 146 commits to next since this release
v7.0.0-beta.4
1dd8f58
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

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

  • 🎁 Introduce a new DOM structure for the field components that provides a better accessibility
  • 🚀 Simplify Data Grid DOM structure for improved performance (#12013) @romgrk
  • 🕥 The support for IE11 has been removed (#12151) @flaviendelangle
  • 🐞 Bugfixes
  • 📚 Documentation improvements

Breaking changes

  • The support for IE11 has been removed from all MUI X packages. The legacy bundle that used to support old browsers like IE11 is no longer included.

Data Grid

Breaking changes

  • The cell inner wrapper .MuiDataGrid-cellContent has been removed, use .MuiDataGrid-cell to style the cells.

@mui/[email protected]

@mui/[email protected] pro

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

@mui/[email protected] premium

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

Date Pickers

Breaking changes

  • The selectedSections prop no longer accepts start and end indexes.
    When selecting several — but not all — sections, the field components were not behaving correctly, you can now only select one or all sections:

     <DateField
-  selectedSections={{ startIndex: 0, endIndex: 0 }}
+  selectedSections={0}

   // If the field has 3 sections
-  selectedSections={{ startIndex: 0, endIndex: 2 }}
+  selectedSections="all"
 />

  • The headless field hooks (e.g.: useDateField) now returns a new prop called enableAccessibleFieldDOMStructure.
    This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new accessible DOM structure.

When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove enableAccessibleFieldDOMStructure before it is passed to the DOM:

  function MyCustomTextField(props) {
    const {
+     // Should be ignored
+     enableAccessibleFieldDOMStructure,
      // ... rest of the props you are using
    } = props;

    return ( /* Some UI to edit the date */ )
  }

  function MyCustomField(props) {
    const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
      ...props,
+     // If you only support one DOM structure, we advise you to hardcode it here to avoid unwanted switches in your application
+     enableAccessibleFieldDOMStructure: false,
    });

    return <MyCustomTextField ref={ref} {...fieldResponse} />;
  }

  function App() {
    return <DatePicker slots={{ field: MyCustomField }} />;
  }

  • The following internal types were exported by mistake and have been removed from the public API:

    • UseDateFieldDefaultizedProps
    • UseTimeFieldDefaultizedProps
    • UseDateTimeFieldDefaultizedProps
    • UseSingleInputDateRangeFieldComponentProps
    • UseSingleInputTimeRangeFieldComponentProps
    • UseSingleInputDateTimeRangeFieldComponentProps

@mui/[email protected]

@mui/[email protected] pro

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

Charts / @mui/[email protected]

Breaking changes

These components are no longer exported from @mui/x-charts:

  • CartesianContextProvider
  • DrawingProvider

@mui/[email protected]

Tree View / @mui/[email protected]

Docs

Core

Contributors

romgrk, gitstart, and 8 other contributors
Assets 2
Loading