@availity/mui-file-selector 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.2](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.1.1...@availity/mui-file-selector@1.1.2) (2025-03-12)
+
+## [1.1.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.1.0...@availity/mui-file-selector@1.1.1) (2025-03-07)
+
+### Dependency Updates
+
+* `mui-paper` updated to version `1.1.0`
+* `mui-alert` updated to version `1.1.0`
+* `mui-button` updated to version `1.1.0`
+* `mui-divider` updated to version `1.1.0`
+* `mui-form-utils` updated to version `1.1.0`
+* `mui-icon` updated to version `1.1.0`
+* `mui-layout` updated to version `1.1.0`
+* `mui-list` updated to version `1.1.0`
+* `mui-progress` updated to version `1.1.0`
+* `mui-typography` updated to version `1.1.0`
 ## [1.1.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.0.0...@availity/mui-file-selector@1.1.0) (2025-03-04)
 
 

package/README.md

@@ -71,7 +71,7 @@ import { FileSelector } from '@availity/mui-file-selector';
 const MyComponent = () => {
   const methods = useForm({
     defaultValues: {
-      [props.name]: [] as File[],
+      myFiles: [] as File[],
     },
   });
 
@@ -80,7 +80,7 @@ const MyComponent = () => {
   const files = methods.watch(props.name);
 
   const handleOnSubmit = (values: Record<string, File[]>) => {
-    if (values[props.name].length === 0) return;
+    if (values.myFiles.length === 0) return;
 
     const queries = client.getQueriesData<Upload>(['upload']);
     const uploads = [];
@@ -125,9 +125,13 @@ const MyFileUploadComponent = () => {
   };
 
   const handleValidation = (file) => {
-    // Custom validation can be added with the `validator` prop
+    // Custom validation can be added with the `validator` prop.
     // If an error fails validation here it should show up
-    // in the `fileRejections` array from `onDrop`
+    // in the `fileRejections` array from `onDrop`.
+    //
+    // To return a custom error, return an object with a code
+    // and message.
+    // return { code: 'an-error', message: 'An error occurred' };
   };
 
   return (
@@ -218,3 +222,59 @@ const MyFileUploadComponent = () => {
 
 export default MyFileUploadComponent;
 ```
+
+##### Custom `helpText`
+
+To provide custom help text, pass it as a child of the `<FileSelector />` component. The help text should be formatted using the `<Typography />` component with the `'caption'` variant.
+
+```tsx
+import React from 'react';
+import { FileSelector } from '@availity/mui-file-selector';
+import { Typography } from '@availity/mui-typography';
+
+const MyComponent = () => {
+  const methods = useForm({
+    defaultValues: {
+      myFiles: [] as File[],
+    },
+  });
+
+  const client = useQueryClient();
+
+  const files = methods.watch('myFiles);
+
+  const handleOnSubmit = (values: Record<string, File[]>) => {
+    if (values.myFiles.length === 0) return;
+
+    const queries = client.getQueriesData<Upload>(['upload']);
+    const uploads = [];
+    for (const [, data] of queries) {
+      if (data) uploads.push(data);
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+        <FileSelector
+          name="myFiles"
+          bucketId="your-bucket-id"
+          customerId="your-customer-id"
+          clientId="your-client-id"
+          maxSize={5 * 1024 * 1024} // 5MB
+          maxFiles={3}
+          allowedFileTypes={['.pdf', '.doc', '.docx']}
+        >
+          <Typography component="div" variant="caption">Here is some help text.</Typography>
+        </FileSelector>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default MyComponent;
+```
+
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -41,16 +41,16 @@
   },
   "dependencies": {
     "@availity/api-axios": "^10.0.0",
-    "@availity/mui-alert": "^1.0.0",
-    "@availity/mui-button": "^1.0.0",
-    "@availity/mui-divider": "^1.0.0",
-    "@availity/mui-form-utils": "^1.0.0",
-    "@availity/mui-icon": "^1.0.0",
-    "@availity/mui-layout": "^1.0.0",
-    "@availity/mui-list": "^1.0.0",
-    "@availity/mui-progress": "^1.0.0",
-    "@availity/mui-typography": "^1.0.0",
-    "@availity/upload-core": "^7.0.1",
+    "@availity/mui-alert": "^1.0.1",
+    "@availity/mui-button": "^1.0.1",
+    "@availity/mui-divider": "^1.0.1",
+    "@availity/mui-form-utils": "^1.0.1",
+    "@availity/mui-icon": "^1.0.1",
+    "@availity/mui-layout": "^1.0.1",
+    "@availity/mui-list": "^1.0.1",
+    "@availity/mui-progress": "^1.0.1",
+    "@availity/mui-typography": "^1.0.1",
+    "@availity/upload-core": "^7.0.3",
     "@tanstack/react-query": "^4.36.1",
     "react-dropzone": "^11.7.1",
     "react-hook-form": "^7.54.2",
@@ -58,7 +58,7 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@availity/mui-paper": "^1.0.0",
+    "@availity/mui-paper": "^1.0.1",
     "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/tsconfig.spec.json

@@ -6,5 +6,5 @@
     "types": ["jest", "node", "@testing-library/jest-dom"],
     "allowJs": true
   },
-  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+  "include": ["jest.config.ts", "**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
 }