chore: add "use client" directive in components where it's needed (#4452)

Author: layershifter

.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) && [

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",

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'

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,

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

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'

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'

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'

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'
 
 /**

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'