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

package/lib/{FileUpload-12s-BsPs5ndy.js → FileUpload-12s-BJqUtE7a.js}

@@ -129,7 +129,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
     const { acceptedFileEntries, isDragging, setAcceptedFileEntries, setIsDragging } = useFileUploadState(props);
     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;
     const acceptType = getFileAcceptType(accept);
     const isValidFileType = useCallback((file)=>{
@@ -214,7 +214,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         setAcceptedFileEntries
     ]);
     const setFileEntries = useCallback((files)=>{
-        if (disabled) return;
+        if (disabled || readOnly) return;
         const { accepted, rejected } = validateFiles(files);
         const acceptedEntries = accepted.map((file)=>({
                 id: `file-${Date.now()}-${++idCounterRef.current}`,
@@ -242,6 +242,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         }
     }, [
         disabled,
+        readOnly,
         multiple,
         validateFiles,
         setAcceptedFileEntries,
@@ -250,7 +251,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         updateFileEntryStatus
     ]);
     const reorderFileEntry = useCallback((fromIndex, toIndex)=>{
-        if (disabled) return;
+        if (disabled || readOnly) return;
         setAcceptedFileEntries((prev)=>{
             const files = [
                 ...prev ?? []
@@ -263,6 +264,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         });
     }, [
         disabled,
+        readOnly,
         setAcceptedFileEntries
     ]);
     const createFileUrl = useCallback((file, callback)=>{
@@ -270,19 +272,26 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         callback(url);
         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)=>{
+        if (readOnly) return;
         setAcceptedFileEntries((prev)=>(prev ?? []).filter((f)=>f.id !== id));
     }, [
+        readOnly,
         setAcceptedFileEntries
     ]);
     const clearFileEntries = useCallback(()=>{
+        if (readOnly) return;
         setAcceptedFileEntries([]);
     }, [
+        readOnly,
         setAcceptedFileEntries
     ]);
     const stateProps = elementProps({
         "data-dragging-over": dataAttr(isDragging),
         "data-disabled": dataAttr(triggerDisabled),
+        "data-readonly": dataAttr(readOnly),
         "data-invalid": dataAttr(invalid)
     });
     useEffect(()=>{
@@ -320,6 +329,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         acceptedFileEntries,
         dragging: isDragging,
         disabled,
+        readOnly,
         invalid,
         required,
         maxFiles,
@@ -383,6 +393,10 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
             "aria-required": ariaAttr(required),
             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;
                 if (files) {
@@ -394,11 +408,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
     };
 }
 function useFileUploadItem(fileEntry) {
-    const { createFileUrl, removeFileEntry, acceptType } = useFileUploadContext();
-    const [isOverlayRendered, setIsOverlayRendered] = useState(false);
-    const overlayRef = useCallback((node)=>{
-        setIsOverlayRendered(!!node);
-    }, []);
+    const { createFileUrl, removeFileEntry, acceptType, readOnly } = useFileUploadContext();
     // Image blob URL management
     const [imageSrc, setImageSrc] = useState();
     useEffect(()=>{
@@ -410,26 +420,21 @@ function useFileUploadItem(fileEntry) {
         createFileUrl,
         acceptType
     ]);
-    const overlayStateProps = elementProps({
-        "data-has-overlay": dataAttr(isOverlayRendered)
-    });
     return {
         ...fileEntry,
-        refs: {
-            overlay: overlayRef
-        },
         ...acceptType === "image" && imageSrc && {
             imageProps: {
                 src: imageSrc,
                 alt: fileEntry.file.name
             }
         },
-        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);
             }
         })
@@ -534,29 +539,11 @@ const FileUploadItemImage = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
 });
 FileUploadItemImage.displayName = "FileUploadItemImage";
-const FileUploadItemThumbnail = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { thumbnailProps } = useFileUploadItemContext();
-    const mergedProps = mergeProps(thumbnailProps, props);
-    return /*#__PURE__*/ jsx(Primitive.div, {
-        ref: ref,
-        ...mergedProps
-    });
-});
-FileUploadItemThumbnail.displayName = "FileUploadItemThumbnail";
-const FileUploadItemMetadata = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { metadataProps } = useFileUploadItemContext();
-    const mergedProps = mergeProps(metadataProps, props);
-    return /*#__PURE__*/ jsx(Primitive.div, {
-        ref: ref,
-        ...mergedProps
-    });
-});
-FileUploadItemMetadata.displayName = "FileUploadItemMetadata";
 const FileUploadItemBackdrop = /*#__PURE__*/ forwardRef(({ status, children, ...props }, ref)=>{
     const entry = useFileUploadItemContext();
     if (entry.status !== status) return null;
     return /*#__PURE__*/ jsx(Primitive.div, {
-        ref: composeRefs(entry.refs.overlay, ref),
+        ref: ref,
         ...props,
         children: typeof children === "function" ? children(entry) : children
     });
@@ -566,4 +553,4 @@ const FileUploadContext = (props)=>{
     return props.children(useFileUploadContext());
 };
 
-export { FileUploadContext as F, FileUploadDropzone as a, FileUploadHiddenInput as b, FileUploadItemBackdrop as c, FileUploadItemImage as d, FileUploadItemMetadata as e, FileUploadItemName as f, FileUploadItemRemoveButton as g, FileUploadItemSize as h, FileUploadItemThumbnail as i, FileUploadRoot as j, FileUploadTrigger as k, FileUploadItemProvider as l, useFileUploadItemContext as m, useFileUpload as n, useFileUploadItem as o, useFileUploadContext as u };
+export { FileUploadContext as F, FileUploadDropzone as a, FileUploadHiddenInput as b, FileUploadItemBackdrop as c, FileUploadItemImage as d, FileUploadItemName as e, FileUploadItemRemoveButton as f, FileUploadItemSize as g, FileUploadRoot as h, FileUploadTrigger as i, FileUploadItemProvider as j, useFileUploadItemContext as k, useFileUpload as l, useFileUploadItem as m, useFileUploadContext as u };

package/lib/{FileUpload-12s-1EmFGBYg.cjs → FileUpload-12s-nKKpZreT.cjs}

@@ -129,7 +129,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
     const { acceptedFileEntries, isDragging, setAcceptedFileEntries, setIsDragging } = useFileUploadState(props);
     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;
     const acceptType = getFileAcceptType(accept);
     const isValidFileType = react.useCallback((file)=>{
@@ -214,7 +214,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         setAcceptedFileEntries
     ]);
     const setFileEntries = react.useCallback((files)=>{
-        if (disabled) return;
+        if (disabled || readOnly) return;
         const { accepted, rejected } = validateFiles(files);
         const acceptedEntries = accepted.map((file)=>({
                 id: `file-${Date.now()}-${++idCounterRef.current}`,
@@ -242,6 +242,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         }
     }, [
         disabled,
+        readOnly,
         multiple,
         validateFiles,
         setAcceptedFileEntries,
@@ -250,7 +251,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         updateFileEntryStatus
     ]);
     const reorderFileEntry = react.useCallback((fromIndex, toIndex)=>{
-        if (disabled) return;
+        if (disabled || readOnly) return;
         setAcceptedFileEntries((prev)=>{
             const files = [
                 ...prev ?? []
@@ -263,6 +264,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         });
     }, [
         disabled,
+        readOnly,
         setAcceptedFileEntries
     ]);
     const createFileUrl = react.useCallback((file, callback)=>{
@@ -270,19 +272,26 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         callback(url);
         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 = react.useCallback((id)=>{
+        if (readOnly) return;
         setAcceptedFileEntries((prev)=>(prev ?? []).filter((f)=>f.id !== id));
     }, [
+        readOnly,
         setAcceptedFileEntries
     ]);
     const clearFileEntries = react.useCallback(()=>{
+        if (readOnly) return;
         setAcceptedFileEntries([]);
     }, [
+        readOnly,
         setAcceptedFileEntries
     ]);
     const stateProps = domUtils.elementProps({
         "data-dragging-over": domUtils.dataAttr(isDragging),
         "data-disabled": domUtils.dataAttr(triggerDisabled),
+        "data-readonly": domUtils.dataAttr(readOnly),
         "data-invalid": domUtils.dataAttr(invalid)
     });
     react.useEffect(()=>{
@@ -320,6 +329,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
         acceptedFileEntries,
         dragging: isDragging,
         disabled,
+        readOnly,
         invalid,
         required,
         maxFiles,
@@ -383,6 +393,10 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
             "aria-required": domUtils.ariaAttr(required),
             tabIndex: -1,
             style: domUtils.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;
                 if (files) {
@@ -394,11 +408,7 @@ function useFileUpload({ accept, disabled = false, required = false, invalid = f
     };
 }
 function useFileUploadItem(fileEntry) {
-    const { createFileUrl, removeFileEntry, acceptType } = useFileUploadContext();
-    const [isOverlayRendered, setIsOverlayRendered] = react.useState(false);
-    const overlayRef = react.useCallback((node)=>{
-        setIsOverlayRendered(!!node);
-    }, []);
+    const { createFileUrl, removeFileEntry, acceptType, readOnly } = useFileUploadContext();
     // Image blob URL management
     const [imageSrc, setImageSrc] = react.useState();
     react.useEffect(()=>{
@@ -410,26 +420,21 @@ function useFileUploadItem(fileEntry) {
         createFileUrl,
         acceptType
     ]);
-    const overlayStateProps = domUtils.elementProps({
-        "data-has-overlay": domUtils.dataAttr(isOverlayRendered)
-    });
     return {
         ...fileEntry,
-        refs: {
-            overlay: overlayRef
-        },
         ...acceptType === "image" && imageSrc && {
             imageProps: {
                 src: imageSrc,
                 alt: fileEntry.file.name
             }
         },
-        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: domUtils.buttonProps({
             type: "button",
+            disabled: readOnly,
             onClick: ()=>{
+                if (readOnly) return;
                 removeFileEntry(fileEntry.id);
             }
         })
@@ -534,29 +539,11 @@ const FileUploadItemImage = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     });
 });
 FileUploadItemImage.displayName = "FileUploadItemImage";
-const FileUploadItemThumbnail = /*#__PURE__*/ react.forwardRef((props, ref)=>{
-    const { thumbnailProps } = useFileUploadItemContext();
-    const mergedProps = domUtils.mergeProps(thumbnailProps, props);
-    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
-        ref: ref,
-        ...mergedProps
-    });
-});
-FileUploadItemThumbnail.displayName = "FileUploadItemThumbnail";
-const FileUploadItemMetadata = /*#__PURE__*/ react.forwardRef((props, ref)=>{
-    const { metadataProps } = useFileUploadItemContext();
-    const mergedProps = domUtils.mergeProps(metadataProps, props);
-    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
-        ref: ref,
-        ...mergedProps
-    });
-});
-FileUploadItemMetadata.displayName = "FileUploadItemMetadata";
 const FileUploadItemBackdrop = /*#__PURE__*/ react.forwardRef(({ status, children, ...props }, ref)=>{
     const entry = useFileUploadItemContext();
     if (entry.status !== status) return null;
     return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
-        ref: reactComposeRefs.composeRefs(entry.refs.overlay, ref),
+        ref: ref,
         ...props,
         children: typeof children === "function" ? children(entry) : children
     });
@@ -571,12 +558,10 @@ exports.FileUploadDropzone = FileUploadDropzone;
 exports.FileUploadHiddenInput = FileUploadHiddenInput;
 exports.FileUploadItemBackdrop = FileUploadItemBackdrop;
 exports.FileUploadItemImage = FileUploadItemImage;
-exports.FileUploadItemMetadata = FileUploadItemMetadata;
 exports.FileUploadItemName = FileUploadItemName;
 exports.FileUploadItemProvider = FileUploadItemProvider;
 exports.FileUploadItemRemoveButton = FileUploadItemRemoveButton;
 exports.FileUploadItemSize = FileUploadItemSize;
-exports.FileUploadItemThumbnail = FileUploadItemThumbnail;
 exports.FileUploadRoot = FileUploadRoot;
 exports.FileUploadTrigger = FileUploadTrigger;
 exports.useFileUpload = useFileUpload;

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var FileUpload12s = require('./FileUpload-12s-1EmFGBYg.cjs');
+var FileUpload12s = require('./FileUpload-12s-nKKpZreT.cjs');
 
 var FileUpload_namespace = {
   __proto__: null,
@@ -7,11 +7,9 @@ var FileUpload_namespace = {
   HiddenInput: FileUpload12s.FileUploadHiddenInput,
   ItemBackdrop: FileUpload12s.FileUploadItemBackdrop,
   ItemImage: FileUpload12s.FileUploadItemImage,
-  ItemMetadata: FileUpload12s.FileUploadItemMetadata,
   ItemName: FileUpload12s.FileUploadItemName,
   ItemRemoveButton: FileUpload12s.FileUploadItemRemoveButton,
   ItemSize: FileUpload12s.FileUploadItemSize,
-  ItemThumbnail: FileUpload12s.FileUploadItemThumbnail,
   Root: FileUpload12s.FileUploadRoot,
   Trigger: FileUpload12s.FileUploadTrigger
 };
@@ -44,12 +42,10 @@ exports.FileUploadDropzone = FileUpload12s.FileUploadDropzone;
 exports.FileUploadHiddenInput = FileUpload12s.FileUploadHiddenInput;
 exports.FileUploadItemBackdrop = FileUpload12s.FileUploadItemBackdrop;
 exports.FileUploadItemImage = FileUpload12s.FileUploadItemImage;
-exports.FileUploadItemMetadata = FileUpload12s.FileUploadItemMetadata;
 exports.FileUploadItemName = FileUpload12s.FileUploadItemName;
 exports.FileUploadItemProvider = FileUpload12s.FileUploadItemProvider;
 exports.FileUploadItemRemoveButton = FileUpload12s.FileUploadItemRemoveButton;
 exports.FileUploadItemSize = FileUpload12s.FileUploadItemSize;
-exports.FileUploadItemThumbnail = FileUpload12s.FileUploadItemThumbnail;
 exports.FileUploadRoot = FileUpload12s.FileUploadRoot;
 exports.FileUploadTrigger = FileUpload12s.FileUploadTrigger;
 exports.useFileUpload = FileUpload12s.useFileUpload;