v7.0.0-alpha.5

[MBilalShafi]

• Include v6 release changelog

Release the packages

• Checkout the last version of the working branch
• Make sure you have the latest dependencies installed: yarn.
• Build the packages: yarn release:build.
• Release the versions on npm: yarn release:publish (you need your 2FA device).
• Push the newly created tag: yarn release:tag.

Publish the documentation

The documentation must be updated on the docs-vX branch (docs-v4 for v4.X releases, docs-v5 for v5.X releases, ...)

• Push the working branch on the documentation release branch to deploy the documentation with the latest changes.

git push upstream next:docs-next -f

You can follow the deployment process on the Netlify Dashboard
Once deployed, it will be accessible at https://material-ui-x.netlify.app/ for the docs-next deployment.

Publish GitHub release

• After documentation is deployed, publish a new release on GitHub releases page

[mui-bot]

Deploy preview: https://deploy-preview-11414--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 5e91bfe

[flaviendelangle]

We missed the BCs for this one

[MBilalShafi]

Oops too late, packages published.
Please share them and I'll open another PR and update the release notes too

[LukasTy]

It's never too late to update the changelog or release notes. 👌 😉

[flaviendelangle]

• 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} />