@canonical/maas-react-components 2.0.2 → 2.0.3

package/dist/src/lib/components/FileUpload/FileUpload.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { DropzoneOptions, FileRejection } from 'react-dropzone';
 export type FileUploadFile = File & {
     percentUploaded?: number;
@@ -6,15 +6,71 @@ export type FileUploadFile = File & {
 export interface FileUploadProps {
     accept?: DropzoneOptions["accept"];
     error?: ReactNode;
-    files: FileUploadFile[];
+    files?: FileUploadFile[];
     help?: string;
     label?: string;
     maxFiles?: number;
     maxSize?: number;
-    onFileUpload: NonNullable<DropzoneOptions["onDrop"]>;
-    rejectedFiles: FileRejection[];
-    removeFile: (file: FileUploadFile) => void;
-    removeRejectedFile: (fileRejection: FileRejection) => void;
+    minSize?: number;
+    onFileUpload?: NonNullable<DropzoneOptions["onDrop"]>;
+    onRemoveFile?: (item: FileUploadFile | FileRejection) => void;
+    rejectedFiles?: FileRejection[];
 }
-export declare const FileUpload: React.FC<FileUploadProps>;
-export declare const FileUploadContainer: ({ accept, error, help, label, maxFiles, maxSize, }: Pick<FileUploadProps, "accept" | "error" | "help" | "label" | "maxFiles" | "maxSize">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * FileUpload - A controllable file upload input field with internal validation
+ *
+ * A file upload input field supporting both controlled and uncontrolled modes.
+ * Can be used standalone for simple file uploads or with external state management
+ * (React state or Formik) for complex forms. Built on React Dropzone with support
+ * for file validation and upload progress tracking.
+ *
+ * @param {Object} props - Component props
+ * @param {DropzoneOptions["accept"]} [props.accept] - Allowed file types
+ * @param {ReactNode} [props.error] - Externally stored error message to display
+ * @param {FileUploadFile[]} [props.files] - Externally stored array of accepted files
+ * @param {string} [props.help] - Help text displayed below the label
+ * @param {string} [props.label] - Field label text
+ * @param {number} [props.maxFiles] - Maximum number of files allowed
+ * @param {number} [props.maxSize] - Maximum file size in bytes
+ * @param {number} [props.minSize] - Minimum file size in bytes
+ * @param {NonNullable<DropzoneOptions["onDrop"]>} [props.onFileUpload] - Callback triggered when files are dropped or selected
+ * @param {(item: FileUploadFile | FileRejection) => void} [props.onRemoveFile] - Callback triggered when a file is removed
+ * @param {FileRejection[]} [props.rejectedFiles] - Externally stored array of rejected files with error details
+ *
+ * @returns {ReactElement} - The rendered file upload field component
+ *
+ * @example
+ * // Simple usage with React state
+ * const [files, setFiles] = useState();
+ * const [rejected, setRejected] = useState();
+ * <FileUpload
+ *   accept={{"image": [".jpeg", ".png"]}}
+ *   files={files}
+ *   rejectedFiles={rejected}
+ *   maxFiles={1}
+ *   maxSize={20000}
+ *   label="Profile Picture"
+ *   onFileUpload={(accepted) => setFiles(accepted)}
+ *   onRemoveFile={() => setFiles([])}
+ * />
+ *
+ * @example
+ * // With Formik - simplified usage
+ * const formik = useFormik();
+ * <FileUpload
+ *   accept={{"image": [".jpeg", ".png"]}}
+ *   files={formik.values.file ? [formik.values.file] : []}
+ *   error={formik.touched.file && formik.errors.file}
+ *   maxFiles={1}
+ *   maxSize={20000}
+ *   label="Profile Picture"
+ *   onFileUpload={(accepted) => {
+ *     if (accepted.length) {
+ *       formik.setFieldValue("file", accepted[0]);
+ *       formik.setFieldError("file", undefined);
+ *     }
+ *   }}
+ *   onRemoveFile={() => formik.setFieldValue("file", null)}
+ * />
+ */
+export declare const FileUpload: ({ accept, error, files, help, label, maxFiles, maxSize, minSize, onFileUpload, onRemoveFile, rejectedFiles, }: FileUploadProps) => ReactElement;

package/dist/src/lib/components/FileUpload/FileUpload.stories.d.ts

@@ -1,13 +1,17 @@
 import { Meta } from '@storybook/react';
-import { FileUploadContainer } from '.';
-declare const meta: Meta<typeof FileUploadContainer>;
+import { FileUpload } from '.';
+declare const meta: Meta<typeof FileUpload>;
 export default meta;
 export declare const Example: {
     args: {
+        accept: {
+            "application/octet-stream": string[];
+        };
         error: string;
         help: string;
         label: string;
         maxFiles: number;
         maxSize: number;
+        minSize: number;
     };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/canonical/maas-react-components.git"