chore: upgrade to react v18

packages/dnb-design-system-portal/package.json

@@ -38,24 +38,24 @@
   },
   "dependencies": {
     "@dnb/eufemia": "workspace:*",
-    "@emotion/react": "11.9.3",
-    "@emotion/styled": "11.9.3",
+    "@emotion/react": "11.11.0",
+    "@emotion/styled": "11.11.0",
     "@mdx-js/mdx": "2.3.0",
     "@mdx-js/react": "2.3.0",
     "algoliasearch": "4.12.0",
     "classnames": "2.3.1",
     "history": "5.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-live-ssr": "workspace:*"
   },
   "devDependencies": {
-    "@babel/core": "7.16.0",
+    "@babel/core": "7.22.5",
     "@babel/eslint-parser": "7.18.2",
-    "@babel/node": "7.16.0",
-    "@emotion/cache": "11.9.3",
+    "@babel/node": "7.22.5",
+    "@emotion/cache": "11.11.0",
     "@typescript-eslint/parser": "5.43.0",
-    "babel-jest": "29.3.1",
+    "babel-jest": "29.5.0",
     "camelcase": "6.2.0",
     "cross-env": "7.0.3",
     "current-git-branch": "1.1.0",

packages/dnb-design-system-portal/src/docs/uilib/usage/first-steps/bundles.mdx

@@ -46,8 +46,8 @@ Requires React and ReactDOM to be loaded. Supports `ES5`.
         console.log('on_click', params)
       },
     })
-
-    ReactDOM.render(MyButton, document.getElementById('app'))
+    const root = createRoot(document.getElementById('app'))
+    root.render(MyButton)
   </script>
 </body>
 ```
@@ -102,7 +102,8 @@ Because `importmap` is still not supported by the majority of browsers, we use a
       }
     )
 
-    ReactDOM.render(MyButton, document.getElementById('app'))
+    const root = createRoot(document.getElementById('app'))
+    root.render(MyButton)
   </script>
 </body>
 ```

packages/dnb-eufemia/.storybook/main.js

@@ -1,7 +1,11 @@
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
   stories: ['../src/**/*.stories.tsx'],
   addons: ['@storybook/preset-scss'],
-}
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
+};

packages/dnb-eufemia/package.json

@@ -66,7 +66,7 @@
     "publish:prepare": "./scripts/postbuild/publish-prepare.sh",
     "reset": "rm -rf ./node_modules ./build",
     "skeleton:font": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/tools/createSkeletonFont.js'",
-    "start": "start-storybook -s / -p 8002 --ci --no-release-notes --no-version-updates",
+    "start": "storybook dev -s / -p 8002 --ci --no-release-notes --no-version-updates",
     "test": "jest",
     "test:auto-generated-types": "jest ./postTypeGeneration.test.ts --ci --testPathIgnorePatterns=[]",
     "test:ci": "jest --ci",
@@ -111,31 +111,31 @@
     "what-input": "5.2.10"
   },
   "peerDependencies": {
-    "react": "^17",
-    "react-dom": "^17"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/core": "7.16.0",
-    "@babel/eslint-parser": "7.18.2",
-    "@babel/node": "7.16.0",
-    "@babel/parser": "7.16.3",
-    "@babel/plugin-proposal-class-properties": "7.16.0",
-    "@babel/plugin-proposal-export-default-from": "7.16.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.16.0",
-    "@babel/plugin-proposal-optional-chaining": "7.16.0",
+    "@babel/cli": "7.22.5",
+    "@babel/core": "7.22.5",
+    "@babel/eslint-parser": "7.22.5",
+    "@babel/node": "7.22.5",
+    "@babel/parser": "7.22.5",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-export-default-from": "7.22.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-syntax-typescript": "7.16.0",
-    "@babel/plugin-transform-modules-commonjs": "7.16.0",
-    "@babel/plugin-transform-react-constant-elements": "7.16.0",
-    "@babel/plugin-transform-runtime": "7.16.0",
-    "@babel/preset-env": "7.16.0",
-    "@babel/preset-react": "7.16.0",
-    "@babel/preset-typescript": "7.16.0",
+    "@babel/plugin-syntax-typescript": "7.22.5",
+    "@babel/plugin-transform-modules-commonjs": "7.22.5",
+    "@babel/plugin-transform-react-constant-elements": "7.22.5",
+    "@babel/plugin-transform-runtime": "7.22.5",
+    "@babel/preset-env": "7.22.5",
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
     "@babel/traverse": "7.16.3",
-    "@emotion/react": "11.9.3",
-    "@emotion/styled": "11.9.3",
+    "@emotion/react": "11.11.0",
+    "@emotion/styled": "11.11.0",
     "@reach/router": "1.3.4",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "24.0.1",
@@ -147,27 +147,25 @@
     "@semantic-release/github": "8.0.7",
     "@semantic-release/npm": "9.0.2",
     "@semantic-release/release-notes-generator": "10.0.3",
-    "@storybook/addons": "6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
+    "@storybook/addons": "7.0.21",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.15",
-    "@storybook/theming": "6.5.15",
+    "@storybook/react": "7.0.21",
+    "@storybook/react-webpack5": "7.0.21",
+    "@storybook/theming": "7.0.21",
     "@svgr/core": "6.5.1",
     "@svgr/plugin-jsx": "6.5.1",
     "@svgr/plugin-svgo": "6.5.1",
-    "@testing-library/dom": "8.11.0",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/dom": "9.3.1",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/fs-extra": "11.0.1",
     "@types/jest": "29.2.6",
     "@types/jest-axe": "3.5.5",
     "@types/jest-image-snapshot": "6.1.0",
     "@typescript-eslint/eslint-plugin": "5.28.0",
     "@typescript-eslint/parser": "5.43.0",
     "audit-ci": "5.1.2",
-    "babel-jest": "29.3.1",
+    "babel-jest": "29.5.0",
     "babel-plugin-optimize-clsx": "2.6.2",
     "babel-plugin-search-and-replace": "1.1.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
@@ -229,8 +227,8 @@
     "prettier-package-json": "2.6.0",
     "process": "0.11.10",
     "prop-types": "15.7.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-to-typescript-definitions": "3.1.0",
     "regenerator-runtime": "0.13.9",
     "repo-utils": "workspace:*",
@@ -241,6 +239,7 @@
     "sass-loader": "13.2.0",
     "semantic-release": "20.1.0",
     "simple-git": "3.16.0",
+    "storybook": "7.0.21",
     "storybook-utils": "workspace:*",
     "style-loader": "3.3.1",
     "stylelint": "15.1.0",

packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginCorrectTypes.test.js.snap

@@ -5,6 +5,7 @@ exports[`babelPluginCorrectTypes has to match snapshot 1`] = `
  * Test mock file
  *
  */
+
 import React from 'react';
 import { PropTypes } from "react";
 import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent';
@@ -26,7 +27,6 @@ export default class PrimaryComponent extends React.PureComponent {
   render() {
     return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children];
   }
-
 }
 PrimaryComponent.propTypes = {
   boolean: PropTypes.bool,
@@ -61,11 +61,9 @@ PrimaryComponent.defaultProps = {
 };
 PrimaryComponent.Secondary = SecondaryComponent;
 PrimaryComponent.SecondaryDuplication = SecondaryComponent;
-
 const Element = () => {
   return null;
 };
-
 Element.propTypes = {
   boolean: PropTypes.bool,
   number: PropTypes.number,

packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginIncludeDocs.test.js.snap

@@ -5,6 +5,7 @@ exports[`babelPluginIncludeDocs has to match code snapshot 1`] = `
  * Test mock file
  *
  */
+
 import React from 'react';
 import { PropTypes } from "react";
 import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent';
@@ -26,7 +27,6 @@ export default class PrimaryComponent extends React.PureComponent {
   render() {
     return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children];
   }
-
 }
 PrimaryComponent.propTypes = {
   boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -61,11 +61,9 @@ PrimaryComponent.defaultProps = {
 };
 PrimaryComponent.Secondary = SecondaryComponent;
 PrimaryComponent.SecondaryDuplication = SecondaryComponent;
-
 const Element = () => {
   return null;
 };
-
 Element.propTypes = {
   boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -101,6 +99,7 @@ exports[`babelPluginIncludeDocs has to match code snapshot in strict mode 1`] =
  * Test mock file
  *
  */
+
 import React from 'react';
 import { PropTypes } from "react";
 import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent';
@@ -122,7 +121,6 @@ export default class PrimaryComponent extends React.PureComponent {
   render() {
     return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children];
   }
-
 }
 PrimaryComponent.propTypes = {
   boolean: PropTypes.bool,
@@ -157,11 +155,9 @@ PrimaryComponent.defaultProps = {
 };
 PrimaryComponent.Secondary = SecondaryComponent;
 PrimaryComponent.SecondaryDuplication = SecondaryComponent;
-
 const Element = () => {
   return null;
 };
-
 Element.propTypes = {
   boolean: PropTypes.bool,
   number: PropTypes.number,
@@ -197,6 +193,7 @@ exports[`babelPluginIncludeDocs has to match collectProps snapshot given by onCo
  * Test mock file
  *
  */
+
 import React from 'react';
 import { PropTypes } from "react";
 import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent';
@@ -218,7 +215,6 @@ export default class PrimaryComponent extends React.PureComponent {
   render() {
     return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children];
   }
-
 }
 PrimaryComponent.propTypes = {
   boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -253,11 +249,9 @@ PrimaryComponent.defaultProps = {
 };
 PrimaryComponent.Secondary = SecondaryComponent;
 PrimaryComponent.SecondaryDuplication = SecondaryComponent;
-
 const Element = () => {
   return null;
 };
-
 Element.propTypes = {
   boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes/__tests__/__snapshots__/babelPluginPropTypesRelations.test.js.snap

@@ -5,6 +5,7 @@ exports[`babelPluginPropTypesRelations has to match snapshot 1`] = `
  * Test mock file
  *
  */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import SecondaryComponent, { secondaryDefaultProps, secondaryPropTypes } from './SecondaryComponent';
@@ -26,7 +27,6 @@ export default class PrimaryComponent extends React.PureComponent {
   render() {
     return [this.props.boolean, this.props.number, this.props.spacing, this.props.top, this.props.secondary_foo, this.props.secondary_spacing, this.props.children];
   }
-
 }
 PrimaryComponent.propTypes = {
   boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -61,11 +61,9 @@ PrimaryComponent.defaultProps = {
 };
 PrimaryComponent.Secondary = SecondaryComponent;
 PrimaryComponent.SecondaryDuplication = SecondaryComponent;
-
 const Element = () => {
   return null;
 };
-
 Element.propTypes = {
   boolean: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

packages/dnb-eufemia/src/components/date-picker/DatePickerInput.js

@@ -777,5 +777,4 @@ const InputElement = (props) => {
   )
 }
 
-// const pad = (num, size) => ('000000000' + num).substr(-size)
 const wait = (t) => new Promise((r) => setTimeout(r, t))

packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx

@@ -1132,7 +1132,7 @@ describe('Dropdown component', () => {
   })
 
   beforeAll(() => {
-    ;(window as any).resizeTo = function resizeTo({
+    (window as any).resizeTo = function resizeTo({
       width = window.innerWidth,
       height = window.innerHeight,
     }: {

packages/dnb-eufemia/src/components/heading/__tests__/Heading.test.tsx

@@ -277,7 +277,7 @@ describe('Heading component', () => {
     )
 
     setNextLevel(2, { overwriteContext: true })
-    //Comp1.setProps({ relevel: true })
+    // Comp1.setProps({ relevel: true })
     expect(document.querySelectorAll('.dnb-heading')[0].textContent).toBe(
       '[h2] h1'
     )

packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimation.test.tsx

@@ -6,7 +6,6 @@
 import React from 'react'
 import { render, act, fireEvent } from '@testing-library/react'
 import ToggleButton from '../../ToggleButton'
-import { wait } from '@testing-library/user-event/dist/utils'
 import HeightAnimation, {
   HeightAnimationAllProps,
   HeightAnimationProps,
@@ -438,3 +437,5 @@ describe('HeightAnimation', () => {
     })
   })
 })
+
+const wait = (t) => new Promise((r) => setTimeout(r, t))

packages/dnb-eufemia/src/components/height-animation/__tests__/useHeightAnimation.test.tsx

@@ -5,10 +5,8 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { render, act, fireEvent } from '@testing-library/react'
-import { renderHook } from '@testing-library/react-hooks'
+import { render, act, fireEvent, renderHook } from '@testing-library/react'
 import ToggleButton from '../../ToggleButton'
-import { wait } from '@testing-library/user-event/dist/utils'
 import { useHeightAnimation } from '../useHeightAnimation'
 
 beforeEach(() => {
@@ -218,3 +216,5 @@ function simulateAnimationEnd(
   const event = new CustomEvent('transitionend')
   element.dispatchEvent(event)
 }
+
+const wait = (t) => new Promise((r) => setTimeout(r, t))

packages/dnb-eufemia/src/components/number-format/__tests__/useNumberFormat.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import useNumberFormat from '../useNumberFormat'
 import Provider from '../../../shared/Provider'