feat!: Expose FileInput component ref with a clearFiles method

[suzubara]

Summary

This PR modifies the FileInput component to use React.forwardRef and the useImperativeHandle hook to expose the underlying <input type="file" /> element, a method to clear the files state, and the value of the files state.

Related Issues or PRs

Fixes #958

How To Test

In an application, try passing a ref into the FileInput component, and then use ref.current.files and ref.current.clearFiles() to interact with the file input.

Screenshots (optional)

[haworku]

Took a look - lets screenshare if it seems useful

[haworku]

Getting a type error here for enterKeyHint being a missing prop as soon I added the new FileInput to the application.

Adding that prop with the value of enter (default) resolved the issue. It sounded similar to this issue. 🤔 Not sure what to make of this.

[haworku]

Oops this was an issue in our code. SMH excuse me.

[haworku]

This works in mc-review. ⭐ The key thing missing in our code was changing everything to use ref.current?.input?.files instead of ref.current.files.

[brandonlenz]

I updated the title to include a "!" for the breaking change so that the squash will automatically preserve that. Feel free also when merging to add a helpful blurb about how to incorporate this change in the body of the squash commit message.

[brandonlenz]

This works in mc-review. ⭐ The key thing missing in our code was changing everything to use ref.current?.input?.files instead of ref.current.files.

@haworku Maybe a question more for my understanding, but the FileInputRef currently looks like this:

export type FileInputRef = {
  clearFiles: () => void
  input: HTMLInputElement | null
  files: File[]
}

shouldn't files be accessible from the ref directly as you were attempting to do?

[brandonlenz]

We may want to adjust the storybook story to make sure that the ref's files prop we are exposing is what is being used. This can be a future item since the functionality of the Component will not need to change.