diff --git a/packages/@uppy/core/src/UIPlugin.js b/packages/@uppy/core/src/UIPlugin.js index aabdb5663d..6a984320b9 100644 --- a/packages/@uppy/core/src/UIPlugin.js +++ b/packages/@uppy/core/src/UIPlugin.js @@ -1,5 +1,6 @@ const { render } = require('preact') const findDOMElement = require('@uppy/utils/lib/findDOMElement') +const getTextDirection = require('@uppy/utils/lib/getTextDirection') const BasePlugin = require('./BasePlugin') @@ -52,7 +53,8 @@ class UIPlugin extends BasePlugin { // When target is with a single
element, // Preact thinks it’s the Uppy root element in there when doing a diff, // and destroys it. So we are creating a fragment (could be empty div) - const uppyRootElement = document.createDocumentFragment() + const uppyRootElement = document.createElement('div') + uppyRootElement.classList.add('uppy-Root') // API for plugins that require a synchronous rerender. this.#updateUI = debounce((state) => { @@ -74,9 +76,12 @@ class UIPlugin extends BasePlugin { } render(this.render(this.uppy.getState()), uppyRootElement) - this.el = uppyRootElement.firstElementChild + this.el = uppyRootElement targetElement.appendChild(uppyRootElement) + // Set the text direction if the page has not defined one. + uppyRootElement.dir = this.opts.direction || getTextDirection(uppyRootElement) || 'ltr' + this.onMount() return this.el diff --git a/packages/@uppy/dashboard/src/components/Dashboard.js b/packages/@uppy/dashboard/src/components/Dashboard.js index 68684ded70..243bd0f241 100644 --- a/packages/@uppy/dashboard/src/components/Dashboard.js +++ b/packages/@uppy/dashboard/src/components/Dashboard.js @@ -22,10 +22,6 @@ module.exports = function Dashboard (props) { const noFiles = props.totalFileCount === 0 const isSizeMD = props.containerWidth > WIDTH_MD - const wrapperClassName = classNames({ - 'uppy-Root': props.isTargetDOMEl, - }) - const dashboardClassName = classNames({ 'uppy-Dashboard': true, 'uppy-Dashboard--isDisabled': props.disabled, @@ -169,10 +165,5 @@ module.exports = function Dashboard (props) {
) - return ( - // Wrap it for RTL language support -
- {dashboard} -
- ) + return dashboard } diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index f775f13d03..8ef780a078 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/packages/@uppy/dashboard/src/index.js @@ -6,7 +6,6 @@ const ThumbnailGenerator = require('@uppy/thumbnail-generator') const findAllDOMElements = require('@uppy/utils/lib/findAllDOMElements') const toArray = require('@uppy/utils/lib/toArray') const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles') -const getTextDirection = require('@uppy/utils/lib/getTextDirection') const { nanoid } = require('nanoid/non-secure') const trapFocus = require('./utils/trapFocus') const createSuperFocus = require('./utils/createSuperFocus') @@ -984,15 +983,6 @@ module.exports = class Dashboard extends UIPlugin { }) } - onMount () { - // Set the text direction if the page has not defined one. - const element = this.el - const direction = getTextDirection(element) - if (!direction) { - element.dir = 'ltr' - } - } - install = () => { // Set default state for Dashboard this.setPluginState({ diff --git a/packages/@uppy/drag-drop/src/DragDrop.jsx b/packages/@uppy/drag-drop/src/DragDrop.jsx index 490ea64369..c26d885b13 100644 --- a/packages/@uppy/drag-drop/src/DragDrop.jsx +++ b/packages/@uppy/drag-drop/src/DragDrop.jsx @@ -191,8 +191,7 @@ export default class DragDrop extends UIPlugin { } render () { - const dragDropClass = `uppy-Root - uppy-u-reset + const dragDropClass = `uppy-u-reset uppy-DragDrop-container ${this.isDragDropSupported ? 'uppy-DragDrop--isDragDropSupported' : ''} ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''} diff --git a/packages/@uppy/file-input/src/FileInput.jsx b/packages/@uppy/file-input/src/FileInput.jsx index 21c5c3c319..03b5a21580 100644 --- a/packages/@uppy/file-input/src/FileInput.jsx +++ b/packages/@uppy/file-input/src/FileInput.jsx @@ -81,7 +81,7 @@ export default class FileInput extends UIPlugin { const accept = restrictions.allowedFileTypes ? restrictions.allowedFileTypes.join(',') : null return ( -
+
{ this.container = container }, diff --git a/packages/@uppy/react/src/DashboardModal.js b/packages/@uppy/react/src/DashboardModal.js index b845fe853d..20befea51d 100644 --- a/packages/@uppy/react/src/DashboardModal.js +++ b/packages/@uppy/react/src/DashboardModal.js @@ -68,6 +68,7 @@ class DashboardModal extends React.Component { // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps` this.validProps = getHTMLProps(this.props) return h('div', { + className: 'uppy-Container', ref: (container) => { this.container = container }, diff --git a/packages/@uppy/react/src/DragDrop.js b/packages/@uppy/react/src/DragDrop.js index a9300cac4c..fcb9de6b8a 100644 --- a/packages/@uppy/react/src/DragDrop.js +++ b/packages/@uppy/react/src/DragDrop.js @@ -55,6 +55,7 @@ class DragDrop extends React.Component { // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps` this.validProps = getHTMLProps(this.props) return h('div', { + className: 'uppy-Container', ref: (container) => { this.container = container }, diff --git a/packages/@uppy/react/src/FileInput.js b/packages/@uppy/react/src/FileInput.js index e05617c348..c1a04de138 100644 --- a/packages/@uppy/react/src/FileInput.js +++ b/packages/@uppy/react/src/FileInput.js @@ -48,6 +48,7 @@ class FileInput extends React.Component { render () { return h('div', { + className: 'uppy-Container', ref: (container) => { this.container = container }, diff --git a/packages/@uppy/react/src/ProgressBar.js b/packages/@uppy/react/src/ProgressBar.js index 8b171c2b3b..d1cdeb5f2e 100644 --- a/packages/@uppy/react/src/ProgressBar.js +++ b/packages/@uppy/react/src/ProgressBar.js @@ -55,6 +55,7 @@ class ProgressBar extends React.Component { // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps` this.validProps = getHTMLProps(this.props) return h('div', { + className: 'uppy-Container', ref: (container) => { this.container = container }, diff --git a/packages/@uppy/react/src/StatusBar.js b/packages/@uppy/react/src/StatusBar.js index 94134cf2b6..e777b9e5e8 100644 --- a/packages/@uppy/react/src/StatusBar.js +++ b/packages/@uppy/react/src/StatusBar.js @@ -56,6 +56,7 @@ class StatusBar extends React.Component { // TODO: stop exposing `validProps` as a public property and rename it to `htmlProps` this.validProps = getHTMLProps(this.props) return h('div', { + className: 'uppy-Container', ref: (container) => { this.container = container }, diff --git a/packages/@uppy/react/src/Wrapper.js b/packages/@uppy/react/src/Wrapper.js index 0cf578e66c..f3f75e6318 100644 --- a/packages/@uppy/react/src/Wrapper.js +++ b/packages/@uppy/react/src/Wrapper.js @@ -45,7 +45,7 @@ class UppyWrapper extends React.Component { } render () { - return h('div', { ref: this.refContainer }) + return h('div', { className: 'uppy-Container', ref: this.refContainer }) } } diff --git a/packages/@uppy/status-bar/src/StatusBar.jsx b/packages/@uppy/status-bar/src/StatusBar.jsx index 8fd4dc4fbc..e34f4ae223 100644 --- a/packages/@uppy/status-bar/src/StatusBar.jsx +++ b/packages/@uppy/status-bar/src/StatusBar.jsx @@ -45,7 +45,6 @@ export default function StatusBar (props) { supportsUploadProgress, hideAfterFinish, isSomeGhost, - isTargetDOMEl, doneButtonHandler, isUploadStarted, i18n, @@ -148,7 +147,6 @@ export default function StatusBar (props) { }) const statusBarClassNames = classNames( - { 'uppy-Root': isTargetDOMEl }, 'uppy-StatusBar', `is-${uploadState}`, { 'has-ghosts': isSomeGhost }, diff --git a/packages/@uppy/svelte/src/components/Dashboard.svelte b/packages/@uppy/svelte/src/components/Dashboard.svelte index 867883eefb..a986e6cd95 100644 --- a/packages/@uppy/svelte/src/components/Dashboard.svelte +++ b/packages/@uppy/svelte/src/components/Dashboard.svelte @@ -40,4 +40,4 @@ uppy.setOptions(options) } -
\ No newline at end of file +
\ No newline at end of file diff --git a/packages/@uppy/svelte/src/components/DashboardModal.svelte b/packages/@uppy/svelte/src/components/DashboardModal.svelte index 164359ae10..63182254e1 100644 --- a/packages/@uppy/svelte/src/components/DashboardModal.svelte +++ b/packages/@uppy/svelte/src/components/DashboardModal.svelte @@ -51,4 +51,4 @@ lastOpen = open; } -
\ No newline at end of file +
\ No newline at end of file diff --git a/packages/@uppy/svelte/src/components/DragDrop.svelte b/packages/@uppy/svelte/src/components/DragDrop.svelte index d8735bba68..d63600460f 100644 --- a/packages/@uppy/svelte/src/components/DragDrop.svelte +++ b/packages/@uppy/svelte/src/components/DragDrop.svelte @@ -36,4 +36,4 @@ uppy.setOptions(options) } -
+
diff --git a/packages/@uppy/svelte/src/components/ProgressBar.svelte b/packages/@uppy/svelte/src/components/ProgressBar.svelte index 925a4d221a..316fc0c782 100644 --- a/packages/@uppy/svelte/src/components/ProgressBar.svelte +++ b/packages/@uppy/svelte/src/components/ProgressBar.svelte @@ -36,4 +36,4 @@ uppy.setOptions(options) } -
\ No newline at end of file +
\ No newline at end of file diff --git a/packages/@uppy/svelte/src/components/StatusBar.svelte b/packages/@uppy/svelte/src/components/StatusBar.svelte index a65ebcee2a..04c506926c 100644 --- a/packages/@uppy/svelte/src/components/StatusBar.svelte +++ b/packages/@uppy/svelte/src/components/StatusBar.svelte @@ -36,4 +36,4 @@ uppy.setOptions(options) } -
\ No newline at end of file +
\ No newline at end of file