@torq-north/react-tools 1.1.0 → 1.2.0

package/dist/index.cjs

@@ -560,9 +560,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 = reactFinalForm.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 = reactFinalForm.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,
@@ -572,7 +572,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 (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(material.TextField, __assign({}, textFieldProps)) }));
 }
 
@@ -618,9 +618,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 = reactFinalForm.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 = reactFinalForm.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,
@@ -633,10 +633,10 @@ function SelectFormField(_a) {
         slotProps: {
             input: otherInputProps,
             select: {
-                endAdornment: isClearable ? (jsxRuntime.jsx(material.Box, { pr: 2, children: jsxRuntime.jsx(material.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: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
+                endAdornment: isClearable ? (jsxRuntime.jsx(material.Box, { pr: 2, children: jsxRuntime.jsx(material.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: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
             },
         },
-    });
+    }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _c !== void 0 ? _c : {});
     var renderedOptions = React.useMemo(function () { return renderSelectOptions(options); }, [options]);
     return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.TextField, __assign({}, textFieldProps, { children: [renderedOptions, !options && jsxRuntime.jsx(material.MenuItem, {})] })) }));
 }
@@ -663,9 +663,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 = reactFinalForm.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 = reactFinalForm.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,
@@ -678,12 +678,12 @@ function MultiSelectFormField(_a) {
         slotProps: {
             input: otherInputProps,
             select: {
-                endAdornment: isClearable ? (jsxRuntime.jsx(material.Box, { pr: 2, children: jsxRuntime.jsx(material.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: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
+                endAdornment: isClearable ? (jsxRuntime.jsx(material.Box, { pr: 2, children: jsxRuntime.jsx(material.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: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }) })) : undefined,
                 multiple: true,
                 renderValue: function (selected) { return (jsxRuntime.jsx(material.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 = React.useMemo(function () { return renderCheckboxSelectOptions(options, value); }, [options, value]);
     return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.TextField, __assign({}, textFieldProps, { children: [renderedOptions, !options && jsxRuntime.jsx(material.MenuItem, {})] })) }));
 }
@@ -694,19 +694,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 = reactFinalForm.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 (jsxRuntime.jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.Checkbox, __assign({}, checkboxProps)) }), label: label, disabled: disabled }), ((meta.touched && meta.error) || helperText) && (jsxRuntime.jsx(material.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 (jsxRuntime.jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.FormGroup, { children: jsxRuntime.jsx(material.Checkbox, __assign({}, checkboxProps)) }), label: label, disabled: disabled }), ((meta.touched && meta.error) || helperText) && (jsxRuntime.jsx(material.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 = reactFinalForm.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 = reactFinalForm.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"],
@@ -721,16 +721,16 @@ var DateFormField = function (_a) {
                 onBlur: input.onBlur,
             },
         },
-    });
+    }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.datePicker) !== null && _b !== void 0 ? _b : {});
     return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.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 = reactFinalForm.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 = reactFinalForm.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"],
@@ -745,7 +745,7 @@ var DateTimeFormField = function (_a) {
                 onBlur: input.onBlur,
             },
         },
-    });
+    }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.dateTimePicker) !== null && _b !== void 0 ? _b : {});
     return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.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)) }));
 };
 
@@ -756,16 +756,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 = reactFinalForm.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 = reactFinalForm.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 (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.FormControl, { required: required, children: [label && (jsxRuntime.jsx(material.FormLabel, { id: "".concat(name, "-radio-buttons-group-label"), disabled: disabled, children: label })), jsxRuntime.jsx(material.RadioGroup, { "aria-labelledby": "".concat(name, "-radio-buttons-group-label"), row: !vertical, children: options.map(function (o) {
                         var _a, _b;
-                        return (jsxRuntime.jsx(material.FormControlLabel, { label: typeof o === "string" ? o : ((_a = o.text) !== null && _a !== void 0 ? _a : o.value), disabled: disabled, control: jsxRuntime.jsx(reactFinalForm.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 (jsxRuntime.jsx(material.FormControlLabel, { label: typeof o === "string" ? o : ((_a = o.text) !== null && _a !== void 0 ? _a : o.value), disabled: disabled, control: jsxRuntime.jsx(reactFinalForm.Field, __assign({ name: name, value: typeof o === "string" ? o : o.value, type: "radio", render: function (_a) {
                                     var input = _a.input, meta = _a.meta;
                                     return (jsxRuntime.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) && (jsxRuntime.jsx(material.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) && (jsxRuntime.jsx(material.FormHelperText, { error: error != null || forceError, sx: { marginTop: 0 }, children: error || helperText }))] }) }));
 };
 
 var ErrorMessage = function (_a) {
@@ -792,7 +792,11 @@ var ErrorNotification = function (_a) {
     return (jsxRuntime.jsx(material.Snackbar, { open: open, autoHideDuration: 6000, onClose: onClose, children: jsxRuntime.jsx(material.Alert, { onClose: onClose, severity: "error", sx: { width: "100%" }, elevation: 6, variant: "filled", children: message !== null && message !== void 0 ? message : "An error has occured" }) }));
 };
 
-var DropIndicator = material.styled(material.Box)(function (_a) {
+var DropIndicator = material.styled(material.Box, {
+    shouldForwardProp: function (propName) {
+        return propName != "dragOver" && propName != "multiple" && propName != "disabled";
+    },
+})(function (_a) {
     var theme = _a.theme, dragOver = _a.dragOver, multiple = _a.multiple, disabled = _a.disabled;
     return ({
         padding: dragOver ? "1px" : "4px",
@@ -801,7 +805,7 @@ var DropIndicator = material.styled(material.Box)(function (_a) {
         borderRadius: 1,
         cursor: multiple ? undefined : "pointer",
         transition: "0.2s opacity",
-        "&:hover": disabled
+        "&:hover": disabled || multiple
             ? undefined
             : {
                 opacity: 0.8,
@@ -4794,15 +4798,15 @@ function arrayify(value) {
     return Array.isArray(value) ? value : [value];
 }
 function useFileEditorField(name, options) {
-    var _a = reactFinalForm.useField(name, __assign(__assign({}, options.fieldProps), { validate: function (v) {
+    var _a = reactFinalForm.useField(name, __assign({ validate: function (v) {
             return options.required && v == null ? "This field is required" : undefined;
-        } })), input = _a.input, meta = _a.meta;
+        } }, options.fieldProps)), input = _a.input, meta = _a.meta;
     var values = React.useMemo(function () { return arrayify(input.value); }, [input.value]);
     var _b = React.useState(false), showError = _b[0], setShowError = _b[1];
     var _c = React.useState(""), errorMessage = _c[0], setErrorMessage = _c[1];
     var _d = React.useState(false), dragOverDropzone = _d[0], setDragOverDropzone = _d[1];
     var multiple = options.multiple, disabled = options.disabled, otherOptions = __rest(options, ["multiple", "disabled"]);
-    var _e = useDropzone(__assign({ multiple: multiple, noClick: multiple, noKeyboard: multiple, disabled: disabled, onDragEnter: function () { return setDragOverDropzone(true); }, onDragOver: function (e) {
+    var _e = 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) {
@@ -4905,13 +4909,13 @@ function IndividualFile(_a) {
 function FileDisplay(_a) {
     var files = _a.files, individualFileProps = __rest(_a, ["files"]);
     if (!Array.isArray(files)) {
-        return (jsxRuntime.jsx(material.Box, { p: 1, children: jsxRuntime.jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
+        return (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
     }
-    return (jsxRuntime.jsx(material.Stack, { p: 1, children: files.map(function (f) { return (jsxRuntime.jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
+    return (jsxRuntime.jsx(material.Stack, { children: files.map(function (f) { return (jsxRuntime.jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
 }
 
 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 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, forceError = _a.forceError;
     var _b = useFileEditorField(name, {
         multiple: multiple,
         accept: accept,
@@ -4919,7 +4923,7 @@ function FileEditorField(_a) {
         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 (jsxRuntime.jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { position: "relative" }, children: [label && (jsxRuntime.jsx(material.FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsxRuntime.jsx("input", __assign({}, getInputProps())), jsxRuntime.jsxs(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: [jsxRuntime.jsx(material.Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsxRuntime.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) && (jsxRuntime.jsx(material.Button, { onClick: open, startIcon: jsxRuntime.jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] })), dragOverDropzone && (jsxRuntime.jsx(material.Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsxRuntime.jsx(NoteAddIcon, { sx: { fontSize: 50 } }) })), jsxRuntime.jsx(material.FormHelperText, { error: meta.touched && meta.error, children: (meta.touched && meta.error) || helperText })] }), jsxRuntime.jsx(ErrorNotification, { open: showError, onClose: function () { return setShowError(false); }, message: errorMessage })] }));
+    return (jsxRuntime.jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { position: "relative" }, children: [label && (jsxRuntime.jsx(material.FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsxRuntime.jsx("input", __assign({}, getInputProps())), jsxRuntime.jsx(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: jsxRuntime.jsxs(material.Stack, { gap: 1, children: [values.length > 0 && (jsxRuntime.jsx(material.Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsxRuntime.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) && (jsxRuntime.jsx(material.Button, { onClick: open, startIcon: jsxRuntime.jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] }) })), dragOverDropzone && (jsxRuntime.jsx(material.Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsxRuntime.jsx(NoteAddIcon, { sx: { fontSize: 50 } }) })), jsxRuntime.jsx(material.FormHelperText, { error: (meta.touched && meta.error) || forceError, children: (meta.touched && meta.error) || helperText })] }), jsxRuntime.jsx(ErrorNotification, { open: showError, onClose: function () { return setShowError(false); }, message: errorMessage })] }));
 }
 
 function asInteger(value) {