@mainframework/dropzone 1.0.26 → 1.0.28

package/README.md

@@ -26,10 +26,32 @@ The `useFileSelector` hook accepts optional configuration:
 const { ... } = useFileSelector({
   maximumUploadCount: 5,      // Default: 30
   maximumFileSize: 5e6,       // Default: 5 MB
-  acceptedTypes: defaultTypeExtensions,  // MIME type map, see below
+  acceptedTypes: defaultTypeExtensions,  // MIME type -> extension map, see below
 });
 ```
 
+## Minimal Usage
+
+```tsx
+import { useFileSelector } from "@mainframework/dropzone";
+
+export function Uploader() {
+  const { FileSelector, validFiles, invalidFiles, clearCache } = useFileSelector();
+
+  return (
+    <>
+      <FileSelector messageParagraph="Drop files here or click to select" />
+
+      {invalidFiles.length > 0 && <p role="alert">Some files were rejected.</p>}
+
+      <button type="button" onClick={clearCache} disabled={validFiles.length === 0}>
+        Clear
+      </button>
+    </>
+  );
+}
+```
+
 ## Hook Exports
 
 The hook returns the following:
@@ -70,12 +92,11 @@ The hook returns the following:
 
 ### FileSelector props (`FileSelectorViewProps`)
 
-The `FileSelector` from the hook accepts **view-only** props (styling, copy, accessibility, `acceptTypes`). Do not pass `onChange` or drag handlers; the hook supplies those. When rendering it, you can pass:
+The `FileSelector` from the hook accepts **view-only** props (styling, copy, accessibility). Do not pass `onChange` or drag handlers; the hook supplies those. When rendering it, you can pass:
 
 | Prop                        | Type     | Default                                                   | Description                                  |
 | --------------------------- | -------- | --------------------------------------------------------- | -------------------------------------------- |
 | `inputId`                   | `string` | auto-generated                                            | ID for the file input (for `aria-controls`). |
-| `acceptTypes`               | `string` | `.png, .jpg, .jpeg, .pdf, .svg, ...`                      | `accept` attribute for the file input.       |
 | `messageParagraph`          | `string` | "Drag 'n' drop some files here, or click to select files" | Text shown in the dropzone.                  |
 | `inputClassName`            | `string` | `"hiddenInput"`                                           | CSS classes for the hidden input.            |
 | `clickableAreaClassName`    | `string` | Tailwind dropzone styles                                  | CSS classes for the clickable area.          |
@@ -130,7 +151,7 @@ export const App = () => {
 
   return (
     <>
-      <FileSelector messageParagraph="Drop files here or click to select" acceptTypes=".png,.jpg,.jpeg,.pdf" />
+      <FileSelector messageParagraph="Drop files here or click to select" />
 
       {maxUploadError.status && <p role="alert">{maxUploadError.message}</p>}
       {maxFileSizeError.status && <p role="alert">{maxFileSizeError.message}</p>}
@@ -149,6 +170,25 @@ export const App = () => {
 };
 ```
 
+## Cleanup / memory
+
+- Prefer clearing via the provided methods:
+  - `clearCache()` / `onCancel()` to clear files and revoke blob URLs
+  - `onRemoveFile(index)` to remove one file and revoke its blob URL
+  - `clearBlobs()` to revoke blob URLs without clearing arrays
+- When the hook instance unmounts, it clears internal state and revokes any blob URLs it created.
+- Mutating the `validFiles` array directly (for example `validFiles.length = 0`) is not a supported way to clear files/blobs; use `clearCache()` instead so blob URLs are properly revoked.
+
+## Exported types
+
+If you need types externally, the package exports:
+
+- `FileData`
+- `ErrorMessage`
+- `IFileUploaderProps`
+- `FileSelectorViewProps`
+- `FileSelectorHandlerProps`
+
 ## Manipulating validFiles in a Preview Component
 
 As an example, when building a preview component (e.g. `PreviewImages`), use the hook’s methods to update `validFiles` based on user actions:

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChangeEvent, DragEvent } from 'react';
 
 /** Props for styling, copy, and accessibility on the dropzone. Used by the `FileSelector` returned from `useFileSelector`. */
 interface FileSelectorViewProps {
     inputId?: string;
-    acceptTypes?: string;
     messageParagraph?: string;
     inputClassName?: string;
     clickableAreaClassName?: string;
@@ -17,6 +17,14 @@ interface FileSelectorViewProps {
     ariaLabelButton?: string;
     ariaLabelledBy?: string;
 }
+/** File input and drag-and-drop handlers; supplied internally by `useFileSelector` to the presentational component. */
+interface FileSelectorHandlerProps {
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onDragOver: (e: DragEvent<HTMLButtonElement>) => void;
+    onDrop: (e: DragEvent<HTMLButtonElement>) => void;
+    onDragEnter: (e: DragEvent<HTMLButtonElement>) => void;
+    onDragLeave: (e: DragEvent<HTMLButtonElement>) => void;
+}
 interface IFileUploaderProps {
     acceptTypes?: string;
     maximumUploadCount?: number;
@@ -55,3 +63,4 @@ declare const useFileSelector: ({ maximumUploadCount, maximumFileSize, acceptedT
 };
 
 export { useFileSelector };
+export type { ErrorMessage, FileData, FileSelectorHandlerProps, FileSelectorViewProps, IFileUploaderProps };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, memo, useId, useCallback, useState, useMemo } from 'react';
+import { useRef, memo, useId, useCallback, useState, useEffect, useMemo } from 'react';
 
 //Use this to quickly get the file extensions
 //Devs can pass their own custom type mappings to override these defaults
@@ -3391,7 +3391,7 @@ const withDragDefaults = (handler) => {
     };
 };
 
-const defaultAcceptTypes = ".png, .jpg, .jpeg, .pdf, .svg, image/svg+xml, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+const defaultAccept = ".png, .jpg, .jpeg, .pdf, .svg, image/svg+xml, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document";
 const SCOPE_CLASS = "file-selector-scope";
 const defaultInputClassName = "hiddenInput";
 const defaultClickableAreaClassName = "dropzone border-dashed border-2 border-gray-500 p-4 rounded-md text-center cursor-pointer bg-inherit hover:border-gray-400 text-inherit font-bold py-2 px-4";
@@ -3401,7 +3401,7 @@ const defaultMessageParagraph = "Drag 'n' drop some files here, or click to sele
 const defaultAriaLabel = "File upload drop zone";
 const defaultAriaDescribedBy = undefined;
 const defaultAriaLabelButton = "Choose files to upload";
-const FileSelectorComponent = ({ inputId, acceptTypes = defaultAcceptTypes, messageParagraph = defaultMessageParagraph, inputClassName, clickableAreaClassName, dropZoneWrapperClassName, messageParagraphClassName, ariaLabel = defaultAriaLabel, ariaDescribedBy = defaultAriaDescribedBy, ariaLabelButton = defaultAriaLabelButton, ariaLabelledBy, // New prop for button
+const FileSelectorComponent = ({ inputId, accept = defaultAccept, messageParagraph = defaultMessageParagraph, inputClassName, clickableAreaClassName, dropZoneWrapperClassName, messageParagraphClassName, ariaLabel = defaultAriaLabel, ariaDescribedBy = defaultAriaDescribedBy, ariaLabelButton = defaultAriaLabelButton, ariaLabelledBy, // New prop for button
 onChange, onDragOver, onDrop, onDragEnter, onDragLeave, }) => {
     const fileInputRef = useRef(null);
     const messageId = useId();
@@ -3431,11 +3431,37 @@ onChange, onDragOver, onDrop, onDragEnter, onDragLeave, }) => {
     const resolvedDropZoneWrapperClassName = mergeStyles(dropZoneWrapperClassName ?? defaultDropZoneWrapperClassName);
     const resolvedMessageParagraphClassName = mergeStyles(messageParagraphClassName ?? defaultMessageParagraphClassName);
     const resolvedInputId = inputId ?? messageId;
-    return (jsxs("div", { role: "group", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className: mergeStyles(SCOPE_CLASS, resolvedDropZoneWrapperClassName), draggable: false, children: [jsx("button", { type: "button", className: resolvedClickableAreaClassName, onClick: internalOnClick, onDragOver: internalOnDragOver, onDrop: internalOnDrop, onDragEnter: internalOnDragEnter, onDragLeave: internalOnDragLeave, draggable: false, "aria-label": ariaLabelButton, "aria-labelledby": ariaLabelledBy ?? messageId, "aria-controls": resolvedInputId, "aria-haspopup": "dialog", children: jsx("p", { id: messageId, className: resolvedMessageParagraphClassName, children: messageParagraph }) }), jsx("input", { ref: fileInputRef, id: resolvedInputId, type: "file", className: inputClasses, onChange: onChange, accept: acceptTypes, multiple: true, "aria-hidden": "true", tabIndex: -1 })] }));
+    return (jsxs("div", { role: "group", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className: mergeStyles(SCOPE_CLASS, resolvedDropZoneWrapperClassName), draggable: false, children: [jsx("button", { type: "button", className: resolvedClickableAreaClassName, onClick: internalOnClick, onDragOver: internalOnDragOver, onDrop: internalOnDrop, onDragEnter: internalOnDragEnter, onDragLeave: internalOnDragLeave, draggable: false, "aria-label": ariaLabelButton, "aria-labelledby": ariaLabelledBy ?? messageId, "aria-controls": resolvedInputId, "aria-haspopup": "dialog", children: jsx("p", { id: messageId, className: resolvedMessageParagraphClassName, children: messageParagraph }) }), jsx("input", { ref: fileInputRef, id: resolvedInputId, type: "file", className: inputClasses, onChange: onChange, accept: accept, multiple: true, "aria-hidden": "true", tabIndex: -1 })] }));
 };
 const FileSelector = memo(FileSelectorComponent);
 FileSelector.displayName = "FileSelector";
 
+const buildAcceptString = (acceptedTypes) => {
+    const seen = new Set();
+    // Prefer extensions (input accept supports extensions and MIME types)
+    for (const ext of Object.values(acceptedTypes)) {
+        const trimmed = ext.trim();
+        if (!trimmed)
+            continue;
+        if (!trimmed.startsWith(".")) {
+            const withDot = `.${trimmed}`;
+            if (!seen.has(withDot))
+                seen.add(withDot);
+            continue;
+        }
+        if (!seen.has(trimmed))
+            seen.add(trimmed);
+    }
+    // Add MIME keys too (helps some pickers)
+    for (const mime of Object.keys(acceptedTypes)) {
+        const trimmed = mime.trim();
+        if (!trimmed)
+            continue;
+        if (!seen.has(trimmed))
+            seen.add(trimmed);
+    }
+    return Array.from(seen).join(", ");
+};
 const useFileSelector = ({ maximumUploadCount: maximumUploadCount$1 = maximumUploadCount, maximumFileSize: maximumFileSize$1 = maximumFileSize, acceptedTypes = defaultTypeExtensions, } = {}) => {
     //State
     //Trigger a re-render
@@ -3456,14 +3482,14 @@ const useFileSelector = ({ maximumUploadCount: maximumUploadCount$1 = maximumUpl
         maxUploadErrorRef.current.message = status
             ? `You have attempted to upload ${fileCount} files. The maximum allowable uploads for this feature is ${maximumUploads}`
             : "";
-        setUpdateTrigger((state) => (state += 1));
+        setUpdateTrigger((state) => state + 1);
     }, []);
     const setMaximumFileSizeExceeded = useCallback((status = false) => {
         maxFileSizeErrorRef.current.status = status;
         maxFileSizeErrorRef.current.message = status
             ? `You have attempted upload a file(s) that exceeds the maximum size of ${printableMaximumFileSize}`
             : "";
-        setUpdateTrigger((state) => (state += 1));
+        setUpdateTrigger((state) => state + 1);
     }, []);
     const clearBlobs = useCustomCallback(() => {
         //Remove any blobs created in memory
@@ -3482,6 +3508,11 @@ const useFileSelector = ({ maximumUploadCount: maximumUploadCount$1 = maximumUpl
         SetInvalidFiles([]);
         SetValidFiles([]);
     }, [clearBlobs]);
+    useEffect(() => {
+        return () => {
+            clearCache();
+        };
+    }, [clearCache]);
     const onCancel = useCustomCallback(() => {
         clearCache();
     }, [clearCache]);
@@ -3611,18 +3642,21 @@ const useFileSelector = ({ maximumUploadCount: maximumUploadCount$1 = maximumUpl
             onDragEnter: handlers.onDragEnter,
             onDragLeave: handlers.onDragLeave,
         };
-        const Component = (props) => jsx(FileSelector, { ...props, ...handlerProps });
+        const internalProps = { accept: handlers.accept };
+        const Component = (props) => (jsx(FileSelector, { ...props, ...handlerProps, ...internalProps }));
         Component.displayName = "FileSelectorWrapper";
         return Component;
     };
     // Then in the hook's return:
+    const accept = useMemo(() => buildAcceptString(acceptedTypes), [acceptedTypes]);
     const BoundFileSelector = useMemo(() => createFileSelectorComponent({
         onInputChange,
         onDragOver,
         onDrop,
         onDragEnter,
         onDragLeave,
-    }), [onInputChange, onDragOver, onDrop, onDragEnter, onDragLeave]);
+        accept,
+    }), [onInputChange, onDragOver, onDrop, onDragEnter, onDragLeave, accept]);
     return {
         //Properties
         validFiles,