@torq-north/react-tools 1.4.6 → 1.4.8

package/dist/index.es.js

@@ -120,24 +120,90 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var Http;
-(function (Http) {
-    Http["GET"] = "get";
-    Http["POST"] = "post";
-    Http["PUT"] = "put";
-    Http["PATCH"] = "patch";
-    Http["DELETE"] = "delete";
-})(Http || (Http = {}));
 var HTTPError = /** @class */ (function (_super) {
     __extends(HTTPError, _super);
-    function HTTPError(message, status) {
+    function HTTPError(message, status, violations) {
+        if (violations === void 0) { violations = []; }
+        var _newTarget = this.constructor;
         var _this = _super.call(this, message) || this;
+        // Preserve Error inheritance when consumers use the ES5 build.
+        Object.setPrototypeOf(_this, _newTarget.prototype);
+        _this.name = "HTTPError";
         _this.status = status;
         _this.statusText = message;
+        _this.violations = violations;
         return _this;
     }
     return HTTPError;
 }(Error));
+function isJsonResponse(response) {
+    var _a;
+    var mediaType = (_a = response.headers
+        .get("content-type")) === null || _a === void 0 ? void 0 : _a.split(";")[0].trim().toLowerCase();
+    return (mediaType === "application/json" ||
+        /^application\/[^\s;]+\+json$/.test(mediaType !== null && mediaType !== void 0 ? mediaType : ""));
+}
+function nonEmptyString(value) {
+    return typeof value === "string" ? value.trim() || undefined : undefined;
+}
+function asRecord(value) {
+    return value !== null && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : undefined;
+}
+function readViolations(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.flatMap(function (item) {
+        var _a;
+        var violation = asRecord(item);
+        var title = (_a = nonEmptyString(violation === null || violation === void 0 ? void 0 : violation.title)) !== null && _a !== void 0 ? _a : nonEmptyString(violation === null || violation === void 0 ? void 0 : violation.message);
+        return typeof (violation === null || violation === void 0 ? void 0 : violation.propertyPath) === "string" && title
+            ? [{ propertyPath: violation.propertyPath, title: title }]
+            : [];
+    });
+}
+function readHttpError(response) {
+    return __awaiter(this, void 0, void 0, function () {
+        var payload, _a, violations, message;
+        var _c, _d, _e, _f, _g;
+        return __generator(this, function (_h) {
+            switch (_h.label) {
+                case 0:
+                    if (!isJsonResponse(response)) return [3 /*break*/, 4];
+                    _h.label = 1;
+                case 1:
+                    _h.trys.push([1, 3, , 4]);
+                    _a = asRecord;
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    payload = _a.apply(void 0, [_h.sent()]);
+                    return [3 /*break*/, 4];
+                case 3:
+                    _h.sent();
+                    return [3 /*break*/, 4];
+                case 4:
+                    violations = readViolations(payload === null || payload === void 0 ? void 0 : payload.violations);
+                    message = (_g = (_f = (_e = (_d = (_c = nonEmptyString(payload === null || payload === void 0 ? void 0 : payload.message)) !== null && _c !== void 0 ? _c : nonEmptyString(payload === null || payload === void 0 ? void 0 : payload.detail)) !== null && _d !== void 0 ? _d : (violations.length
+                        ? violations.map(function (_a) {
+                            var title = _a.title;
+                            return title;
+                        }).join("; ")
+                        : undefined)) !== null && _e !== void 0 ? _e : nonEmptyString(payload === null || payload === void 0 ? void 0 : payload.title)) !== null && _f !== void 0 ? _f : nonEmptyString(response.statusText)) !== null && _g !== void 0 ? _g : "Request failed (HTTP ".concat(response.status, ")");
+                    return [2 /*return*/, new HTTPError(message, response.status, violations)];
+            }
+        });
+    });
+}
+
+var Http;
+(function (Http) {
+    Http["GET"] = "get";
+    Http["POST"] = "post";
+    Http["PUT"] = "put";
+    Http["PATCH"] = "patch";
+    Http["DELETE"] = "delete";
+})(Http || (Http = {}));
 var sendGet = function (url, params) { return __awaiter(void 0, void 0, void 0, function () {
     var fetchUrl, response;
     return __generator(this, function (_a) {
@@ -223,33 +289,17 @@ var sendDelete = function (url) { return __awaiter(void 0, void 0, void 0, funct
 }); };
 function checkResponse(response) {
     return __awaiter(this, void 0, void 0, function () {
-        var exception, message;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!!response.ok) return [3 /*break*/, 3];
-                    exception = void 0;
-                    message = void 0;
-                    if (!isJson(response)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, response.json()];
-                case 1:
-                    exception = _a.sent();
-                    _a.label = 2;
-                case 2:
-                    message = (exception && exception.message) || response.statusText;
-                    throw new HTTPError(message, response.status);
-                case 3: return [2 /*return*/];
+                    if (!!response.ok) return [3 /*break*/, 2];
+                    return [4 /*yield*/, readHttpError(response)];
+                case 1: throw _a.sent();
+                case 2: return [2 /*return*/];
             }
         });
     });
 }
-function isJson(response) {
-    var contentType = response.headers.get("content-type");
-    if (!contentType) {
-        return false;
-    }
-    return contentType.indexOf("application/json") >= 0;
-}
 var authLoginUrl = "/auth/login";
 var authRedirectEnabled = false;
 function enableAuthRedirect(loginUrl) {
@@ -275,7 +325,7 @@ function process$1(response) {
                     return [4 /*yield*/, checkResponse(response)];
                 case 1:
                     _a.sent();
-                    if (isJson(response)) {
+                    if (isJsonResponse(response)) {
                         return [2 /*return*/, response.json()];
                     }
                     return [2 /*return*/, null];
@@ -381,6 +431,13 @@ function usePartialSetterState(initial) {
     return [params, updateParams];
 }
 
+/** Hide rejected values' submission errors after the user edits the field. */
+function getFieldError(meta) {
+    if (!meta.touched && !meta.submitFailed)
+        return undefined;
+    return (meta.error || (!meta.dirtySinceLastSubmit ? meta.submitError : undefined));
+}
+
 function FieldWrapper(_a) {
     var icon = _a.icon, children = _a.children, showSpace = _a.showSpace;
     return (jsxs(Stack, { direction: "row", alignItems: "center", children: [(icon || showSpace) && (jsx(Box, { minWidth: 32, color: "primary.main", mt: 2, mx: 1, children: icon })), children] }));
@@ -404,7 +461,9 @@ function composeValidators() {
 }
 
 var isRequired = function (value) {
-    return value ? undefined : "This field is required";
+    return (Array.isArray(value) ? value.length > 0 : value != null && value !== "")
+        ? undefined
+        : "This field is required";
 };
 
 function TextFormField(_a) {
@@ -417,7 +476,7 @@ function TextFormField(_a) {
     var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: typeof inputSlotProp === "function"
             ? function (ownerState) { return (__assign(__assign({}, input), inputSlotProp(ownerState))); }
             : __assign(__assign({}, input), inputSlotProp) });
-    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(TextField, __assign({ fullWidth: true, label: label, required: required, multiline: multiline, disabled: disabled, placeholder: placeholder, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, slotProps: mergedSlotProps }, remainingTextFieldProps)) }));
+    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(TextField, __assign({ fullWidth: true, label: label, required: required, multiline: multiline, disabled: disabled, placeholder: placeholder, error: getFieldError(meta), helperText: getFieldError(meta) || helperText, slotProps: mergedSlotProps }, remainingTextFieldProps)) }));
 }
 
 function isGroup(o) {
@@ -480,14 +539,25 @@ function SelectFormField(_a) {
                 var _a;
                 setIsFocused(false);
                 (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
-            } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), (hasEndAdornment && {
+            } }), select: __assign(__assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { onClose: function (e) {
+                var _a, _b;
+                typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === "function"
+                    ? undefined
+                    : (_b = (_a = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                //When opening a select and then moving the mouse away, the input does not register as
+                // being unhovered. We can fudge this by setting the hover state to false when the options
+                // menu is closed. If the mouse is still over the input when the menu is closed, the hover state
+                // will be set to true automatically by the onMouseEnter event handler (and the focus state is
+                // always true the whole time so the clear button won't flicker)
+                setIsMousedOver(false);
+            } }), (hasEndAdornment && {
             endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable &&
                         (isMousedOver || isFocused) &&
                         value != null &&
                         value != "" && (jsx(IconButton, { size: "small", onClick: function () { return onChange(undefined); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })),
         })) });
     var renderedOptions = useMemo(function () { return renderSelectOptions(options); }, [options]);
-    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ onMouseEnter: function () { return setIsMousedOver(true); }, onMouseLeave: function () { return setIsMousedOver(false); }, fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
+    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ onMouseEnter: function () { return setIsMousedOver(true); }, onMouseLeave: function () { return setIsMousedOver(false); }, fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: getFieldError(meta), helperText: getFieldError(meta) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
 }
 
 function findTextFor(value, options) {
@@ -531,12 +601,23 @@ function MultiSelectFormField(_a) {
                 var _a;
                 setIsFocused(false);
                 (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
-            } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable && (isMousedOver || isFocused) && (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsx(IconButton, { size: "small", onClick: function () { return onChange([]); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })), multiple: true, renderValue: function (selected) { return (jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: selected.map(function (s, index) {
+            } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { onClose: function (e) {
+                var _a, _b;
+                typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === "function"
+                    ? undefined
+                    : (_b = (_a = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                //When opening a select and then moving the mouse away, the input does not register as
+                // being unhovered. We can fudge this by setting the hover state to false when the options
+                // menu is closed. If the mouse is still over the input when the menu is closed, the hover state
+                // will be set to true automatically by the onMouseEnter event handler (and the focus state is
+                // always true the whole time so the clear button won't flicker)
+                setIsMousedOver(false);
+            }, endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable && (isMousedOver || isFocused) && (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsx(IconButton, { size: "small", onClick: function () { return onChange([]); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })), multiple: true, renderValue: function (selected) { return (jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: selected.map(function (s, index) {
                     var _a;
                     return (jsxs(React.Fragment, { children: [index > 0 && ", ", (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"] }, s));
                 }) })); } }) });
     var renderedOptions = useMemo(function () { return renderCheckboxSelectOptions(options, value); }, [options, value]);
-    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ onMouseEnter: function () { return setIsMousedOver(true); }, onMouseLeave: function () { return setIsMousedOver(false); }, fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
+    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ onMouseEnter: function () { return setIsMousedOver(true); }, onMouseLeave: function () { return setIsMousedOver(false); }, fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: getFieldError(meta), helperText: getFieldError(meta) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
 }
 
 var mustBeChecked = function (v) {
@@ -548,7 +629,7 @@ var CheckboxFormField = function (_a) {
     var _c = 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 = _c.input, meta = _c.meta;
     var checkboxProps = __assign(__assign(__assign({}, input), { disabled: disabled }), slotProps === null || slotProps === void 0 ? void 0 : slotProps.checkbox);
-    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 }))] }));
+    return (jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsx(FormControlLabel, { control: jsx(FormGroup, { children: jsx(Checkbox, __assign({}, checkboxProps)) }), label: label, disabled: disabled }), (getFieldError(meta) || helperText) && (jsx(FormHelperText, { disabled: disabled, error: getFieldError(meta) || forceError, sx: { marginTop: 0, marginLeft: 2 }, children: getFieldError(meta) || helperText }))] }));
 };
 
 var DateFormField = function (_a) {
@@ -557,7 +638,7 @@ var DateFormField = function (_a) {
     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)), input = _e.input, meta = _e.meta;
     var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.datePicker) !== null && _b !== void 0 ? _b : {}), datePickerSlotProps = _f.slotProps, remainingDatePickerProps = __rest(_f, ["slotProps"]);
-    var mergedSlotProps = __assign(__assign({}, datePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: meta.touched && meta.error ? "error" : undefined, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, datePickerSlotProps === null || datePickerSlotProps === void 0 ? void 0 : datePickerSlotProps.textField) });
+    var mergedSlotProps = __assign(__assign({}, datePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: getFieldError(meta) ? "error" : undefined, error: getFieldError(meta), helperText: getFieldError(meta) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, datePickerSlotProps === null || datePickerSlotProps === void 0 ? void 0 : datePickerSlotProps.textField) });
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(DatePicker, __assign({ label: label, disabled: disabled, views: ["year", "month", "day"], value: input.value ? dayjs(input.value) : null, onOpen: input.onFocus, onClose: input.onBlur, onChange: function (value) {
                 return input.onChange(formatAsDate ? value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD") : value === null || value === void 0 ? void 0 : value.toJSON());
             }, slotProps: mergedSlotProps }, remainingDatePickerProps)) }));
@@ -569,7 +650,7 @@ var DateTimeFormField = function (_a) {
     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 _e = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.dateTimePicker) !== null && _b !== void 0 ? _b : {}), dateTimePickerSlotProps = _e.slotProps, remainingDateTimePickerProps = __rest(_e, ["slotProps"]);
-    var mergedSlotProps = __assign(__assign({}, dateTimePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: meta.touched && meta.error ? "error" : undefined, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, dateTimePickerSlotProps === null || dateTimePickerSlotProps === void 0 ? void 0 : dateTimePickerSlotProps.textField) });
+    var mergedSlotProps = __assign(__assign({}, dateTimePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: getFieldError(meta) ? "error" : undefined, error: getFieldError(meta), helperText: getFieldError(meta) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, dateTimePickerSlotProps === null || dateTimePickerSlotProps === void 0 ? void 0 : dateTimePickerSlotProps.textField) });
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(DateTimePicker, __assign({ label: label, disabled: disabled, value: input.value ? dayjs(input.value) : null, onOpen: input.onFocus, onClose: input.onBlur, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); }, slotProps: mergedSlotProps }, remainingDateTimePickerProps)) }));
 };
 
@@ -581,15 +662,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, 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;
+    var meta = 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;
+    var error = getFieldError(meta);
     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;
                         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 }));
                                 } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField)) }, typeof o === "string" ? o : o.value));
-                    }) }), (((visited || disabled) && error) || helperText) && (jsx(FormHelperText, { error: error != null || forceError, sx: { marginTop: 0 }, children: error || helperText }))] }) }));
+                    }) }), (error || helperText) && (jsx(FormHelperText, { error: error != null || forceError, sx: { marginTop: 0 }, children: error || helperText }))] }) }));
 };
 
 var ErrorMessage = function (_a) {
@@ -600,20 +682,17 @@ var ErrorMessage = function (_a) {
 var ErrorOverlay = function (_a) {
     var _b, _c, _d, _e;
     var children = _a.children, show = _a.show, offset = _a.offset, message = _a.message;
-    return (jsxs(Box, { position: "relative", children: [children, jsx(Stack, { position: "absolute", top: -7 + ((_b = offset === null || offset === void 0 ? void 0 : offset.top) !== null && _b !== void 0 ? _b : 0), left: -7 + ((_c = offset === null || offset === void 0 ? void 0 : offset.left) !== null && _c !== void 0 ? _c : 0), right: -7 + ((_d = offset === null || offset === void 0 ? void 0 : offset.right) !== null && _d !== void 0 ? _d : 0), bottom: -7 + ((_e = offset === null || offset === void 0 ? void 0 : offset.bottom) !== null && _e !== void 0 ? _e : 0), zIndex: 1, borderRadius: 2, justifyContent: "center", alignItems: "center", sx: function (theme) { return ({
+    return (jsxs(Box, { position: "relative", children: [children, show && (jsx(Stack, { position: "absolute", top: -7 + ((_b = offset === null || offset === void 0 ? void 0 : offset.top) !== null && _b !== void 0 ? _b : 0), left: -7 + ((_c = offset === null || offset === void 0 ? void 0 : offset.left) !== null && _c !== void 0 ? _c : 0), right: -7 + ((_d = offset === null || offset === void 0 ? void 0 : offset.right) !== null && _d !== void 0 ? _d : 0), bottom: -7 + ((_e = offset === null || offset === void 0 ? void 0 : offset.bottom) !== null && _e !== void 0 ? _e : 0), zIndex: 1, borderRadius: 2, justifyContent: "center", alignItems: "center", sx: function (theme) { return ({
                     bgcolor: alpha(theme.palette.background.paper, 0.6),
-                    transition: "0.2s",
-                    opacity: show ? 1 : 0,
                     backdropFilter: "blur(7px)",
-                    pointerEvents: show ? undefined : "none",
                 }); }, children: jsx(Box, { borderRadius: 2, p: 1, sx: function (theme) { return ({
                         bgcolor: alpha(theme.palette.background.paper, 0.6),
-                    }); }, children: jsx(ErrorMessage, { message: message }) }) })] }));
+                    }); }, children: jsx(ErrorMessage, { message: message }) }) }))] }));
 };
 
 var ErrorNotification = function (_a) {
     var open = _a.open, message = _a.message, onClose = _a.onClose;
-    return (jsx(Snackbar, { open: open, autoHideDuration: 6000, onClose: onClose, children: jsx(Alert, { onClose: onClose, severity: "error", sx: { width: "100%" }, elevation: 6, variant: "filled", children: message !== null && message !== void 0 ? message : "An error has occured" }) }));
+    return (jsx(Snackbar, { open: open, autoHideDuration: 6000, onClose: onClose, children: jsx(Alert, { onClose: onClose, severity: "error", sx: { width: "100%" }, elevation: 6, variant: "filled", children: (message === null || message === void 0 ? void 0 : message.trim()) || "An error has occurred" }) }));
 };
 
 var DropIndicator = styled(Box, {
@@ -4761,7 +4840,7 @@ 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, 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 })] }) }));
+    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(FormControl, { fullWidth: true, children: [label && (jsx(FormLabel, { disabled: disabled, error: getFieldError(meta), 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: getFieldError(meta) || forceError, children: getFieldError(meta) || helperText })] }) }));
 }
 
 function asInteger(value) {
@@ -5042,5 +5121,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, 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 };
+export { CheckboxFormField, CloseableDialog, ConfirmCancel, DateFormField, DateTimeFormField, EMAIL_REGEX, EditableBlock, ErrorMessage, ErrorNotification, ErrorOverlay, ExtendedPagination, ExtendedTable, FieldWrapper, FileDisplay, FileDropper, FileEditor, FileEditorField, HTTPError, 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