@mainframework/dropzone 1.0.27 → 1.1.0

package/dist/shared/components/FileSelector/FileSelector.d.ts

@@ -0,0 +1,6 @@
+import type { FileSelectorProps } from "../../types/types";
+import "./tailwind.css";
+export declare const FileSelector: {
+    ({ inputId, accept, messageParagraph, inputClassName, clickableAreaClassName, dropZoneWrapperClassName, messageParagraphClassName, ariaLabel, ariaDescribedBy, ariaLabelButton, onChange, onDragOver, onDrop, onDragEnter, onDragLeave, }: FileSelectorProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/shared/components/FileSelector/index.d.ts

@@ -0,0 +1 @@
+export { FileSelector } from "./FileSelector";

package/dist/shared/hooks/useFileSelector.d.ts

@@ -0,0 +1,20 @@
+import type { ErrorMessage, FileData, FileSelectorViewProps, IFileUploaderProps } from "../types/types";
+export 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: {
+        ({ inputId, messageParagraph, inputClassName, clickableAreaClassName, dropZoneWrapperClassName, messageParagraphClassName, ariaLabel, ariaDescribedBy, ariaLabelButton, }: FileSelectorViewProps): import("react").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/shared/types/types.d.ts

@@ -0,0 +1,46 @@
+import type { ChangeEvent, DragEvent } from "react";
+/** Props for styling, copy, and accessibility on the dropzone. Used by the `FileSelector` returned from `useFileSelector`. */
+export interface FileSelectorViewProps {
+    inputId?: 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;
+}
+/** File input and drag-and-drop handlers; supplied internally by `useFileSelector` to the presentational component. */
+export 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;
+}
+/** Internal props injected by `useFileSelector` (not part of the public view props). */
+export interface FileSelectorInternalProps {
+    accept?: string;
+}
+/** Full props for the internal `FileSelector` component (view + handlers). */
+export interface FileSelectorProps extends FileSelectorViewProps, FileSelectorHandlerProps, FileSelectorInternalProps {
+}
+export interface IFileUploaderProps {
+    maximumUploadCount?: number;
+    maximumFileSize?: number;
+    acceptedTypes?: Record<string, string>;
+}
+export interface FileData {
+    id: string;
+    file: File | Blob;
+    url: string;
+    type: string;
+}
+export interface ErrorMessage {
+    status: boolean;
+    message: string;
+}

package/dist/shared/utils/dragAndDrop.d.ts

@@ -0,0 +1,2 @@
+import type { SyntheticEvent } from "react";
+export declare const withDragDefaults: <E extends SyntheticEvent>(handler: (e: E) => void) => (e: E) => void;

package/dist/shared/utils/mergeStyles.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare const mergeStyles: (...inputs: ClassValue[]) => string;

package/dist/shared/utils/processUploadedFiles.d.ts

@@ -0,0 +1,23 @@
+export declare const hasSurpassedMaxSize: (file: File | Blob, maxSize?: number) => boolean;
+export declare const defaultTypeExtensions: Readonly<Record<string, string>>;
+export declare const maximumUploadCount = 30;
+export declare const maximumFileSize = 5000000;
+export declare const formatFileSize: (bytes: number) => string;
+export declare const buildAcceptString: (acceptedTypes: Record<string, string>) => string;
+type TypeExtensions = Readonly<Record<string, string>>;
+export declare const createUrlString: (file: File) => string;
+export declare const clearBlobFromMemory: (file: File) => void;
+export declare const createUrlStringWithClear: (file: File) => {
+    url: string;
+    clear: () => void;
+};
+export declare const isValidFileType: (file: File, acceptedTypes?: TypeExtensions) => boolean;
+export declare const checkFilesMaximumSize: (files: readonly (File | Blob)[], max?: number) => boolean;
+export declare const svgXmlnsAttributeCheck: (file: File, allowableTypes?: TypeExtensions) => Promise<{
+    id: string;
+    type: string;
+    file: File;
+    url: string;
+} | null>;
+export declare const renameFile: (id: string, file: File | Blob) => File | Blob;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mainframework/dropzone",
-  "version": "1.0.27",
+  "version": "1.1.0",
   "description": "A file selection package, without all of the re-rendering issues that come with other dropzone packages",
   "type": "module",
   "module": "./dist/index.js",
@@ -24,11 +24,10 @@
     "build:css:prod": "npx @tailwindcss/cli -i ./src/index.css -o ./src/shared/components/FileSelector/tailwind.css --minify && npx postcss ./src/shared/components/FileSelector/tailwind.css -o ./src/shared/components/FileSelector/tailwind.css",
     "husky": "husky",
     "clean": "rimraf dist",
-    "lint": "eslint --ext 'ts,tsx' --max-warnings=0 --fix",
+    "lint": "eslint --max-warnings=0 --fix",
     "lint-staged": "lint-staged",
     "prebuild": "yarn husky && yarn clean",
-    "copy:cssOld": "copyfiles -a -u 4 src/shared/components/FileSelector/tailwind.css dist/shared/components/FileSelector/",
-    "build": "yarn build:css:prod && rollup -c",
+    "build": "yarn build:css:prod && rollup -c && npx tsc --emitDeclarationOnly",
     "test": "jest --config jestconfig.json"
   },
   "peerDependencies": {
@@ -68,45 +67,52 @@
     ]
   },
   "devDependencies": {
-    "@mainframework/is-deep-equal": "^1.0.10",
+    "@babel/core": "^8.0.1",
+    "@babel/preset-react": "^8.0.1",
+    "@babel/preset-typescript": "^8.0.1",
+    "@eslint/js": "^10.0.1",
+    "@mainframework/is-deep-equal": "^1.1.0",
+    "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/cli": "^4.2.4",
+    "@tailwindcss/cli": "^4.3.2",
     "@tailwindcss/forms": "^0.5.11",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
+    "babel-plugin-react-compiler": "^1.0.0",
     "clsx": "^2.1.1",
     "copyfiles": "^2.4.1",
     "cross-env": "^10.1.0",
-    "eslint": "^10.3.0",
+    "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.7.0",
     "husky": "^9.1.7",
-    "jest": "^30.4.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^30.4.0",
-    "lint-staged": "^17.0.2",
-    "postcss": "^8.5.14",
+    "jest": "^30.4.2",
+    "jest-canvas-mock": "^2.5.8",
+    "jest-environment-jsdom": "^30.4.1",
+    "lint-staged": "17.0.8",
+    "postcss": "^8.5.16",
     "postcss-cli": "^11.0.1",
     "postcss-prefix-selector": "^2.1.1",
-    "prettier": "^3.8.3",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "prettier": "^3.9.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "rimraf": "^6.1.3",
-    "rollup": "^4.60.3",
+    "rollup": "^4.62.2",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.4",
-    "ts-jest": "^29.4.9",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.2",
+    "ts-jest": "^29.4.11",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.2"
+    "typescript-eslint": "^8.63.0"
   }
 }