@availity/mui-file-selector 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.6](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.5...@availity/mui-file-selector@0.2.6) (2025-01-08)
+
+
+### Bug Fixes
+
+* add hover border and fix accessibility ([7d8e7e4](https://github.com/Availity/element/commit/7d8e7e4136b266d42b3e453e57efe83f780a9e57))
+
+## [0.2.5](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.4...@availity/mui-file-selector@0.2.5) (2025-01-07)
+
+
+### Bug Fixes
+
+* bump upload-core ([60dc9a3](https://github.com/Availity/element/commit/60dc9a38f27aa93098d593efcd20026b39a2b7d7))
+* generate id before starting ([3514684](https://github.com/Availity/element/commit/3514684dfb9ca218d8d320c43235d4a0866d31a4))
+
 ## [0.2.4](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.3...@availity/mui-file-selector@0.2.4) (2025-01-06)
 
 ### Dependency Updates

package/dist/index.js

@@ -55,6 +55,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/index.ts
 var src_exports = {};
@@ -139,7 +159,8 @@ var outerBoxStyles = {
   borderRadius: "4px",
   padding: "2rem",
   "&:hover": {
-    backgroundColor: "background.primary"
+    backgroundColor: "background.primary",
+    borderColor: "border.primary"
   }
 };
 var innerBoxStyles = {
@@ -170,8 +191,8 @@ var Dropzone = ({
   const { setValue, watch } = (0, import_react_hook_form2.useFormContext)();
   const validator = (0, import_react.useCallback)(
     (file) => {
-      var _a;
-      const previous = (_a = watch(name)) != null ? _a : [];
+      var _a2;
+      const previous = (_a2 = watch(name)) != null ? _a2 : [];
       const isDuplicate = previous.some((prev) => prev.name === file.name);
       if (isDuplicate) {
         return {
@@ -192,13 +213,13 @@ var Dropzone = ({
   );
   const onDrop = (0, import_react.useCallback)(
     (acceptedFiles, fileRejections) => {
-      var _a;
+      var _a2;
       let newSize = 0;
       for (const file of acceptedFiles) {
         newSize += file.size;
       }
       setTotalSize((prev) => prev + newSize);
-      const previous = (_a = watch(name)) != null ? _a : [];
+      const previous = (_a2 = watch(name)) != null ? _a2 : [];
       setValue(name, previous.concat(acceptedFiles));
       if (fileRejections.length > 0) {
         for (const rejection of fileRejections) {
@@ -230,7 +251,8 @@ var Dropzone = ({
       inputProps.onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, getRootProps()), { 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: [
+  const _a = getRootProps(), { role, tabIndex } = _a, rootProps = __objRest(_a, ["role", "tabIndex"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, __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_icon.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" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_divider.Divider, { children: "OR" }),
@@ -359,9 +381,12 @@ var getFileExtIcon = (fileName) => {
 var import_react_query = require("@tanstack/react-query");
 var import_upload_core = __toESM(require("@availity/upload-core"));
 function startUpload(file, options) {
-  const upload = new import_upload_core.default(file, options);
-  upload.start();
-  return upload;
+  return __async(this, null, function* () {
+    const upload = new import_upload_core.default(file, options);
+    yield upload.generateId();
+    upload.start();
+    return upload;
+  });
 }
 function useUploadCore(file, options) {
   const isQueryEnabled = !!file;

package/dist/index.mjs

@@ -29,6 +29,26 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/lib/FileSelector.tsx
 import { useState as useState2 } from "react";
@@ -105,7 +125,8 @@ var outerBoxStyles = {
   borderRadius: "4px",
   padding: "2rem",
   "&:hover": {
-    backgroundColor: "background.primary"
+    backgroundColor: "background.primary",
+    borderColor: "border.primary"
   }
 };
 var innerBoxStyles = {
@@ -136,8 +157,8 @@ var Dropzone = ({
   const { setValue, watch } = useFormContext2();
   const validator = useCallback(
     (file) => {
-      var _a;
-      const previous = (_a = watch(name)) != null ? _a : [];
+      var _a2;
+      const previous = (_a2 = watch(name)) != null ? _a2 : [];
       const isDuplicate = previous.some((prev) => prev.name === file.name);
       if (isDuplicate) {
         return {
@@ -158,13 +179,13 @@ var Dropzone = ({
   );
   const onDrop = useCallback(
     (acceptedFiles, fileRejections) => {
-      var _a;
+      var _a2;
       let newSize = 0;
       for (const file of acceptedFiles) {
         newSize += file.size;
       }
       setTotalSize((prev) => prev + newSize);
-      const previous = (_a = watch(name)) != null ? _a : [];
+      const previous = (_a2 = watch(name)) != null ? _a2 : [];
       setValue(name, previous.concat(acceptedFiles));
       if (fileRejections.length > 0) {
         for (const rejection of fileRejections) {
@@ -196,7 +217,8 @@ var Dropzone = ({
       inputProps.onChange(event);
     }
   };
-  return /* @__PURE__ */ jsx2(Box, __spreadProps(__spreadValues({ sx: outerBoxStyles }, getRootProps()), { children: /* @__PURE__ */ jsx2(Box, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx2(Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+  const _a = getRootProps(), { role, tabIndex } = _a, rootProps = __objRest(_a, ["role", "tabIndex"]);
+  return /* @__PURE__ */ jsx2(Box, __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" }),
     /* @__PURE__ */ jsx2(Divider, { children: "OR" }),
@@ -336,9 +358,12 @@ var getFileExtIcon = (fileName) => {
 import { useQuery } from "@tanstack/react-query";
 import Upload from "@availity/upload-core";
 function startUpload(file, options) {
-  const upload = new Upload(file, options);
-  upload.start();
-  return upload;
+  return __async(this, null, function* () {
+    const upload = new Upload(file, options);
+    yield upload.generateId();
+    upload.start();
+    return upload;
+  });
 }
 function useUploadCore(file, options) {
   const isQueryEnabled = !!file;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -42,7 +42,7 @@
     "@availity/mui-list": "^0.2.4",
     "@availity/mui-progress": "^0.4.3",
     "@availity/mui-typography": "^0.2.1",
-    "@availity/upload-core": "7.0.0-alpha.5",
+    "@availity/upload-core": "7.0.0-alpha.6",
     "@tanstack/react-query": "^4.36.1",
     "react-dropzone": "^11.7.1",
     "react-hook-form": "^7.51.3",

package/src/lib/Dropzone.tsx

@@ -16,6 +16,7 @@ const outerBoxStyles = {
   padding: '2rem',
   '&:hover': {
     backgroundColor: 'background.primary',
+    borderColor: 'border.primary',
   },
 };
 
@@ -176,8 +177,12 @@ export const Dropzone = ({
     }
   };
 
+  // Remove role and tabIndex for accessibility
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { role, tabIndex, ...rootProps } = getRootProps();
+
   return (
-    <Box sx={outerBoxStyles} {...getRootProps()}>
+    <Box sx={outerBoxStyles} {...rootProps}>
       <Box sx={innerBoxStyles}>
         <Stack spacing={2} alignItems="center" justifyContent="center">
           <>

package/src/lib/useUploadCore.tsx

@@ -1,9 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import Upload, { UploadOptions } from '@availity/upload-core';
 
-function startUpload(file: File, options: UploadOptions) {
+async function startUpload(file: File, options: UploadOptions) {
   const upload = new Upload(file, options);
 
+  await upload.generateId();
+
   upload.start();
 
   return upload;