diff --git a/.babel-preset.js b/.babel-preset.js
index aac77692ab..4c08fb3284 100644
--- a/.babel-preset.js
+++ b/.babel-preset.js
@@ -33,6 +33,12 @@ const plugins = [
// modules and avoid modules that prevent tree-shaking:
// https://github.com/lodash/lodash/issues/4119
'lodash',
+ [
+ 'transform-next-use-client',
+ {
+ customClientImports: ['useAutoControlledValue', 'useEventCallback', 'useMergedRefs'],
+ },
+ ],
// CJS modules are not tree-shakable in any bundler by default
// https://github.com/formium/tsdx#using-lodash
(isESBuild || isUMDBuild) && [
diff --git a/package.json b/package.json
index 04a93087c1..b98818f1a5 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
"babel-plugin-filter-imports": "^4.0.0",
"babel-plugin-istanbul": "^6.1.1",
"babel-plugin-lodash": "^3.3.4",
+ "babel-plugin-transform-next-use-client": "^1.1.1",
"babel-plugin-transform-react-handled-props": "^2.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-plugin-transform-rename-import": "^2.3.0",
diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 57a360e6f4..c32f9653a0 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { customPropTypes, getUnhandledProps } from '../../lib'
import Button from '../../elements/Button'
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index fb99c755ae..dc5d2a1269 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
createPaginationItems,
diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
index eeac3f9710..4ad57da0cd 100644
--- a/src/addons/Portal/Portal.js
+++ b/src/addons/Portal/Portal.js
@@ -2,7 +2,7 @@ import EventStack from '@semantic-ui-react/event-stack'
import keyboardKey from 'keyboard-key'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
customPropTypes,
@@ -25,17 +25,17 @@ const debug = makeDebugger('portal')
function Portal(props) {
const {
children,
- closeOnDocumentClick,
- closeOnEscape,
+ closeOnDocumentClick = true,
+ closeOnEscape = true,
closeOnPortalMouseLeave,
closeOnTriggerBlur,
closeOnTriggerClick,
closeOnTriggerMouseLeave,
- eventPool,
+ eventPool = 'default',
mountNode,
mouseEnterDelay,
mouseLeaveDelay,
- openOnTriggerClick,
+ openOnTriggerClick = true,
openOnTriggerFocus,
openOnTriggerMouseEnter,
} = props
@@ -378,13 +378,6 @@ Portal.propTypes = {
triggerRef: customPropTypes.ref,
}
-Portal.defaultProps = {
- closeOnDocumentClick: true,
- closeOnEscape: true,
- eventPool: 'default',
- openOnTriggerClick: true,
-}
-
Portal.Inner = PortalInner
export default Portal
diff --git a/src/addons/Portal/PortalInner.js b/src/addons/Portal/PortalInner.js
index 2c8c5bb929..854818f379 100644
--- a/src/addons/Portal/PortalInner.js
+++ b/src/addons/Portal/PortalInner.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { createPortal } from 'react-dom'
import { isBrowser, makeDebugger, useEventCallback } from '../../lib'
diff --git a/src/addons/Portal/usePortalElement.js b/src/addons/Portal/usePortalElement.js
index 7c5b8fd491..02c95027b3 100644
--- a/src/addons/Portal/usePortalElement.js
+++ b/src/addons/Portal/usePortalElement.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
import ReactIs from 'react-is'
import { useMergedRefs } from '../../lib'
diff --git a/src/addons/Portal/utils/useTrigger.js b/src/addons/Portal/utils/useTrigger.js
index 503e231e33..020e4ecddb 100644
--- a/src/addons/Portal/utils/useTrigger.js
+++ b/src/addons/Portal/utils/useTrigger.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
import { useMergedRefs } from '../../../lib'
import validateTrigger from './validateTrigger'
diff --git a/src/addons/Portal/utils/validateTrigger.js b/src/addons/Portal/utils/validateTrigger.js
index 5dcd4282c1..0b1cc33b5a 100644
--- a/src/addons/Portal/utils/validateTrigger.js
+++ b/src/addons/Portal/utils/validateTrigger.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
import * as ReactIs from 'react-is'
/**
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index cfc216d338..458930366e 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
import { getUnhandledProps } from '../../lib'
import Checkbox from '../../modules/Checkbox'
diff --git a/src/addons/Select/Select.js b/src/addons/Select/Select.js
index 184993b72f..abc4ffcac8 100644
--- a/src/addons/Select/Select.js
+++ b/src/addons/Select/Select.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import Dropdown from '../../modules/Dropdown'
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index 4c2c1d7aac..eacaab263a 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps, useMergedRefs } from '../../lib'
diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js
index 2adb7c22cf..c7637d07f9 100644
--- a/src/addons/TransitionablePortal/TransitionablePortal.js
+++ b/src/addons/TransitionablePortal/TransitionablePortal.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import Portal from '../Portal'
import Transition from '../../modules/Transition'
diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index c50b438bc4..8ca1fde20f 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getUnhandledProps, getComponentType, SUI } from '../../lib'
import BreadcrumbDivider from './BreadcrumbDivider'
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index 88190f0333..1d92ffdedc 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index f3d9b19eb3..b48f3eaf49 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 8f869d01f8..8da9b9cd65 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
import FormButton from './FormButton'
diff --git a/src/collections/Form/FormButton.js b/src/collections/Form/FormButton.js
index 57400fe08b..a171284f30 100644
--- a/src/collections/Form/FormButton.js
+++ b/src/collections/Form/FormButton.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
import Button from '../../elements/Button'
diff --git a/src/collections/Form/FormCheckbox.js b/src/collections/Form/FormCheckbox.js
index 6f0d5fa01d..1ad8672544 100644
--- a/src/collections/Form/FormCheckbox.js
+++ b/src/collections/Form/FormCheckbox.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
import Checkbox from '../../modules/Checkbox'
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index 62f845a31e..1f15044764 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
import Dropdown from '../../modules/Dropdown'
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index b1a2cc3f95..11220ef3c4 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
customPropTypes,
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index 71b3865d14..47ac4f9c1a 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
import Input from '../../elements/Input'
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 7ce0a38f32..8e8dfa01b2 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
import Radio from '../../addons/Radio'
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index 8658048bfd..9bf8c180a5 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
import Select from '../../addons/Select'
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index 4fb4a8e1d6..41e45e726c 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
import TextArea from '../../addons/TextArea'
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index b884dbd1b5..bd912ca028 100644
--- a/src/collections/Grid/Grid.js
+++ b/src/collections/Grid/Grid.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
customPropTypes,
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index 46e9d7f589..248e9c2321 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/src/collections/Grid/GridColumn.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
customPropTypes,
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index 7dae17ab50..bd26b13afd 100644
--- a/src/collections/Grid/GridRow.js
+++ b/src/collections/Grid/GridRow.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
customPropTypes,
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 6c984eb871..149383557d 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Menu/MenuHeader.js b/src/collections/Menu/MenuHeader.js
index 7a4d62fc5d..2016e2460b 100644
--- a/src/collections/Menu/MenuHeader.js
+++ b/src/collections/Menu/MenuHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index c4f6bafe5c..6420541536 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Menu/MenuMenu.js b/src/collections/Menu/MenuMenu.js
index 6b3489041d..7401371fb0 100644
--- a/src/collections/Menu/MenuMenu.js
+++ b/src/collections/Menu/MenuMenu.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index f6e8e3fb1e..c3b940151d 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Message/MessageContent.js b/src/collections/Message/MessageContent.js
index c0266127e2..f0d494420a 100644
--- a/src/collections/Message/MessageContent.js
+++ b/src/collections/Message/MessageContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/collections/Message/MessageHeader.js b/src/collections/Message/MessageHeader.js
index ee1f8a1578..bef78bd340 100644
--- a/src/collections/Message/MessageHeader.js
+++ b/src/collections/Message/MessageHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index fc15f147fb..68bbe97229 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index 8c48ee5f74..0bb70c0307 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index 7ebbbdec43..80d6367920 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -1,7 +1,7 @@
import _ from 'lodash'
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index a8a1994872..a9a80c3806 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index 8471f454b7..48cd38d27d 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -1,7 +1,7 @@
import _ from 'lodash'
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index 0d2e584de1..b8120e6ac1 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getUnhandledProps } from '../../lib'
import TableHeader from './TableHeader'
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index bddf5ec557..99a5471ad0 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index aaf4a96656..efc1417829 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getUnhandledProps, useValueAndKey } from '../../lib'
import TableCell from './TableCell'
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 7efdc2283f..0f0f9baa42 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -1,7 +1,7 @@
import _ from 'lodash'
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index e3a704577f..5e54992429 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js
index ebe7d58a46..fd16b6bd9d 100644
--- a/src/elements/Button/ButtonContent.js
+++ b/src/elements/Button/ButtonContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
index 07ad032136..f8b9503232 100644
--- a/src/elements/Button/ButtonGroup.js
+++ b/src/elements/Button/ButtonGroup.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Button/ButtonOr.js b/src/elements/Button/ButtonOr.js
index f4db380360..ae1d68a07d 100644
--- a/src/elements/Button/ButtonOr.js
+++ b/src/elements/Button/ButtonOr.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index 741ca019fd..945f5fcc49 100644
--- a/src/elements/Container/Container.js
+++ b/src/elements/Container/Container.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index a8c4b2e3ac..da8fde6c8a 100644
--- a/src/elements/Divider/Divider.js
+++ b/src/elements/Divider/Divider.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Flag/Flag.js b/src/elements/Flag/Flag.js
index 4d0c7d481a..5fc635a0a0 100644
--- a/src/elements/Flag/Flag.js
+++ b/src/elements/Flag/Flag.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
createShorthandFactory,
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index ad1d099f3b..285d07031a 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -1,7 +1,7 @@
import _ from 'lodash'
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Header/HeaderContent.js b/src/elements/Header/HeaderContent.js
index a8d0aef2d1..5c550ac73b 100644
--- a/src/elements/Header/HeaderContent.js
+++ b/src/elements/Header/HeaderContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 9cd4523bfa..16b25b7124 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/src/elements/Header/HeaderSubheader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 45fd57915b..a702cdcb4c 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
createShorthandFactory,
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 55cb7adbf7..f4965cbbd9 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index 7f3df45277..8975f15c05 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -1,7 +1,7 @@
import _ from 'lodash'
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Image/ImageGroup.js b/src/elements/Image/ImageGroup.js
index 9b02ba722b..8a2722bc7f 100644
--- a/src/elements/Image/ImageGroup.js
+++ b/src/elements/Image/ImageGroup.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 9cbccb499d..11fa3cc6fe 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index d52c33bf78..736234687a 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Label/LabelDetail.js b/src/elements/Label/LabelDetail.js
index 64a045607f..e68f41b42e 100644
--- a/src/elements/Label/LabelDetail.js
+++ b/src/elements/Label/LabelDetail.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Label/LabelGroup.js b/src/elements/Label/LabelGroup.js
index d790595d92..ff50f7858d 100644
--- a/src/elements/Label/LabelGroup.js
+++ b/src/elements/Label/LabelGroup.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index 29c90ba26c..cb134c41ee 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js
index 61ed2ba01a..dd2192e43d 100644
--- a/src/elements/List/ListContent.js
+++ b/src/elements/List/ListContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/List/ListDescription.js b/src/elements/List/ListDescription.js
index c4c0557e56..44e268af40 100644
--- a/src/elements/List/ListDescription.js
+++ b/src/elements/List/ListDescription.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/List/ListHeader.js b/src/elements/List/ListHeader.js
index d67ae15b58..505dd8ddd1 100644
--- a/src/elements/List/ListHeader.js
+++ b/src/elements/List/ListHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/List/ListIcon.js b/src/elements/List/ListIcon.js
index 64d91edaac..bfa3697cab 100644
--- a/src/elements/List/ListIcon.js
+++ b/src/elements/List/ListIcon.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { createShorthandFactory, getUnhandledProps, SUI, useVerticalAlignProp } from '../../lib'
import Icon from '../Icon/Icon'
diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js
index 9e7e3244b2..9723d304a5 100644
--- a/src/elements/List/ListList.js
+++ b/src/elements/List/ListList.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Loader/Loader.js b/src/elements/Loader/Loader.js
index 87e1a08491..4246854cc1 100644
--- a/src/elements/Loader/Loader.js
+++ b/src/elements/Loader/Loader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Placeholder/Placeholder.js b/src/elements/Placeholder/Placeholder.js
index d3df48b785..5b75e1e585 100644
--- a/src/elements/Placeholder/Placeholder.js
+++ b/src/elements/Placeholder/Placeholder.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Placeholder/PlaceholderHeader.js b/src/elements/Placeholder/PlaceholderHeader.js
index 80fc8f6990..49039714fc 100644
--- a/src/elements/Placeholder/PlaceholderHeader.js
+++ b/src/elements/Placeholder/PlaceholderHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js
index 7413d4ee55..e61f7c6437 100644
--- a/src/elements/Placeholder/PlaceholderImage.js
+++ b/src/elements/Placeholder/PlaceholderImage.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { customPropTypes, getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
diff --git a/src/elements/Placeholder/PlaceholderLine.js b/src/elements/Placeholder/PlaceholderLine.js
index 7f8c153614..883de8db8d 100644
--- a/src/elements/Placeholder/PlaceholderLine.js
+++ b/src/elements/Placeholder/PlaceholderLine.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/elements/Placeholder/PlaceholderParagraph.js b/src/elements/Placeholder/PlaceholderParagraph.js
index 208a6baa68..bcf5c6773a 100644
--- a/src/elements/Placeholder/PlaceholderParagraph.js
+++ b/src/elements/Placeholder/PlaceholderParagraph.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index 6904fa8407..641d56932a 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Reveal/Reveal.js b/src/elements/Reveal/Reveal.js
index 14fe502083..6010e1ada7 100644
--- a/src/elements/Reveal/Reveal.js
+++ b/src/elements/Reveal/Reveal.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Reveal/RevealContent.js b/src/elements/Reveal/RevealContent.js
index 0caac64f9b..96c07abd94 100644
--- a/src/elements/Reveal/RevealContent.js
+++ b/src/elements/Reveal/RevealContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index d0a76652dd..854b7f00dc 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js
index 8efff38bbc..bc7f871370 100644
--- a/src/elements/Segment/SegmentGroup.js
+++ b/src/elements/Segment/SegmentGroup.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Segment/SegmentInline.js b/src/elements/Segment/SegmentInline.js
index 4b524e3280..78f7b394d9 100644
--- a/src/elements/Segment/SegmentInline.js
+++ b/src/elements/Segment/SegmentInline.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index 85e72bfd38..4cc17ed1c2 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js
index 55968739c4..5c0a3b547b 100644
--- a/src/elements/Step/StepContent.js
+++ b/src/elements/Step/StepContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Step/StepDescription.js b/src/elements/Step/StepDescription.js
index 2d0e6224e2..eaf4866c55 100644
--- a/src/elements/Step/StepDescription.js
+++ b/src/elements/Step/StepDescription.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js
index 3cce7faf0a..4247bb00c5 100644
--- a/src/elements/Step/StepGroup.js
+++ b/src/elements/Step/StepGroup.js
@@ -1,7 +1,7 @@
import _ from 'lodash'
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/elements/Step/StepTitle.js b/src/elements/Step/StepTitle.js
index 7a27872b8d..69321878a4 100644
--- a/src/elements/Step/StepTitle.js
+++ b/src/elements/Step/StepTitle.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/lib/ModernAutoControlledComponent.js b/src/lib/ModernAutoControlledComponent.js
index 90fd7c4f6a..9aeec29e2b 100644
--- a/src/lib/ModernAutoControlledComponent.js
+++ b/src/lib/ModernAutoControlledComponent.js
@@ -24,7 +24,7 @@
* hoisted and exposed by the HOC.
*/
import _ from 'lodash'
-import React from 'react'
+import * as React from 'react'
const getDefaultPropName = (prop) => `default${prop[0].toUpperCase() + prop.slice(1)}`
diff --git a/src/lib/hooks/useClassNamesOnNode.js b/src/lib/hooks/useClassNamesOnNode.js
index 479142ee91..224a501ced 100644
--- a/src/lib/hooks/useClassNamesOnNode.js
+++ b/src/lib/hooks/useClassNamesOnNode.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
import isRefObject from '../isRefObject'
import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
diff --git a/src/lib/hooks/useIsomorphicLayoutEffect.js b/src/lib/hooks/useIsomorphicLayoutEffect.js
index 4b80dac212..9f21adc7d6 100644
--- a/src/lib/hooks/useIsomorphicLayoutEffect.js
+++ b/src/lib/hooks/useIsomorphicLayoutEffect.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
import isBrowser from '../isBrowser'
// useLayoutEffect() produces a warning with SSR rendering
diff --git a/src/modules/Accordion/Accordion.js b/src/modules/Accordion/Accordion.js
index 4d76ecc440..ab6bdd220c 100644
--- a/src/modules/Accordion/Accordion.js
+++ b/src/modules/Accordion/Accordion.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getUnhandledProps, useKeyOnly } from '../../lib'
import AccordionAccordion from './AccordionAccordion'
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index f2ba942e7f..f99285ee5d 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Accordion/AccordionContent.js b/src/modules/Accordion/AccordionContent.js
index 3fae3cc6f3..9ab53498f6 100644
--- a/src/modules/Accordion/AccordionContent.js
+++ b/src/modules/Accordion/AccordionContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index 1432a15d61..34405b861e 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index b2a80d0360..d183f01feb 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
createHTMLLabel,
diff --git a/src/modules/Dimmer/Dimmer.js b/src/modules/Dimmer/Dimmer.js
index 0d2b55d079..307ef87da2 100644
--- a/src/modules/Dimmer/Dimmer.js
+++ b/src/modules/Dimmer/Dimmer.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { createShorthandFactory, getUnhandledProps, isBrowser } from '../../lib'
import Portal from '../../addons/Portal'
diff --git a/src/modules/Dimmer/DimmerDimmable.js b/src/modules/Dimmer/DimmerDimmable.js
index 2b3cfbb11b..c5640daa94 100644
--- a/src/modules/Dimmer/DimmerDimmable.js
+++ b/src/modules/Dimmer/DimmerDimmable.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index aeb9d09aad..636a0370d6 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Dropdown/DropdownDivider.js b/src/modules/Dropdown/DropdownDivider.js
index 4ffa5a3d82..4c88ffc608 100644
--- a/src/modules/Dropdown/DropdownDivider.js
+++ b/src/modules/Dropdown/DropdownDivider.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/modules/Dropdown/DropdownHeader.js b/src/modules/Dropdown/DropdownHeader.js
index c91bf12c2e..36e8e974d0 100644
--- a/src/modules/Dropdown/DropdownHeader.js
+++ b/src/modules/Dropdown/DropdownHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 5722d0b767..a2e85e900f 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index e77535e2c8..d894a24d75 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 78bb7c93c7..9917e81a53 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { createShorthandFactory, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/modules/Dropdown/DropdownText.js b/src/modules/Dropdown/DropdownText.js
index 17e29bc4de..ff0ebe8e00 100644
--- a/src/modules/Dropdown/DropdownText.js
+++ b/src/modules/Dropdown/DropdownText.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Dropdown/utils/getMenuOptions.js b/src/modules/Dropdown/utils/getMenuOptions.js
index 1b3751df3b..6b69107c73 100644
--- a/src/modules/Dropdown/utils/getMenuOptions.js
+++ b/src/modules/Dropdown/utils/getMenuOptions.js
@@ -1,5 +1,5 @@
import _ from 'lodash'
-import React from 'react'
+import * as React from 'react'
// There are times when we need to calculate the options based on a value
// that hasn't yet been persisted to state.
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index ebcaaa7c10..2854feebc9 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index dbd1b4679e..eb89025712 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import shallowEqual from 'shallowequal'
import {
diff --git a/src/modules/Modal/ModalActions.js b/src/modules/Modal/ModalActions.js
index b401e6aa73..583bcb7091 100644
--- a/src/modules/Modal/ModalActions.js
+++ b/src/modules/Modal/ModalActions.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index 4f04805dae..b8f50b8140 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Modal/ModalDescription.js b/src/modules/Modal/ModalDescription.js
index 691f1d56e8..0f0bc2d7a6 100644
--- a/src/modules/Modal/ModalDescription.js
+++ b/src/modules/Modal/ModalDescription.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/modules/Modal/ModalDimmer.js b/src/modules/Modal/ModalDimmer.js
index bad1132c16..aa8473316c 100644
--- a/src/modules/Modal/ModalDimmer.js
+++ b/src/modules/Modal/ModalDimmer.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Modal/ModalHeader.js b/src/modules/Modal/ModalHeader.js
index 6e0822f247..e9daf026be 100644
--- a/src/modules/Modal/ModalHeader.js
+++ b/src/modules/Modal/ModalHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 1237cb0d07..2c3c9ba4f2 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -2,7 +2,7 @@ import EventStack from '@semantic-ui-react/event-stack'
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { Popper } from 'react-popper'
import shallowEqual from 'shallowequal'
diff --git a/src/modules/Popup/PopupContent.js b/src/modules/Popup/PopupContent.js
index 167cef2c44..f507e14c13 100644
--- a/src/modules/Popup/PopupContent.js
+++ b/src/modules/Popup/PopupContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Popup/PopupHeader.js b/src/modules/Popup/PopupHeader.js
index 8eff4c7fda..8847d01aec 100644
--- a/src/modules/Popup/PopupHeader.js
+++ b/src/modules/Popup/PopupHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 7c20634714..9eae360699 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index c41a299797..0f1274dbea 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
getComponentType,
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 1d87534b71..e21cb050fa 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
import keyboardKey from 'keyboard-key'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 145cc8f22a..5e5e0ed5b8 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
import keyboardKey from 'keyboard-key'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import shallowEqual from 'shallowequal'
import {
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 218da2083f..6f31c3c6b6 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Search/SearchCategoryLayout.js b/src/modules/Search/SearchCategoryLayout.js
index b83dee804c..83c8d3c6e0 100644
--- a/src/modules/Search/SearchCategoryLayout.js
+++ b/src/modules/Search/SearchCategoryLayout.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
function SearchCategoryLayout(props) {
const { categoryContent, resultsContent } = props
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index 7bba25b50a..fe486c6535 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
createHTMLImage,
diff --git a/src/modules/Search/SearchResults.js b/src/modules/Search/SearchResults.js
index 5c44b66e31..67d31f7c83 100644
--- a/src/modules/Search/SearchResults.js
+++ b/src/modules/Search/SearchResults.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 0e6c470bdc..0489850b56 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -2,7 +2,7 @@ import { EventListener, documentRef } from '@fluentui/react-component-event-list
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Sidebar/SidebarPushable.js b/src/modules/Sidebar/SidebarPushable.js
index b8f5dd8b0c..48068f797b 100644
--- a/src/modules/Sidebar/SidebarPushable.js
+++ b/src/modules/Sidebar/SidebarPushable.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/modules/Sidebar/SidebarPusher.js b/src/modules/Sidebar/SidebarPusher.js
index ffc791dee5..7519c0b8ec 100644
--- a/src/modules/Sidebar/SidebarPusher.js
+++ b/src/modules/Sidebar/SidebarPusher.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index 3a30afa4c4..5fc0709678 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
customPropTypes,
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index 03ef505cea..cbbac2bf46 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
customPropTypes,
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 0e1bdbad45..c74c55be7d 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 4708820aba..f6e128cb19 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -1,6 +1,6 @@
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
getComponentType,
diff --git a/src/modules/Transition/utils/wrapChild.js b/src/modules/Transition/utils/wrapChild.js
index c07eacb975..0ec23022dd 100644
--- a/src/modules/Transition/utils/wrapChild.js
+++ b/src/modules/Transition/utils/wrapChild.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
import Transition from '../Transition'
/**
diff --git a/src/views/Advertisement/Advertisement.js b/src/views/Advertisement/Advertisement.js
index 30c35845d5..c018e09a41 100644
--- a/src/views/Advertisement/Advertisement.js
+++ b/src/views/Advertisement/Advertisement.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index f2763c3285..aa6c54a202 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js
index ecb0a3afe6..4c52f453c2 100644
--- a/src/views/Card/CardContent.js
+++ b/src/views/Card/CardContent.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Card/CardDescription.js b/src/views/Card/CardDescription.js
index 0de11e2a4b..3a93a180b4 100644
--- a/src/views/Card/CardDescription.js
+++ b/src/views/Card/CardDescription.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js
index 7263a66e8c..54e8983513 100644
--- a/src/views/Card/CardGroup.js
+++ b/src/views/Card/CardGroup.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Card/CardHeader.js b/src/views/Card/CardHeader.js
index bf41e51cfe..2cb948b7c7 100644
--- a/src/views/Card/CardHeader.js
+++ b/src/views/Card/CardHeader.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Card/CardMeta.js b/src/views/Card/CardMeta.js
index d45b075fac..8e3f2b4d7b 100644
--- a/src/views/Card/CardMeta.js
+++ b/src/views/Card/CardMeta.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js
index 59db4e52df..fc44689df4 100644
--- a/src/views/Comment/Comment.js
+++ b/src/views/Comment/Comment.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index 82eae2cc95..ee67edb41b 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Comment/CommentActions.js b/src/views/Comment/CommentActions.js
index c1cca85fc9..0899b8be49 100644
--- a/src/views/Comment/CommentActions.js
+++ b/src/views/Comment/CommentActions.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/views/Comment/CommentAuthor.js b/src/views/Comment/CommentAuthor.js
index 01b3747c19..c351abe16c 100644
--- a/src/views/Comment/CommentAuthor.js
+++ b/src/views/Comment/CommentAuthor.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/views/Comment/CommentAvatar.js b/src/views/Comment/CommentAvatar.js
index dc5aee78d1..7e6e1b854f 100644
--- a/src/views/Comment/CommentAvatar.js
+++ b/src/views/Comment/CommentAvatar.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
createHTMLImage,
diff --git a/src/views/Comment/CommentContent.js b/src/views/Comment/CommentContent.js
index df72aeb471..533061ce6f 100644
--- a/src/views/Comment/CommentContent.js
+++ b/src/views/Comment/CommentContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
index 2eea6998e6..0e8c4e2a7b 100644
--- a/src/views/Comment/CommentGroup.js
+++ b/src/views/Comment/CommentGroup.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Comment/CommentMetadata.js b/src/views/Comment/CommentMetadata.js
index 92fee6d069..651d80c648 100644
--- a/src/views/Comment/CommentMetadata.js
+++ b/src/views/Comment/CommentMetadata.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/views/Comment/CommentText.js b/src/views/Comment/CommentText.js
index 17f2bbd895..dc579269ed 100644
--- a/src/views/Comment/CommentText.js
+++ b/src/views/Comment/CommentText.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/views/Feed/Feed.js b/src/views/Feed/Feed.js
index c3a35703b1..15efd4cb03 100644
--- a/src/views/Feed/Feed.js
+++ b/src/views/Feed/Feed.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
import FeedContent from './FeedContent'
diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 8874ae80a8..d675e4c26d 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Feed/FeedDate.js b/src/views/Feed/FeedDate.js
index e4a836d355..ae5ec5064d 100644
--- a/src/views/Feed/FeedDate.js
+++ b/src/views/Feed/FeedDate.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index e4f971bddc..948db490aa 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { createShorthand, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
import FeedContent from './FeedContent'
diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js
index 50f51a8ce8..6ea83d660c 100644
--- a/src/views/Feed/FeedExtra.js
+++ b/src/views/Feed/FeedExtra.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js
index 56fd9acd6b..0ff279da89 100644
--- a/src/views/Feed/FeedLabel.js
+++ b/src/views/Feed/FeedLabel.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index b5e4c8bf2d..72ca8e31d0 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
import Icon from '../../elements/Icon'
diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js
index b0c5d0f222..b658be709e 100644
--- a/src/views/Feed/FeedMeta.js
+++ b/src/views/Feed/FeedMeta.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index 2be1f0c4b3..739e607366 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index 10866e8720..efe58fb010 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index 41f37257a6..5683de5aa8 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
import ItemContent from './ItemContent'
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index add8a28dd4..75d4963727 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
index 8e5082c97b..372288ef89 100644
--- a/src/views/Item/ItemDescription.js
+++ b/src/views/Item/ItemDescription.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
index 3402f02f3a..abf99828ae 100644
--- a/src/views/Item/ItemExtra.js
+++ b/src/views/Item/ItemExtra.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index 33269ecce3..dc0a28c164 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
index 4a841b8a50..8cb777a8ba 100644
--- a/src/views/Item/ItemHeader.js
+++ b/src/views/Item/ItemHeader.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Item/ItemImage.js b/src/views/Item/ItemImage.js
index 55854ec66e..f3fba7b5a2 100644
--- a/src/views/Item/ItemImage.js
+++ b/src/views/Item/ItemImage.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
import { createShorthandFactory, getUnhandledProps } from '../../lib'
import Image from '../../elements/Image'
diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
index 73d347d9d8..349605e9e9 100644
--- a/src/views/Item/ItemMeta.js
+++ b/src/views/Item/ItemMeta.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index 05b910d017..698904ec2e 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index c85df42892..eea559981e 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -1,7 +1,7 @@
import cx from 'clsx'
import _ from 'lodash'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index b1134cd185..297ea7a104 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 2ce9eda25a..7654c5a503 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -1,6 +1,6 @@
import cx from 'clsx'
import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
import {
childrenUtils,
diff --git a/test/specs/addons/Portal/Portal-test.js b/test/specs/addons/Portal/Portal-test.js
index 099ce9d897..c79c139fd2 100644
--- a/test/specs/addons/Portal/Portal-test.js
+++ b/test/specs/addons/Portal/Portal-test.js
@@ -281,7 +281,19 @@ describe('Portal', () => {
describe('openOnTriggerClick', () => {
it('defaults to true', () => {
- Portal.defaultProps.openOnTriggerClick.should.equal(true)
+ const onTriggerClick = sandbox.spy()
+ const trigger =
+
+ wrapperMount(
+
+
+ ,
+ )
+ wrapper.should.not.have.descendants(PortalInner)
+
+ wrapper.find('button').simulate('click')
+ wrapper.should.have.descendants(PortalInner)
+ onTriggerClick.should.have.been.calledOnce()
})
it('does not open the portal on trigger click when false', () => {
diff --git a/yarn.lock b/yarn.lock
index 948677089c..d0fdd03b41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3449,6 +3449,11 @@ babel-plugin-transform-function-bind@^6.22.0:
babel-plugin-syntax-function-bind "^6.8.0"
babel-runtime "^6.22.0"
+babel-plugin-transform-next-use-client@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/babel-plugin-transform-next-use-client/-/babel-plugin-transform-next-use-client-1.1.1.tgz#648f3b3de16a09b490f5d0bc34143516ef91a4df"
+ integrity sha512-qqyurXN5ZWP7kqmgzzXaEgF0fCi8d72tE+wCQwSCrjfN+LC0fI1+ejhNE+DtVECY1EvYkUoO0tcr9izwC9xexg==
+
babel-plugin-transform-object-rest-spread@^6.22.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"