@availity/mui-file-selector 2.0.5 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "2.0.5",
+  "version": "3.0.0",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -21,56 +21,56 @@
   "author": "Availity Developers <AVOSS@availity.com>",
   "browser": "./dist/index.js",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts",
-    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "build": "tsup src/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts --format esm --watch --dts",
     "clean": "rm -rf dist",
     "clean:nm": "rm -rf node_modules",
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/api-axios": "^12.0.4",
-    "@availity/mui-alert": "^2.0.2",
-    "@availity/mui-button": "^2.0.2",
-    "@availity/mui-divider": "^2.0.1",
-    "@availity/mui-form-utils": "^2.0.5",
-    "@availity/mui-icon": "^2.1.0",
-    "@availity/mui-layout": "^2.0.1",
-    "@availity/mui-list": "^2.0.5",
-    "@availity/mui-progress": "^2.0.2",
-    "@availity/mui-typography": "^2.0.1",
-    "@availity/upload-core": "^8.1.1",
-    "@tanstack/react-query": "^4.36.1",
+    "@availity/api-axios": "^13.2.0",
+    "@availity/mui-alert": "^3.0.0",
+    "@availity/mui-button": "^3.0.0",
+    "@availity/mui-divider": "^3.0.0",
+    "@availity/mui-form-utils": "^3.0.0",
+    "@availity/mui-icon": "^3.0.0",
+    "@availity/mui-layout": "^3.0.0",
+    "@availity/mui-list": "^3.0.0",
+    "@availity/mui-progress": "^3.0.0",
+    "@availity/mui-typography": "^3.0.0",
+    "@availity/upload-core": "^9.2.0",
     "react-dropzone": "^11.7.1",
-    "react-hook-form": "^7.55.0",
+    "react-hook-form": "^7.79.0",
     "tus-js-client": "4.3.1",
-    "uuid": "^9.0.1"
+    "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@availity/mui-paper": "^2.0.1",
-    "@mui/material": "^7.3.4",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "tsup": "^8.4.0",
-    "typescript": "^5.4.5"
+    "@availity/mui-paper": "^3.0.0",
+    "@mui/material": "^7.3.11",
+    "@tanstack/react-query": "^5.101.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "@mui/material": "^7.0.0",
+    "@tanstack/react-query": "^5.101.0",
     "react": ">=17.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "type": "module"
 }

package/project.json

@@ -8,23 +8,20 @@
     "lint": {
       "executor": "@nx/eslint:lint",
       "options": {
-        "eslintConfig": ".eslintrc.json",
         "silent": false,
         "fix": false,
         "cache": true,
         "cacheLocation": "./node_modules/.cache/file-selector/.eslintcache",
         "maxWarnings": -1,
         "quiet": false,
-        "noEslintrc": false,
         "hasTypeAwareRules": true,
         "cacheStrategy": "metadata"
       }
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/file-selector"],
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "packages/file-selector/jest.config.js"
+        "command": "vitest run packages/file-selector"
       }
     },
     "version": {
@@ -34,7 +31,9 @@
         "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
         "tagPrefix": "@availity/{projectName}@",
         "trackDeps": true,
-        "skipCommitTypes": ["docs"]
+        "skipCommitTypes": [
+          "docs"
+        ]
       }
     }
   }

package/src/lib/Dropzone.test.tsx

@@ -18,7 +18,7 @@ describe('Dropzone', () => {
     render(
       <QueryClientProvider client={client}>
         <TestForm>
-          <Dropzone name="test" maxSize={1000} setTotalSize={jest.fn()} />
+          <Dropzone name="test" maxSize={1000} setTotalSize={vi.fn()} />
         </TestForm>
       </QueryClientProvider>
     );

package/src/lib/Dropzone.tsx

@@ -156,7 +156,7 @@ export const Dropzone = ({
 
       // Check for allowed file name characters
       if (allowedFileNameCharacters) {
-        const fileName = file.name.substring(0, file.name.lastIndexOf('.'));
+        const fileName = file.name.slice(0, Math.max(0, file.name.lastIndexOf('.')));
         const regExp = new RegExp(`([^${allowedFileNameCharacters}])`, 'g');
 
         if (fileName.match(regExp) !== null) {
@@ -170,7 +170,7 @@ export const Dropzone = ({
       // Explicit check for allowed file types
       if (allowedFileTypes.length > 0) {
         const fileName = file.name;
-        const fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+        const fileExt = fileName.slice(Math.max(0, fileName.lastIndexOf('.'))).toLowerCase();
 
         // Convert all file types to lowercase for comparison
         const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
@@ -325,7 +325,7 @@ export const Dropzone = ({
   });
 
   // Remove role and tabIndex for accessibility
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+   
   const { role, tabIndex, ...rootProps } = getRootProps();
 
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {

package/src/lib/Dropzone2.test.tsx

@@ -17,7 +17,7 @@ describe('Dropzone', () => {
         <Dropzone2
           name="test"
           maxSize={1000}
-          setTotalSize={jest.fn()}
+          setTotalSize={vi.fn()}
           uploadOptions={{ customerId: '123', clientId: 'test', bucketId: 'abc' }}
         />
       </TestForm>

package/src/lib/Dropzone2.tsx

@@ -97,7 +97,7 @@ export const Dropzone2 = ({
 
       // Check for allowed file name characters
       if (uploadOptions.allowedFileNameCharacters) {
-        const fileName = file.name.substring(0, file.name.lastIndexOf('.'));
+        const fileName = file.name.slice(0, Math.max(0, file.name.lastIndexOf('.')));
         const regExp = new RegExp(`([^${uploadOptions.allowedFileNameCharacters}])`, 'g');
 
         if (fileName.match(regExp) !== null) {
@@ -111,7 +111,7 @@ export const Dropzone2 = ({
       // Explicit check for allowed file types
       if (allowedFileTypes.length > 0) {
         const fileName = file.name;
-        const fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+        const fileExt = fileName.slice(Math.max(0, fileName.lastIndexOf('.'))).toLowerCase();
 
         // Convert all file types to lowercase for comparison
         const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
@@ -265,7 +265,7 @@ export const Dropzone2 = ({
   });
 
   // Remove role and tabIndex for accessibility
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+   
   const { role, tabIndex, ...rootProps } = getRootProps();
 
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {

package/src/lib/ErrorAlert.test.tsx

@@ -4,7 +4,7 @@ import { ErrorAlert, formatFileTooLarge } from './ErrorAlert';
 
 describe('ErrorAlert', () => {
   test('should render error message', () => {
-    render(<ErrorAlert id={0} errors={[{ code: 'test', message: 'example' }]} fileName="file" onClose={jest.fn()} />);
+    render(<ErrorAlert id={0} errors={[{ code: 'test', message: 'example' }]} fileName="file" onClose={vi.fn()} />);
 
     expect(screen.getByText('Error: file')).toBeDefined();
   });

package/src/lib/FileList.test.tsx

@@ -25,7 +25,7 @@ describe('FileList', () => {
   });
 
   test('should call onRemoveFile', async () => {
-    const mockRemove = jest.fn();
+    const mockRemove = vi.fn();
     const mockFile = new File(['file content'], 'mock.txt', { type: 'text/plain' });
 
     render(
@@ -49,7 +49,7 @@ describe('FileList', () => {
   });
 
   test('should not display remove button when disableRemove is set to true', async () => {
-    const mockRemove = jest.fn();
+    const mockRemove = vi.fn();
     const mockFile = new File(['file content'], 'mock.txt', { type: 'text/plain' });
 
     render(

package/src/lib/FileList.tsx

@@ -114,8 +114,7 @@ export const FileList = ({
 
   return (
     <List>
-      {files.map((file) => {
-        return (
+      {files.map((file) => (
           <FileRow
             key={file.name}
             file={file}
@@ -125,8 +124,7 @@ export const FileList = ({
             customFileRow={customFileRow}
             disableRemove={disableRemove}
           />
-        );
-      })}
+        ))}
     </List>
   );
 };

package/src/lib/FileList2.test.tsx

@@ -1,7 +1,7 @@
 import { screen, render, fireEvent, waitFor } from '@testing-library/react';
 
-import { FileList2 } from './FileList2';
 import Upload from '@availity/upload-core';
+import { FileList2 } from './FileList2';
 
 const options = { bucketId: '123', customerId: '123', clientId: '123' };
 
@@ -26,7 +26,7 @@ describe('FileList2', () => {
   });
 
   test('should call onRemoveFile', async () => {
-    const mockRemove = jest.fn();
+    const mockRemove = vi.fn();
     const mockFile = new File(['file content'], 'mock.txt', { type: 'text/plain' });
     const upload = new Upload(mockFile, options);
 
@@ -49,7 +49,7 @@ describe('FileList2', () => {
   });
 
   test('should not display remove button when disableRemove is set to true', async () => {
-    const mockRemove = jest.fn();
+    const mockRemove = vi.fn();
     const mockFile = new File(['file content'], 'mock.txt', { type: 'text/plain' });
     const upload = new Upload(mockFile, options);
 

package/src/lib/FileList2.tsx

@@ -101,8 +101,7 @@ export const FileList2 = ({
 
   return (
     <List>
-      {uploads.map((upload) => {
-        return (
+      {uploads.map((upload) => (
           <FileRow2
             key={upload.id}
             upload={upload}
@@ -111,8 +110,7 @@ export const FileList2 = ({
             customFileRow={customFileRow}
             disableRemove={disableRemove}
           />
-        );
-      })}
+        ))}
     </List>
   );
 };

package/src/lib/FilePickerBtn.test.tsx

@@ -10,7 +10,7 @@ const TestForm = () => {
 
   return (
     <FormProvider {...methods}>
-      <FilePickerBtn name="test" inputProps={{ ref }} onChange={jest.fn()}>
+      <FilePickerBtn name="test" inputProps={{ ref }} onChange={vi.fn()}>
         Browse Files
       </FilePickerBtn>
     </FormProvider>

package/src/lib/FileSelector.tsx

@@ -214,7 +214,7 @@ export const FileSelector = ({
 
       // Remove from context and cache
       formMethods.setValue(name, newFiles);
-      client.removeQueries(['upload', upload.file.name]);
+      client.removeQueries({ queryKey: ['upload', upload.file.name] });
 
       if (removedFile?.size) setTotalSize(totalSize - removedFile.size);
 
@@ -309,7 +309,7 @@ export const FileSelector = ({
       {tooManyFilesRejections.length > 0 && (
         <Alert
           severity="error"
-          onClose={() => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id))}
+          onClose={() => { for (const rejection of tooManyFilesRejections) handleRemoveRejection(rejection.id) }}
         >
           <AlertTitle>Items not allowed.</AlertTitle>
           Too many files are selected for upload, maximum {maxFiles} allowed.

package/src/lib/FileSelector2.tsx

@@ -186,7 +186,7 @@ export const FileSelector2 = ({
       {tooManyFilesRejections.length > 0 && (
         <Alert
           severity="error"
-          onClose={() => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id))}
+          onClose={() => { for (const rejection of tooManyFilesRejections) handleRemoveRejection(rejection.id) }}
         >
           <AlertTitle>Items not allowed.</AlertTitle>
           Too many files are selected for upload, maximum {maxFiles} allowed.

package/src/lib/HeaderMessage.tsx

@@ -17,11 +17,9 @@ export type HeaderMessageProps = {
   maxTotalSize?: number;
 };
 
-export const HeaderMessage = ({ maxFiles, maxSize, maxTotalSize }: HeaderMessageProps) => {
-  return (
+export const HeaderMessage = ({ maxFiles, maxSize, maxTotalSize }: HeaderMessageProps) => (
     <Typography variant="h6">
       Attach up to {maxFiles} file(s), with a maximum individual size of {formatBytes(maxSize)}{' '}
       {maxTotalSize && `and a maximum total size of ${formatBytes(maxTotalSize)}`}
     </Typography>
   );
-};

package/src/lib/bs4migration.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="BS4 Migration/Upload" />
+<Meta title="Upgrading/BS4 Migration/Upload" />
 
 # Upload Migration
 

package/src/lib/useFileDelivery.tsx

@@ -64,9 +64,7 @@ export function useFileDelivery({
     return responses;
   };
 
-  const validate = (errors: Record<string, unknown>) => {
-    return Object.keys(errors).length === 0;
-  };
+  const validate = (errors: Record<string, unknown>) => Object.keys(errors).length === 0;
 
   const isQueryEnabled =
     !!customerId &&

package/src/lib/util.ts

@@ -16,12 +16,12 @@ export function formatBytes(bytes: number, decimals = 2) {
   if (!+bytes) return '0 Bytes';
 
   const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
+  const dm = Math.max(decimals, 0);
   const sizes = ['Bytes', 'KB', 'MB', 'GB'];
 
   const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+  return `${Number.parseFloat((bytes / k**i).toFixed(dm))} ${sizes[i]}`;
 }
 export const FILE_EXT_ICONS = {
   png: FileImageIcon,