[DropZone] Fix error on dragenter for glb/gltf files

[genevieveluyt]

WHY are these changes introduced?

Fixes #6644

The goal is to have correct filtering in the OS file picker and also correct dropzone overlay messaging. This is currently not possible for glb/gltf files because:

1. In order to have correct filtering in the OS file picker we have to pass an accept string that uses the file extension like .glb (the mime type does not work)
2. But if you drag a .glb file from the OS file picker into the dropzone, the overlay shows an error because the dragenter event gets an empty mime type and does not have access to the filename, so the validation against the accept string fails. Note that even though an error is shown, if you drop the file it is accepted

WHAT is this pull request doing?

This PR makes it so that if the accept prop contains any file extensions (ie. starts with a .), then on dragenter events, file validation agains the accept string is skipped (the customValidator will still run). The file will be validated against the accept string once it is dropped, because at that point the file name is known.

BEFORE

With accept = .glb

• Clicking on the dropzone opens the OS file picker, which has all files greyed out except any that have a filename ending in .glb
• Dragging a .glb file from the OS file picker onto the dropzone component shows an error:
  

AFTER

With the same accept prop:

• The OS file picker behaves the exact same
• There is no error shown if a file is dragged over the dropzone (note that this is true of any file type, validation is deferred until the file is dropped)

If the accept prop contains only MIME types (and no file extensions), the behaviour of dragging a file over the dropzone is the exact same as before this change.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Paste the following in the Playground:

import React from 'react';

import {DropZone, Page} from '../src';

export const Playground = {
  tags: ['skip-tests'],
  render() {
    const [acceptedFiles, setAcceptedFiles] = React.useState<File[]>([]);
    const [rejectedFiles, setRejectedFiles] = React.useState<File[]>([]);

    return (
      <Page title="Playground">
        <DropZone
          accept=".glb"
          type="file"
          onDrop={(_, accepted, rejected) => {
            setAcceptedFiles(accepted);
            setRejectedFiles(rejected);
          }}
        >
          <div>
            Accepted Files: {acceptedFiles.map((file) => file.name).join(', ')}
          </div>
          <div>
            Rejected Files: {rejectedFiles.map((file) => file.name).join(', ')}
          </div>
        </DropZone>
      </Page>
    );
  },
};

1. Click on the dropzone to open the OS file picker. Only files with a .glb extension should be selectable.
2. Select the .glb file. It should show up in the Accepted files list
3. Drag a .glb file from the OS file picker into the dropzone. There should be no error overlay
4. Drop the file. It should show up in the Accepted files list
5. Drag a file that does not end in .glb from the OS file picker into the dropzone. There should be no error overlay
6. Drop the file. It should show up in the Rejected files list

🎩 checklist

• Tested a snapshot https://github.com/Shopify/web/pull/127610
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[genevieveluyt]

/snapit

[github-actions]

🫰✨ Thanks @genevieveluyt! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240524155914"