@canonical/maas-react-components - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

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

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { DropzoneOptions, FileRejection } from 'react-dropzone';
@@ -9,3 +9,3 @@ export type FileUploadFile = File & {
     error?: ReactNode;
-    files: FileUploadFile[];
+    files?: FileUploadFile[];
     help?: string;
@@ -15,8 +15,64 @@ label?: string;
     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;

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

 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;
@@ -12,3 +15,4 @@ help: string;
         maxSize: number;
+        minSize: number;
     };
 };

package.json

 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "repository": {
@@ -6,0 +6,0 @@ "type": "git",

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1017374

0.18%

Lines of code

10314

0.23%

No dependency changes