Add directory support for FileTrigger

packages/react-aria-components/docs/FileTrigger.mdx

@@ -120,6 +120,20 @@ A file trigger can accept multiple files by passsing the `allowsMultiple` proper
 </FileTrigger>
 ```
 
+## Directory Selection
+
+To enable selecting directories instead of files, use the `UNSAFE_directory` property. 
+
+This reflects the webkitdirectory HTML attribute and allows users to select directories and their contents.
+
+The `UNSAFE_` prefix is used to signify that this feature's behavior may vary across different browsers and versions.
+
+```tsx example
+<FileTrigger UNSAFE_directory>
+  <Button>Select a directory</Button>
+</FileTrigger>
+```
+
 ## Media capture
 
 To specify the media capture mechanism to capture media on the spot, pass `user` for the user-facing camera or `environment` for the outward-facing camera via the `defaultCamera` prop.

packages/react-aria-components/src/FileTrigger.tsx

@@ -35,11 +35,16 @@ export interface FileTriggerProps {
   /**
    * The children of the component.
    */
-  children?: ReactNode
+  children?: ReactNode,
+  /**
+   * Enables the selection of directories instead of individual files.
+   * Note: This feature's behavior may vary across different browsers and versions.
+   */
+  UNSAFE_directory?: boolean
 }
 
 function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
-  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, ...rest} = props;
+  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, UNSAFE_directory, ...rest} = props;
   let inputRef = useObjectRef(ref);
   let domProps = filterDOMProps(rest);
 
@@ -62,7 +67,9 @@ function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement
         accept={acceptedFileTypes?.toString()}
         onChange={(e) => onSelect?.(e.target.files)}
         capture={defaultCamera}
-        multiple={allowsMultiple} />
+        multiple={allowsMultiple} 
+        // @ts-expect-error
+        webkitdirectory={UNSAFE_directory ? '' : undefined} />
     </>
   );
 }

packages/react-aria-components/test/FileTrigger.test.js

@@ -88,4 +88,16 @@ describe('FileTrigger', () => {
     let input = getByTestId('foo');
     expect(ref.current).toBe(input);
   });
+
+  it('should allow directory uploads when UNSAFE_directory is true', () => {
+    render(
+      <FileTrigger UNSAFE_directory>
+        <Button>Upload Directory</Button>
+      </FileTrigger>
+    );
+
+    let input = document.querySelector('input[type="file"]');
+    expect(input).toHaveAttribute('webkitdirectory');
+  });
+
 });