diff --git a/packages/@uppy/react/src/getHTMLProps.js b/packages/@uppy/react/src/getHTMLProps.js index e152b4ac95..2436aa3baf 100644 --- a/packages/@uppy/react/src/getHTMLProps.js +++ b/packages/@uppy/react/src/getHTMLProps.js @@ -1,157 +1,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