File uploader beta overrides example (#5341)

* File uploader beta overrides example

* Adjust overrides example style

documentation-site/examples/file-uploader-beta/overrides.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { FileUploaderBeta, type FileRow } from "baseui/file-uploader-beta";
+import { useStyletron } from "baseui";
+
+export default function Example() {
+  const [fileRows, setFileRows] = React.useState<Array<FileRow>>([
+    {
+      file: new File(["test file 1"], "file-1.txt"),
+      status: "processed",
+      errorMessage: null,
+    },
+    {
+      file: new File(["test file 2"], "file-2.txt"),
+      status: "error",
+      errorMessage: "Failed to upload",
+    },
+  ]);
+  const [, theme] = useStyletron();
+  return (
+    <FileUploaderBeta
+      fileRows={fileRows}
+      setFileRows={setFileRows}
+      overrides={{
+        ButtonComponent: {
+          props: {
+            overrides: {
+              BaseButton: {
+                style: {
+                  outline: `${theme.colors.warning} solid`,
+                },
+              },
+            },
+          },
+        },
+        ContentMessage: {
+          style: {
+            color: theme.colors.warning,
+          },
+        },
+        FileDragAndDrop: {
+          style: {
+            borderLeftColor: theme.colors.warning,
+            borderRightColor: theme.colors.warning,
+            borderTopColor: theme.colors.warning,
+            borderBottomColor: theme.colors.warning,
+          },
+        },
+        FileRows: {
+          style: {
+            marginLeft: theme.sizing.scale0,
+            marginRight: theme.sizing.scale0,
+            outline: `${theme.colors.warning} dashed`,
+          },
+        },
+      }}
+    />
+  );
+}

documentation-site/pages/components/file-uploader-beta.mdx

@@ -6,6 +6,7 @@ import FileUploaderBetaBasic from "examples/file-uploader-beta/basic.tsx";
 import FileUploaderBetaItemPreview from "examples/file-uploader-beta/item-preview.tsx";
 import FileUploaderBetaLabelHint from "examples/file-uploader-beta/label-hint.tsx";
 import FileUploaderBetaUploadRestrictions from "examples/file-uploader-beta/upload-restrictions.tsx";
+import FileUploaderBetaOverrides from "examples/file-uploader-beta/overrides.tsx";
 
 import * as FileUploaderBetaExports from "baseui/file-uploader-beta";
 
@@ -34,6 +35,7 @@ Creates a dropzone for file uploads with file row state binding, props to contro
 - Enable file(s) upload through drag and drop or the system _Browse files_ dialog.
 - Leverage `accept`, `maxFiles`, `maxSize`, and `minSize` for built in error handling.
 - Leverage `processFileOnDrop` for custom error handling and upload capabilities. Should take a `file: File` and input and return `Promise<{ errorMessage: string | null; fileInfo?: any }>` where `errorMessage` determines if an error is shown.
+- Component will be `disabled` while files are uploading. This prevents invalid state while React re-renders via `useState` hook.
 
 ## Security considerations
 
@@ -62,6 +64,10 @@ To learn more, read the corresponding [OWASP article on file uploads](https://ww
   <FileUploaderBetaUploadRestrictions />
 </Example>
 
+<Example title="Overrides" path="file-uploader-beta/overrides.tsx">
+  <FileUploaderBetaOverrides />
+</Example>
+
 <Exports
   component={FileUploaderBetaExports}
   title="File uploader beta exports"