@availity/mui-file-selector 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.7](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.2.6...@availity/mui-file-selector@0.2.7) (2025-01-08)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.2.6`
+* `mui-list` updated to version `0.2.6`
+## [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)
 
 

package/dist/index.js

@@ -159,7 +159,8 @@ var outerBoxStyles = {
   borderRadius: "4px",
   padding: "2rem",
   "&:hover": {
-    backgroundColor: "background.primary"
+    backgroundColor: "background.primary",
+    borderColor: "border.primary"
   }
 };
 var innerBoxStyles = {
@@ -190,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 {
@@ -212,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) {
@@ -250,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" }),

package/dist/index.mjs

@@ -125,7 +125,8 @@ var outerBoxStyles = {
   borderRadius: "4px",
   padding: "2rem",
   "&:hover": {
-    backgroundColor: "background.primary"
+    backgroundColor: "background.primary",
+    borderColor: "border.primary"
   }
 };
 var innerBoxStyles = {
@@ -156,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 {
@@ -178,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) {
@@ -216,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" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -36,10 +36,10 @@
     "@availity/mui-alert": "^0.7.2",
     "@availity/mui-button": "^0.6.14",
     "@availity/mui-divider": "^0.4.0",
-    "@availity/mui-form-utils": "^0.16.2",
+    "@availity/mui-form-utils": "^0.16.3",
     "@availity/mui-icon": "^0.12.1",
     "@availity/mui-layout": "^0.2.0",
-    "@availity/mui-list": "^0.2.4",
+    "@availity/mui-list": "^0.2.5",
     "@availity/mui-progress": "^0.4.3",
     "@availity/mui-typography": "^0.2.1",
     "@availity/upload-core": "7.0.0-alpha.6",

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">
           <>