@torq-north/react-tools 1.1.1 → 1.3.0

package/dist/index.es.js

@@ -558,9 +558,9 @@ var isRequired = function (value) {
 function TextFormField(_a) {
     var _b;
     var name = _a.name, label = _a.label, required = _a.required, multiline = _a.multiline, disabled = _a.disabled, placeholder = _a.placeholder, slotProps = _a.slotProps, helperText = _a.helperText, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
-    var _d = useField(name, __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field), { format: format, validate: required
-            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) })), input = _d.input, meta = _d.meta;
-    var textFieldProps = deepmerge((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}, {
+    var _d = useField(name, __assign({ format: format, validate: required
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
+    var textFieldProps = deepmerge({
         fullWidth: true,
         label: label,
         required: required,
@@ -570,7 +570,7 @@ function TextFormField(_a) {
         error: meta.touched && meta.error,
         helperText: (meta.touched && meta.error) || helperText,
         slotProps: { input: input },
-    });
+    }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {});
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(TextField, __assign({}, textFieldProps)) }));
 }
 
@@ -616,9 +616,9 @@ function render(option, showCheckbox, isSelected) {
 function SelectFormField(_a) {
     var _b, _c;
     var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _d = _a.validators, validators = _d === void 0 ? [] : _d;
-    var _e = useField(name, __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field), { format: format, validate: required
-            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) })), _f = _e.input, value = _f.value, onChange = _f.onChange, otherInputProps = __rest(_f, ["value", "onChange"]), meta = _e.meta;
-    var textFieldProps = deepmerge((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}, {
+    var _e = useField(name, __assign({ format: format, validate: required
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _f = _e.input, value = _f.value, onChange = _f.onChange, otherInputProps = __rest(_f, ["value", "onChange"]), meta = _e.meta;
+    var textFieldProps = deepmerge({
         fullWidth: true,
         select: true,
         label: label,
@@ -631,10 +631,10 @@ function SelectFormField(_a) {
         slotProps: {
             input: otherInputProps,
             select: {
-                endAdornment: isClearable ? (jsx(Box, { pr: 2, children: jsx(IconButton, { size: (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _c === void 0 ? void 0 : _c.size, onClick: function () { return onChange(undefined); }, children: jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
+                endAdornment: isClearable ? (jsx(Box, { pr: 2, children: jsx(IconButton, { size: (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _b === void 0 ? void 0 : _b.size, onClick: function () { return onChange(undefined); }, children: jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
             },
         },
-    });
+    }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _c !== void 0 ? _c : {});
     var renderedOptions = useMemo(function () { return renderSelectOptions(options); }, [options]);
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({}, textFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
 }
@@ -661,9 +661,9 @@ function findTextFor(value, options) {
 function MultiSelectFormField(_a) {
     var _b, _c;
     var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _d = _a.validators, validators = _d === void 0 ? [] : _d;
-    var _e = useField(name, __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field), { format: format, validate: required
-            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) })), _f = _e.input, value = _f.value, onChange = _f.onChange, otherInputProps = __rest(_f, ["value", "onChange"]), meta = _e.meta;
-    var textFieldProps = deepmerge((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}, {
+    var _e = useField(name, __assign({ format: format, validate: required
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _f = _e.input, value = _f.value, onChange = _f.onChange, otherInputProps = __rest(_f, ["value", "onChange"]), meta = _e.meta;
+    var textFieldProps = deepmerge({
         fullWidth: true,
         select: true,
         label: label,
@@ -676,12 +676,12 @@ function MultiSelectFormField(_a) {
         slotProps: {
             input: otherInputProps,
             select: {
-                endAdornment: isClearable ? (jsx(Box, { pr: 2, children: jsx(IconButton, { size: (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _c === void 0 ? void 0 : _c.size, onClick: function () { return onChange([]); }, children: jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
+                endAdornment: isClearable ? (jsx(Box, { pr: 2, children: jsx(IconButton, { size: (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _b === void 0 ? void 0 : _b.size, onClick: function () { return onChange([]); }, children: jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
                 multiple: true,
                 renderValue: function (selected) { return (jsx(Box, { whiteSpace: "normal", children: selected.map(function (s) { return findTextFor(s, options); }).join(", ") })); },
             },
         },
-    });
+    }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _c !== void 0 ? _c : {});
     var renderedOptions = useMemo(function () { return renderCheckboxSelectOptions(options, value); }, [options, value]);
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({}, textFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
 }
@@ -692,19 +692,19 @@ var mustBeChecked = function (v) {
 
 var CheckboxFormField = function (_a) {
     var _b;
-    var name = _a.name, label = _a.label, mustBeTrue = _a.mustBeTrue, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, icon = _a.icon, showSpace = _a.showSpace, _c = _a.validators, validators = _c === void 0 ? [] : _c;
+    var name = _a.name, label = _a.label, mustBeTrue = _a.mustBeTrue, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, icon = _a.icon, showSpace = _a.showSpace, _c = _a.validators, validators = _c === void 0 ? [] : _c, forceError = _a.forceError;
     var _d = useField(name, __assign({ type: "checkbox", validate: mustBeTrue
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [mustBeChecked], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
-    var checkboxProps = deepmerge((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.checkbox) !== null && _b !== void 0 ? _b : {}, __assign(__assign({}, input), { disabled: disabled }));
-    return (jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsx(FormControlLabel, { control: jsx(FormGroup, { children: jsx(Checkbox, __assign({}, checkboxProps)) }), label: label, disabled: disabled }), ((meta.touched && meta.error) || helperText) && (jsx(FormHelperText, { disabled: disabled, error: meta.touched && meta.error, sx: { marginTop: 0, marginLeft: 2 }, children: meta.error || helperText }))] }));
+    var checkboxProps = deepmerge(__assign(__assign({}, input), { disabled: disabled }), (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.checkbox) !== null && _b !== void 0 ? _b : {});
+    return (jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsx(FormControlLabel, { control: jsx(FormGroup, { children: jsx(Checkbox, __assign({}, checkboxProps)) }), label: label, disabled: disabled }), ((meta.touched && meta.error) || helperText) && (jsx(FormHelperText, { disabled: disabled, error: (meta.touched && meta.error) || forceError, sx: { marginTop: 0, marginLeft: 2 }, children: meta.error || helperText }))] }));
 };
 
 var DateFormField = function (_a) {
     var _b;
     var name = _a.name, label = _a.label, required = _a.required, icon = _a.icon, showSpace = _a.showSpace, slotProps = _a.slotProps, disabled = _a.disabled, helperText = _a.helperText, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
-    var _d = useField(name, __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field), { format: format, validate: required
-            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) })), input = _d.input, meta = _d.meta;
-    var datePickerProps = deepmerge((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.datePicker) !== null && _b !== void 0 ? _b : {}, {
+    var _d = useField(name, __assign({ format: format, validate: required
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
+    var datePickerProps = deepmerge({
         label: label,
         disabled: disabled,
         views: ["year", "month", "day"],
@@ -719,16 +719,16 @@ var DateFormField = function (_a) {
                 onBlur: input.onBlur,
             },
         },
-    });
+    }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.datePicker) !== null && _b !== void 0 ? _b : {});
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(DatePicker, __assign({ value: input.value ? dayjs(input.value) : null, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); } }, datePickerProps)) }));
 };
 
 var DateTimeFormField = function (_a) {
     var _b;
     var name = _a.name, label = _a.label, required = _a.required, icon = _a.icon, showSpace = _a.showSpace, slotProps = _a.slotProps, disabled = _a.disabled, helperText = _a.helperText, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
-    var _d = useField(name, __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field), { format: format, validate: required
-            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) })), input = _d.input, meta = _d.meta;
-    var dateTimeProps = deepmerge((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.dateTimePicker) !== null && _b !== void 0 ? _b : {}, {
+    var _d = useField(name, __assign({ format: format, validate: required
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
+    var dateTimeProps = deepmerge({
         label: label,
         disabled: disabled,
         views: ["year", "month", "day"],
@@ -743,7 +743,7 @@ var DateTimeFormField = function (_a) {
                 onBlur: input.onBlur,
             },
         },
-    });
+    }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.dateTimePicker) !== null && _b !== void 0 ? _b : {});
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(DateTimePicker, __assign({ value: input.value ? dayjs(input.value) : null, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); } }, dateTimeProps)) }));
 };
 
@@ -754,16 +754,16 @@ var RadioOption = function (props) {
 };
 
 var RadioFormField = function (_a) {
-    var name = _a.name, label = _a.label, options = _a.options, required = _a.required, disabled = _a.disabled, vertical = _a.vertical, icon = _a.icon, showSpace = _a.showSpace, slotProps = _a.slotProps, helperText = _a.helperText, _b = _a.validators, validators = _b === void 0 ? [] : _b;
-    var _c = useField(name, __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field), { validate: required
-            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) })).meta, error = _c.error, visited = _c.visited;
+    var name = _a.name, label = _a.label, options = _a.options, required = _a.required, disabled = _a.disabled, vertical = _a.vertical, icon = _a.icon, showSpace = _a.showSpace, slotProps = _a.slotProps, helperText = _a.helperText, forceError = _a.forceError, _b = _a.validators, validators = _b === void 0 ? [] : _b;
+    var _c = useField(name, __assign({ validate: required
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)).meta, error = _c.error, visited = _c.visited;
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(FormControl, { required: required, children: [label && (jsx(FormLabel, { id: "".concat(name, "-radio-buttons-group-label"), disabled: disabled, children: label })), jsx(RadioGroup, { "aria-labelledby": "".concat(name, "-radio-buttons-group-label"), row: !vertical, children: options.map(function (o) {
                         var _a, _b;
-                        return (jsx(FormControlLabel, { label: typeof o === "string" ? o : ((_a = o.text) !== null && _a !== void 0 ? _a : o.value), disabled: disabled, control: jsx(Field, __assign({ name: name, value: typeof o === "string" ? o : o.value, type: "radio" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField, { render: function (_a) {
+                        return (jsx(FormControlLabel, { label: typeof o === "string" ? o : ((_a = o.text) !== null && _a !== void 0 ? _a : o.value), disabled: disabled, control: jsx(Field, __assign({ name: name, value: typeof o === "string" ? o : o.value, type: "radio", render: function (_a) {
                                     var input = _a.input, meta = _a.meta;
                                     return (jsx(RadioOption, { input: input, meta: meta, disabled: disabled, required: required, radioProps: slotProps === null || slotProps === void 0 ? void 0 : slotProps.radio }));
-                                } })) }, typeof o === "string" ? o : ((_b = o.text) !== null && _b !== void 0 ? _b : o.value)));
-                    }) }), (((visited || disabled) && error) || helperText) && (jsx(FormHelperText, { error: error != null, sx: { marginTop: 0 }, children: error || helperText }))] }) }));
+                                } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField)) }, typeof o === "string" ? o : ((_b = o.text) !== null && _b !== void 0 ? _b : o.value)));
+                    }) }), (((visited || disabled) && error) || helperText) && (jsx(FormHelperText, { error: error != null || forceError, sx: { marginTop: 0 }, children: error || helperText }))] }) }));
 };
 
 var ErrorMessage = function (_a) {
@@ -815,6 +815,63 @@ var DropIndicator = styled(Box, {
     });
 });
 
+function isAsset(file) {
+    return "id" in file;
+}
+
+var FileBox = styled(Box)(function (_a) {
+    var disableInteraction = _a.disableInteraction, theme = _a.theme;
+    var alterFunc = theme.palette.mode === "dark" ? lighten : darken;
+    return {
+        transition: "0.2s",
+        cursor: disableInteraction ? undefined : "pointer",
+        "&:hover": disableInteraction
+            ? undefined
+            : {
+                backgroundColor: alterFunc(theme.palette.background.paper, 0.05),
+                "&:active": {
+                    transition: "0s",
+                    backgroundColor: alterFunc(theme.palette.background.paper, 0.1),
+                },
+            },
+        "&:nth-of-type(odd)": {
+            backgroundColor: alterFunc(theme.palette.background.paper, 0.05),
+            "&:hover": disableInteraction
+                ? undefined
+                : {
+                    backgroundColor: alterFunc(theme.palette.background.paper, 0.1),
+                    "&:active": {
+                        backgroundColor: alterFunc(theme.palette.background.paper, 0.15),
+                    },
+                },
+        },
+    };
+});
+
+var UnstyledLink = styled("a")({
+    color: "unset",
+    textDecoration: "none",
+});
+function IndividualFile(_a) {
+    var file = _a.file, disableLink = _a.disableLink, allowDelete = _a.allowDelete, onDelete = _a.onDelete;
+    var isImage = isAsset(file)
+        ? file.mimeType.startsWith("image")
+        : ["png", "jpg", "jpeg", "gif"].some(function (ext) { return file.name.endsWith(ext); });
+    var content = (jsxs(Stack, { p: 0.5, direction: "row", justifyContent: "space-between", children: [jsxs(Stack, { direction: "row", gap: 2, alignItems: "center", children: [isImage ? jsx(ImageIcon, {}) : jsx(FileIcon, {}), jsx(Typography, { children: isAsset(file) ? file.fileName : file.name }), file instanceof File && (jsx(Tooltip, { title: "New File", placement: "right", children: jsx(SparkleIcon, { color: "info" }) }))] }), allowDelete && (jsx(IconButton, { color: "error", onClick: function (e) {
+                    e.stopPropagation();
+                    onDelete && onDelete(file);
+                }, children: jsx(DeleteIcon, {}) }))] }));
+    return (jsxs(FileBox, { disableInteraction: disableLink, children: [!disableLink && (jsx(UnstyledLink, { href: isAsset(file) ? file.fullPath : "#", target: "_blank", children: content })), disableLink && content] }));
+}
+
+function FileDisplay(_a) {
+    var files = _a.files, individualFileProps = __rest(_a, ["files"]);
+    if (!Array.isArray(files)) {
+        return (jsx(Box, { children: jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
+    }
+    return (jsx(Stack, { children: files.map(function (f) { return (jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
+}
+
 var propTypes = {exports: {}};
 
 var reactIs = {exports: {}};
@@ -4795,24 +4852,21 @@ function arrayify(value) {
     }
     return Array.isArray(value) ? value : [value];
 }
-function useFileEditorField(name, options) {
-    var _a = useField(name, __assign(__assign({}, options.fieldProps), { validate: function (v) {
-            return options.required && v == null ? "This field is required" : undefined;
-        } })), input = _a.input, meta = _a.meta;
-    var values = useMemo(function () { return arrayify(input.value); }, [input.value]);
-    var _b = useState(false), showError = _b[0], setShowError = _b[1];
-    var _c = useState(""), errorMessage = _c[0], setErrorMessage = _c[1];
-    var _d = useState(false), dragOverDropzone = _d[0], setDragOverDropzone = _d[1];
+function useFileEditor(value, onChange, options) {
+    var values = useMemo(function () { return arrayify(value); }, [value]);
+    var _a = useState(false), showError = _a[0], setShowError = _a[1];
+    var _b = useState(""), errorMessage = _b[0], setErrorMessage = _b[1];
+    var _c = useState(false), dragOverDropzone = _c[0], setDragOverDropzone = _c[1];
     var multiple = options.multiple, disabled = options.disabled, otherOptions = __rest(options, ["multiple", "disabled"]);
-    var _e = useDropzone(__assign({ multiple: multiple, noClick: multiple || values.length == 0, noKeyboard: multiple, disabled: disabled, onDragEnter: function () { return setDragOverDropzone(true); }, onDragOver: function (e) {
+    var _d = useDropzone(__assign({ multiple: multiple, noClick: multiple || values.length == 0, noKeyboard: multiple, disabled: disabled, onDragEnter: function () { return setDragOverDropzone(true); }, onDragOver: function (e) {
             e.preventDefault();
             e.stopPropagation();
         }, onDragLeave: function () { return setDragOverDropzone(false); }, onDrop: function () { return setDragOverDropzone(false); }, onDropAccepted: function (acceptedFiles) {
             if (multiple) {
-                input.onChange((values !== null && values !== void 0 ? values : []).concat(acceptedFiles));
+                onChange((values !== null && values !== void 0 ? values : []).concat(acceptedFiles));
             }
             else {
-                input.onChange(acceptedFiles[0]);
+                onChange(acceptedFiles[0]);
             }
         }, onDropRejected: function (fileRejections) {
             setShowError(true);
@@ -4820,17 +4874,13 @@ function useFileEditorField(name, options) {
                 setErrorMessage("Multiple files cannot be added to this field");
             }
             else {
-                //Other than trying to add multiple files to a single input, the only other errors
-                // it could be would be size or type violations. Since those are case by case and kind
-                // of hard to cram into a single error message, it's easier to just cover all our bases
-                // with one message
                 setErrorMessage("Some files were rejected because they do not fit the size restriction or are not the right file type");
             }
-        } }, otherOptions)), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, open = _e.open;
+        } }, otherOptions)), getRootProps = _d.getRootProps, getInputProps = _d.getInputProps, open = _d.open;
     var removeFile = useCallback(function (file) {
         var _a, _b;
         if (!multiple) {
-            input.onChange(null);
+            onChange(null);
             return;
         }
         var index = (_a = values === null || values === void 0 ? void 0 : values.findIndex(function (f) { return f === file; })) !== null && _a !== void 0 ? _a : -1;
@@ -4839,8 +4889,8 @@ function useFileEditorField(name, options) {
         }
         var copy = (_b = values === null || values === void 0 ? void 0 : values.slice()) !== null && _b !== void 0 ? _b : [];
         copy.splice(index, 1);
-        input.onChange(copy);
-    }, [multiple, input.onChange, values]);
+        onChange(copy);
+    }, [multiple, onChange, values]);
     return {
         dragOverDropzone: dragOverDropzone,
         getRootProps: getRootProps,
@@ -4851,77 +4901,37 @@ function useFileEditorField(name, options) {
         showError: showError,
         setShowError: setShowError,
         errorMessage: errorMessage,
-        meta: meta,
     };
 }
 
-function isAsset(file) {
-    return "id" in file;
-}
-
-var FileBox = styled(Box)(function (_a) {
-    var disableInteraction = _a.disableInteraction, theme = _a.theme;
-    var alterFunc = theme.palette.mode === "dark" ? lighten : darken;
-    return {
-        transition: "0.2s",
-        cursor: disableInteraction ? undefined : "pointer",
-        "&:hover": disableInteraction
-            ? undefined
-            : {
-                backgroundColor: alterFunc(theme.palette.background.paper, 0.05),
-                "&:active": {
-                    transition: "0s",
-                    backgroundColor: alterFunc(theme.palette.background.paper, 0.1),
-                },
-            },
-        "&:nth-of-type(odd)": {
-            backgroundColor: alterFunc(theme.palette.background.paper, 0.05),
-            "&:hover": disableInteraction
-                ? undefined
-                : {
-                    backgroundColor: alterFunc(theme.palette.background.paper, 0.1),
-                    "&:active": {
-                        backgroundColor: alterFunc(theme.palette.background.paper, 0.15),
-                    },
-                },
-        },
-    };
-});
-
-var UnstyledLink = styled("a")({
-    color: "unset",
-    textDecoration: "none",
-});
-function IndividualFile(_a) {
-    var file = _a.file, disableLink = _a.disableLink, allowDelete = _a.allowDelete, onDelete = _a.onDelete;
-    var isImage = isAsset(file)
-        ? file.mimeType.startsWith("image")
-        : ["png", "jpg", "jpeg", "gif"].some(function (ext) { return file.name.endsWith(ext); });
-    var content = (jsxs(Stack, { p: 0.5, direction: "row", justifyContent: "space-between", children: [jsxs(Stack, { direction: "row", gap: 2, alignItems: "center", children: [isImage ? jsx(ImageIcon, {}) : jsx(FileIcon, {}), jsx(Typography, { children: isAsset(file) ? file.fileName : file.name }), file instanceof File && (jsx(Tooltip, { title: "New File", placement: "right", children: jsx(SparkleIcon, { color: "info" }) }))] }), allowDelete && (jsx(IconButton, { color: "error", onClick: function (e) {
-                    e.stopPropagation();
-                    onDelete && onDelete(file);
-                }, children: jsx(DeleteIcon, {}) }))] }));
-    return (jsxs(FileBox, { disableInteraction: disableLink, children: [!disableLink && (jsx(UnstyledLink, { href: isAsset(file) ? file.fullPath : "#", target: "_blank", children: content })), disableLink && content] }));
+function FileEditor(_a) {
+    var value = _a.value, onChange = _a.onChange, multiple = _a.multiple, disabled = _a.disabled, placeholder = _a.placeholder, accept = _a.accept, maxFiles = _a.maxFiles, maxSize = _a.maxSize, minSize = _a.minSize;
+    var _b = useFileEditor(value, onChange, {
+        multiple: multiple,
+        accept: accept,
+        disabled: disabled,
+        maxFiles: maxFiles,
+        maxSize: maxSize,
+        minSize: minSize,
+    }), getInputProps = _b.getInputProps, getRootProps = _b.getRootProps, dragOverDropzone = _b.dragOverDropzone, values = _b.values, removeFile = _b.removeFile, open = _b.open, showError = _b.showError, setShowError = _b.setShowError, errorMessage = _b.errorMessage;
+    return (jsxs(Fragment$1, { children: [jsxs(Box, { sx: { position: "relative" }, children: [jsx("input", __assign({}, getInputProps())), jsx(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: jsxs(Stack, { gap: 1, children: [values.length > 0 && (jsx(Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsx(FileDisplay, { files: values !== null && values !== void 0 ? values : [], disableLink: true, allowDelete: !disabled, onDelete: removeFile }) })), (multiple || (values === null || values === void 0 ? void 0 : values.length) == 0) && (jsx(Button, { onClick: open, startIcon: jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] }) })), dragOverDropzone && (jsx(Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsx(NoteAddIcon, { sx: { fontSize: 50 } }) }))] }), jsx(ErrorNotification, { open: showError, onClose: function () { return setShowError(false); }, message: errorMessage })] }));
 }
 
-function FileDisplay(_a) {
-    var files = _a.files, individualFileProps = __rest(_a, ["files"]);
-    if (!Array.isArray(files)) {
-        return (jsx(Box, { children: jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
+var isFileRequired = function (value) {
+    if (value == null) {
+        return "This field is required";
     }
-    return (jsx(Stack, { children: files.map(function (f) { return (jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
-}
+    if (Array.isArray(value) && value.length === 0) {
+        return "This field is required";
+    }
+    return undefined;
+};
 
 function FileEditorField(_a) {
-    var name = _a.name, label = _a.label, icon = _a.icon, showSpace = _a.showSpace, multiple = _a.multiple, disabled = _a.disabled, helperText = _a.helperText, placeholder = _a.placeholder, required = _a.required, slotProps = _a.slotProps, accept = _a.accept;
-    var _b = useFileEditorField(name, {
-        multiple: multiple,
-        accept: accept,
-        disabled: disabled,
-        required: required,
-        fieldProps: slotProps === null || slotProps === void 0 ? void 0 : slotProps.field,
-    }), getInputProps = _b.getInputProps, getRootProps = _b.getRootProps, dragOverDropzone = _b.dragOverDropzone, values = _b.values, removeFile = _b.removeFile, open = _b.open, showError = _b.showError, setShowError = _b.setShowError, errorMessage = _b.errorMessage, meta = _b.meta;
-    return (jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxs(FormControl, { fullWidth: true, sx: { position: "relative" }, children: [label && (jsx(FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsx("input", __assign({}, getInputProps())), jsx(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: jsxs(Stack, { gap: 1, children: [values.length > 0 && (jsx(Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsx(FileDisplay, { files: values !== null && values !== void 0 ? values : [], disableLink: true, allowDelete: !disabled, onDelete: removeFile }) })), (multiple || (values === null || values === void 0 ? void 0 : values.length) == 0) && (jsx(Button, { onClick: open, startIcon: jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] }) })), dragOverDropzone && (jsx(Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsx(NoteAddIcon, { sx: { fontSize: 50 } }) })), jsx(FormHelperText, { error: meta.touched && meta.error, children: (meta.touched && meta.error) || helperText })] }), jsx(ErrorNotification, { open: showError, onClose: function () { return setShowError(false); }, message: errorMessage })] }));
+    var name = _a.name, label = _a.label, icon = _a.icon, showSpace = _a.showSpace, multiple = _a.multiple, disabled = _a.disabled, helperText = _a.helperText, placeholder = _a.placeholder, required = _a.required, slotProps = _a.slotProps, accept = _a.accept, maxFiles = _a.maxFiles, maxSize = _a.maxSize, minSize = _a.minSize, forceError = _a.forceError, _b = _a.validators, validators = _b === void 0 ? [] : _b;
+    var _c = useField(name, __assign({ validate: required
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isFileRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _c.input, meta = _c.meta;
+    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(FormControl, { fullWidth: true, children: [label && (jsx(FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsx(FileEditor, { value: input.value, onChange: input.onChange, multiple: multiple, disabled: disabled, accept: accept, maxFiles: maxFiles, maxSize: maxSize, minSize: minSize, placeholder: placeholder }), jsx(FormHelperText, { error: (meta.touched && meta.error) || forceError, children: (meta.touched && meta.error) || helperText })] }) }));
 }
 
 function asInteger(value) {
@@ -5202,5 +5212,5 @@ function TabSet(_a) {
                     }) }) }), jsx(Panel, __assign({}, actualTab === null || actualTab === void 0 ? void 0 : actualTab.PanelProps, { children: actualTab === null || actualTab === void 0 ? void 0 : actualTab.content }))] }));
 }
 
-export { CheckboxFormField, CloseableDialog, ConfirmCancel, DateFormField, DateTimeFormField, EMAIL_REGEX, EditableBlock, ErrorMessage, ErrorNotification, ErrorOverlay, ExtendedPagination, ExtendedTable, FieldWrapper, FileDisplay, FileDropper, FileEditorField, LabeledValue, LoaderButton, MultiSelectFormField, POSTAL_CODE_REGEX, Panel, RadioFormField, SelectFormField, TabSet, TextFormField, asInteger, asPhoneNumber, enableAuthRedirect, isEmail, isPostalCode, sendDelete, sendFormDataPost, sendGet, sendPost, sendPut, useAsyncData, useAsyncDataCallback, useDebounce, useDebounceEffect, usePartialSetterState };
+export { CheckboxFormField, CloseableDialog, ConfirmCancel, DateFormField, DateTimeFormField, EMAIL_REGEX, EditableBlock, ErrorMessage, ErrorNotification, ErrorOverlay, ExtendedPagination, ExtendedTable, FieldWrapper, FileDisplay, FileDropper, FileEditor, FileEditorField, LabeledValue, LoaderButton, MultiSelectFormField, POSTAL_CODE_REGEX, Panel, RadioFormField, SelectFormField, TabSet, TextFormField, asInteger, asPhoneNumber, enableAuthRedirect, isEmail, isPostalCode, sendDelete, sendFormDataPost, sendGet, sendPost, sendPut, useAsyncData, useAsyncDataCallback, useDebounce, useDebounceEffect, useFileEditor, usePartialSetterState };
 //# sourceMappingURL=index.es.js.map