Update FileTrigger directory prop name and docs (#5512)

* Update FileTrigger directory prop name and docs

* update test

* fix lint

* update docs example and add blurb about varying support

* update var name

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>

Author: yihuiliao

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

@@ -122,14 +122,35 @@ A file trigger can accept multiple files by passsing the `allowsMultiple` proper
 
 ## Directory selection
 
-To enable selecting directories instead of files, use the `directory` property. 
+To enable selecting directories instead of files, use the `acceptDirectory` property. 
+
+This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser. 
 
-This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents.
 
 ```tsx example
-<FileTrigger directory>
-  <Button>Select a directory</Button>
-</FileTrigger>
+function Example () {
+  let [files, setFiles] = React.useState([]);
+
+  return (
+    <>
+      <FileTrigger
+        acceptDirectory
+        onSelect={(e) => {
+          if (e) {
+            let fileList = [...e].map(file => file.webkitRelativePath !== "" ? file.webkitRelativePath : file.name);
+            setFiles(fileList);
+          }
+        }} >
+        <Button>Upload</Button>
+      </FileTrigger>
+      {files && <ul>
+        {files.map((file, index) => (
+          <li key={index}>{file}</li>
+        ))}
+      </ul>}
+    </>
+  );
+}
 ```
 
 ## Media capture

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

@@ -39,11 +39,11 @@ export interface FileTriggerProps {
   /**
    * Enables the selection of directories instead of individual files.
    */
-  directory?: boolean
+  acceptDirectory?: boolean
 }
 
 function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
-  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, directory, ...rest} = props;
+  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ...rest} = props;
   let inputRef = useObjectRef(ref);
   let domProps = filterDOMProps(rest);
 
@@ -68,7 +68,7 @@ function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement
         capture={defaultCamera}
         multiple={allowsMultiple}
         // @ts-expect-error
-        webkitdirectory={directory ? '' : undefined} />
+        webkitdirectory={acceptDirectory ? '' : undefined} />
     </>
   );
 }

packages/react-aria-components/stories/index.stories.tsx

@@ -1036,15 +1036,30 @@ export const FileTriggerButton = (props) => (
   </FileTrigger>
 );
 
-export const FileTriggerDirectories = (props) => (
-  <FileTrigger
-    directory
-    onSelect={action('onSelect')}
-    data-testid="filetrigger-example"
-    {...props} >
-    <Button>Upload</Button>
-  </FileTrigger>
-);
+export const FileTriggerDirectories = (props) => {
+  let [files, setFiles] = React.useState<string[]>([]);
+
+  return (
+    <>
+      <FileTrigger
+        {...props}
+        acceptDirectory
+        onSelect={(e) => {
+          if (e) {
+            let fileList = [...e].map(file => file.webkitRelativePath !== '' ? file.webkitRelativePath : file.name);
+            setFiles(fileList);
+          }
+        }} >
+        <Button>Upload</Button>
+      </FileTrigger>
+      {files && <ul>
+        {files.map((file, index) => (
+          <li key={index}>{file}</li>
+        ))}
+      </ul>}
+    </>
+  );
+};
 
 export const FileTriggerLinkAllowsMultiple = (props) => (
   <FileTrigger

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

@@ -91,7 +91,7 @@ describe('FileTrigger', () => {
 
   it('should allow directory uploads when directory is true', () => {
     render(
-      <FileTrigger directory>
+      <FileTrigger acceptDirectory>
         <Button>Upload Directory</Button>
       </FileTrigger>
     );