@availity/mui-file-selector 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.8.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.8.0...@availity/mui-file-selector@1.8.1) (2025-06-16)
+
+
+### Bug Fixes
+
+* **mui-file-selector:** ensure allowedFileTypes and allowedFileNameCharacters validation ([bb0f3ea](https://github.com/Availity/element/commit/bb0f3eaa1dcab2e82f5037f534e959321366701a))
+
 ## [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)
 
 

package/dist/index.d.mts

@@ -38,6 +38,11 @@ type DropzoneProps = {
      * List of allowed file extensions (e.g. ['.pdf', '.doc']). Each extension must start with a dot
      */
     allowedFileTypes?: `.${string}`[];
+    /**
+     * Regular expression pattern of allowed characters in file names
+     * @example "a-zA-Z0-9-_."
+     */
+    allowedFileNameCharacters?: string;
     /**
      * Whether the dropzone is disabled
      */
@@ -92,7 +97,7 @@ type DropzoneProps = {
     validator?: (file: File) => FileError | FileError[] | null;
 };
 declare const DropzoneContainer: typeof MuiBox;
-declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+declare const Dropzone: ({ allowedFileTypes, allowedFileNameCharacters, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
 
 type Dropzone2Props = DropzoneProps & {
     uploadOptions: UploadOptions;

package/dist/index.d.ts

@@ -38,6 +38,11 @@ type DropzoneProps = {
      * List of allowed file extensions (e.g. ['.pdf', '.doc']). Each extension must start with a dot
      */
     allowedFileTypes?: `.${string}`[];
+    /**
+     * Regular expression pattern of allowed characters in file names
+     * @example "a-zA-Z0-9-_."
+     */
+    allowedFileNameCharacters?: string;
     /**
      * Whether the dropzone is disabled
      */
@@ -92,7 +97,7 @@ type DropzoneProps = {
     validator?: (file: File) => FileError | FileError[] | null;
 };
 declare const DropzoneContainer: typeof MuiBox;
-declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+declare const Dropzone: ({ allowedFileTypes, allowedFileNameCharacters, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
 
 type Dropzone2Props = DropzoneProps & {
     uploadOptions: UploadOptions;

package/dist/index.js

@@ -250,6 +250,7 @@ var DropzoneContainer = (0, import_styles.styled)(import_mui_layout.Box, { name:
 });
 var Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
@@ -284,6 +285,27 @@ var Dropzone = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`
         });
       }
+      if (allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf("."));
+        const regExp = new RegExp(`([^${allowedFileNameCharacters}])`, "g");
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: "invalid-file-name-characters",
+            message: "File name contains characters not allowed"
+          });
+        }
+      }
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+        const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: "file-invalid-type",
+            message: `File type ${fileExt} is not allowed`
+          });
+        }
+      }
       if (validator) {
         const validatorErrors = validator(file);
         if (validatorErrors) {
@@ -296,7 +318,7 @@ var Dropzone = ({
       }
       return errors.length > 0 ? errors : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, allowedFileNameCharacters, watch, name, allowedFileTypes]
   );
   const handleOnDrop = (0, import_react.useCallback)(
     (acceptedFiles, fileRejections, event) => {
@@ -375,7 +397,7 @@ var Dropzone = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, setValue, onDrop]
   );
   const accept = allowedFileTypes.join(",");
   const { getRootProps, getInputProps } = (0, import_react_dropzone.useDropzone)({
@@ -400,7 +422,7 @@ var Dropzone = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
@@ -502,6 +524,27 @@ var Dropzone2 = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`
         });
       }
+      if (uploadOptions.allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf("."));
+        const regExp = new RegExp(`([^${uploadOptions.allowedFileNameCharacters}])`, "g");
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: "invalid-file-name-characters",
+            message: "File name contains characters not allowed"
+          });
+        }
+      }
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+        const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: "file-invalid-type",
+            message: `File type ${fileExt} is not allowed`
+          });
+        }
+      }
       if (validator) {
         const validatorErrors = validator(file);
         if (validatorErrors) {
@@ -514,7 +557,7 @@ var Dropzone2 = ({
       }
       return errors.length > 0 ? dedupeErrors(errors) : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
   const handleOnDrop = (0, import_react2.useCallback)(
     (acceptedFiles, fileRejections, event) => __async(void 0, null, function* () {
@@ -527,7 +570,6 @@ var Dropzone2 = ({
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
       if (maxTotalSize) {
         const currentTotalSize = previous.reduce((sum, upload) => sum + upload.file.size, 0);
-        console.log({ previous });
         let newSize2 = 0;
         const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
         let sizeCounter = 0;
@@ -595,7 +637,7 @@ var Dropzone2 = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     }),
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, uploadOptions, setValue, onDrop]
   );
   const { getRootProps, getInputProps } = (0, import_react_dropzone2.useDropzone)({
     onDrop: handleOnDrop,
@@ -619,7 +661,7 @@ var Dropzone2 = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
@@ -1283,6 +1325,7 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,
@@ -1329,6 +1372,7 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,

package/dist/index.mjs

@@ -209,6 +209,7 @@ var DropzoneContainer = styled(Box, { name: "AvDropzoneContainer", slot: "root"
 });
 var Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
@@ -243,6 +244,27 @@ var Dropzone = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`
         });
       }
+      if (allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf("."));
+        const regExp = new RegExp(`([^${allowedFileNameCharacters}])`, "g");
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: "invalid-file-name-characters",
+            message: "File name contains characters not allowed"
+          });
+        }
+      }
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+        const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: "file-invalid-type",
+            message: `File type ${fileExt} is not allowed`
+          });
+        }
+      }
       if (validator) {
         const validatorErrors = validator(file);
         if (validatorErrors) {
@@ -255,7 +277,7 @@ var Dropzone = ({
       }
       return errors.length > 0 ? errors : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, allowedFileNameCharacters, watch, name, allowedFileTypes]
   );
   const handleOnDrop = useCallback(
     (acceptedFiles, fileRejections, event) => {
@@ -334,7 +356,7 @@ var Dropzone = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, setValue, onDrop]
   );
   const accept = allowedFileTypes.join(",");
   const { getRootProps, getInputProps } = useDropzone({
@@ -359,7 +381,7 @@ var Dropzone = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
@@ -461,6 +483,27 @@ var Dropzone2 = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`
         });
       }
+      if (uploadOptions.allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf("."));
+        const regExp = new RegExp(`([^${uploadOptions.allowedFileNameCharacters}])`, "g");
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: "invalid-file-name-characters",
+            message: "File name contains characters not allowed"
+          });
+        }
+      }
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+        const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: "file-invalid-type",
+            message: `File type ${fileExt} is not allowed`
+          });
+        }
+      }
       if (validator) {
         const validatorErrors = validator(file);
         if (validatorErrors) {
@@ -473,7 +516,7 @@ var Dropzone2 = ({
       }
       return errors.length > 0 ? dedupeErrors(errors) : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
   const handleOnDrop = useCallback2(
     (acceptedFiles, fileRejections, event) => __async(void 0, null, function* () {
@@ -486,7 +529,6 @@ var Dropzone2 = ({
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
       if (maxTotalSize) {
         const currentTotalSize = previous.reduce((sum, upload) => sum + upload.file.size, 0);
-        console.log({ previous });
         let newSize2 = 0;
         const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
         let sizeCounter = 0;
@@ -554,7 +596,7 @@ var Dropzone2 = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     }),
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, uploadOptions, setValue, onDrop]
   );
   const { getRootProps, getInputProps } = useDropzone2({
     onDrop: handleOnDrop,
@@ -578,7 +620,7 @@ var Dropzone2 = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
@@ -1248,6 +1290,7 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,
@@ -1294,6 +1337,7 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Dropzone.tsx

@@ -51,6 +51,11 @@ export type DropzoneProps = {
    * List of allowed file extensions (e.g. ['.pdf', '.doc']). Each extension must start with a dot
    */
   allowedFileTypes?: `.${string}`[];
+  /**
+   * Regular expression pattern of allowed characters in file names
+   * @example "a-zA-Z0-9-_."
+   */
+  allowedFileNameCharacters?: string;
   /**
    * Whether the dropzone is disabled
    */
@@ -111,6 +116,7 @@ export const DropzoneContainer = styled(Box, { name: 'AvDropzoneContainer', slot
 
 export const Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
@@ -147,6 +153,35 @@ export const Dropzone = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`,
         });
       }
+      
+      // Check for allowed file name characters
+      if (allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf('.'));
+        const regExp = new RegExp(`([^${allowedFileNameCharacters}])`, 'g');
+        
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: 'invalid-file-name-characters',
+            message: 'File name contains characters not allowed',
+          });
+        }
+      }
+      
+      // Explicit check for allowed file types
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+        
+        // Convert all file types to lowercase for comparison
+        const lowerCaseAllowedTypes = allowedFileTypes.map(type => type.toLowerCase());
+        
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: 'file-invalid-type',
+            message: `File type ${fileExt} is not allowed`,
+          });
+        }
+      }
 
       if (validator) {
         const validatorErrors = validator(file);
@@ -161,7 +196,7 @@ export const Dropzone = ({
 
       return errors.length > 0 ? errors : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, allowedFileNameCharacters, watch, name, allowedFileTypes]
   );
 
   const handleOnDrop = useCallback(
@@ -268,7 +303,7 @@ export const Dropzone = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, setValue, onDrop]
   );
 
   const accept = allowedFileTypes.join(',');
@@ -301,7 +336,7 @@ export const Dropzone = ({
 
   const handleOnClick = (event: MouseEvent<HTMLButtonElement>) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
 
   const getFieldValue = () => {

package/src/lib/Dropzone2.tsx

@@ -94,6 +94,35 @@ export const Dropzone2 = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`,
         });
       }
+      
+      // Check for allowed file name characters
+      if (uploadOptions.allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf('.'));
+        const regExp = new RegExp(`([^${uploadOptions.allowedFileNameCharacters}])`, 'g');
+        
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: 'invalid-file-name-characters',
+            message: 'File name contains characters not allowed',
+          });
+        }
+      }
+      
+      // Explicit check for allowed file types
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+        
+        // Convert all file types to lowercase for comparison
+        const lowerCaseAllowedTypes = allowedFileTypes.map(type => type.toLowerCase());
+        
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: 'file-invalid-type',
+            message: `File type ${fileExt} is not allowed`,
+          });
+        }
+      }
 
       if (validator) {
         const validatorErrors = validator(file);
@@ -108,7 +137,7 @@ export const Dropzone2 = ({
 
       return errors.length > 0 ? dedupeErrors(errors) : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
 
   const handleOnDrop = useCallback(
@@ -125,7 +154,6 @@ export const Dropzone2 = ({
       if (maxTotalSize) {
         // Calculate current total size
         const currentTotalSize = previous.reduce((sum: number, upload: Upload) => sum + upload.file.size, 0);
-        console.log({ previous });
         let newSize = 0;
 
         const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
@@ -217,7 +245,7 @@ export const Dropzone2 = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, uploadOptions, setValue, onDrop]
   );
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -248,7 +276,7 @@ export const Dropzone2 = ({
 
   const handleOnClick = (event: MouseEvent<HTMLButtonElement>) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
 
   const getFieldValue = () => {

package/src/lib/FileSelector.tsx

@@ -249,6 +249,7 @@ export const FileSelector = ({
           <Dropzone
             name={name}
             allowedFileTypes={allowedFileTypes}
+            allowedFileNameCharacters={allowedFileNameCharacters}
             disabled={disabled}
             enableDropArea={enableDropArea}
             maxFiles={maxFiles}
@@ -289,6 +290,7 @@ export const FileSelector = ({
             <Dropzone
               name={name}
               allowedFileTypes={allowedFileTypes}
+              allowedFileNameCharacters={allowedFileNameCharacters}
               disabled={disabled}
               enableDropArea={enableDropArea}
               maxFiles={maxFiles}