@mainframework/dropzone 1.0.27 → 1.1.0

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.          |
@@ -84,7 +105,6 @@ The `FileSelector` from the hook accepts **view-only** props (styling, copy, acc
 | `ariaLabel`                 | `string` | "File upload drop zone"                                   | Accessible name for the drop zone.           |
 | `ariaDescribedBy`           | `string` | —                                                         | ID of element that describes the drop zone.  |
 | `ariaLabelButton`           | `string` | "Choose files to upload"                                  | Accessible label for the button.             |
-| `ariaLabelledBy`            | `string` | —                                                         | ID of element that labels the button.        |
 
 ## Default Accepted Types
 
@@ -130,7 +150,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 +169,33 @@ export const App = () => {
 };
 ```
 
+## Cleanup / memory
+
+> **Warning: memory management is the caller's responsibility.** The hook does **not** automatically revoke blob URLs on unmount. You **must** call `clearBlobs()` or `clearCache()` yourself — for example in a `useEffect` cleanup, on cancel, or after a successful upload — to prevent memory leaks.
+
+```tsx
+useEffect(() => {
+  return () => {
+    clearBlobs(); // revoke all blob URLs when the component unmounts
+  };
+}, [clearBlobs]);
+```
+
+- Use `clearCache()` / `onCancel()` to clear files **and** revoke blob URLs.
+- Use `onRemoveFile(index)` to remove one file and revoke its blob URL.
+- Use `clearBlobs()` to revoke blob URLs without clearing the file arrays.
+- 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,57 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-/** 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;
-    dropZoneWrapperClassName?: string;
-    messageParagraphClassName?: string;
-    /** Accessible name for the drop zone region (default: "File upload") */
-    ariaLabel?: string;
-    /** ID of element that describes the drop zone (e.g. help text) */
-    ariaDescribedBy?: string;
-    /** Accessible label for the file input button when messageParagraph is not sufficient */
-    ariaLabelButton?: string;
-    ariaLabelledBy?: string;
-}
-interface IFileUploaderProps {
-    acceptTypes?: string;
-    maximumUploadCount?: number;
-    maximumFileSize?: number;
-    acceptedTypes?: Record<string, string>;
-}
-interface FileData {
-    id: string;
-    file: File | Blob;
-    url: string;
-    type: string;
-}
-interface ErrorMessage {
-    status: boolean;
-    message: string;
-}
-
-declare const useFileSelector: ({ maximumUploadCount, maximumFileSize, acceptedTypes, }?: IFileUploaderProps) => {
-    validFiles: FileData[];
-    invalidFiles: File[];
-    clearCache: () => void;
-    getValidFileStreams: () => (File | Blob)[];
-    onCancel: () => void;
-    onIdChange: (index: number, id: string, files: FileData[]) => void;
-    onRemoveFile: (index: number) => void;
-    clearBlobs: () => void;
-    clearBlob: (file: File) => void;
-    maxUploadError: ErrorMessage;
-    maxFileSizeError: ErrorMessage;
-    setMaximumFileSizeExceeded: (status?: boolean) => void;
-    setMaximumUploadsExceeded: (status?: boolean, fileCount?: number, maximumUploads?: number) => void;
-    FileSelector: {
-        (props: FileSelectorViewProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-};
-
-export { useFileSelector };
+export { useFileSelector } from "./shared/hooks/useFileSelector";
+export type { FileData, ErrorMessage, IFileUploaderProps, FileSelectorViewProps, FileSelectorHandlerProps, } from "./shared/types/types";