@uppy/react - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

lib/Dashboard.js

@@ -11,2 +11,4 @@ "use strict";
 
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged');
+
 const h = React.createElement;
@@ -19,7 +21,2 @@ /**
 class Dashboard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.validProps = getHTMLProps(props);
-  }
-
   componentDidMount() {
@@ -33,2 +30,8 @@ this.installPlugin();
       this.installPlugin();
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props,
+        target: this.container
+      };
+      delete options.uppy;
+      this.plugin.setOptions(options);
     }
@@ -63,2 +66,4 @@ }
   render() {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props);
     return h('div', {
@@ -65,0 +70,0 @@ ref: container => {

lib/DashboardModal.js

@@ -13,2 +13,4 @@ "use strict";
 
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged');
+
 const h = React.createElement;
@@ -21,7 +23,2 @@ /**
 class DashboardModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.validProps = getHTMLProps(props);
-  }
-
   componentDidMount() {
@@ -35,2 +32,8 @@ this.installPlugin();
       this.installPlugin();
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props,
+        onRequestCloseModal: this.props.onRequestClose
+      };
+      delete options.uppy;
+      this.plugin.setOptions(options);
     }
@@ -80,2 +83,4 @@
   render() {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props);
     return h('div', {
@@ -82,0 +87,0 @@ ref: container => {

lib/DragDrop.js

@@ -11,2 +11,4 @@ "use strict";
 
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged');
+
 const h = React.createElement;
@@ -19,7 +21,2 @@ /**
 class DragDrop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.validProps = getHTMLProps(props);
-  }
-
   componentDidMount() {
@@ -33,2 +30,8 @@ this.installPlugin();
       this.installPlugin();
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props,
+        target: this.container
+      };
+      delete options.uppy;
+      this.plugin.setOptions(options);
     }
@@ -63,2 +66,4 @@ }
   render() {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props);
     return h('div', {
@@ -65,0 +70,0 @@ ref: container => {

lib/getHTMLProps.js

 "use strict";
 
-// Attributes in the format of htmlAtrribute: reactAttribute
-const possibleStandardNames = ['accept', 'acceptCharset', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'alt', 'as', 'async', 'autoCapitalize', 'autoComplete', 'autoCorrect', 'autoFocus', 'autoPlay', 'autoSave', 'capture', 'cellPadding', 'cellSpacing', 'challenge', 'charSet', 'checked', 'children', 'cite', 'className', 'classID', 'className', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'controlsList', 'coords', 'crossOrigin', 'dangerouslySetInnerHTML', 'data', 'dateTime', 'default', 'defaultChecked', 'defaultValue', 'defer', 'dir', 'disabled', 'disablePictureInPicture', 'disableRemotePlayback', 'download', 'draggable', 'encType', 'enterKeyHint', 'htmlFor', 'form', 'formMethod', 'formAction', 'formEncType', 'formNoValidate', 'formTarget', 'frameBorder', 'headers', // 'height',
-'hidden', 'high', 'href', 'hrefLang', 'htmlFor', 'httpEquiv', 'httpEquiv', 'icon', 'id', 'innerHTML', 'inputMode', 'integrity', 'is', 'itemID', 'itemProp', 'itemRef', 'itemScope', 'itemType', 'keyParams', 'keyType', 'kind', 'label', 'lang', 'list', 'loop', 'low', 'manifest', 'marginWidth', 'marginHeight', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'minLength', 'multiple', 'muted', 'name', 'noModule', 'nonce', 'noValidate', 'open', 'optimum', 'pattern', 'placeholder', 'playsInline', 'poster', 'preload', 'profile', 'radioGroup', 'readOnly', 'referrerPolicy', 'rel', 'required', 'reversed', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'spellCheck', 'src', 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'tabIndex', // 'target',
-'title', 'type', 'useMap', 'value', // 'width',
-'wmode', 'wrap'];
+// List taken from React.HTMLAttributes supported properties:
+// https://unpkg.com/@types/react@17.0.22/index.d.ts:1821
+const reactSupportedHtmlAttr = [// React-specific Attributes
+'defaultChecked', 'defaultValue', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'dangerouslySetInnerHTML', // Standard HTML Attributes
+'accessKey', 'className', 'contentEditable', 'contextMenu', 'dir', 'draggable', 'hidden', 'id', 'lang', 'placeholder', 'slot', 'spellCheck', 'style', 'tabIndex', 'title', 'translate', // Unknown
+'radioGroup', // WAI-ARIA
+'role', // RDFa Attributes
+'about', 'datatype', 'inlist', 'prefix', 'property', 'resource', 'typeof', 'vocab', // Non-standard Attributes
+'autoCapitalize', 'autoCorrect', 'autoSave', 'color', 'itemProp', 'itemScope', 'itemType', 'itemID', 'itemRef', 'results', 'security', 'unselectable', // Living Standard
+'inputMode', 'is', // Clipboard Events
+'onCopy', 'onCopyCapture', 'onCut', 'onCutCapture', 'onPaste', 'onPasteCapture', // Composition Events
+'onCompositionEnd', 'onCompositionEndCapture', 'onCompositionStart', 'onCompositionStartCapture', 'onCompositionUpdate', 'onCompositionUpdateCapture', // Focus Events
+'onFocus', 'onFocusCapture', 'onBlur', 'onBlurCapture', // Form Events
+'onChange', 'onChangeCapture', 'onBeforeInput', 'onBeforeInputCapture', 'onInput', 'onInputCapture', 'onReset', 'onResetCapture', 'onSubmit', 'onSubmitCapture', 'onInvalid', 'onInvalidCapture', // Image Events
+'onLoad', 'onLoadCapture', 'onError', // also a Media Event
+'onErrorCapture', // also a Media Event
+// Keyboard Events
+'onKeyDown', 'onKeyDownCapture', 'onKeyPress', 'onKeyPressCapture', 'onKeyUp', 'onKeyUpCapture', // Media Events
+'onAbort', 'onAbortCapture', 'onCanPlay', 'onCanPlayCapture', 'onCanPlayThrough', 'onCanPlayThroughCapture', 'onDurationChange', 'onDurationChangeCapture', 'onEmptied', 'onEmptiedCapture', 'onEncrypted', 'onEncryptedCapture', 'onEnded', 'onEndedCapture', 'onLoadedData', 'onLoadedDataCapture', 'onLoadedMetadata', 'onLoadedMetadataCapture', 'onLoadStart', 'onLoadStartCapture', 'onPause', 'onPauseCapture', 'onPlay', 'onPlayCapture', 'onPlaying', 'onPlayingCapture', 'onProgress', 'onProgressCapture', 'onRateChange', 'onRateChangeCapture', 'onSeeked', 'onSeekedCapture', 'onSeeking', 'onSeekingCapture', 'onStalled', 'onStalledCapture', 'onSuspend', 'onSuspendCapture', 'onTimeUpdate', 'onTimeUpdateCapture', 'onVolumeChange', 'onVolumeChangeCapture', 'onWaiting', 'onWaitingCapture', // MouseEvents
+'onAuxClick', 'onAuxClickCapture', 'onClick', 'onClickCapture', 'onContextMenu', 'onContextMenuCapture', 'onDoubleClick', 'onDoubleClickCapture', 'onDrag', 'onDragCapture', 'onDragEnd', 'onDragEndCapture', 'onDragEnter', 'onDragEnterCapture', 'onDragExit', 'onDragExitCapture', 'onDragLeave', 'onDragLeaveCapture', 'onDragOver', 'onDragOverCapture', 'onDragStart', 'onDragStartCapture', 'onDrop', 'onDropCapture', 'onMouseDown', 'onMouseDownCapture', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseMoveCapture', 'onMouseOut', 'onMouseOutCapture', 'onMouseOver', 'onMouseOverCapture', 'onMouseUp', 'onMouseUpCapture', // Selection Events
+'onSelect', 'onSelectCapture', // Touch Events
+'onTouchCancel', 'onTouchCancelCapture', 'onTouchEnd', 'onTouchEndCapture', 'onTouchMove', 'onTouchMoveCapture', 'onTouchStart', 'onTouchStartCapture', // Pointer Events
+'onPointerDown', 'onPointerDownCapture', 'onPointerMove', 'onPointerMoveCapture', 'onPointerUp', 'onPointerUpCapture', 'onPointerCancel', 'onPointerCancelCapture', 'onPointerEnter', 'onPointerEnterCapture', 'onPointerLeave', 'onPointerLeaveCapture', 'onPointerOver', 'onPointerOverCapture', 'onPointerOut', 'onPointerOutCapture', 'onGotPointerCapture', 'onGotPointerCaptureCapture', 'onLostPointerCapture', 'onLostPointerCaptureCapture', // UI Events
+'onScroll', 'onScrollCapture', // Wheel Events
+'onWheel', 'onWheelCapture', // Animation Events
+'onAnimationStart', 'onAnimationStartCapture', 'onAnimationEnd', 'onAnimationEndCapture', 'onAnimationIteration', 'onAnimationIterationCapture', // Transition Events
+'onTransitionEnd', 'onTransitionEndCapture'];
+const validHTMLAttribute = /^(aria-|data-)/;
 
 const getHTMLProps = props => {
   // Gets all the React props
-  return Object.fromEntries(Object.entries(props).filter(([key]) => possibleStandardNames.includes(key)));
+  return Object.fromEntries(Object.entries(props).filter(([key]) => validHTMLAttribute.test(key) || reactSupportedHtmlAttr.includes(key)));
 };
 
 module.exports = getHTMLProps;

lib/ProgressBar.js

@@ -13,2 +13,4 @@ "use strict";
 
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged');
+
 const h = React.createElement;
@@ -20,7 +22,2 @@ /**
 class ProgressBar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.validProps = getHTMLProps(props);
-  }
-
   componentDidMount() {
@@ -34,2 +31,8 @@ this.installPlugin();
       this.installPlugin();
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props,
+        target: this.container
+      };
+      delete options.uppy;
+      this.plugin.setOptions(options);
     }
@@ -64,2 +67,4 @@ }
   render() {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props);
     return h('div', {
@@ -66,0 +71,0 @@ ref: container => {

lib/StatusBar.js

@@ -13,2 +13,4 @@ "use strict";
 
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged');
+
 const h = React.createElement;
@@ -21,7 +23,2 @@ /**
 class StatusBar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.validProps = getHTMLProps(props);
-  }
-
   componentDidMount() {
@@ -35,2 +32,8 @@ this.installPlugin();
       this.installPlugin();
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props,
+        target: this.container
+      };
+      delete options.uppy;
+      this.plugin.setOptions(options);
     }
@@ -65,2 +68,4 @@ }
   render() {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props);
     return h('div', {
@@ -67,0 +72,0 @@ ref: container => {

package.json

 {
   "name": "@uppy/react",
   "description": "React component wrappers around Uppy's official UI plugins.",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "license": "MIT",
@@ -25,8 +25,8 @@ "main": "index.js",
   "dependencies": {
-    "@uppy/dashboard": "^2.0.3",
-    "@uppy/drag-drop": "^2.0.2",
-    "@uppy/file-input": "^2.0.2",
-    "@uppy/progress-bar": "^2.0.2",
-    "@uppy/status-bar": "^2.0.2",
-    "@uppy/utils": "^4.0.1",
+    "@uppy/dashboard": "^2.1.0",
+    "@uppy/drag-drop": "^2.0.3",
+    "@uppy/file-input": "^2.0.3",
+    "@uppy/progress-bar": "^2.0.3",
+    "@uppy/status-bar": "^2.1.0",
+    "@uppy/utils": "^4.0.2",
     "prop-types": "^15.6.1"
@@ -45,3 +45,3 @@ },
   },
-  "gitHead": "b3b68c07773395d1521c38148cbf87ed88ff2364"
+  "gitHead": "1eb317ba3a3115596212ac50f1d81d3188dd0619"
 }

src/Dashboard.js

@@ -5,2 +5,3 @@ const React = require('react')
 const getHTMLProps = require('./getHTMLProps')
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged')
 
@@ -15,7 +16,2 @@ const h = React.createElement
 class Dashboard extends React.Component {
-  constructor (props) {
-    super(props)
-    this.validProps = getHTMLProps(props)
-  }
-
   componentDidMount () {
@@ -29,2 +25,6 @@ this.installPlugin()
       this.installPlugin()
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props, target: this.container }
+      delete options.uppy
+      this.plugin.setOptions(options)
     }
@@ -57,2 +57,4 @@ }
   render () {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props)
     return h('div', {
@@ -59,0 +61,0 @@ ref: (container) => {

src/Dashboard.test.js

@@ -35,2 +35,20 @@ const h = require('react').createElement
   })
+
+  it('react on HTMLDivElement props update', async () => {
+    const uppy = new Uppy()
+    const dash = mount((
+      <Dashboard
+        uppy={uppy}
+        hidden
+      />
+    ))
+
+    expect(dash.getDOMNode().hidden).toBeTruthy()
+
+    dash.setProps({ hidden: false })
+
+    expect(dash.getDOMNode().hidden).toBeFalsy()
+
+    dash.unmount()
+  })
 })

src/DashboardModal.js

@@ -6,2 +6,3 @@ const React = require('react')
 const getHTMLProps = require('./getHTMLProps')
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged')
 
@@ -16,7 +17,2 @@ const h = React.createElement
 class DashboardModal extends React.Component {
-  constructor (props) {
-    super(props)
-    this.validProps = getHTMLProps(props)
-  }
-
   componentDidMount () {
@@ -30,2 +26,6 @@ this.installPlugin()
       this.installPlugin()
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props, onRequestCloseModal: this.props.onRequestClose }
+      delete options.uppy
+      this.plugin.setOptions(options)
     }
@@ -71,2 +71,4 @@ if (prevProps.open && !this.props.open) {
   render () {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props)
     return h('div', {
@@ -73,0 +75,0 @@ ref: (container) => {

src/DashboardModal.test.js

@@ -81,2 +81,39 @@ const h = require('react').createElement
   })
+
+  it('react on HTMLDivElement props update', async () => {
+    const uppy = new Uppy()
+    const dash = mount((
+      <DashboardModal
+        uppy={uppy}
+        hidden
+      />
+    ))
+
+    expect(dash.getDOMNode().hidden).toBeTruthy()
+
+    dash.setProps({ hidden: false })
+
+    expect(dash.getDOMNode().hidden).toBeFalsy()
+
+    dash.unmount()
+  })
+
+  it('react on @uppy/dashboard props update', async () => {
+    const uppy = new Uppy()
+    const dash = mount((
+      <DashboardModal
+        uppy={uppy}
+        theme="dark"
+      />
+    ))
+
+    const { plugin } = dash.instance()
+
+    expect(plugin.opts.theme).toBe('dark')
+
+    dash.setProps({ theme: 'light' })
+    expect(plugin.opts.theme).toBe('light')
+
+    dash.unmount()
+  })
 })

src/DragDrop.js

@@ -5,2 +5,3 @@ const React = require('react')
 const getHTMLProps = require('./getHTMLProps')
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged')
 
@@ -15,7 +16,2 @@ const h = React.createElement
 class DragDrop extends React.Component {
-  constructor (props) {
-    super(props)
-    this.validProps = getHTMLProps(props)
-  }
-
   componentDidMount () {
@@ -29,2 +25,6 @@ this.installPlugin()
       this.installPlugin()
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props, target: this.container }
+      delete options.uppy
+      this.plugin.setOptions(options)
     }
@@ -58,2 +58,4 @@ }
   render () {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props)
     return h('div', {
@@ -60,0 +62,0 @@ ref: (container) => {

src/DragDrop.test.js

@@ -35,2 +35,20 @@ const h = require('react').createElement
   })
+
+  it('react on HTMLDivElement props update', async () => {
+    const uppy = new Uppy()
+    const dash = mount((
+      <DragDrop
+        uppy={uppy}
+        hidden
+      />
+    ))
+
+    expect(dash.getDOMNode().hidden).toBeTruthy()
+
+    dash.setProps({ hidden: false })
+
+    expect(dash.getDOMNode().hidden).toBeFalsy()
+
+    dash.unmount()
+  })
 })

src/getHTMLProps.js

@@ -1,157 +0,264 @@
-// Attributes in the format of htmlAtrribute: reactAttribute
-const possibleStandardNames = [
-  'accept',
-  'acceptCharset',
-  'acceptCharset',
+// List taken from React.HTMLAttributes supported properties:
+// https://unpkg.com/@types/react@17.0.22/index.d.ts:1821
+const reactSupportedHtmlAttr = [
+  // React-specific Attributes
+  'defaultChecked',
+  'defaultValue',
+  'suppressContentEditableWarning',
+  'suppressHydrationWarning',
+  'dangerouslySetInnerHTML',
+
+  // Standard HTML Attributes
   'accessKey',
-  'action',
-  'allowFullScreen',
-  'alt',
-  'as',
-  'async',
-  'autoCapitalize',
-  'autoComplete',
-  'autoCorrect',
-  'autoFocus',
-  'autoPlay',
-  'autoSave',
-  'capture',
-  'cellPadding',
-  'cellSpacing',
-  'challenge',
-  'charSet',
-  'checked',
-  'children',
-  'cite',
   'className',
-  'classID',
-  'className',
-  'cols',
-  'colSpan',
-  'content',
   'contentEditable',
   'contextMenu',
-  'controls',
-  'controlsList',
-  'coords',
-  'crossOrigin',
-  'dangerouslySetInnerHTML',
-  'data',
-  'dateTime',
-  'default',
-  'defaultChecked',
-  'defaultValue',
-  'defer',
   'dir',
-  'disabled',
-  'disablePictureInPicture',
-  'disableRemotePlayback',
-  'download',
   'draggable',
-  'encType',
-  'enterKeyHint',
-  'htmlFor',
-  'form',
-  'formMethod',
-  'formAction',
-  'formEncType',
-  'formNoValidate',
-  'formTarget',
-  'frameBorder',
-  'headers',
-  // 'height',
   'hidden',
-  'high',
-  'href',
-  'hrefLang',
-  'htmlFor',
-  'httpEquiv',
-  'httpEquiv',
-  'icon',
   'id',
-  'innerHTML',
-  'inputMode',
-  'integrity',
-  'is',
-  'itemID',
-  'itemProp',
-  'itemRef',
-  'itemScope',
-  'itemType',
-  'keyParams',
-  'keyType',
-  'kind',
-  'label',
   'lang',
-  'list',
-  'loop',
-  'low',
-  'manifest',
-  'marginWidth',
-  'marginHeight',
-  'max',
-  'maxLength',
-  'media',
-  'mediaGroup',
-  'method',
-  'min',
-  'minLength',
-  'multiple',
-  'muted',
-  'name',
-  'noModule',
-  'nonce',
-  'noValidate',
-  'open',
-  'optimum',
-  'pattern',
   'placeholder',
-  'playsInline',
-  'poster',
-  'preload',
-  'profile',
-  'radioGroup',
-  'readOnly',
-  'referrerPolicy',
-  'rel',
-  'required',
-  'reversed',
-  'role',
-  'rows',
-  'rowSpan',
-  'sandbox',
-  'scope',
-  'scoped',
-  'scrolling',
-  'seamless',
-  'selected',
-  'shape',
-  'size',
-  'sizes',
-  'span',
+  'slot',
   'spellCheck',
-  'src',
-  'srcDoc',
-  'srcLang',
-  'srcSet',
-  'start',
-  'step',
   'style',
-  'summary',
   'tabIndex',
-  // 'target',
   'title',
-  'type',
-  'useMap',
-  'value',
-  // 'width',
-  'wmode',
-  'wrap',
+  'translate',
+
+  // Unknown
+  'radioGroup',
+
+  // WAI-ARIA
+  'role',
+
+  // RDFa Attributes
+  'about',
+  'datatype',
+  'inlist',
+  'prefix',
+  'property',
+  'resource',
+  'typeof',
+  'vocab',
+
+  // Non-standard Attributes
+  'autoCapitalize',
+  'autoCorrect',
+  'autoSave',
+  'color',
+  'itemProp',
+  'itemScope',
+  'itemType',
+  'itemID',
+  'itemRef',
+  'results',
+  'security',
+  'unselectable',
+
+  // Living Standard
+  'inputMode',
+  'is',
+
+  // Clipboard Events
+  'onCopy',
+  'onCopyCapture',
+  'onCut',
+  'onCutCapture',
+  'onPaste',
+  'onPasteCapture',
+
+  // Composition Events
+  'onCompositionEnd',
+  'onCompositionEndCapture',
+  'onCompositionStart',
+  'onCompositionStartCapture',
+  'onCompositionUpdate',
+  'onCompositionUpdateCapture',
+
+  // Focus Events
+  'onFocus',
+  'onFocusCapture',
+  'onBlur',
+  'onBlurCapture',
+
+  // Form Events
+  'onChange',
+  'onChangeCapture',
+  'onBeforeInput',
+  'onBeforeInputCapture',
+  'onInput',
+  'onInputCapture',
+  'onReset',
+  'onResetCapture',
+  'onSubmit',
+  'onSubmitCapture',
+  'onInvalid',
+  'onInvalidCapture',
+
+  // Image Events
+  'onLoad',
+  'onLoadCapture',
+  'onError', // also a Media Event
+  'onErrorCapture', // also a Media Event
+
+  // Keyboard Events
+  'onKeyDown',
+  'onKeyDownCapture',
+  'onKeyPress',
+  'onKeyPressCapture',
+  'onKeyUp',
+  'onKeyUpCapture',
+
+  // Media Events
+  'onAbort',
+  'onAbortCapture',
+  'onCanPlay',
+  'onCanPlayCapture',
+  'onCanPlayThrough',
+  'onCanPlayThroughCapture',
+  'onDurationChange',
+  'onDurationChangeCapture',
+  'onEmptied',
+  'onEmptiedCapture',
+  'onEncrypted',
+  'onEncryptedCapture',
+  'onEnded',
+  'onEndedCapture',
+  'onLoadedData',
+  'onLoadedDataCapture',
+  'onLoadedMetadata',
+  'onLoadedMetadataCapture',
+  'onLoadStart',
+  'onLoadStartCapture',
+  'onPause',
+  'onPauseCapture',
+  'onPlay',
+  'onPlayCapture',
+  'onPlaying',
+  'onPlayingCapture',
+  'onProgress',
+  'onProgressCapture',
+  'onRateChange',
+  'onRateChangeCapture',
+  'onSeeked',
+  'onSeekedCapture',
+  'onSeeking',
+  'onSeekingCapture',
+  'onStalled',
+  'onStalledCapture',
+  'onSuspend',
+  'onSuspendCapture',
+  'onTimeUpdate',
+  'onTimeUpdateCapture',
+  'onVolumeChange',
+  'onVolumeChangeCapture',
+  'onWaiting',
+  'onWaitingCapture',
+
+  // MouseEvents
+  'onAuxClick',
+  'onAuxClickCapture',
+  'onClick',
+  'onClickCapture',
+  'onContextMenu',
+  'onContextMenuCapture',
+  'onDoubleClick',
+  'onDoubleClickCapture',
+  'onDrag',
+  'onDragCapture',
+  'onDragEnd',
+  'onDragEndCapture',
+  'onDragEnter',
+  'onDragEnterCapture',
+  'onDragExit',
+  'onDragExitCapture',
+  'onDragLeave',
+  'onDragLeaveCapture',
+  'onDragOver',
+  'onDragOverCapture',
+  'onDragStart',
+  'onDragStartCapture',
+  'onDrop',
+  'onDropCapture',
+  'onMouseDown',
+  'onMouseDownCapture',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseMoveCapture',
+  'onMouseOut',
+  'onMouseOutCapture',
+  'onMouseOver',
+  'onMouseOverCapture',
+  'onMouseUp',
+  'onMouseUpCapture',
+
+  // Selection Events
+  'onSelect',
+  'onSelectCapture',
+
+  // Touch Events
+  'onTouchCancel',
+  'onTouchCancelCapture',
+  'onTouchEnd',
+  'onTouchEndCapture',
+  'onTouchMove',
+  'onTouchMoveCapture',
+  'onTouchStart',
+  'onTouchStartCapture',
+
+  // Pointer Events
+  'onPointerDown',
+  'onPointerDownCapture',
+  'onPointerMove',
+  'onPointerMoveCapture',
+  'onPointerUp',
+  'onPointerUpCapture',
+  'onPointerCancel',
+  'onPointerCancelCapture',
+  'onPointerEnter',
+  'onPointerEnterCapture',
+  'onPointerLeave',
+  'onPointerLeaveCapture',
+  'onPointerOver',
+  'onPointerOverCapture',
+  'onPointerOut',
+  'onPointerOutCapture',
+  'onGotPointerCapture',
+  'onGotPointerCaptureCapture',
+  'onLostPointerCapture',
+  'onLostPointerCaptureCapture',
+
+  // UI Events
+  'onScroll',
+  'onScrollCapture',
+
+  // Wheel Events
+  'onWheel',
+  'onWheelCapture',
+
+  // Animation Events
+  'onAnimationStart',
+  'onAnimationStartCapture',
+  'onAnimationEnd',
+  'onAnimationEndCapture',
+  'onAnimationIteration',
+  'onAnimationIterationCapture',
+
+  // Transition Events
+  'onTransitionEnd',
+  'onTransitionEndCapture',
 ]
 
+const validHTMLAttribute = /^(aria-|data-)/
+
 const getHTMLProps = (props) => {
   // Gets all the React props
-  return Object.fromEntries(Object.entries(props).filter(([key]) => possibleStandardNames.includes(key)))
+  return Object.fromEntries(
+    Object.entries(props)
+      .filter(([key]) => validHTMLAttribute.test(key) || reactSupportedHtmlAttr.includes(key))
+  )
 }
 
 module.exports = getHTMLProps

src/ProgressBar.js

@@ -6,2 +6,3 @@ const React = require('react')
 const getHTMLProps = require('./getHTMLProps')
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged')
 
@@ -15,7 +16,2 @@ const h = React.createElement
 class ProgressBar extends React.Component {
-  constructor (props) {
-    super(props)
-    this.validProps = getHTMLProps(props)
-  }
-
   componentDidMount () {
@@ -29,2 +25,6 @@ this.installPlugin()
       this.installPlugin()
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props, target: this.container }
+      delete options.uppy
+      this.plugin.setOptions(options)
     }
@@ -58,2 +58,4 @@ }
   render () {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props)
     return h('div', {
@@ -60,0 +62,0 @@ ref: (container) => {

src/ProgressBar.test.js

@@ -35,2 +35,22 @@ const h = require('react').createElement
   })
+
+  it('react on HTMLDivElement props update', async () => {
+    const uppy = new Uppy()
+    const dash = mount((
+      <ProgressBar
+        uppy={uppy}
+        onInstall={Function.prototype}
+        onUninstall={Function.prototype}
+        hidden
+      />
+    ))
+
+    expect(dash.getDOMNode().hidden).toBeTruthy()
+
+    dash.setProps({ hidden: false })
+
+    expect(dash.getDOMNode().hidden).toBeFalsy()
+
+    dash.unmount()
+  })
 })

src/StatusBar.js

@@ -6,2 +6,3 @@ const React = require('react')
 const getHTMLProps = require('./getHTMLProps')
+const nonHtmlPropsHaveChanged = require('./nonHtmlPropsHaveChanged')
 
@@ -16,7 +17,2 @@ const h = React.createElement
 class StatusBar extends React.Component {
-  constructor (props) {
-    super(props)
-    this.validProps = getHTMLProps(props)
-  }
-
   componentDidMount () {
@@ -30,2 +26,6 @@ this.installPlugin()
       this.installPlugin()
+    } else if (nonHtmlPropsHaveChanged(this, prevProps)) {
+      const options = { ...this.props, target: this.container }
+      delete options.uppy
+      this.plugin.setOptions(options)
     }
@@ -59,2 +59,4 @@ }
   render () {
+    // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps`
+    this.validProps = getHTMLProps(this.props)
     return h('div', {
@@ -61,0 +63,0 @@ ref: (container) => {

src/StatusBar.test.js

@@ -35,2 +35,22 @@ const h = require('react').createElement
   })
+
+  it('react on HTMLDivElement props update', async () => {
+    const uppy = new Uppy()
+    const dash = mount((
+      <StatusBar
+        uppy={uppy}
+        onInstall={Function.prototype}
+        onUninstall={Function.prototype}
+        hidden
+      />
+    ))
+
+    expect(dash.getDOMNode().hidden).toBeTruthy()
+
+    dash.setProps({ hidden: false })
+
+    expect(dash.getDOMNode().hidden).toBeFalsy()
+
+    dash.unmount()
+  })
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

104160

increased by22.41%

Number of package files

60

increased by5.26%

Lines of code

1854

increased by15.16%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@uppy/dashboard@^2.1.0

• Updated@uppy/drag-drop@^2.0.3

• Updated@uppy/file-input@^2.0.3

• Updated@uppy/progress-bar@^2.0.3

• Updated@uppy/status-bar@^2.1.0

• Updated@uppy/utils@^4.0.2