@availity/mui-file-selector 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/dist/index.d.mts +32 -7
- package/dist/index.d.ts +32 -7
- package/dist/index.js +168 -1163
- package/dist/index.mjs +180 -1201
- package/package.json +2 -1
- package/src/lib/Dropzone.tsx +63 -1
- package/src/lib/Dropzone2.tsx +60 -2
- package/src/lib/ErrorAlert.tsx +1 -0
- package/src/lib/FileSelector.tsx +19 -1
- package/src/lib/FileSelector2.tsx +8 -1
- package/src/lib/FileTypesMessage.tsx +14 -0
- package/src/lib/HeaderMessage.tsx +8 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [1.8.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.7.1...@availity/mui-file-selector@1.8.0) (2025-06-16)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* **mui-file-selector:** add maxTotalSize check to FileSelector ([03f78d6](https://github.com/Availity/element/commit/03f78d674243a76cc6d3e65a20b6e8ce3a46b8ca))
|
|
11
|
+
* **mui-file-selector:** add maxTotalSize check to FileSelector ([802e2ae](https://github.com/Availity/element/commit/802e2ae502aa8727037e2998849acf01a6ea0382))
|
|
12
|
+
* **mui-file-selector:** add maxTotalSize check to FileSelector2 ([ccd0cfa](https://github.com/Availity/element/commit/ccd0cfa95610d6e354402a3fa698b63b6659644c))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **mui-file-selector:** ensure only the maximum amount of files are uploaded ([5d80d2b](https://github.com/Availity/element/commit/5d80d2b046ea928ea432d7f269d1bfc99dd43782))
|
|
18
|
+
|
|
19
|
+
## [1.7.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.7.0...@availity/mui-file-selector@1.7.1) (2025-05-30)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* **mui-file-selector:** add back missing react-query dependency [#773](https://github.com/Availity/element/issues/773) ([9331a6c](https://github.com/Availity/element/commit/9331a6ca2e2ec721c2dac53c49900f89649f271a))
|
|
25
|
+
|
|
5
26
|
## [1.7.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.6.6...@availity/mui-file-selector@1.7.0) (2025-05-29)
|
|
6
27
|
|
|
7
28
|
### Dependency Updates
|
package/dist/index.d.mts
CHANGED
|
@@ -54,6 +54,10 @@ type DropzoneProps = {
|
|
|
54
54
|
* Maximum size of each file in bytes
|
|
55
55
|
*/
|
|
56
56
|
maxSize?: number;
|
|
57
|
+
/**
|
|
58
|
+
* Maximum size of total upload in bytes
|
|
59
|
+
*/
|
|
60
|
+
maxTotalSize?: number;
|
|
57
61
|
/**
|
|
58
62
|
* Whether multiple file selection is allowed
|
|
59
63
|
*/
|
|
@@ -88,7 +92,7 @@ type DropzoneProps = {
|
|
|
88
92
|
validator?: (file: File) => FileError | FileError[] | null;
|
|
89
93
|
};
|
|
90
94
|
declare const DropzoneContainer: typeof MuiBox;
|
|
91
|
-
declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
|
|
95
|
+
declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
|
|
92
96
|
|
|
93
97
|
type Dropzone2Props = DropzoneProps & {
|
|
94
98
|
uploadOptions: UploadOptions;
|
|
@@ -101,7 +105,7 @@ type Dropzone2Props = DropzoneProps & {
|
|
|
101
105
|
* `<Dropzone2 />` adds the `uploadOptions` prop that previously existed on
|
|
102
106
|
* `<FileSelector />`.
|
|
103
107
|
*/
|
|
104
|
-
declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
|
|
108
|
+
declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
|
|
105
109
|
|
|
106
110
|
type ErrorAlertProps = {
|
|
107
111
|
/**
|
|
@@ -268,6 +272,10 @@ type FileSelectorProps = {
|
|
|
268
272
|
* Overrides the standard file size message
|
|
269
273
|
*/
|
|
270
274
|
customSizeMessage?: React.ReactNode;
|
|
275
|
+
/**
|
|
276
|
+
* Overrides the standard total upload size message
|
|
277
|
+
*/
|
|
278
|
+
customTotalSizeMessage?: React.ReactNode;
|
|
271
279
|
/**
|
|
272
280
|
* Overrides the standard file types message
|
|
273
281
|
*/
|
|
@@ -307,6 +315,11 @@ type FileSelectorProps = {
|
|
|
307
315
|
* Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
|
|
308
316
|
*/
|
|
309
317
|
maxSize: number;
|
|
318
|
+
/**
|
|
319
|
+
* Maximum size allowed for total upload in bytes
|
|
320
|
+
* Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
|
|
321
|
+
*/
|
|
322
|
+
maxTotalSize?: number;
|
|
310
323
|
/**
|
|
311
324
|
* Whether multiple file selection is allowed
|
|
312
325
|
* @default true
|
|
@@ -347,7 +360,7 @@ type FileSelectorProps = {
|
|
|
347
360
|
*/
|
|
348
361
|
disableRemove?: boolean;
|
|
349
362
|
};
|
|
350
|
-
declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
|
|
363
|
+
declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTotalSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, maxTotalSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
|
|
351
364
|
|
|
352
365
|
type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptions'> & {
|
|
353
366
|
onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
|
|
@@ -361,7 +374,7 @@ type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptio
|
|
|
361
374
|
* `<FileSelector2 />` removes the reliance on `@tanstack/react-query`. The
|
|
362
375
|
* `Upload` object can now be accessed from the form state.
|
|
363
376
|
*/
|
|
364
|
-
declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
|
|
377
|
+
declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTotalSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, maxTotalSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
|
|
365
378
|
|
|
366
379
|
type FileTypesMessageProps = {
|
|
367
380
|
/**
|
|
@@ -372,6 +385,10 @@ type FileTypesMessageProps = {
|
|
|
372
385
|
* Overrides the standard file size message
|
|
373
386
|
*/
|
|
374
387
|
customSizeMessage?: React.ReactNode;
|
|
388
|
+
/**
|
|
389
|
+
* Overrides the standard total upload size message
|
|
390
|
+
*/
|
|
391
|
+
customTotalSizeMessage?: React.ReactNode;
|
|
375
392
|
/**
|
|
376
393
|
* Overrides the standard file types message
|
|
377
394
|
*/
|
|
@@ -380,9 +397,13 @@ type FileTypesMessageProps = {
|
|
|
380
397
|
* Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
|
|
381
398
|
*/
|
|
382
399
|
maxFileSize?: number;
|
|
400
|
+
/**
|
|
401
|
+
* Maximum size of the total upload in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
|
|
402
|
+
*/
|
|
403
|
+
maxTotalSize?: number;
|
|
383
404
|
variant?: 'caption' | 'body2';
|
|
384
405
|
};
|
|
385
|
-
declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTypesMessage, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
|
|
406
|
+
declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTotalSizeMessage, customTypesMessage, maxFileSize, maxTotalSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
|
|
386
407
|
|
|
387
408
|
type HeaderMessageProps = {
|
|
388
409
|
/**
|
|
@@ -390,11 +411,15 @@ type HeaderMessageProps = {
|
|
|
390
411
|
*/
|
|
391
412
|
maxFiles: number;
|
|
392
413
|
/**
|
|
393
|
-
* Maximum
|
|
414
|
+
* Maximum size of each file
|
|
394
415
|
*/
|
|
395
416
|
maxSize: number;
|
|
417
|
+
/**
|
|
418
|
+
* Maximum combined total size of all files
|
|
419
|
+
*/
|
|
420
|
+
maxTotalSize?: number;
|
|
396
421
|
};
|
|
397
|
-
declare const HeaderMessage: ({ maxFiles, maxSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
|
|
422
|
+
declare const HeaderMessage: ({ maxFiles, maxSize, maxTotalSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
|
|
398
423
|
|
|
399
424
|
type UploadProgressBarProps = {
|
|
400
425
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -54,6 +54,10 @@ type DropzoneProps = {
|
|
|
54
54
|
* Maximum size of each file in bytes
|
|
55
55
|
*/
|
|
56
56
|
maxSize?: number;
|
|
57
|
+
/**
|
|
58
|
+
* Maximum size of total upload in bytes
|
|
59
|
+
*/
|
|
60
|
+
maxTotalSize?: number;
|
|
57
61
|
/**
|
|
58
62
|
* Whether multiple file selection is allowed
|
|
59
63
|
*/
|
|
@@ -88,7 +92,7 @@ type DropzoneProps = {
|
|
|
88
92
|
validator?: (file: File) => FileError | FileError[] | null;
|
|
89
93
|
};
|
|
90
94
|
declare const DropzoneContainer: typeof MuiBox;
|
|
91
|
-
declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
|
|
95
|
+
declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
|
|
92
96
|
|
|
93
97
|
type Dropzone2Props = DropzoneProps & {
|
|
94
98
|
uploadOptions: UploadOptions;
|
|
@@ -101,7 +105,7 @@ type Dropzone2Props = DropzoneProps & {
|
|
|
101
105
|
* `<Dropzone2 />` adds the `uploadOptions` prop that previously existed on
|
|
102
106
|
* `<FileSelector />`.
|
|
103
107
|
*/
|
|
104
|
-
declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
|
|
108
|
+
declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
|
|
105
109
|
|
|
106
110
|
type ErrorAlertProps = {
|
|
107
111
|
/**
|
|
@@ -268,6 +272,10 @@ type FileSelectorProps = {
|
|
|
268
272
|
* Overrides the standard file size message
|
|
269
273
|
*/
|
|
270
274
|
customSizeMessage?: React.ReactNode;
|
|
275
|
+
/**
|
|
276
|
+
* Overrides the standard total upload size message
|
|
277
|
+
*/
|
|
278
|
+
customTotalSizeMessage?: React.ReactNode;
|
|
271
279
|
/**
|
|
272
280
|
* Overrides the standard file types message
|
|
273
281
|
*/
|
|
@@ -307,6 +315,11 @@ type FileSelectorProps = {
|
|
|
307
315
|
* Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
|
|
308
316
|
*/
|
|
309
317
|
maxSize: number;
|
|
318
|
+
/**
|
|
319
|
+
* Maximum size allowed for total upload in bytes
|
|
320
|
+
* Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
|
|
321
|
+
*/
|
|
322
|
+
maxTotalSize?: number;
|
|
310
323
|
/**
|
|
311
324
|
* Whether multiple file selection is allowed
|
|
312
325
|
* @default true
|
|
@@ -347,7 +360,7 @@ type FileSelectorProps = {
|
|
|
347
360
|
*/
|
|
348
361
|
disableRemove?: boolean;
|
|
349
362
|
};
|
|
350
|
-
declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
|
|
363
|
+
declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTotalSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, maxTotalSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
|
|
351
364
|
|
|
352
365
|
type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptions'> & {
|
|
353
366
|
onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
|
|
@@ -361,7 +374,7 @@ type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptio
|
|
|
361
374
|
* `<FileSelector2 />` removes the reliance on `@tanstack/react-query`. The
|
|
362
375
|
* `Upload` object can now be accessed from the form state.
|
|
363
376
|
*/
|
|
364
|
-
declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
|
|
377
|
+
declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTotalSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, maxTotalSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
|
|
365
378
|
|
|
366
379
|
type FileTypesMessageProps = {
|
|
367
380
|
/**
|
|
@@ -372,6 +385,10 @@ type FileTypesMessageProps = {
|
|
|
372
385
|
* Overrides the standard file size message
|
|
373
386
|
*/
|
|
374
387
|
customSizeMessage?: React.ReactNode;
|
|
388
|
+
/**
|
|
389
|
+
* Overrides the standard total upload size message
|
|
390
|
+
*/
|
|
391
|
+
customTotalSizeMessage?: React.ReactNode;
|
|
375
392
|
/**
|
|
376
393
|
* Overrides the standard file types message
|
|
377
394
|
*/
|
|
@@ -380,9 +397,13 @@ type FileTypesMessageProps = {
|
|
|
380
397
|
* Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
|
|
381
398
|
*/
|
|
382
399
|
maxFileSize?: number;
|
|
400
|
+
/**
|
|
401
|
+
* Maximum size of the total upload in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
|
|
402
|
+
*/
|
|
403
|
+
maxTotalSize?: number;
|
|
383
404
|
variant?: 'caption' | 'body2';
|
|
384
405
|
};
|
|
385
|
-
declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTypesMessage, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
|
|
406
|
+
declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTotalSizeMessage, customTypesMessage, maxFileSize, maxTotalSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
|
|
386
407
|
|
|
387
408
|
type HeaderMessageProps = {
|
|
388
409
|
/**
|
|
@@ -390,11 +411,15 @@ type HeaderMessageProps = {
|
|
|
390
411
|
*/
|
|
391
412
|
maxFiles: number;
|
|
392
413
|
/**
|
|
393
|
-
* Maximum
|
|
414
|
+
* Maximum size of each file
|
|
394
415
|
*/
|
|
395
416
|
maxSize: number;
|
|
417
|
+
/**
|
|
418
|
+
* Maximum combined total size of all files
|
|
419
|
+
*/
|
|
420
|
+
maxTotalSize?: number;
|
|
396
421
|
};
|
|
397
|
-
declare const HeaderMessage: ({ maxFiles, maxSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
|
|
422
|
+
declare const HeaderMessage: ({ maxFiles, maxSize, maxTotalSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
|
|
398
423
|
|
|
399
424
|
type UploadProgressBarProps = {
|
|
400
425
|
/**
|