@uppy/dashboard: propagate setOptions to StatusBar

[mifi]

• update statusbar props too
  (when react props change) fixes [4.x] Dashboard doneButtonHandler resets parent state (without re-render) #5248
• fix bug introduced in 9a213b5
• add react dev dashboard

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/Dashboard.js b/packages/@uppy/dashboard/lib/Dashboard.js
index f6968e8..ea1b9f4 100644
--- a/packages/@uppy/dashboard/lib/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/Dashboard.js
@@ -85,6 +85,12 @@ var _getEditors = _classPrivateFieldLooseKey("getEditors");
 var _addSpecifiedPluginsFromOptions = _classPrivateFieldLooseKey("addSpecifiedPluginsFromOptions");
 var _autoDiscoverPlugins = _classPrivateFieldLooseKey("autoDiscoverPlugins");
 var _addSupportedPluginIfNoTarget = _classPrivateFieldLooseKey("addSupportedPluginIfNoTarget");
+var _getStatusBarOpts = _classPrivateFieldLooseKey("getStatusBarOpts");
+var _getThumbnailGeneratorOpts = _classPrivateFieldLooseKey("getThumbnailGeneratorOpts");
+var _getInformerOpts = _classPrivateFieldLooseKey("getInformerOpts");
+var _getStatusBarId = _classPrivateFieldLooseKey("getStatusBarId");
+var _getThumbnailGeneratorId = _classPrivateFieldLooseKey("getThumbnailGeneratorId");
+var _getInformerId = _classPrivateFieldLooseKey("getInformerId");
 export default class Dashboard extends UIPlugin {
   constructor(uppy, _opts) {
     var _opts$autoOpen, _this$opts4, _this$opts4$onRequest;
@@ -94,6 +100,24 @@ export default class Dashboard extends UIPlugin {
       ..._opts,
       autoOpen,
     });
+    Object.defineProperty(this, _getInformerId, {
+      value: _getInformerId2,
+    });
+    Object.defineProperty(this, _getThumbnailGeneratorId, {
+      value: _getThumbnailGeneratorId2,
+    });
+    Object.defineProperty(this, _getStatusBarId, {
+      value: _getStatusBarId2,
+    });
+    Object.defineProperty(this, _getInformerOpts, {
+      value: _getInformerOpts2,
+    });
+    Object.defineProperty(this, _getThumbnailGeneratorOpts, {
+      value: _getThumbnailGeneratorOpts2,
+    });
+    Object.defineProperty(this, _getStatusBarOpts, {
+      value: _getStatusBarOpts2,
+    });
     Object.defineProperty(this, _disabledNodes, {
       writable: true,
       value: void 0,
@@ -982,32 +1006,22 @@ export default class Dashboard extends UIPlugin {
       }
       if (!this.opts.disableStatusBar) {
         this.uppy.use(StatusBar, {
-          id: `${this.id}:StatusBar`,
+          id: _classPrivateFieldLooseBase(this, _getStatusBarId)[_getStatusBarId](),
           target: this,
-          hideUploadButton: this.opts.hideUploadButton,
-          hideRetryButton: this.opts.hideRetryButton,
-          hidePauseResumeButton: this.opts.hidePauseResumeButton,
-          hideCancelButton: this.opts.hideCancelButton,
-          showProgressDetails: this.opts.showProgressDetails,
-          hideAfterFinish: this.opts.hideProgressAfterFinish,
-          locale: this.opts.locale,
-          doneButtonHandler: this.opts.doneButtonHandler,
+          ..._classPrivateFieldLooseBase(this, _getStatusBarOpts)[_getStatusBarOpts](),
         });
       }
       if (!this.opts.disableInformer) {
         this.uppy.use(Informer, {
-          id: `${this.id}:Informer`,
+          id: _classPrivateFieldLooseBase(this, _getInformerId)[_getInformerId](),
           target: this,
+          ..._classPrivateFieldLooseBase(this, _getInformerOpts)[_getInformerOpts](),
         });
       }
       if (!this.opts.disableThumbnailGenerator) {
         this.uppy.use(ThumbnailGenerator, {
-          id: `${this.id}:ThumbnailGenerator`,
-          thumbnailWidth: this.opts.thumbnailWidth,
-          thumbnailHeight: this.opts.thumbnailHeight,
-          thumbnailType: this.opts.thumbnailType,
-          waitForThumbnailsBeforeUpload: this.opts.waitForThumbnailsBeforeUpload,
-          lazy: !this.opts.waitForThumbnailsBeforeUpload,
+          id: _classPrivateFieldLooseBase(this, _getThumbnailGeneratorId)[_getThumbnailGeneratorId](),
+          ..._classPrivateFieldLooseBase(this, _getThumbnailGeneratorOpts)[_getThumbnailGeneratorOpts](),
         });
       }
       this.darkModeMediaQuery = typeof window !== "undefined" && window.matchMedia
@@ -1069,5 +1083,67 @@ export default class Dashboard extends UIPlugin {
       : _this$opts4.onRequestCloseModal = () => this.closeModal();
     this.i18nInit();
   }
+  setOptions(opts) {
+    var _this$uppy$getPlugin, _this$uppy$getPlugin2;
+    super.setOptions(opts);
+    (_this$uppy$getPlugin = this.uppy.getPlugin(_classPrivateFieldLooseBase(this, _getStatusBarId)[_getStatusBarId]()))
+        == null
+      || _this$uppy$getPlugin.setOptions(_classPrivateFieldLooseBase(this, _getStatusBarOpts)[_getStatusBarOpts]());
+    (_this$uppy$getPlugin2 = this.uppy.getPlugin(
+          _classPrivateFieldLooseBase(this, _getThumbnailGeneratorId)[_getThumbnailGeneratorId](),
+        )) == null
+      || _this$uppy$getPlugin2.setOptions(
+        _classPrivateFieldLooseBase(this, _getThumbnailGeneratorOpts)[_getThumbnailGeneratorOpts](),
+      );
+  }
+}
+function _getStatusBarOpts2() {
+  const {
+    hideUploadButton,
+    hideRetryButton,
+    hidePauseResumeButton,
+    hideCancelButton,
+    showProgressDetails,
+    hideProgressAfterFinish,
+    locale: l,
+    doneButtonHandler,
+  } = this.opts;
+  return {
+    hideUploadButton,
+    hideRetryButton,
+    hidePauseResumeButton,
+    hideCancelButton,
+    showProgressDetails,
+    hideAfterFinish: hideProgressAfterFinish,
+    locale: l,
+    doneButtonHandler,
+  };
+}
+function _getThumbnailGeneratorOpts2() {
+  const {
+    thumbnailWidth,
+    thumbnailHeight,
+    thumbnailType,
+    waitForThumbnailsBeforeUpload,
+  } = this.opts;
+  return {
+    thumbnailWidth,
+    thumbnailHeight,
+    thumbnailType,
+    waitForThumbnailsBeforeUpload,
+    lazy: !waitForThumbnailsBeforeUpload,
+  };
+}
+function _getInformerOpts2() {
+  return {};
+}
+function _getStatusBarId2() {
+  return `${this.id}:StatusBar`;
+}
+function _getThumbnailGeneratorId2() {
+  return `${this.id}:ThumbnailGenerator`;
+}
+function _getInformerId2() {
+  return `${this.id}:Informer`;
 }
 Dashboard.VERSION = packageJson.version;
diff --git a/packages/@uppy/react/lib/nonHtmlPropsHaveChanged.js b/packages/@uppy/react/lib/nonHtmlPropsHaveChanged.js
index 57e0cdf..1d71f51 100644
--- a/packages/@uppy/react/lib/nonHtmlPropsHaveChanged.js
+++ b/packages/@uppy/react/lib/nonHtmlPropsHaveChanged.js
@@ -1,3 +1,5 @@
+import getHTMLProps from "./getHTMLProps.js";
 export default function nonHtmlPropsHaveChanged(props, prevProps) {
-  return Object.keys(props).some(key => !Object.hasOwn(props, key) && props[key] !== prevProps[key]);
+  const htmlProps = getHTMLProps(props);
+  return Object.keys(props).some(key => !Object.hasOwn(htmlProps, key) && props[key] !== prevProps[key]);
 }

[Murderlon]

Thanks for picking it up quickly