@teselagen/ui 0.5.23-beta.32 → 0.5.23-beta.33

package/FormComponents/Uploader.d.ts

@@ -1,5 +1,5 @@
 export default Uploader;
-declare function Uploader({ accept: __accept, action, autoUnzip, beforeUpload, callout: _callout, className, contentOverride: maybeContentOverride, disabled: _disabled, dropzoneProps, fileLimit, fileList, innerIcon, innerText, meta: { form: formName }, minimal, name, noBuildCsvOption, noRedux, onChange: _onChange, onFieldSubmit, onFileClick, onFileSuccess, onPreviewClick, onRemove, overflowList, readBeforeUpload, showFilesCount, showUploadList, threeDotMenuItems, validateAgainstSchema: _validateAgainstSchema }: {
+declare function Uploader({ accept: __accept, action, autoUnzip, beforeUpload, callout: _callout, className, contentOverride: maybeContentOverride, disabled, dropzoneProps, fileLimit, fileList, innerIcon, innerText, meta: { form: formName }, minimal, name, noBuildCsvOption, noRedux, onChange: _onChange, onFieldSubmit, onFileClick, onFileSuccess, onPreviewClick, onRemove, overflowList, readBeforeUpload, showFilesCount, showUploadList, threeDotMenuItems, validateAgainstSchema: _validateAgainstSchema }: {
     accept: any;
     action: any;
     autoUnzip: any;

package/index.cjs.js

@@ -31035,7 +31035,7 @@ const _TgSelect = class _TgSelect extends React$1.Component {
       e2.preventDefault();
       let newValue = null;
       if (multi) {
-        newValue = filter(value, (obj) => obj.disabled) || [];
+        newValue = filter(value, (obj) => obj == null ? void 0 : obj.disabled) || [];
       } else if (value && value.disabled) {
         newValue = value;
       }
@@ -67399,6 +67399,9 @@ const InnerDropZone = /* @__PURE__ */ __name(({
     )
   )
 ), showFilesCount ? /* @__PURE__ */ React$1.createElement("div", { className: "tg-upload-file-list-counter" }, "Files: ", fileList ? fileList.length : 0) : null), "InnerDropZone");
+const onFileSuccessDefault = /* @__PURE__ */ __name(() => __async(exports, null, function* () {
+  return;
+}), "onFileSuccessDefault");
 const Uploader = /* @__PURE__ */ __name(({
   accept: __accept,
   action: action2,
@@ -67407,7 +67410,7 @@ const Uploader = /* @__PURE__ */ __name(({
   callout: _callout,
   className = "",
   contentOverride: maybeContentOverride,
-  disabled: _disabled,
+  disabled,
   dropzoneProps = {},
   fileLimit,
   fileList,
@@ -67425,9 +67428,7 @@ const Uploader = /* @__PURE__ */ __name(({
   //called when all files have successfully uploaded
   onFileClick,
   // called when a file link in the filelist is clicked
-  onFileSuccess = /* @__PURE__ */ __name(() => __async(exports, null, function* () {
-    return;
-  }), "onFileSuccess"),
+  onFileSuccess = onFileSuccessDefault,
   //called each time a file is finished and before the file.loading gets set to false, needs to return a promise!
   onPreviewClick,
   onRemove = noop$4,
@@ -67446,83 +67447,92 @@ const Uploader = /* @__PURE__ */ __name(({
   const [resolvedAccept, setResolvedAccept] = React$1.useState();
   const [loading, setLoading] = React$1.useState(false);
   const filesToClean = React$1.useRef([]);
-  const onChange = /* @__PURE__ */ __name((val) => {
-    require$$2$1.flushSync(() => {
-      if (noRedux) {
-        return _onChange(val);
-      }
-      dispatch(reduxForm.touch(formName, name));
-      dispatch(reduxForm.change(formName, name, val));
-    });
-  }, "onChange");
-  const handleSecondHalfOfUpload = /* @__PURE__ */ __name((_0) => __async(exports, [_0], function* ({
-    acceptedFiles,
-    cleanedFileList
-  }) {
-    onChange(cleanedFileList);
-    const keepGoing = beforeUpload ? yield beforeUpload(cleanedFileList, onChange) : true;
-    if (!keepGoing)
-      return;
-    if (action2) {
-      const responses = [];
-      yield Promise.all(
-        acceptedFiles.map((fileToUpload) => __async(exports, null, function* () {
-          const data = new FormData();
-          data.append("file", fileToUpload);
-          try {
-            const res = yield window.serverApi ? window.serverApi.post(action2, data) : fetch(action2, {
-              method: "POST",
-              body: data
-            });
-            responses.push(res.data && res.data[0]);
-            onFileSuccess(res.data[0]).then(() => {
+  const stableOnChange = useStableReference(_onChange);
+  const stableBeforeUpload = useStableReference(beforeUpload);
+  const onChange = React$1.useCallback(
+    (val) => {
+      require$$2$1.flushSync(() => {
+        if (noRedux) {
+          return stableOnChange.current(val);
+        }
+        dispatch(reduxForm.touch(formName, name));
+        dispatch(reduxForm.change(formName, name, val));
+      });
+    },
+    [dispatch, formName, name, noRedux, stableOnChange]
+  );
+  const handleSecondHalfOfUpload = React$1.useCallback(
+    (_0) => __async(exports, [_0], function* ({ acceptedFiles, cleanedFileList }) {
+      onChange(cleanedFileList);
+      const keepGoing = stableBeforeUpload.current ? yield stableBeforeUpload.current(cleanedFileList, onChange) : true;
+      if (!keepGoing)
+        return;
+      if (action2) {
+        const responses = [];
+        yield Promise.all(
+          acceptedFiles.map((fileToUpload) => __async(exports, null, function* () {
+            const data = new FormData();
+            data.append("file", fileToUpload);
+            try {
+              const res = yield window.serverApi ? window.serverApi.post(action2, data) : fetch(action2, {
+                method: "POST",
+                body: data
+              });
+              responses.push(res.data && res.data[0]);
+              onFileSuccess(res.data[0]).then(() => {
+                cleanedFileList = cleanedFileList.map((file) => {
+                  const fileToReturn = __spreadValues(__spreadValues({}, file), res.data[0]);
+                  if (fileToReturn.id === fileToUpload.id) {
+                    fileToReturn.loading = false;
+                  }
+                  return fileToReturn;
+                });
+                onChange(cleanedFileList);
+              });
+            } catch (err) {
+              console.error("Error uploading file:", err);
+              responses.push(__spreadProps(__spreadValues({}, fileToUpload), {
+                error: err && err.msg ? err.msg : err
+              }));
               cleanedFileList = cleanedFileList.map((file) => {
-                const fileToReturn = __spreadValues(__spreadValues({}, file), res.data[0]);
+                const fileToReturn = __spreadValues({}, file);
                 if (fileToReturn.id === fileToUpload.id) {
                   fileToReturn.loading = false;
+                  fileToReturn.error = true;
                 }
                 return fileToReturn;
               });
               onChange(cleanedFileList);
+            }
+          }))
+        );
+        onFieldSubmit(responses);
+      } else {
+        onChange(
+          cleanedFileList.map(function(file) {
+            return __spreadProps(__spreadValues({}, file), {
+              loading: false
             });
-          } catch (err) {
-            console.error("Error uploading file:", err);
-            responses.push(__spreadProps(__spreadValues({}, fileToUpload), {
-              error: err && err.msg ? err.msg : err
-            }));
-            cleanedFileList = cleanedFileList.map((file) => {
-              const fileToReturn = __spreadValues({}, file);
-              if (fileToReturn.id === fileToUpload.id) {
-                fileToReturn.loading = false;
-                fileToReturn.error = true;
-              }
-              return fileToReturn;
-            });
-            onChange(cleanedFileList);
-          }
-        }))
-      );
-      onFieldSubmit(responses);
-    } else {
-      onChange(
-        cleanedFileList.map(function(file) {
-          return __spreadProps(__spreadValues({}, file), {
-            loading: false
-          });
-        })
-      );
-    }
-    setLoading(false);
-  }), "handleSecondHalfOfUpload");
+          })
+        );
+      }
+      setLoading(false);
+    }),
+    [action2, stableBeforeUpload, onChange, onFieldSubmit, onFileSuccess]
+  );
   const isAcceptPromise = React$1.useMemo(
     () => (__accept == null ? void 0 : __accept.then) || (Array.isArray(__accept) ? __accept.some((acc) => acc == null ? void 0 : acc.then) : false),
     [__accept]
   );
-  let dropzoneDisabled = _disabled;
-  let _accept = __accept;
-  if (resolvedAccept) {
-    _accept = resolvedAccept;
-  }
+  const _accept = React$1.useMemo(() => {
+    if (resolvedAccept) {
+      return resolvedAccept;
+    }
+    if (isAcceptPromise && !resolvedAccept) {
+      return [];
+    }
+    return __accept;
+  }, [__accept, isAcceptPromise, resolvedAccept]);
   React$1.useEffect(() => {
     if (isAcceptPromise) {
       setAcceptLoading(true);
@@ -67535,9 +67545,7 @@ const Uploader = /* @__PURE__ */ __name(({
       );
     }
   }, [__accept, isAcceptPromise]);
-  if (isAcceptPromise && !resolvedAccept) {
-    _accept = [];
-  }
+  let dropzoneDisabled = disabled;
   if (acceptLoading)
     dropzoneDisabled = true;
   const accept = React$1.useMemo(
@@ -67762,7 +67770,7 @@ const Uploader = /* @__PURE__ */ __name(({
           style: { fontSize: 11, marginBottom: 5 }
         },
         advancedAccept && !acceptLoading ? /* @__PURE__ */ React$1.createElement("div", null, "Accepts  ", /* @__PURE__ */ React$1.createElement("span", null, advancedAccept.map((acc, i) => {
-          const disabled = !(acc.description || acc.exampleFile || acc.exampleFiles);
+          const disabled2 = !(acc.description || acc.exampleFile || acc.exampleFiles);
           const PopOrTooltip = acc.exampleFiles ? core.Popover : core.Tooltip;
           const hasDownload = acc.exampleFile || acc.exampleFiles;
           const CustomTag = !hasDownload ? "span" : "a";
@@ -67771,7 +67779,7 @@ const Uploader = /* @__PURE__ */ __name(({
             {
               key: i,
               interactionKind: "hover",
-              disabled,
+              disabled: disabled2,
               modifiers: popoverOverflowModifiers,
               content: acc.exampleFiles ? /* @__PURE__ */ React$1.createElement(core.Menu, null, acc.exampleFiles.map(
                 ({ description, subtext, exampleFile, icon }, i2) => /* @__PURE__ */ React$1.createElement(

package/index.es.js

@@ -31017,7 +31017,7 @@ const _TgSelect = class _TgSelect extends React__default.Component {
       e2.preventDefault();
       let newValue = null;
       if (multi) {
-        newValue = filter(value, (obj) => obj.disabled) || [];
+        newValue = filter(value, (obj) => obj == null ? void 0 : obj.disabled) || [];
       } else if (value && value.disabled) {
         newValue = value;
       }
@@ -67381,6 +67381,9 @@ const InnerDropZone = /* @__PURE__ */ __name(({
     )
   )
 ), showFilesCount ? /* @__PURE__ */ React__default.createElement("div", { className: "tg-upload-file-list-counter" }, "Files: ", fileList ? fileList.length : 0) : null), "InnerDropZone");
+const onFileSuccessDefault = /* @__PURE__ */ __name(() => __async(void 0, null, function* () {
+  return;
+}), "onFileSuccessDefault");
 const Uploader = /* @__PURE__ */ __name(({
   accept: __accept,
   action: action2,
@@ -67389,7 +67392,7 @@ const Uploader = /* @__PURE__ */ __name(({
   callout: _callout,
   className = "",
   contentOverride: maybeContentOverride,
-  disabled: _disabled,
+  disabled,
   dropzoneProps = {},
   fileLimit,
   fileList,
@@ -67407,9 +67410,7 @@ const Uploader = /* @__PURE__ */ __name(({
   //called when all files have successfully uploaded
   onFileClick,
   // called when a file link in the filelist is clicked
-  onFileSuccess = /* @__PURE__ */ __name(() => __async(void 0, null, function* () {
-    return;
-  }), "onFileSuccess"),
+  onFileSuccess = onFileSuccessDefault,
   //called each time a file is finished and before the file.loading gets set to false, needs to return a promise!
   onPreviewClick,
   onRemove = noop$4,
@@ -67428,83 +67429,92 @@ const Uploader = /* @__PURE__ */ __name(({
   const [resolvedAccept, setResolvedAccept] = useState();
   const [loading, setLoading] = useState(false);
   const filesToClean = useRef([]);
-  const onChange = /* @__PURE__ */ __name((val) => {
-    flushSync(() => {
-      if (noRedux) {
-        return _onChange(val);
-      }
-      dispatch(touch(formName, name));
-      dispatch(change(formName, name, val));
-    });
-  }, "onChange");
-  const handleSecondHalfOfUpload = /* @__PURE__ */ __name((_0) => __async(void 0, [_0], function* ({
-    acceptedFiles,
-    cleanedFileList
-  }) {
-    onChange(cleanedFileList);
-    const keepGoing = beforeUpload ? yield beforeUpload(cleanedFileList, onChange) : true;
-    if (!keepGoing)
-      return;
-    if (action2) {
-      const responses = [];
-      yield Promise.all(
-        acceptedFiles.map((fileToUpload) => __async(void 0, null, function* () {
-          const data = new FormData();
-          data.append("file", fileToUpload);
-          try {
-            const res = yield window.serverApi ? window.serverApi.post(action2, data) : fetch(action2, {
-              method: "POST",
-              body: data
-            });
-            responses.push(res.data && res.data[0]);
-            onFileSuccess(res.data[0]).then(() => {
+  const stableOnChange = useStableReference(_onChange);
+  const stableBeforeUpload = useStableReference(beforeUpload);
+  const onChange = useCallback(
+    (val) => {
+      flushSync(() => {
+        if (noRedux) {
+          return stableOnChange.current(val);
+        }
+        dispatch(touch(formName, name));
+        dispatch(change(formName, name, val));
+      });
+    },
+    [dispatch, formName, name, noRedux, stableOnChange]
+  );
+  const handleSecondHalfOfUpload = useCallback(
+    (_0) => __async(void 0, [_0], function* ({ acceptedFiles, cleanedFileList }) {
+      onChange(cleanedFileList);
+      const keepGoing = stableBeforeUpload.current ? yield stableBeforeUpload.current(cleanedFileList, onChange) : true;
+      if (!keepGoing)
+        return;
+      if (action2) {
+        const responses = [];
+        yield Promise.all(
+          acceptedFiles.map((fileToUpload) => __async(void 0, null, function* () {
+            const data = new FormData();
+            data.append("file", fileToUpload);
+            try {
+              const res = yield window.serverApi ? window.serverApi.post(action2, data) : fetch(action2, {
+                method: "POST",
+                body: data
+              });
+              responses.push(res.data && res.data[0]);
+              onFileSuccess(res.data[0]).then(() => {
+                cleanedFileList = cleanedFileList.map((file) => {
+                  const fileToReturn = __spreadValues(__spreadValues({}, file), res.data[0]);
+                  if (fileToReturn.id === fileToUpload.id) {
+                    fileToReturn.loading = false;
+                  }
+                  return fileToReturn;
+                });
+                onChange(cleanedFileList);
+              });
+            } catch (err) {
+              console.error("Error uploading file:", err);
+              responses.push(__spreadProps(__spreadValues({}, fileToUpload), {
+                error: err && err.msg ? err.msg : err
+              }));
               cleanedFileList = cleanedFileList.map((file) => {
-                const fileToReturn = __spreadValues(__spreadValues({}, file), res.data[0]);
+                const fileToReturn = __spreadValues({}, file);
                 if (fileToReturn.id === fileToUpload.id) {
                   fileToReturn.loading = false;
+                  fileToReturn.error = true;
                 }
                 return fileToReturn;
               });
               onChange(cleanedFileList);
+            }
+          }))
+        );
+        onFieldSubmit(responses);
+      } else {
+        onChange(
+          cleanedFileList.map(function(file) {
+            return __spreadProps(__spreadValues({}, file), {
+              loading: false
             });
-          } catch (err) {
-            console.error("Error uploading file:", err);
-            responses.push(__spreadProps(__spreadValues({}, fileToUpload), {
-              error: err && err.msg ? err.msg : err
-            }));
-            cleanedFileList = cleanedFileList.map((file) => {
-              const fileToReturn = __spreadValues({}, file);
-              if (fileToReturn.id === fileToUpload.id) {
-                fileToReturn.loading = false;
-                fileToReturn.error = true;
-              }
-              return fileToReturn;
-            });
-            onChange(cleanedFileList);
-          }
-        }))
-      );
-      onFieldSubmit(responses);
-    } else {
-      onChange(
-        cleanedFileList.map(function(file) {
-          return __spreadProps(__spreadValues({}, file), {
-            loading: false
-          });
-        })
-      );
-    }
-    setLoading(false);
-  }), "handleSecondHalfOfUpload");
+          })
+        );
+      }
+      setLoading(false);
+    }),
+    [action2, stableBeforeUpload, onChange, onFieldSubmit, onFileSuccess]
+  );
   const isAcceptPromise = useMemo(
     () => (__accept == null ? void 0 : __accept.then) || (Array.isArray(__accept) ? __accept.some((acc) => acc == null ? void 0 : acc.then) : false),
     [__accept]
   );
-  let dropzoneDisabled = _disabled;
-  let _accept = __accept;
-  if (resolvedAccept) {
-    _accept = resolvedAccept;
-  }
+  const _accept = useMemo(() => {
+    if (resolvedAccept) {
+      return resolvedAccept;
+    }
+    if (isAcceptPromise && !resolvedAccept) {
+      return [];
+    }
+    return __accept;
+  }, [__accept, isAcceptPromise, resolvedAccept]);
   useEffect(() => {
     if (isAcceptPromise) {
       setAcceptLoading(true);
@@ -67517,9 +67527,7 @@ const Uploader = /* @__PURE__ */ __name(({
       );
     }
   }, [__accept, isAcceptPromise]);
-  if (isAcceptPromise && !resolvedAccept) {
-    _accept = [];
-  }
+  let dropzoneDisabled = disabled;
   if (acceptLoading)
     dropzoneDisabled = true;
   const accept = useMemo(
@@ -67744,7 +67752,7 @@ const Uploader = /* @__PURE__ */ __name(({
           style: { fontSize: 11, marginBottom: 5 }
         },
         advancedAccept && !acceptLoading ? /* @__PURE__ */ React__default.createElement("div", null, "Accepts  ", /* @__PURE__ */ React__default.createElement("span", null, advancedAccept.map((acc, i) => {
-          const disabled = !(acc.description || acc.exampleFile || acc.exampleFiles);
+          const disabled2 = !(acc.description || acc.exampleFile || acc.exampleFiles);
           const PopOrTooltip = acc.exampleFiles ? Popover : Tooltip;
           const hasDownload = acc.exampleFile || acc.exampleFiles;
           const CustomTag = !hasDownload ? "span" : "a";
@@ -67753,7 +67761,7 @@ const Uploader = /* @__PURE__ */ __name(({
             {
               key: i,
               interactionKind: "hover",
-              disabled,
+              disabled: disabled2,
               modifiers: popoverOverflowModifiers,
               content: acc.exampleFiles ? /* @__PURE__ */ React__default.createElement(Menu, null, acc.exampleFiles.map(
                 ({ description, subtext, exampleFile, icon }, i2) => /* @__PURE__ */ React__default.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.5.23-beta.32",
+  "version": "0.5.23-beta.33",
   "main": "./src/index.js",
   "exports": {
     ".": {

package/src/FormComponents/Uploader.js

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import {
   Button,
   Callout,
@@ -42,6 +48,7 @@ import convertSchema from "../DataTable/utils/convertSchema";
 import { LoadingDots } from "./LoadingDots";
 import { useDispatch } from "react-redux";
 import { flushSync } from "react-dom";
+import { useStableReference } from "../utils/hooks/useStableReference";
 
 const manualEnterMessage = "Build CSV File";
 const manualEnterSubMessage = "Paste or type data to build a CSV file";
@@ -208,6 +215,10 @@ const InnerDropZone = ({
   </section>
 );
 
+const onFileSuccessDefault = async () => {
+  return;
+};
+
 const Uploader = ({
   accept: __accept,
   action,
@@ -216,7 +227,7 @@ const Uploader = ({
   callout: _callout,
   className = "",
   contentOverride: maybeContentOverride,
-  disabled: _disabled,
+  disabled,
   dropzoneProps = {},
   fileLimit,
   fileList, //list of files with options: {name, loading, error, url, originalName, downloadName}
@@ -230,9 +241,7 @@ const Uploader = ({
   onChange: _onChange = noop, //this is almost always getting passed by redux-form, no need to pass this handler manually
   onFieldSubmit = noop, //called when all files have successfully uploaded
   onFileClick, // called when a file link in the filelist is clicked
-  onFileSuccess = async () => {
-    return;
-  }, //called each time a file is finished and before the file.loading gets set to false, needs to return a promise!
+  onFileSuccess = onFileSuccessDefault, //called each time a file is finished and before the file.loading gets set to false, needs to return a promise!
   onPreviewClick,
   onRemove = noop, //called when a file has been selected to be removed
   overflowList,
@@ -247,88 +256,95 @@ const Uploader = ({
   const [resolvedAccept, setResolvedAccept] = useState();
   const [loading, setLoading] = useState(false);
   const filesToClean = useRef([]);
+
+  // We do this because we don't want functions influencing on the dependencies
+  const stableOnChange = useStableReference(_onChange);
+  const stableBeforeUpload = useStableReference(beforeUpload);
   // onChange received from redux-form is not working anymore,
   // so we need to overwrite it for redux to works.
-  const onChange = val => {
-    flushSync(() => {
-      if (noRedux) {
-        return _onChange(val);
-      }
-      dispatch(touch(formName, name));
-      dispatch(change(formName, name, val));
-    });
-  };
+  const onChange = useCallback(
+    val => {
+      flushSync(() => {
+        if (noRedux) {
+          return stableOnChange.current(val);
+        }
+        dispatch(touch(formName, name));
+        dispatch(change(formName, name, val));
+      });
+    },
+    [dispatch, formName, name, noRedux, stableOnChange]
+  );
 
-  const handleSecondHalfOfUpload = async ({
-    acceptedFiles,
-    cleanedFileList
-  }) => {
-    // This onChange is not changing things, we need to check whether the error is here or later
-    onChange(cleanedFileList); //tnw: this line is necessary, if you want to clear the file list in the beforeUpload, call onChange([])
-    // beforeUpload is called, otherwise beforeUpload will not be able to truly cancel the upload
-    const keepGoing = beforeUpload
-      ? await beforeUpload(cleanedFileList, onChange)
-      : true;
-    if (!keepGoing) return;
+  const handleSecondHalfOfUpload = useCallback(
+    async ({ acceptedFiles, cleanedFileList }) => {
+      // This onChange is not changing things, we need to check whether the error is here or later
+      onChange(cleanedFileList); //tnw: this line is necessary, if you want to clear the file list in the beforeUpload, call onChange([])
+      // beforeUpload is called, otherwise beforeUpload will not be able to truly cancel the upload
+      const keepGoing = stableBeforeUpload.current
+        ? await stableBeforeUpload.current(cleanedFileList, onChange)
+        : true;
+      if (!keepGoing) return;
 
-    if (action) {
-      const responses = [];
-      await Promise.all(
-        acceptedFiles.map(async fileToUpload => {
-          const data = new FormData();
-          data.append("file", fileToUpload);
-          try {
-            const res = await (window.serverApi
-              ? window.serverApi.post(action, data)
-              : fetch(action, {
-                  method: "POST",
-                  body: data
-                }));
-            responses.push(res.data && res.data[0]);
-            onFileSuccess(res.data[0]).then(() => {
+      if (action) {
+        const responses = [];
+        await Promise.all(
+          acceptedFiles.map(async fileToUpload => {
+            const data = new FormData();
+            data.append("file", fileToUpload);
+            try {
+              const res = await (window.serverApi
+                ? window.serverApi.post(action, data)
+                : fetch(action, {
+                    method: "POST",
+                    body: data
+                  }));
+              responses.push(res.data && res.data[0]);
+              onFileSuccess(res.data[0]).then(() => {
+                cleanedFileList = cleanedFileList.map(file => {
+                  const fileToReturn = {
+                    ...file,
+                    ...res.data[0]
+                  };
+                  if (fileToReturn.id === fileToUpload.id) {
+                    fileToReturn.loading = false;
+                  }
+                  return fileToReturn;
+                });
+                onChange(cleanedFileList);
+              });
+            } catch (err) {
+              console.error("Error uploading file:", err);
+              responses.push({
+                ...fileToUpload,
+                error: err && err.msg ? err.msg : err
+              });
               cleanedFileList = cleanedFileList.map(file => {
-                const fileToReturn = {
-                  ...file,
-                  ...res.data[0]
-                };
+                const fileToReturn = { ...file };
                 if (fileToReturn.id === fileToUpload.id) {
                   fileToReturn.loading = false;
+                  fileToReturn.error = true;
                 }
                 return fileToReturn;
               });
               onChange(cleanedFileList);
-            });
-          } catch (err) {
-            console.error("Error uploading file:", err);
-            responses.push({
-              ...fileToUpload,
-              error: err && err.msg ? err.msg : err
-            });
-            cleanedFileList = cleanedFileList.map(file => {
-              const fileToReturn = { ...file };
-              if (fileToReturn.id === fileToUpload.id) {
-                fileToReturn.loading = false;
-                fileToReturn.error = true;
-              }
-              return fileToReturn;
-            });
-            onChange(cleanedFileList);
-          }
-        })
-      );
-      onFieldSubmit(responses);
-    } else {
-      onChange(
-        cleanedFileList.map(function (file) {
-          return {
-            ...file,
-            loading: false
-          };
-        })
-      );
-    }
-    setLoading(false);
-  };
+            }
+          })
+        );
+        onFieldSubmit(responses);
+      } else {
+        onChange(
+          cleanedFileList.map(function (file) {
+            return {
+              ...file,
+              loading: false
+            };
+          })
+        );
+      }
+      setLoading(false);
+    },
+    [action, stableBeforeUpload, onChange, onFieldSubmit, onFileSuccess]
+  );
 
   const isAcceptPromise = useMemo(
     () =>
@@ -337,12 +353,15 @@ const Uploader = ({
     [__accept]
   );
 
-  let dropzoneDisabled = _disabled;
-  let _accept = __accept;
-
-  if (resolvedAccept) {
-    _accept = resolvedAccept;
-  }
+  const _accept = useMemo(() => {
+    if (resolvedAccept) {
+      return resolvedAccept;
+    }
+    if (isAcceptPromise && !resolvedAccept) {
+      return [];
+    }
+    return __accept;
+  }, [__accept, isAcceptPromise, resolvedAccept]);
 
   useEffect(() => {
     if (isAcceptPromise) {
@@ -357,11 +376,9 @@ const Uploader = ({
     }
   }, [__accept, isAcceptPromise]);
 
-  if (isAcceptPromise && !resolvedAccept) {
-    _accept = [];
-  }
-
+  let dropzoneDisabled = disabled;
   if (acceptLoading) dropzoneDisabled = true;
+
   const accept = useMemo(
     () =>
       !_accept

package/src/TgSelect/index.js

@@ -126,7 +126,7 @@ class TgSelect extends React.Component {
     e.preventDefault();
     let newValue = null;
     if (multi) {
-      newValue = filter(value, obj => obj.disabled) || [];
+      newValue = filter(value, obj => obj?.disabled) || [];
     } else if (value && value.disabled) {
       newValue = value;
     }