chore: add "use client" directive in components where it's needed

.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'

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'
 

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'
 

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'

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'

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,

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,

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'

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'

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'

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'

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,

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'

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'

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'

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'

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,

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,

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,

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,

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'
 

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,

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'
 

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,

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'
 

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,

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,

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,

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,

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'
 

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,

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'

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,

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'

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,

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,