diff --git a/package.json b/package.json index 9125486218..753179ce5c 100644 --- a/package.json +++ b/package.json @@ -108,11 +108,11 @@ "react-jss": "10.10.0", "react-loader": "2.4.7", "react-modal": "3.16.1", - "react-router-dom": "6.4.2", + "react-router-dom": "6.14.1", "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.4", @@ -138,6 +138,7 @@ "@types/node": "18.15.3", "@types/react": "18.2.12", "@types/react-dom": "18.2.5", + "@types/react-transition-group": "4.4.6", "@types/route-parser": "0.1.4", "@types/tar": "6.1.5", "@types/uuid": "9.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 13ccf3434a..a3052428b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -204,20 +204,20 @@ dependencies: specifier: 3.16.1 version: 3.16.1(react-dom@18.2.0)(react@18.2.0) react-router-dom: - specifier: 6.4.2 - version: 6.4.2(react-dom@18.2.0)(react@18.2.0) + specifier: 6.14.1 + version: 6.14.1(react-dom@18.2.0)(react@18.2.0) react-sortable-hoc: specifier: 2.0.0 version: 2.0.0(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0) react-tooltip: - specifier: 4.5.1 - version: 4.5.1(react-dom@18.2.0)(react@18.2.0) + specifier: 5.13.1 + version: 5.13.1(react-dom@18.2.0)(react@18.2.0) react-topbar-progress-indicator: specifier: 4.1.1 version: 4.1.1(react@18.2.0) react-transition-group: - specifier: 1.2.1 - version: 1.2.1(react-dom@18.2.0)(react@18.2.0) + specifier: 4.4.5 + version: 4.4.5(react-dom@18.2.0)(react@18.2.0) route-parser: specifier: 0.0.5 version: 0.0.5 @@ -297,6 +297,9 @@ devDependencies: '@types/react-dom': specifier: 18.2.5 version: 18.2.5 + '@types/react-transition-group': + specifier: 4.4.6 + version: 4.4.6 '@types/route-parser': specifier: 0.1.4 version: 0.1.4 @@ -1511,6 +1514,16 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true + /@floating-ui/core@1.3.1: + resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==} + dev: false + + /@floating-ui/dom@1.4.3: + resolution: {integrity: sha512-nB/68NyaQlcdY22L+Fgd1HERQ7UGv7XFN+tPxwrEfQL4nKtAP/jIZnZtpUlXbtV+VEGHh6W/63Gy2C5biWI3sA==} + dependencies: + '@floating-ui/core': 1.3.1 + dev: false + /@formatjs/cli@6.1.3: resolution: {integrity: sha512-PdTXZTY8LqxwmvFqdifn89gjXnPUpGtGyFs0BnoeLuOuxZFSnBfIs5WQCVMaJnr1+0vNNlXyT0VAIAwjRpf6BA==} engines: {node: '>= 16'} @@ -2169,8 +2182,8 @@ packages: dev: true optional: true - /@remix-run/router@1.0.2: - resolution: {integrity: sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==} + /@remix-run/router@1.7.1: + resolution: {integrity: sha512-bgVQM4ZJ2u2CM8k1ey70o1ePFXsEzYVZoWghh6WjM8p59jQ7HxzbHW4SbnWFG7V9ig9chLawQxDTZ3xzOF8MkQ==} engines: {node: '>=14'} dev: false @@ -2498,6 +2511,12 @@ packages: '@types/react': 18.2.12 dev: true + /@types/react-transition-group@4.4.6: + resolution: {integrity: sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==} + dependencies: + '@types/react': 18.2.12 + dev: true + /@types/react@18.2.12: resolution: {integrity: sha512-ndmBMLCgn38v3SntMeoJaIrO6tGHYKMEBohCUmw8HoLLQdRMOIGXfeYaBTLe2lsFaSB3MOK1VXscYFnmLtTSmw==} dependencies: @@ -3856,10 +3875,6 @@ packages: resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==} dev: false - /chain-function@1.0.1: - resolution: {integrity: sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==} - dev: false - /chainsaw@0.1.0: resolution: {integrity: sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==} dependencies: @@ -4412,7 +4427,7 @@ packages: /css-jss@10.10.0: resolution: {integrity: sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==} dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.21.5 jss: 10.10.0 jss-preset-default: 10.10.0 dev: false @@ -4745,10 +4760,11 @@ packages: esutils: 2.0.3 dev: true - /dom-helpers@3.4.0: - resolution: {integrity: sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==} + /dom-helpers@5.2.1: + resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: '@babel/runtime': 7.21.5 + csstype: 3.1.2 dev: false /dot-prop@5.3.0: @@ -7905,7 +7921,7 @@ packages: /jss-preset-default@10.10.0: resolution: {integrity: sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==} dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.21.5 jss: 10.10.0 jss-plugin-camel-case: 10.10.0 jss-plugin-compose: 10.10.0 @@ -10017,26 +10033,26 @@ packages: warning: 4.0.3 dev: false - /react-router-dom@6.4.2(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==} + /react-router-dom@6.14.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-ssF6M5UkQjHK70fgukCJyjlda0Dgono2QGwqGvuk7D+EDGHdacEN3Yke2LTMjkrpHuFwBfDFsEjGVXBDmL+bWw==} engines: {node: '>=14'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.0.2 + '@remix-run/router': 1.7.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-router: 6.4.2(react@18.2.0) + react-router: 6.14.1(react@18.2.0) dev: false - /react-router@6.4.2(react@18.2.0): - resolution: {integrity: sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==} + /react-router@6.14.1(react@18.2.0): + resolution: {integrity: sha512-U4PfgvG55LdvbQjg5Y9QRWyVxIdO1LlpYT7x+tMAxd9/vmiPuJhIwdxZuIQLN/9e3O4KFDHYfR9gzGeYMasW8g==} engines: {node: '>=14'} peerDependencies: react: '>=16.8' dependencies: - '@remix-run/router': 1.0.2 + '@remix-run/router': 1.7.1 react: 18.2.0 dev: false @@ -10054,17 +10070,16 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /react-tooltip@4.5.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==} - engines: {npm: '>=6.13'} + /react-tooltip@5.13.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-9NstDFdjyy6cIH9zjeT70zXTHlW/TIGCOWQmhkAyqLFeQioLg1FXvb9ec7AxSpn0zyFUkFSLdFYxZRuewti3Aw==} peerDependencies: - react: '>=16.0.0' - react-dom: '>=16.0.0' + react: '>=16.14.0' + react-dom: '>=16.14.0' dependencies: - prop-types: 15.8.1 + '@floating-ui/dom': 1.4.3 + classnames: 2.3.2 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - uuid: 7.0.3 dev: false /react-topbar-progress-indicator@4.1.1(react@18.2.0): @@ -10076,19 +10091,18 @@ packages: topbar: 0.1.4 dev: false - /react-transition-group@1.2.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==} + /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: - react: ^15.0.0 || ^16.0.0 - react-dom: ^15.0.0 || ^16.0.0 + react: '>=16.6.0' + react-dom: '>=16.6.0' dependencies: - chain-function: 1.0.1 - dom-helpers: 3.4.0 + '@babel/runtime': 7.21.5 + dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - warning: 3.0.0 dev: false /react-window@1.8.8(react-dom@18.2.0)(react@18.2.0): @@ -11886,11 +11900,6 @@ packages: hasBin: true dev: false - /uuid@7.0.3: - resolution: {integrity: sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==} - hasBin: true - dev: false - /uuid@8.3.2: resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==} hasBin: true @@ -11995,12 +12004,6 @@ packages: engines: {node: '>=0.10.0'} dev: false - /warning@3.0.0: - resolution: {integrity: sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==} - dependencies: - loose-envify: 1.4.0 - dev: false - /warning@4.0.3: resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} dependencies: diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index fac424477a..2b1e870237 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 { }; } - componentDidUpdate() { - ReactTooltip.rebuild(); - } - enableToolTip() { this.setState({ tooltipEnabled: true }); } @@ -232,7 +228,8 @@ class Sidebar extends Component { 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 { }); }} 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 { 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 { 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 { 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 { }, }); }} - 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 { ) : null} {this.state.tooltipEnabled && ( - + )} {!hideSettingsButton && !isMenuCollapsed ? ( + ); } diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx index 61284d81af..1c827e9ddf 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.tsx +++ b/src/features/workspaces/components/WorkspaceDrawer.tsx @@ -2,7 +2,7 @@ import { Component, ReactElement } from 'react'; import { observer } from 'mobx-react'; import withStyles, { WithStylesProps } from 'react-jss'; import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; -import ReactTooltip from 'react-tooltip'; +import { Tooltip as ReactTooltip } from 'react-tooltip'; import { mdiPlusBox, mdiCog } from '@mdi/js'; import { noop } from 'lodash'; import { H1 } from '../../../components/ui/headline'; @@ -96,7 +96,6 @@ interface IProps extends WithStylesProps, WrappedComponentProps { class WorkspaceDrawer extends Component { componentDidMount(): void { try { - ReactTooltip.rebuild(); getUserWorkspacesRequest.execute(); } catch (error) { console.log(error); @@ -121,7 +120,8 @@ class WorkspaceDrawer extends Component { onClick={() => { workspaceActions.openWorkspaceSettings(); }} - data-tip={`${intl.formatMessage( + data-tooltip-id="tooltip-workspaces-drawer" + data-tooltip-content={`${intl.formatMessage( messages.workspacesSettingsTooltip, )}`} > @@ -176,7 +176,12 @@ class WorkspaceDrawer extends Component { {intl.formatMessage(messages.addNewWorkspaceLabel)} - + ); } diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.tsx b/src/features/workspaces/components/WorkspaceDrawerItem.tsx index cf8c3b2ba7..172b4192c9 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.tsx +++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx @@ -119,7 +119,8 @@ class WorkspaceDrawerItem extends Component { } }} onKeyDown={noop} - data-tip={acceleratorString( + data-tooltip-id="tooltip-workspaces-drawer" + data-tooltip-content={acceleratorString( shortcutIndex, `${cmdOrCtrlShortcutKey(false)}+${altKey(false)}`, )} diff --git a/src/routes.tsx b/src/routes.tsx index 04b6fa96f6..beada5c96e 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -51,6 +51,7 @@ class FerdiumRoutes extends Component { const errorProps = { error: routeProps.stores.globalError.error || {} }; return ( + // @ts-expect-error }> diff --git a/src/styles/main.scss b/src/styles/main.scss index 8369c92987..eb7649bfaf 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,5 +1,6 @@ @import '../../node_modules/electron-react-titlebar/assets/style'; + // modules @import './globals.scss'; @import './reset.scss';