[v9] feat(ui-file-drop): add inputRef prop to make FileDrop focusable

[ToMESSKa]

Closes: INSTUI-4441

ISSUE: Filedrop input cannot be focused, it needs a inputRef prop like Select or TextInput.
Backport of #1853

TEST PLAN:

• test the example below in the documentation preview
• fileDrop should accept inputRef prop
• by clicking on the Focus File Input button, the FileDrop should receive focus

class Example extends React.Component {
  fileInputElement = null

  focusFileInput = () => {
    if (this.fileInputElement) {
      this.fileInputElement.focus()
    }
  };

  render() {
    return (
      <div>
        <FileDrop
          accept="image/*"
          onDropAccepted={([file]) => console.log(`File accepted ${file.name}`)}
          onDropRejected={([file]) => console.log(`File rejected ${file.name}`)}
          inputRef={(el) => {
            this.fileInputElement = el;
          }}
          renderLabel={
            <View as="div" padding="xx-large large" background="primary">
              <IconModuleLine size="large" />
              <Heading>Drop files here to add them to module</Heading>
              <Text color="brand">
                Drag and drop, or click to browse your computer
              </Text>
            </View>
          }
        />
        <button onClick={this.focusFileInput}>Focus File Input</button>
      </div>
    );
  }
}
render(<Example />)

[github-actions]

PR Preview Action v1.6.0
🚀 View preview at https://instructure.github.io/instructure-ui/pr-preview/pr-1861/
Built to branch gh-pages at 2025-02-06 11:01 UTC. Preview will be ready when the GitHub Pages deployment is complete.