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

ferdium · May 28, 2023 · bd0b198 · bd0b198
1 parent 99ca310
commit bd0b198
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 94 deletions.
diff --git a/package.json b/package.json
@@ -110,9 +110,9 @@
     "react-modal": "3.16.1",
     "react-router-dom": "6.4.2",
     "react-sortable-hoc": "2.0.0",
-    "react-tooltip": "4.5.1",
+    "react-tooltip": "5.13.1",
     "react-topbar-progress-indicator": "4.1.1",
-    "react-transition-group": "1.2.1",
+    "react-transition-group": "4.4.5",
     "route-parser": "0.0.5",
     "sanitize-filename": "1.6.3",
     "semver": "7.5.1",
@@ -138,6 +138,7 @@
     "@types/node": "18.15.3",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
+    "@types/react-transition-group": "4.4.6",
     "@types/route-parser": "0.1.4",
     "@types/tar": "6.1.5",
     "@types/uuid": "9.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git 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,7 @@ 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-content={`${intl.formatMessage(
                 messages.addNewService,
               )} (${addNewServiceShortcutKey(false)})`}
             >
@@ -251,7 +247,7 @@ class Sidebar extends Component<IProps, IState> {
                 });
               }}
               className="sidebar__button sidebar__button--split-mode-toggle"
-              data-tip={`${intl.formatMessage(
+              data-tooltip-content={`${intl.formatMessage(
                 messages.splitModeToggle,
               )} (${splitModeToggleShortcutKey(false)})`}
             >
@@ -268,7 +264,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--workspaces ${
                 isWorkspaceDrawerOpen ? 'is-active' : ''
               }`}
-              data-tip={`${intl.formatMessage(
+              data-tooltip-content={`${intl.formatMessage(
                 workspaceToggleMessage,
               )} (${workspaceToggleShortcutKey(false)})`}
             >
@@ -285,7 +281,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--audio ${
                 isAppMuted ? 'is-muted' : ''
               }`}
-              data-tip={`${intl.formatMessage(
+              data-tooltip-content={`${intl.formatMessage(
                 isAppMuted ? messages.unmute : messages.mute,
               )} (${muteFerdiumShortcutKey(false)})`}
             >
@@ -303,7 +299,7 @@ class Sidebar extends Component<IProps, IState> {
               className={`sidebar__button sidebar__button--todos ${
                 todosStore.isTodosPanelVisible ? 'is-active' : ''
               }`}
-              data-tip={`${intl.formatMessage(
+              data-tooltip-content={`${intl.formatMessage(
                 todosToggleMessage,
               )} (${todosToggleShortcutKey(false)})`}
             >
@@ -322,7 +318,7 @@ class Sidebar extends Component<IProps, IState> {
                   },
                 });
               }}
-              data-tip={`${intl.formatMessage(
+              data-tooltip-content={`${intl.formatMessage(
                 messages.lockFerdium,
               )} (${lockFerdiumShortcutKey(false)})`}
             >
@@ -331,14 +327,14 @@ class Sidebar extends Component<IProps, IState> {
           ) : null}
         </>
         {this.state.tooltipEnabled && (
-          <ReactTooltip place="right" type="dark" effect="solid" />
+          <ReactTooltip place="right" variant="dark" float />
         )}
         {!hideSettingsButton && !isMenuCollapsed ? (
           <button
             type="button"
             onClick={() => openSettings({ path: 'app' })}
             className="sidebar__button sidebar__button--settings"
-            data-tip={`${intl.formatMessage(
+            data-tooltip-content={`${intl.formatMessage(
               globalMessages.settings,
             )} (${settingsShortcutKey(false)})`}
           >