@seed-design/react-file-upload 0.0.0-alpha-20260511052324 → 1.0.0

package/lib/index.js

@@ -1,5 +1,5 @@
-import { F as FileUploadContext, a as FileUploadDropzone, b as FileUploadHiddenInput, c as FileUploadItemBackdrop, d as FileUploadItemImage, e as FileUploadItemMetadata, f as FileUploadItemName, g as FileUploadItemRemoveButton, h as FileUploadItemSize, i as FileUploadItemThumbnail, j as FileUploadRoot, k as FileUploadTrigger } from './FileUpload-12s-BsPs5ndy.js';
-export { l as FileUploadItemProvider, n as useFileUpload, u as useFileUploadContext, o as useFileUploadItem, m as useFileUploadItemContext } from './FileUpload-12s-BsPs5ndy.js';
+import { F as FileUploadContext, a as FileUploadDropzone, b as FileUploadHiddenInput, c as FileUploadItemBackdrop, d as FileUploadItemImage, e as FileUploadItemName, f as FileUploadItemRemoveButton, g as FileUploadItemSize, h as FileUploadRoot, i as FileUploadTrigger } from './FileUpload-12s-BJqUtE7a.js';
+export { j as FileUploadItemProvider, l as useFileUpload, u as useFileUploadContext, m as useFileUploadItem, k as useFileUploadItemContext } from './FileUpload-12s-BJqUtE7a.js';
 
 var FileUpload_namespace = {
   __proto__: null,
@@ -8,11 +8,9 @@ var FileUpload_namespace = {
   HiddenInput: FileUploadHiddenInput,
   ItemBackdrop: FileUploadItemBackdrop,
   ItemImage: FileUploadItemImage,
-  ItemMetadata: FileUploadItemMetadata,
   ItemName: FileUploadItemName,
   ItemRemoveButton: FileUploadItemRemoveButton,
   ItemSize: FileUploadItemSize,
-  ItemThumbnail: FileUploadItemThumbnail,
   Root: FileUploadRoot,
   Trigger: FileUploadTrigger
 };
@@ -40,4 +38,4 @@ var FileUpload_namespace = {
     };
 }
 
-export { FileUpload_namespace as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItemBackdrop, FileUploadItemImage, FileUploadItemMetadata, FileUploadItemName, FileUploadItemRemoveButton, FileUploadItemSize, FileUploadItemThumbnail, FileUploadRoot, FileUploadTrigger, splitFileName };
+export { FileUpload_namespace as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItemBackdrop, FileUploadItemImage, FileUploadItemName, FileUploadItemRemoveButton, FileUploadItemSize, FileUploadRoot, FileUploadTrigger, splitFileName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-file-upload",
-  "version": "0.0.0-alpha-20260511052324",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -29,9 +29,9 @@
   "dependencies": {
     "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.2.2",
-    "@seed-design/dom-utils": "1.0.0",
-    "@seed-design/react-primitive": "0.0.0-alpha-20260511052324",
-    "@seed-design/react-supports": "0.0.1"
+    "@seed-design/dom-utils": "^2.0.0",
+    "@seed-design/react-primitive": "^2.0.0",
+    "@seed-design/react-supports": "^1.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",

package/src/FileUpload.namespace.ts

@@ -7,8 +7,6 @@ export {
   FileUploadItemSize as ItemSize,
   FileUploadItemRemoveButton as ItemRemoveButton,
   FileUploadItemImage as ItemImage,
-  FileUploadItemThumbnail as ItemThumbnail,
-  FileUploadItemMetadata as ItemMetadata,
   FileUploadItemBackdrop as ItemBackdrop,
   FileUploadContext as Context,
   type FileUploadRootProps as RootProps,
@@ -19,8 +17,6 @@ export {
   type FileUploadItemSizeProps as ItemSizeProps,
   type FileUploadItemRemoveButtonProps as ItemRemoveButtonProps,
   type FileUploadItemImageProps as ItemImageProps,
-  type FileUploadItemThumbnailProps as ItemThumbnailProps,
-  type FileUploadItemMetadataProps as ItemMetadataProps,
   type FileUploadItemBackdropProps as ItemBackdropProps,
   type FileUploadContextProps as ContextProps,
 } from "./FileUpload";

package/src/FileUpload.tsx

@@ -192,36 +192,6 @@ export const FileUploadItemImage = forwardRef<HTMLImageElement, FileUploadItemIm
 );
 FileUploadItemImage.displayName = "FileUploadItemImage";
 
-export interface FileUploadItemThumbnailProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const FileUploadItemThumbnail = forwardRef<HTMLDivElement, FileUploadItemThumbnailProps>(
-  (props, ref) => {
-    const { thumbnailProps } = useFileUploadItemContext();
-
-    const mergedProps = mergeProps(thumbnailProps, props);
-
-    return <Primitive.div ref={ref} {...mergedProps} />;
-  },
-);
-FileUploadItemThumbnail.displayName = "FileUploadItemThumbnail";
-
-export interface FileUploadItemMetadataProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const FileUploadItemMetadata = forwardRef<HTMLDivElement, FileUploadItemMetadataProps>(
-  (props, ref) => {
-    const { metadataProps } = useFileUploadItemContext();
-
-    const mergedProps = mergeProps(metadataProps, props);
-
-    return <Primitive.div ref={ref} {...mergedProps} />;
-  },
-);
-FileUploadItemMetadata.displayName = "FileUploadItemMetadata";
-
 export interface FileUploadItemBackdropProps
   extends PrimitiveProps,
     Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
@@ -236,7 +206,7 @@ export const FileUploadItemBackdrop = forwardRef<HTMLDivElement, FileUploadItemB
     if (entry.status !== status) return null;
 
     return (
-      <Primitive.div ref={composeRefs(entry.refs.overlay, ref)} {...props}>
+      <Primitive.div ref={ref} {...props}>
         {typeof children === "function" ? children(entry) : children}
       </Primitive.div>
     );

package/src/index.ts

@@ -7,8 +7,6 @@ export {
   FileUploadItemSize,
   FileUploadItemRemoveButton,
   FileUploadItemImage,
-  FileUploadItemThumbnail,
-  FileUploadItemMetadata,
   FileUploadItemBackdrop,
   FileUploadContext,
   type FileUploadRootProps,
@@ -19,8 +17,6 @@ export {
   type FileUploadItemSizeProps,
   type FileUploadItemRemoveButtonProps,
   type FileUploadItemImageProps,
-  type FileUploadItemThumbnailProps,
-  type FileUploadItemMetadataProps,
   type FileUploadItemBackdropProps,
   type FileUploadContextProps,
 } from "./FileUpload";

package/src/useFileUpload.test.tsx

@@ -87,6 +87,7 @@ describe("useFileUpload", () => {
       expect(input.type).toBe("file");
       expect(input.name).toBe("files");
       expect(input.tabIndex).toBe(-1);
+      expect(input.getAttribute("aria-hidden")).toBe("true");
     });
 
     it("should render with multiple attribute when maxFiles > 1", () => {
@@ -479,6 +480,149 @@ describe("useFileUpload", () => {
     });
   });
 
+  describe("readonly state", () => {
+    const seedFiles: FileEntry[] = [
+      { id: "seed-1", file: createMockFile("seed.txt", 100, "text/plain"), status: "success" },
+    ];
+
+    it("should have data-readonly attribute on dropzone when readOnly", () => {
+      const { getByTestId } = setUp(<BasicFileUpload readOnly />);
+      const dropzone = getByTestId("dropzone");
+
+      expect(dropzone.getAttribute("data-readonly")).toBe("");
+    });
+
+    it("should disable trigger when readOnly", () => {
+      const { getByText } = setUp(<BasicFileUpload readOnly />);
+      const trigger = getByText("Choose files") as HTMLButtonElement;
+
+      expect(trigger.disabled).toBe(true);
+    });
+
+    it("should NOT disable hidden input when readOnly so the form value is preserved", () => {
+      const { getByTestId } = setUp(
+        <BasicFileUpload readOnly defaultAcceptedFileEntries={seedFiles} />,
+      );
+      const input = getByTestId("hidden-input") as HTMLInputElement;
+
+      expect(input.disabled).toBe(false);
+    });
+
+    it("should keep input.files in sync when readOnly (form submission carries the values)", async () => {
+      const { getByTestId } = setUp(
+        <BasicFileUpload readOnly defaultAcceptedFileEntries={seedFiles} />,
+      );
+      const input = getByTestId("hidden-input") as HTMLInputElement;
+
+      await waitFor(() => {
+        expect(input.files?.length).toBe(1);
+        expect(input.files?.[0]?.name).toBe("seed.txt");
+      });
+    });
+
+    it("should not accept files via input change when readOnly", async () => {
+      const onAcceptedFileEntriesChange = mock(() => {});
+      const { getByTestId } = setUp(
+        <BasicFileUpload readOnly onAcceptedFileEntriesChange={onAcceptedFileEntriesChange} />,
+      );
+
+      const input = getByTestId("hidden-input") as HTMLInputElement;
+      fireEvent.change(input, {
+        target: { files: [createMockFile("new.txt", 100, "text/plain")] },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      expect(onAcceptedFileEntriesChange).not.toHaveBeenCalled();
+    });
+
+    it("should not accept dropped files when readOnly", async () => {
+      const onAcceptedFileEntriesChange = mock(() => {});
+      const { getByTestId } = setUp(
+        <BasicFileUpload readOnly onAcceptedFileEntriesChange={onAcceptedFileEntriesChange} />,
+      );
+
+      const dropzone = getByTestId("dropzone");
+      fireEvent.drop(dropzone, {
+        dataTransfer: { files: [createMockFile("dropped.txt", 100, "text/plain")] },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      expect(onAcceptedFileEntriesChange).not.toHaveBeenCalled();
+    });
+
+    it("should disable remove button on items when readOnly", () => {
+      const { getByTestId } = setUp(
+        <BasicFileUpload readOnly defaultAcceptedFileEntries={seedFiles} />,
+      );
+      const deleteButton = getByTestId("delete-0") as HTMLButtonElement;
+
+      expect(deleteButton.disabled).toBe(true);
+    });
+
+    it("should not remove items when readOnly", async () => {
+      const onAcceptedFileEntriesChange = mock(() => {});
+      const { getByTestId, user } = setUp(
+        <BasicFileUpload
+          readOnly
+          defaultAcceptedFileEntries={seedFiles}
+          onAcceptedFileEntriesChange={onAcceptedFileEntriesChange}
+        />,
+      );
+
+      const deleteButton = getByTestId("delete-0");
+      await user.click(deleteButton);
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      expect(onAcceptedFileEntriesChange).not.toHaveBeenCalled();
+      expect(getByTestId("item-0")).toBeDefined();
+    });
+
+    it("should not reorder when readOnly", async () => {
+      const reorderSeed: FileEntry[] = [
+        { id: "r-1", file: createMockFile("a.txt", 100, "text/plain"), status: "success" },
+        { id: "r-2", file: createMockFile("b.txt", 100, "text/plain"), status: "success" },
+      ];
+
+      const ReadOnlyReorder = () => (
+        <FileUploadRoot maxFiles={5} readOnly defaultAcceptedFileEntries={reorderSeed}>
+          <FileUploadContext>
+            {({ acceptedFileEntries, reorderFileEntry }) => (
+              <>
+                <ul>
+                  {acceptedFileEntries.map((f, i) => (
+                    <li key={f.id} data-testid={`f-${i}`}>
+                      {f.file.name}
+                    </li>
+                  ))}
+                </ul>
+                <button type="button" data-testid="reorder" onClick={() => reorderFileEntry(0, 1)}>
+                  Reorder
+                </button>
+              </>
+            )}
+          </FileUploadContext>
+        </FileUploadRoot>
+      );
+
+      const { getByTestId, user } = setUp(<ReadOnlyReorder />);
+
+      await user.click(getByTestId("reorder"));
+
+      await waitFor(() => {
+        expect(getByTestId("f-0").textContent).toBe("a.txt");
+        expect(getByTestId("f-1").textContent).toBe("b.txt");
+      });
+    });
+
+    it("should still have data-readonly when both disabled and readOnly are set", () => {
+      const { getByTestId } = setUp(<BasicFileUpload disabled readOnly />);
+      const dropzone = getByTestId("dropzone");
+
+      expect(dropzone.getAttribute("data-readonly")).toBe("");
+      expect(dropzone.getAttribute("data-disabled")).toBe("");
+    });
+  });
+
   describe("status change", () => {
     it("should call onAcceptedFileEntriesChange when file status changes", async () => {
       const onAcceptedFileEntriesChange = mock(() => {});

package/src/useFileUpload.ts

@@ -73,7 +73,6 @@ export interface UseFileUploadProps extends UseFileUploadStateProps {
   invalid?: boolean;
 
   /**
-   * NOTE: this currently is a no-op since the UI doesn't have a readOnly state
    * @default false
    */
   readOnly?: boolean;
@@ -133,7 +132,7 @@ export function useFileUpload({
 
   const multiple = maxFiles > 1;
   const maxFilesReached = acceptedFileEntries.length >= maxFiles;
-  const triggerDisabled = disabled || maxFilesReached;
+  const triggerDisabled = disabled || maxFilesReached || readOnly;
 
   const acceptString = Array.isArray(accept) ? accept.join(",") : accept;
 
@@ -231,7 +230,7 @@ export function useFileUpload({
 
   const setFileEntries = useCallback(
     (files: File[]) => {
-      if (disabled) return;
+      if (disabled || readOnly) return;
 
       const { accepted, rejected } = validateFiles(files);
 
@@ -257,6 +256,7 @@ export function useFileUpload({
     },
     [
       disabled,
+      readOnly,
       multiple,
       validateFiles,
       setAcceptedFileEntries,
@@ -268,7 +268,7 @@ export function useFileUpload({
 
   const reorderFileEntry = useCallback(
     (fromIndex: number, toIndex: number) => {
-      if (disabled) return;
+      if (disabled || readOnly) return;
       setAcceptedFileEntries((prev) => {
         const files = [...(prev ?? [])];
 
@@ -281,7 +281,7 @@ export function useFileUpload({
         return files;
       });
     },
-    [disabled, setAcceptedFileEntries],
+    [disabled, readOnly, setAcceptedFileEntries],
   );
 
   const createFileUrl = useCallback((file: File, callback: (url: string) => void) => {
@@ -290,20 +290,25 @@ export function useFileUpload({
     return () => URL.revokeObjectURL(url);
   }, []);
 
+  // Root `disabled` intentionally does NOT block removal — disabled trigger should still allow
+  // pruning what's already accepted. Root `readOnly` does block it: readOnly preserves the form value.
   const removeFileEntry = useCallback(
     (id: string) => {
+      if (readOnly) return;
       setAcceptedFileEntries((prev) => (prev ?? []).filter((f) => f.id !== id));
     },
-    [setAcceptedFileEntries],
+    [readOnly, setAcceptedFileEntries],
   );
 
   const clearFileEntries = useCallback(() => {
+    if (readOnly) return;
     setAcceptedFileEntries([]);
-  }, [setAcceptedFileEntries]);
+  }, [readOnly, setAcceptedFileEntries]);
 
   const stateProps = elementProps({
     "data-dragging-over": dataAttr(isDragging),
     "data-disabled": dataAttr(triggerDisabled),
+    "data-readonly": dataAttr(readOnly),
     "data-invalid": dataAttr(invalid),
   });
 
@@ -350,6 +355,7 @@ export function useFileUpload({
     acceptedFileEntries,
     dragging: isDragging,
     disabled,
+    readOnly,
     invalid,
     required,
     maxFiles,
@@ -435,6 +441,10 @@ export function useFileUpload({
 
       tabIndex: -1,
       style: visuallyHidden,
+      // exclude from the a11y tree — the trigger/dropzone provides the accessible interface,
+      // and tabIndex: -1 alone does not stop AT browse-mode cursors from reaching the input.
+      // ref: https://github.com/chakra-ui/zag/commit/e847201a3d0b98d3b109d702f9942f0bfa25b97f
+      "aria-hidden": true,
 
       onChange: (event) => {
         const files = event.target.files;
@@ -452,12 +462,7 @@ export function useFileUpload({
 export type UseFileUploadItemReturn = ReturnType<typeof useFileUploadItem>;
 
 export function useFileUploadItem(fileEntry: FileEntry) {
-  const { createFileUrl, removeFileEntry, acceptType } = useFileUploadContext();
-
-  const [isOverlayRendered, setIsOverlayRendered] = useState(false);
-  const overlayRef = useCallback((node: HTMLElement | null) => {
-    setIsOverlayRendered(!!node);
-  }, []);
+  const { createFileUrl, removeFileEntry, acceptType, readOnly } = useFileUploadContext();
 
   // Image blob URL management
   const [imageSrc, setImageSrc] = useState<string>();
@@ -469,15 +474,9 @@ export function useFileUploadItem(fileEntry: FileEntry) {
     return createFileUrl(fileEntry.file, setImageSrc);
   }, [fileEntry.file, createFileUrl, acceptType]);
 
-  const overlayStateProps = elementProps({
-    "data-has-overlay": dataAttr(isOverlayRendered),
-  });
-
   return {
     ...fileEntry,
 
-    refs: { overlay: overlayRef },
-
     ...(acceptType === "image" &&
       imageSrc && {
         imageProps: {
@@ -486,13 +485,13 @@ export function useFileUploadItem(fileEntry: FileEntry) {
         } satisfies React.ImgHTMLAttributes<HTMLImageElement>,
       }),
 
-    thumbnailProps: overlayStateProps,
-    metadataProps: overlayStateProps,
-
-    // NOTE: `disabled` of item remove button works separately from the overall `disabled` state so we don't have stateProps here
+    // Root `disabled` is intentionally NOT propagated here — disabled still allows pruning
+    // already-accepted files. Root `readOnly` does block removal so the value is preserved.
     removeButtonProps: buttonProps({
       type: "button",
+      disabled: readOnly,
       onClick: () => {
+        if (readOnly) return;
         removeFileEntry(fileEntry.id);
       },
     }),