@availity/mui-file-selector 0.2.5 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.js +8 -6
  3. package/dist/index.mjs +8 -6
  4. package/package.json +1 -1
  5. package/src/lib/Dropzone.tsx +6 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [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)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * add hover border and fix accessibility ([7d8e7e4](https://github.com/Availity/element/commit/7d8e7e4136b266d42b3e453e57efe83f780a9e57))
11
+
5
12
  ## [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)
6
13
 
7
14
 
package/dist/index.js CHANGED
@@ -159,7 +159,8 @@ var outerBoxStyles = {
159
159
  borderRadius: "4px",
160
160
  padding: "2rem",
161
161
  "&:hover": {
162
- backgroundColor: "background.primary"
162
+ backgroundColor: "background.primary",
163
+ borderColor: "border.primary"
163
164
  }
164
165
  };
165
166
  var innerBoxStyles = {
@@ -190,8 +191,8 @@ var Dropzone = ({
190
191
  const { setValue, watch } = (0, import_react_hook_form2.useFormContext)();
191
192
  const validator = (0, import_react.useCallback)(
192
193
  (file) => {
193
- var _a;
194
- const previous = (_a = watch(name)) != null ? _a : [];
194
+ var _a2;
195
+ const previous = (_a2 = watch(name)) != null ? _a2 : [];
195
196
  const isDuplicate = previous.some((prev) => prev.name === file.name);
196
197
  if (isDuplicate) {
197
198
  return {
@@ -212,13 +213,13 @@ var Dropzone = ({
212
213
  );
213
214
  const onDrop = (0, import_react.useCallback)(
214
215
  (acceptedFiles, fileRejections) => {
215
- var _a;
216
+ var _a2;
216
217
  let newSize = 0;
217
218
  for (const file of acceptedFiles) {
218
219
  newSize += file.size;
219
220
  }
220
221
  setTotalSize((prev) => prev + newSize);
221
- const previous = (_a = watch(name)) != null ? _a : [];
222
+ const previous = (_a2 = watch(name)) != null ? _a2 : [];
222
223
  setValue(name, previous.concat(acceptedFiles));
223
224
  if (fileRejections.length > 0) {
224
225
  for (const rejection of fileRejections) {
@@ -250,7 +251,8 @@ var Dropzone = ({
250
251
  inputProps.onChange(event);
251
252
  }
252
253
  };
253
- 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: [
254
+ const _a = getRootProps(), { role, tabIndex } = _a, rootProps = __objRest(_a, ["role", "tabIndex"]);
255
+ 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: [
254
256
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
255
257
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
256
258
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_divider.Divider, { children: "OR" }),
package/dist/index.mjs CHANGED
@@ -125,7 +125,8 @@ var outerBoxStyles = {
125
125
  borderRadius: "4px",
126
126
  padding: "2rem",
127
127
  "&:hover": {
128
- backgroundColor: "background.primary"
128
+ backgroundColor: "background.primary",
129
+ borderColor: "border.primary"
129
130
  }
130
131
  };
131
132
  var innerBoxStyles = {
@@ -156,8 +157,8 @@ var Dropzone = ({
156
157
  const { setValue, watch } = useFormContext2();
157
158
  const validator = useCallback(
158
159
  (file) => {
159
- var _a;
160
- const previous = (_a = watch(name)) != null ? _a : [];
160
+ var _a2;
161
+ const previous = (_a2 = watch(name)) != null ? _a2 : [];
161
162
  const isDuplicate = previous.some((prev) => prev.name === file.name);
162
163
  if (isDuplicate) {
163
164
  return {
@@ -178,13 +179,13 @@ var Dropzone = ({
178
179
  );
179
180
  const onDrop = useCallback(
180
181
  (acceptedFiles, fileRejections) => {
181
- var _a;
182
+ var _a2;
182
183
  let newSize = 0;
183
184
  for (const file of acceptedFiles) {
184
185
  newSize += file.size;
185
186
  }
186
187
  setTotalSize((prev) => prev + newSize);
187
- const previous = (_a = watch(name)) != null ? _a : [];
188
+ const previous = (_a2 = watch(name)) != null ? _a2 : [];
188
189
  setValue(name, previous.concat(acceptedFiles));
189
190
  if (fileRejections.length > 0) {
190
191
  for (const rejection of fileRejections) {
@@ -216,7 +217,8 @@ var Dropzone = ({
216
217
  inputProps.onChange(event);
217
218
  }
218
219
  };
219
- 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: [
220
+ const _a = getRootProps(), { role, tabIndex } = _a, rootProps = __objRest(_a, ["role", "tabIndex"]);
221
+ 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: [
220
222
  /* @__PURE__ */ jsx2(CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
221
223
  /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
222
224
  /* @__PURE__ */ jsx2(Divider, { children: "OR" }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-file-selector",
3
- "version": "0.2.5",
3
+ "version": "0.2.6",
4
4
  "description": "Availity MUI file-selector Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
package/src/lib/Dropzone.tsx CHANGED
@@ -16,6 +16,7 @@ const outerBoxStyles = {
16
16
  padding: '2rem',
17
17
  '&:hover': {
18
18
  backgroundColor: 'background.primary',
19
+ borderColor: 'border.primary',
19
20
  },
20
21
  };
21
22
 
@@ -176,8 +177,12 @@ export const Dropzone = ({
176
177
  }
177
178
  };
178
179
 
180
+ // Remove role and tabIndex for accessibility
181
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
182
+ const { role, tabIndex, ...rootProps } = getRootProps();
183
+
179
184
  return (
180
- <Box sx={outerBoxStyles} {...getRootProps()}>
185
+ <Box sx={outerBoxStyles} {...rootProps}>
181
186
  <Box sx={innerBoxStyles}>
182
187
  <Stack spacing={2} alignItems="center" justifyContent="center">
183
188
  <>