@availity/mui-file-selector 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.9.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.8.1...@availity/mui-file-selector@1.9.0) (2025-09-24)
+
+
+### Features
+
+* **mui-file-selector:** disable FilePickerBtn when max files is reached ([06f1764](https://github.com/Availity/element/commit/06f176448192e89088e760c762b37b469ac39e95))
+
 ## [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)
 
 

package/dist/index.js

@@ -428,7 +428,12 @@ var Dropzone = ({
     const field = getValues();
     return field[name] || [];
   };
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+  const hasFiles = currentFileCount > 0;
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
   return enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
@@ -560,7 +565,7 @@ var Dropzone2 = ({
     [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
   const handleOnDrop = (0, import_react2.useCallback)(
-    (acceptedFiles, fileRejections, event) => __async(void 0, null, function* () {
+    (acceptedFiles, fileRejections, event) => __async(null, null, function* () {
       var _a2;
       let newSize = 0;
       for (const file of acceptedFiles) {
@@ -667,7 +672,12 @@ var Dropzone2 = ({
     const field = getValues();
     return field[name] || [];
   };
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+  const hasFiles = currentFileCount > 0;
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
   return enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_layout2.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_layout2.Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_icon3.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_typography2.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),

package/dist/index.mjs

@@ -387,7 +387,12 @@ var Dropzone = ({
     const field = getValues();
     return field[name] || [];
   };
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+  const hasFiles = currentFileCount > 0;
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
   return enableDropArea ? /* @__PURE__ */ jsx2(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ jsx2(Box, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx2(Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2(CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
@@ -519,7 +524,7 @@ var Dropzone2 = ({
     [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
   const handleOnDrop = useCallback2(
-    (acceptedFiles, fileRejections, event) => __async(void 0, null, function* () {
+    (acceptedFiles, fileRejections, event) => __async(null, null, function* () {
       var _a2;
       let newSize = 0;
       for (const file of acceptedFiles) {
@@ -626,7 +631,12 @@ var Dropzone2 = ({
     const field = getValues();
     return field[name] || [];
   };
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+  const hasFiles = currentFileCount > 0;
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
   return enableDropArea ? /* @__PURE__ */ jsx3(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ jsx3(Box2, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx3(Stack2, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsx3(CloudUploadIcon2, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ jsx3(Typography2, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),

package/package.json

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

package/src/lib/Dropzone.tsx

@@ -153,12 +153,12 @@ 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',
@@ -166,15 +166,15 @@ export const Dropzone = ({
           });
         }
       }
-      
+
       // 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());
-        
+        const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
+
         if (!lowerCaseAllowedTypes.includes(fileExt)) {
           errors.push({
             code: 'file-invalid-type',
@@ -344,7 +344,15 @@ export const Dropzone = ({
     return field[name] || [];
   };
 
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+
+  const hasFiles = currentFileCount > 0;
+
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
 
   return enableDropArea ? (
     <DropzoneContainer sx={outerBoxStyles} {...rootProps}>

package/src/lib/Dropzone2.tsx

@@ -94,12 +94,12 @@ 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',
@@ -107,15 +107,15 @@ export const Dropzone2 = ({
           });
         }
       }
-      
+
       // 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());
-        
+        const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
+
         if (!lowerCaseAllowedTypes.includes(fileExt)) {
           errors.push({
             code: 'file-invalid-type',
@@ -284,7 +284,15 @@ export const Dropzone2 = ({
     return field[name] || [];
   };
 
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+
+  const hasFiles = currentFileCount > 0;
+
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
 
   return enableDropArea ? (
     <DropzoneContainer sx={outerBoxStyles} {...rootProps}>