diff --git a/packages/livechat/.storybook/main.js b/packages/livechat/.storybook/main.js
index 983502a9ec57..dd5ca2c73ae3 100644
--- a/packages/livechat/.storybook/main.js
+++ b/packages/livechat/.storybook/main.js
@@ -6,7 +6,7 @@ module.exports = {
backgrounds: false,
}
},
- '@storybook/addon-knobs/register',
+ '@storybook/addon-knobs',
],
stories: [
'../src/**/stories.js',
diff --git a/packages/livechat/package.json b/packages/livechat/package.json
index 87aae83d3edc..358c0bd56867 100644
--- a/packages/livechat/package.json
+++ b/packages/livechat/package.json
@@ -36,6 +36,7 @@
"@storybook/react": "^6.0.12",
"@storybook/storybook-deployer": "^2.8.6",
"@storybook/theming": "^6.0.12",
+ "@types/react-dom": "^18",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
@@ -65,6 +66,7 @@
"postcss-loader": "^3.0.0",
"postcss-logical": "^4.0.2",
"postcss-selector-not": "^4.0.0",
+ "react-dom": "^18.1.0",
"rimraf": "^3.0.2",
"sass": "^1.49.10",
"sass-loader": "^9.0.2",
diff --git a/packages/livechat/src/components/Menu/index.js b/packages/livechat/src/components/Menu/index.js
index fb189e35213c..457c6caa619f 100644
--- a/packages/livechat/src/components/Menu/index.js
+++ b/packages/livechat/src/components/Menu/index.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
import { PopoverTrigger } from '../Popover';
import { createClassName, normalizeDOMRect } from '../helpers';
@@ -20,7 +20,7 @@ export const Group = ({ children, title, ...props }) => (
);
-export const Item = ({ children, primary, danger, disabled, icon, ...props }) => (
+export const Item = ({ children, primary, danger, disabled, icon, ...props }) =>
-);
-
-
+ ;
class PopoverMenuWrapper extends Component {
state = {}
diff --git a/packages/livechat/src/components/Tooltip/index.js b/packages/livechat/src/components/Tooltip/index.js
index 03e7b2450a19..0bf5e395c1e8 100644
--- a/packages/livechat/src/components/Tooltip/index.js
+++ b/packages/livechat/src/components/Tooltip/index.js
@@ -1,4 +1,4 @@
-import { h, cloneElement, Component, createContext, toChildArray } from 'preact';
+import { cloneElement, Component, createContext, toChildArray } from 'preact';
import { createClassName } from '../helpers';
import styles from './styles.scss';
@@ -107,7 +107,7 @@ export const TooltipTrigger = ({ children, content, placement }) => (
export const withTooltip = (component) => {
const TooltipConnection = ({ tooltip, ...props }) => (
- {h(component, props)}
+ {component(props)}
);
TooltipConnection.displayName = `withTooltip(${ component.displayName })`;
diff --git a/yarn.lock b/yarn.lock
index 0f1f06db1526..cb61ef5e3240 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3825,6 +3825,7 @@ __metadata:
"@storybook/react": ^6.0.12
"@storybook/storybook-deployer": ^2.8.6
"@storybook/theming": ^6.0.12
+ "@types/react-dom": ^18
autoprefixer: ^9.8.6
babel-eslint: ^10.1.0
babel-loader: ^8.1.0
@@ -3867,6 +3868,7 @@ __metadata:
preact: ^10.4.6
preact-router: ^3.2.1
query-string: ^6.13.1
+ react-dom: ^18.1.0
react-i18next: ^11.13.0
rimraf: ^3.0.2
sass: ^1.49.10
@@ -6784,7 +6786,16 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-dom@npm:*, @types/react-dom@npm:~17.0.14":
+"@types/react-dom@npm:*, @types/react-dom@npm:^18":
+ version: 18.0.2
+ resolution: "@types/react-dom@npm:18.0.2"
+ dependencies:
+ "@types/react": "*"
+ checksum: 2b0b138d8634ccfd8a86b17cb5414b122ee0cb6f650377d772f6008761a27e4c2531c08e3cab71aaa19b6893af6a508c664aa314db3ebcff5b8179173c9c9307
+ languageName: node
+ linkType: hard
+
+"@types/react-dom@npm:~17.0.14":
version: 17.0.14
resolution: "@types/react-dom@npm:17.0.14"
dependencies:
@@ -27371,6 +27382,18 @@ __metadata:
languageName: node
linkType: hard
+"react-dom@npm:^18.1.0":
+ version: 18.1.0
+ resolution: "react-dom@npm:18.1.0"
+ dependencies:
+ loose-envify: ^1.1.0
+ scheduler: ^0.22.0
+ peerDependencies:
+ react: ^18.1.0
+ checksum: bb0d48eeb0b297c79c2a03978baa29f5b3ff7ba3d070b21e34c9af1a6e7fdf0ca8b8d73e41f9214d91ad40eeb6d1f3559f884cbbc338713374a51320637c23df
+ languageName: node
+ linkType: hard
+
"react-draggable@npm:^4.4.3":
version: 4.4.4
resolution: "react-draggable@npm:4.4.4"
@@ -29087,6 +29110,15 @@ __metadata:
languageName: node
linkType: hard
+"scheduler@npm:^0.22.0":
+ version: 0.22.0
+ resolution: "scheduler@npm:0.22.0"
+ dependencies:
+ loose-envify: ^1.1.0
+ checksum: a8ef5cab769c020cd6382ad9ecc3f72dbde56a50a36639b3a42ad9c11f7724f03700bcad373044059b8067d4a6365154dc7c0ca8027ef20ff4900cf58a0fc2c5
+ languageName: node
+ linkType: hard
+
"schema-inspector@npm:^1.6.8":
version: 1.7.0
resolution: "schema-inspector@npm:1.7.0"