diff --git a/src/elements/wrappers/ContentExplorer.js b/src/elements/wrappers/ContentExplorer.js
index 03a082f6c6..0a38301cd9 100644
--- a/src/elements/wrappers/ContentExplorer.js
+++ b/src/elements/wrappers/ContentExplorer.js
@@ -5,9 +5,7 @@
*/
import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import ES6Wrapper from './ES6Wrapper';
// $FlowFixMe
import ContentExplorerReactComponent from '../content-explorer';
@@ -103,7 +101,10 @@ class ContentExplorer extends ES6Wrapper {
/** @inheritdoc */
render() {
- render(
+ if (!this.root) {
+ this.root = createRoot(this.container);
+ }
+ this.root.render(
,
- this.container,
);
}
}
diff --git a/src/elements/wrappers/ContentOpenWith.js b/src/elements/wrappers/ContentOpenWith.js
index 8bd45a6c13..49598e7bfa 100644
--- a/src/elements/wrappers/ContentOpenWith.js
+++ b/src/elements/wrappers/ContentOpenWith.js
@@ -6,9 +6,7 @@
import 'regenerator-runtime/runtime';
import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import ES6Wrapper from './ES6Wrapper';
import ContentOpenWithReactComponent from '../content-open-with';
@@ -33,7 +31,10 @@ class ContentOpenWith extends ES6Wrapper {
/** @inheritdoc */
render() {
- render(
+ if (!this.root) {
+ this.root = createRoot(this.container);
+ }
+ this.root.render(
,
- this.container,
);
}
}
diff --git a/src/elements/wrappers/ContentPicker.js b/src/elements/wrappers/ContentPicker.js
index 37d62e2be5..91c103b3e1 100644
--- a/src/elements/wrappers/ContentPicker.js
+++ b/src/elements/wrappers/ContentPicker.js
@@ -5,9 +5,7 @@
*/
import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import ES6Wrapper from './ES6Wrapper';
import ContentPickerPopup from '../content-picker/ContentPickerPopup';
import ContentPickerReactComponent from '../content-picker/ContentPicker';
@@ -58,7 +56,10 @@ class ContentPicker extends ES6Wrapper {
render() {
const { modal, ...rest }: { modal?: ModalOptions } = this.options;
const PickerComponent = modal ? ContentPickerPopup : ContentPickerReactComponent;
- render(
+ if (!this.root) {
+ this.root = createRoot(this.container);
+ }
+ this.root.render(
,
- this.container,
);
}
}
diff --git a/src/elements/wrappers/ContentPreview.js b/src/elements/wrappers/ContentPreview.js
index 16eed49e9c..2062b014dc 100644
--- a/src/elements/wrappers/ContentPreview.js
+++ b/src/elements/wrappers/ContentPreview.js
@@ -5,9 +5,7 @@
*/
import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import ES6Wrapper from './ES6Wrapper';
import ContentPreviewResponsive from '../content-preview';
@@ -22,7 +20,10 @@ class ContentPreview extends ES6Wrapper {
/** @inheritdoc */
render() {
- render(
+ if (!this.root) {
+ this.root = createRoot(this.container);
+ }
+ this.root.render(
,
- this.container,
);
}
}
diff --git a/src/elements/wrappers/ContentSharing.js b/src/elements/wrappers/ContentSharing.js
index 59b024ca90..ef1e81cfc6 100644
--- a/src/elements/wrappers/ContentSharing.js
+++ b/src/elements/wrappers/ContentSharing.js
@@ -6,9 +6,7 @@
import * as React from 'react';
import uniqueId from 'lodash/uniqueId';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import ES6Wrapper from './ES6Wrapper';
import ContentSharingReactComponent from '../content-sharing';
import { ITEM_TYPE_FILE } from '../../common/constants';
@@ -19,7 +17,10 @@ class ContentSharing extends ES6Wrapper {
render() {
const { itemType }: { itemType?: ItemType } = this.options;
- render(
+ if (!this.root) {
+ this.root = createRoot(this.container);
+ }
+ this.root.render(
,
- this.container,
);
}
}
diff --git a/src/elements/wrappers/ContentSidebar.js b/src/elements/wrappers/ContentSidebar.js
index ea35a135b2..fbd1e190e6 100644
--- a/src/elements/wrappers/ContentSidebar.js
+++ b/src/elements/wrappers/ContentSidebar.js
@@ -5,9 +5,7 @@
*/
import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import ES6Wrapper from './ES6Wrapper';
import ContentSidebarComponent from '../content-sidebar';
@@ -22,7 +20,10 @@ class ContentSidebar extends ES6Wrapper {
/** @inheritdoc */
render() {
- render(
+ if (!this.root) {
+ this.root = createRoot(this.container);
+ }
+ this.root.render(
,
- this.container,
);
}
}
diff --git a/src/elements/wrappers/ContentUploader.js b/src/elements/wrappers/ContentUploader.js
index c0551c7c1e..6dcff9702a 100644
--- a/src/elements/wrappers/ContentUploader.js
+++ b/src/elements/wrappers/ContentUploader.js
@@ -5,9 +5,7 @@
*/
import * as React from 'react';
-// TODO switch to createRoot when upgrading to React 18
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import ES6Wrapper from './ES6Wrapper';
// $FlowFixMe
import ContentUploaderPopup from '../content-uploader/ContentUploaderPopup';
@@ -72,7 +70,10 @@ class ContentUploader extends ES6Wrapper {
const { modal, ...rest }: { modal?: ModalOptions } = this.options;
const UploaderComponent = modal ? ContentUploaderPopup : WrappedContentUploaderComponent;
- render(
+ if (!this.root) {
+ this.root = createRoot(this.container);
+ }
+ this.root.render(
,
- this.container,
);
}
}
diff --git a/src/elements/wrappers/ES6Wrapper.js b/src/elements/wrappers/ES6Wrapper.js
index 1e35a1310a..f6c9804ab8 100644
--- a/src/elements/wrappers/ES6Wrapper.js
+++ b/src/elements/wrappers/ES6Wrapper.js
@@ -5,7 +5,7 @@
*/
import EventEmitter from 'events';
-import ReactDOM from 'react-dom';
+import type { Root } from 'react-dom/client';
import i18n from '../common/i18n';
import { DEFAULT_CONTAINER } from '../../constants';
import type { Token, StringMap } from '../../common/types/core';
@@ -51,6 +51,11 @@ class ES6Wrapper extends EventEmitter {
*/
component: any;
+ /**
+ * @property {Root}
+ */
+ root: Root;
+
/**
* Shows the content picker.
*
@@ -81,8 +86,10 @@ class ES6Wrapper extends EventEmitter {
*/
hide(): void {
this.removeAllListeners();
- // eslint-disable-next-line react/no-deprecated
- ReactDOM.unmountComponentAtNode(this.container);
+ if (this.root) {
+ this.root.unmount();
+ this.root = null;
+ }
if (this.container) {
this.container.innerHTML = '';
}
diff --git a/src/features/collapsible-sidebar/CollapsibleSidebar.scss b/src/features/collapsible-sidebar/CollapsibleSidebar.scss
index 960c86b30d..3065c9968e 100644
--- a/src/features/collapsible-sidebar/CollapsibleSidebar.scss
+++ b/src/features/collapsible-sidebar/CollapsibleSidebar.scss
@@ -113,6 +113,10 @@ $left-sidebar-z-index: 40 !default;
}
}
+.bdl-Tooltip-target.bdl-CollapsibleSidebar-menuItemTooltipTarget {
+ display: block;
+}
+
@include breakpoint($xlarge-screen) {
.bdl-CollapsibleSidebar-logo {
margin-left: $collapsible-side-bar-h-padding - 1px;
diff --git a/src/features/collapsible-sidebar/CollapsibleSidebarMenuItem.js b/src/features/collapsible-sidebar/CollapsibleSidebarMenuItem.js
index 4218671344..27e1a8a197 100644
--- a/src/features/collapsible-sidebar/CollapsibleSidebarMenuItem.js
+++ b/src/features/collapsible-sidebar/CollapsibleSidebarMenuItem.js
@@ -196,7 +196,8 @@ function CollapsibleSidebarMenuItem(props: Props) {
return (
{
diff --git a/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebarMenuItem.test.js.snap b/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebarMenuItem.test.js.snap
index a26b00c1d6..6453dfc565 100644
--- a/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebarMenuItem.test.js.snap
+++ b/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebarMenuItem.test.js.snap
@@ -7,12 +7,13 @@ exports[`components/core/collapsible-sidebar/__tests__/CollapsibleSidebarMenuIte
text="bar"
>
diff --git a/src/features/left-sidebar/LeftSidebarLinkCallout.js b/src/features/left-sidebar/LeftSidebarLinkCallout.js
index 4fe3defcb6..bb22262778 100644
--- a/src/features/left-sidebar/LeftSidebarLinkCallout.js
+++ b/src/features/left-sidebar/LeftSidebarLinkCallout.js
@@ -70,17 +70,22 @@ class LeftSidebarLinkCallout extends React.Component {
classPrefix="nav-link-callout"
enabled={showTooltip}
targetAttachment={targetAttachmentPosition}
- >
- {React.Children.only(children)}
- {showTooltip && (
-
-
-
-
- {content}
+ renderTarget={ref => (
+
+ {React.Children.only(children)}
)}
-
+ renderElement={ref => {
+ return showTooltip ? (
+
+ ) : null;
+ }}
+ />
);
}
}
diff --git a/src/features/left-sidebar/__tests__/LeftSidebarLinkCallout.test.js b/src/features/left-sidebar/__tests__/LeftSidebarLinkCallout.test.js
index 3a08f5ec22..5aeadba372 100644
--- a/src/features/left-sidebar/__tests__/LeftSidebarLinkCallout.test.js
+++ b/src/features/left-sidebar/__tests__/LeftSidebarLinkCallout.test.js
@@ -1,4 +1,6 @@
import * as React from 'react';
+import { mount, shallow } from 'enzyme';
+import TetherComponent from 'react-tether';
import sinon from 'sinon';
import LeftSidebarLinkCallout from '../LeftSidebarLinkCallout';
@@ -40,8 +42,13 @@ describe('components/tooltip/LeftSidebarLinkCallout', () => {
content:
Hi
,
onClose: sandbox.mock(),
};
- const wrapper = getWrapper({ callout });
- const btn = wrapper.find('.nav-link-callout-close-button');
+ const wrapper = mount(
+
+ Test Child
+ ,
+ );
+ const tetherComponent = wrapper.find(TetherComponent);
+ const btn = tetherComponent.find('.nav-link-callout-close-button').first();
btn.simulate('click');
});
@@ -54,8 +61,21 @@ describe('components/tooltip/LeftSidebarLinkCallout', () => {
});
test('should add class provided to nav-link-callout component', () => {
- const wrapper = getWrapper({ isShown: true, navLinkClassName: 'testClass' });
- const callout = wrapper.find('.nav-link-callout');
+ const wrapper = mount(
+
Hi