update react-router-dom,react-tooltip& react-transition-group

6 files changed, 67 insertions, 35 deletions

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index fac424477..2b1e87023 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { inject, observer } from 'mobx-react';
 import {
@@ -123,10 +123,6 @@ class Sidebar extends Component<IProps, IState> {
     };
   }
 
-  componentDidUpdate() {
-    ReactTooltip.rebuild();
-  }
-
   enableToolTip() {
     this.setState({ tooltipEnabled: true });
   }
@@ -232,7 +228,8 @@ class Sidebar extends Component<IProps, IState> {
               type="button"
               onClick={() => openSettings({ path: 'recipes' })}
               className="sidebar__button sidebar__button--new-service"
-              data-tip={`${intl.formatMessage(
+              data-tooltip-id="tooltip-sidebar-button"
+              data-tooltip-content={`${intl.formatMessage(
                 messages.addNewService,
               )} (${addNewServiceShortcutKey(false)})`}
             >
@@ -251,7 +248,8 @@ class Sidebar extends Component<IProps, IState> {
                 });
               }}
               className="sidebar__button sidebar__button--split-mode-toggle"
-              data-tip={`${intl.formatMessage(
+              data-tooltip-id="tooltip-sidebar-button"
+              data-tooltip-content={`${intl.formatMessage(
                 messages.splitModeToggle,
               )} (${splitModeToggleShortcutKey(false)})`}
             >
@@ -268,7 +266,8 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--workspaces ${
                 isWorkspaceDrawerOpen ? 'is-active' : ''
               }`}
-              data-tip={`${intl.formatMessage(
+              data-tooltip-id="tooltip-sidebar-button"
+              data-tooltip-content={`${intl.formatMessage(
                 workspaceToggleMessage,
               )} (${workspaceToggleShortcutKey(false)})`}
             >
@@ -285,7 +284,8 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--audio ${
                 isAppMuted ? 'is-muted' : ''
               }`}
-              data-tip={`${intl.formatMessage(
+              data-tooltip-id="tooltip-sidebar-button"
+              data-tooltip-content={`${intl.formatMessage(
                 isAppMuted ? messages.unmute : messages.mute,
               )} (${muteFerdiumShortcutKey(false)})`}
             >
@@ -303,7 +303,8 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--todos ${
                 todosStore.isTodosPanelVisible ? 'is-active' : ''
               }`}
-              data-tip={`${intl.formatMessage(
+              data-tooltip-id="tooltip-sidebar-button"
+              data-tooltip-content={`${intl.formatMessage(
                 todosToggleMessage,
               )} (${todosToggleShortcutKey(false)})`}
             >
@@ -322,7 +323,8 @@ class Sidebar extends Component<IProps, IState> {
                   },
                 });
               }}
-              data-tip={`${intl.formatMessage(
+              data-tooltip-id="tooltip-sidebar-button"
+              data-tooltip-content={`${intl.formatMessage(
                 messages.lockFerdium,
               )} (${lockFerdiumShortcutKey(false)})`}
             >
@@ -331,14 +333,20 @@ class Sidebar extends Component<IProps, IState> {
           ) : null}
         </>
         {this.state.tooltipEnabled && (
-          <ReactTooltip place="right" type="dark" effect="solid" />
+          <ReactTooltip
+            id="tooltip-sidebar-button"
+            place="right"
+            variant="dark"
+            style={{ height: 'auto', overflowY: 'unset' }}
+          />
         )}
         {!hideSettingsButton && !isMenuCollapsed ? (
           <button
             type="button"
             onClick={() => openSettings({ path: 'app' })}
             className="sidebar__button sidebar__button--settings"
-            data-tip={`${intl.formatMessage(
+            data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-content={`${intl.formatMessage(
               globalMessages.settings,
             )} (${settingsShortcutKey(false)})`}
           >
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index c883066ce..c25af4427 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -359,7 +359,8 @@ class TabItem extends Component<IProps, IState> {
         onKeyDown={noop}
         role="presentation"
         onContextMenu={() => menu.popup()}
-        data-tip={`${service.name} ${acceleratorString(
+        data-tooltip-id="tooltip-sidebar-button"
+        data-tooltip-content={`${service.name} ${acceleratorString(
           shortcutIndex,
           cmdOrCtrlShortcutKey(false),
         )}`}
diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx
index 163b0a160..de323c06e 100644
--- a/src/components/settings/account/AccountDashboard.tsx
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { H1, H2 } from '../../ui/headline';
 
 import Loader from '../../ui/Loader';
@@ -215,7 +215,12 @@ class AccountDashboard extends Component<IProp> {
             </>
           )}
         </div>
-        <ReactTooltip place="right" type="dark" effect="solid" />
+        <ReactTooltip
+          place="right"
+          variant="dark"
+          float
+          style={{ height: 'auto' }}
+        />
       </div>
     );
   }
diff --git a/src/components/settings/services/ServiceItem.tsx b/src/components/settings/services/ServiceItem.tsx
index bf2dfa9da..babe06b5a 100644
--- a/src/components/settings/services/ServiceItem.tsx
+++ b/src/components/settings/services/ServiceItem.tsx
@@ -1,6 +1,6 @@
 import { Component, ReactElement } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js';
@@ -73,7 +73,8 @@ class ServiceItem extends Component<IProps> {
           {service.isMuted && (
             <Icon
               icon={mdiBellOff}
-              data-tip={intl.formatMessage(messages.tooltipIsMuted)}
+              data-tooltip-id="tooltip-service-item"
+              data-tooltip-content={intl.formatMessage(messages.tooltipIsMuted)}
             />
           )}
         </td>
@@ -85,7 +86,10 @@ class ServiceItem extends Component<IProps> {
           {!service.isEnabled && (
             <Icon
               icon={mdiPower}
-              data-tip={intl.formatMessage(messages.tooltipIsDisabled)}
+              data-tooltip-id="tooltip-service-item"
+              data-tooltip-content={intl.formatMessage(
+                messages.tooltipIsDisabled,
+              )}
             />
           )}
         </td>
@@ -97,12 +101,18 @@ class ServiceItem extends Component<IProps> {
           {!service.isNotificationEnabled && (
             <Icon
               icon={mdiMessageBulletedOff}
-              data-tip={intl.formatMessage(
+              data-tooltip-id="tooltip-service-item"
+              data-tooltip-content={intl.formatMessage(
                 messages.tooltipNotificationsDisabled,
               )}
             />
           )}
-          <ReactTooltip place="top" type="dark" effect="solid" />
+          <ReactTooltip
+            id="tooltip-service-item"
+            place="right"
+            variant="dark"
+            style={{ height: 'auto' }}
+          />
         </td>
       </tr>
     );
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 6fd2d4426..77bccb8c3 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -3,7 +3,7 @@
 import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
 import Loader from '../../ui/Loader';
@@ -173,7 +173,12 @@ class TeamDashboard extends Component<IProps> {
             </>
           )}
         </div>
-        <ReactTooltip place="right" type="dark" effect="solid" />
+        <ReactTooltip
+          place="right"
+          variant="dark"
+          float
+          style={{ height: 'auto' }}
+        />
       </div>
     ) : (
       <div className="settings__main">
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index 2076f6ba6..06f63a029 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, useEffect, useState } from 'react';
-import { CSSTransitionGroup } from 'react-transition-group';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 interface IProps {
   children: ReactNode;
@@ -33,17 +33,20 @@ const Appear = ({
   }
 
   return (
-    <CSSTransitionGroup
-      transitionName={transitionName}
-      transitionAppear={transitionAppear}
-      transitionLeave={transitionLeave}
-      transitionAppearTimeout={transitionAppearTimeout}
-      transitionEnterTimeout={transitionEnterTimeout}
-      transitionLeaveTimeout={transitionLeaveTimeout}
-      className={className}
-    >
-      {children}
-    </CSSTransitionGroup>
+    <TransitionGroup component={null}>
+      <CSSTransition
+        classNames={transitionName || className}
+        appear={transitionAppear}
+        exit={transitionLeave}
+        timeout={{
+          enter: transitionEnterTimeout,
+          appear: transitionAppearTimeout,
+          exit: transitionLeaveTimeout,
+        }}
+      >
+        {children}
+      </CSSTransition>
+    </TransitionGroup>
   );
 };