Skip to content

v7.0.0-alpha.5

Pre-release
Pre-release
Compare
Choose a tag to compare
@MBilalShafi MBilalShafi released this 14 Dec 15:14
· 488 commits to next since this release
c8e4c7d

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

  • 💫 New recipe added for the Data Grid
  • 🌍 Improve Swedish (sv-SE) and Urdu (ur-PK) locales on the Data Grid
  • 🐞 Bugfixes

Data Grid

Breaking changes

  • The instanceId prop is now required for state selectors.
    This prop is used to distinguish between multiple Data Grid instances on the same page.
    See migration docs for more details.

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

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

Same changes as in @mui/x-data-grid@7.0.0-alpha.5.

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

Same changes as in @mui/x-data-grid-pro@7.0.0-alpha.5.

Date Pickers

Breaking changes

  • The slot interfaces got renamed to match with @mui/base naming.
    The SlotsComponent suffix has been replaced with Slots and SlotsComponentsProps with SlotProps.

    - DateCalendarSlotsComponent
    + DateCalendarSlots
    - DateCalendarSlotsComponentsProps
    + DateCalendarSlotProps
  • Move inputRef inside the props passed to the field hooks

    The field hooks now only receive the props instead of an object containing both the props and the inputRef.

    - const { inputRef, ...otherProps } = props
    - const fieldResponse = useDateField({ props: otherProps, inputRef });
    + const fieldResponse = useDateField(props);

    If you are using a multi input range field hook, the same applies to startInputRef and endInputRef params

    - const { inputRef: startInputRef, ...otherStartTextFieldProps } = startTextFieldProps
    - const { inputRef: endInputRef, ...otherEndTextFieldProps } = endTextFieldProps
    
      const fieldResponse = useMultiInputDateRangeField({
        sharedProps,
    -   startTextFieldProps: otherStartTextFieldProps,
    -   endTextFieldProps: otherEndTextFieldProps,
    -   startInputRef
    -   endInputRef,
    +   startTextFieldProps, 
    +   endTextFieldProps
      });
  • Rename the ref returned by the field hooks to inputRef

    When used with the v6 TextField approach (where the input is an <input /> HTML element), the field hooks return a ref that needs to be passed to the <input /> element.
    This ref was previously named ref and has been renamed inputRef for extra clarity.

      const fieldResponse = useDateField(props);
    
    - return <input ref={fieldResponse.ref} /> 
    + return <input ref={fieldResponse.inputRef} />

    If you are using a multi input range field hook, the same applies to the ref in the startDate and endDate objects

      const fieldResponse = useDateField(props);
    
      return (
        <div>
    -     <input ref={fieldResponse.startDate.ref} />
    +     <input ref={fieldResponse.startDate.inputRef} />
          <span>–</span>
    -     <input ref={fieldResponse.endDate.ref} />
    +     <input ref={fieldResponse.endDate.inputRef} />
        </div>
      )
  • Restructure the API of useClearableField

    The useClearableField hook API has been simplified to now take a props parameter instead of a fieldProps, InputProps, clearable, onClear, slots and slotProps parameters.

    You should now be able to directly pass the returned value from your field hook (e.g: useDateField) to useClearableField

      const fieldResponse = useDateField(props);
    
    - const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
    - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
    -   fieldProps: otherFieldProps,
    -   InputProps,
    -   clearable,
    -   onClear,
    -   slots,
    -   slotProps,
    - }); 
    -
    -  return <MyCustomTextField {...processedFieldProps} InputProps={ProcessedInputProps} />
    
    + const processedFieldProps = useClearableField(fieldResponse);
    +
    + return <MyCustomTextField {...processedFieldProps} />

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

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

Same changes as in @mui/x-date-pickers@7.0.0-alpha.5, plus:

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

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

Docs

Core