From ff22fc883b5705bab766bc8106e0968a70673fe4 Mon Sep 17 00:00:00 2001
From: tourman <8002615@gmail.com>
Date: Mon, 11 Dec 2023 15:08:16 +0000
Subject: [PATCH 01/17] 4426: parse.js + eslint rules update

transform.js (WIP)

transform.js (WIP)

transform.js: get all files (WIP)

transform.js: const defaultProps (WIP)

transform.js: function + eslint rules (WIP)
---
 .eslintrc    |  8 ++++++++
 transform.js | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 transform.js

diff --git a/.eslintrc b/.eslintrc
index 151942c8b8..208d9aa5aa 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,6 +6,14 @@
     "browser": true
   },
   "rules": {
+    "no-use-before-define": [
+      "error",
+      {
+        "functions": false,
+        "classes": true,
+        "variables": true
+      }
+    ],
     "newline-per-chained-call": "off",
     "class-methods-use-this": "off",
     "consistent-return": "off",
diff --git a/transform.js b/transform.js
new file mode 100644
index 0000000000..9f1fe41bb9
--- /dev/null
+++ b/transform.js
@@ -0,0 +1,58 @@
+const { execSync } = require('child_process')
+const { readFile, writeFile } = require('fs/promises')
+
+async function defaultProps(code) {
+  const lines = code.split('\n')
+  const defaultPropsBeginIndex = lines.findIndex((line) => line.includes('.defaultProps = {'))
+  const defaultPropsEndIndex =
+    lines.slice(defaultPropsBeginIndex).findIndex((line) => line === '}') + defaultPropsBeginIndex
+  const componentName = lines[defaultPropsBeginIndex].match(/^(\S+)\.defaultProps/)[1]
+  if (!componentName) {
+    return code
+  }
+  lines[defaultPropsBeginIndex] = lines[defaultPropsBeginIndex].replace(
+    /^\S+\.defaultProps\s+=/,
+    'function getDefaultProps() { return',
+  )
+  lines[defaultPropsEndIndex] = '}}'
+  const functionExpressionIndex = lines.findIndex(
+    (line) => line.startsWith(`const ${componentName} =`) && line.includes('forwardRef(function'),
+  )
+  if (functionExpressionIndex === -1) {
+    return code
+  }
+  lines[functionExpressionIndex] = lines[functionExpressionIndex].replace('props', 'partialProps')
+  lines.splice(
+    functionExpressionIndex + 1,
+    0,
+    `const props = defaults(partialProps, getDefaultProps())`,
+  )
+  lines.unshift('import { defaults } from "lodash"')
+  const result = lines.join('\n')
+  return result
+}
+
+;(async function main() {
+  // const paths = ['./src/collections/Message/MessageItem.js']
+  const paths = execSync('git ls-files | grep -P js$ | xargs grep -lF ".defaultProps ="')
+    .toString()
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line)
+  const results = await Promise.all(
+    paths.map((path) =>
+      Promise.resolve()
+        .then(() => readFile(path, 'utf8'))
+        .then(defaultProps)
+        .then((code) => writeFile(path, code, 'utf8'))
+        .then(() => {})
+        .catch((error) => ({ path, error })),
+    ),
+  )
+  const errorResutls = results.filter((payload) => payload).filter(({ error }) => error)
+  if (errorResutls.length) {
+    // eslint-disable-next-line no-console
+    console.error(errorResutls)
+  }
+  execSync(`prettier --write ${paths.join(' ')}`)
+})()

From bf72914f9c1dd76fecd9a1b5b3842d9e459d4253 Mon Sep 17 00:00:00 2001
From: tourman <8002615@gmail.com>
Date: Mon, 11 Dec 2023 15:58:30 +0000
Subject: [PATCH 02/17] 4426: component changes

---
 src/addons/Confirm/Confirm.js               | 18 ++++---
 src/addons/Pagination/Pagination.js         | 52 +++++++++++----------
 src/addons/Radio/Radio.js                   | 10 ++--
 src/addons/TextArea/TextArea.js             | 14 ++++--
 src/collections/Form/Form.js                | 12 +++--
 src/collections/Form/FormDropdown.js        | 12 +++--
 src/collections/Form/FormInput.js           | 12 +++--
 src/collections/Form/FormRadio.js           | 12 +++--
 src/collections/Form/FormSelect.js          | 12 +++--
 src/collections/Form/FormTextArea.js        | 12 +++--
 src/collections/Message/MessageItem.js      | 10 ++--
 src/collections/Message/MessageList.js      | 12 +++--
 src/collections/Table/Table.js              | 12 +++--
 src/collections/Table/TableBody.js          | 10 ++--
 src/collections/Table/TableCell.js          | 12 +++--
 src/collections/Table/TableFooter.js        | 10 ++--
 src/collections/Table/TableHeader.js        | 10 ++--
 src/collections/Table/TableHeaderCell.js    | 10 ++--
 src/collections/Table/TableRow.js           | 14 ++++--
 src/elements/Button/Button.js               | 14 ++++--
 src/elements/Icon/IconGroup.js              | 12 +++--
 src/elements/Image/Image.js                 | 14 ++++--
 src/elements/Input/Input.js                 | 12 +++--
 src/modules/Accordion/AccordionAccordion.js | 12 +++--
 src/modules/Checkbox/Checkbox.js            | 12 +++--
 src/modules/Dropdown/DropdownSearchInput.js | 16 ++++---
 src/modules/Modal/Modal.js                  | 20 ++++----
 src/modules/Popup/Popup.js                  | 22 +++++----
 src/modules/Rating/Rating.js                | 14 ++++--
 src/modules/Rating/RatingIcon.js            | 12 +++--
 src/modules/Search/SearchCategory.js        | 12 +++--
 src/modules/Search/SearchResult.js          | 12 +++--
 src/modules/Sticky/Sticky.js                | 18 ++++---
 src/modules/Tab/Tab.js                      | 16 ++++---
 src/modules/Tab/TabPane.js                  | 12 +++--
 src/modules/Transition/TransitionGroup.js   | 16 ++++---
 src/views/Comment/CommentAction.js          | 10 ++--
 src/views/Feed/FeedLike.js                  | 10 ++--
 src/views/Feed/FeedUser.js                  | 10 ++--
 39 files changed, 349 insertions(+), 193 deletions(-)

diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 2b3e7c004e..c9a65beb3d 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import Modal from '../../modules/Modal'
  * A Confirm modal gives the user a choice to confirm or cancel an action.
  * @see Modal
  */
-const Confirm = React.forwardRef(function (props, ref) {
+const Confirm = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { cancelButton, confirmButton, content, header, open, size } = props
   const rest = getUnhandledProps(Confirm, props)
 
@@ -96,11 +98,13 @@ Confirm.propTypes = {
   size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
 }
 
-Confirm.defaultProps = {
-  cancelButton: 'Cancel',
-  confirmButton: 'OK',
-  content: 'Are you sure?',
-  size: 'small',
+function getDefaultProps() {
+  return {
+    cancelButton: 'Cancel',
+    confirmButton: 'OK',
+    content: 'Are you sure?',
+    size: 'small',
+  }
 }
 
 export default Confirm
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index 078389ab26..1633a08896 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -14,7 +15,8 @@ import PaginationItem from './PaginationItem'
 /**
  * A component to render a pagination.
  */
-const Pagination = React.forwardRef(function (props, ref) {
+const Pagination = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     'aria-label': ariaLabel,
     boundaryRange,
@@ -129,28 +131,30 @@ Pagination.propTypes = {
   totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
-Pagination.defaultProps = {
-  'aria-label': 'Pagination Navigation',
-  boundaryRange: 1,
-  ellipsisItem: '...',
-  firstItem: {
-    'aria-label': 'First item',
-    content: '«',
-  },
-  lastItem: {
-    'aria-label': 'Last item',
-    content: '»',
-  },
-  nextItem: {
-    'aria-label': 'Next item',
-    content: '⟩',
-  },
-  pageItem: {},
-  prevItem: {
-    'aria-label': 'Previous item',
-    content: '⟨',
-  },
-  siblingRange: 1,
+function getDefaultProps() {
+  return {
+    'aria-label': 'Pagination Navigation',
+    boundaryRange: 1,
+    ellipsisItem: '...',
+    firstItem: {
+      'aria-label': 'First item',
+      content: '«',
+    },
+    lastItem: {
+      'aria-label': 'Last item',
+      content: '»',
+    },
+    nextItem: {
+      'aria-label': 'Next item',
+      content: '⟩',
+    },
+    pageItem: {},
+    prevItem: {
+      'aria-label': 'Previous item',
+      content: '⟨',
+    },
+    siblingRange: 1,
+  }
 }
 
 Pagination.Item = PaginationItem
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index 0159880db2..c7e902d8ed 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import React from 'react'
 
 import { getUnhandledProps } from '../../lib'
@@ -9,7 +10,8 @@ import Checkbox from '../../modules/Checkbox'
  * @see Checkbox
  * @see Form
  */
-const Radio = React.forwardRef(function (props, ref) {
+const Radio = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { slider, toggle, type } = props
 
   const rest = getUnhandledProps(Radio, props)
@@ -33,8 +35,10 @@ Radio.propTypes = {
   type: Checkbox.propTypes.type,
 }
 
-Radio.defaultProps = {
-  type: 'radio',
+function getDefaultProps() {
+  return {
+    type: 'radio',
+  }
 }
 
 export default Radio
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index d6b0537f02..df76cedf1d 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,7 +9,8 @@ import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
-const TextArea = React.forwardRef(function (props, ref) {
+const TextArea = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { rows, value } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
@@ -65,9 +67,11 @@ TextArea.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-TextArea.defaultProps = {
-  as: 'textarea',
-  rows: 3,
+function getDefaultProps() {
+  return {
+    as: 'textarea',
+    rows: 3,
+  }
 }
 
 export default TextArea
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 6c1facc274..fff8f54d9a 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -24,7 +25,8 @@ import FormTextArea from './FormTextArea'
  * @see Radio
  * @see Select
  */
-const Form = React.forwardRef(function (props, ref) {
+const Form = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     action,
     children,
@@ -117,8 +119,10 @@ Form.propTypes = {
   widths: PropTypes.oneOf(['equal']),
 }
 
-Form.defaultProps = {
-  as: 'form',
+function getDefaultProps() {
+  return {
+    as: 'form',
+  }
 }
 
 Form.Field = FormField
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index aeeb745314..fc8afffcf0 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import FormField from './FormField'
  * @see Dropdown
  * @see Form
  */
-const FormDropdown = React.forwardRef(function (props, ref) {
+const FormDropdown = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { control } = props
   const rest = getUnhandledProps(FormDropdown, props)
   const ElementType = getElementType(FormDropdown, props)
@@ -27,9 +29,11 @@ FormDropdown.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormDropdown.defaultProps = {
-  as: FormField,
-  control: Dropdown,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: Dropdown,
+  }
 }
 
 export default FormDropdown
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index bd5468a81e..97ff3aa862 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import FormField from './FormField'
  * @see Form
  * @see Input
  */
-const FormInput = React.forwardRef(function (props, ref) {
+const FormInput = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { control } = props
   const rest = getUnhandledProps(FormInput, props)
   const ElementType = getElementType(FormInput, props)
@@ -27,9 +29,11 @@ FormInput.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormInput.defaultProps = {
-  as: FormField,
-  control: Input,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: Input,
+  }
 }
 
 export default FormInput
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 82dd3bfc64..10f78dc627 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import FormField from './FormField'
  * @see Form
  * @see Radio
  */
-const FormRadio = React.forwardRef(function (props, ref) {
+const FormRadio = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { control } = props
   const rest = getUnhandledProps(FormRadio, props)
   const ElementType = getElementType(FormRadio, props)
@@ -27,9 +29,11 @@ FormRadio.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormRadio.defaultProps = {
-  as: FormField,
-  control: Radio,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: Radio,
+  }
 }
 
 export default FormRadio
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index 30c6d3f185..b21cfe7efd 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -11,7 +12,8 @@ import FormField from './FormField'
  * @see Form
  * @see Select
  */
-const FormSelect = React.forwardRef(function (props, ref) {
+const FormSelect = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { control, options } = props
   const rest = getUnhandledProps(FormSelect, props)
   const ElementType = getElementType(FormSelect, props)
@@ -31,9 +33,11 @@ FormSelect.propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,
 }
 
-FormSelect.defaultProps = {
-  as: FormField,
-  control: Select,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: Select,
+  }
 }
 
 export default FormSelect
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index 2395749970..01969d10fa 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import FormField from './FormField'
  * @see Form
  * @see TextArea
  */
-const FormTextArea = React.forwardRef(function (props, ref) {
+const FormTextArea = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { control } = props
   const rest = getUnhandledProps(FormTextArea, props)
   const ElementType = getElementType(FormTextArea, props)
@@ -27,9 +29,11 @@ FormTextArea.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormTextArea.defaultProps = {
-  as: FormField,
-  control: TextArea,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: TextArea,
+  }
 }
 
 export default FormTextArea
diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index 73cfe5af42..e05a4d5e30 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -13,7 +14,8 @@ import {
 /**
  * A message list can contain an item.
  */
-const MessageItem = React.forwardRef(function (props, ref) {
+const MessageItem = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { children, className, content } = props
 
   const classes = cx('content', className)
@@ -42,8 +44,10 @@ MessageItem.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-MessageItem.defaultProps = {
-  as: 'li',
+function getDefaultProps() {
+  return {
+    as: 'li',
+  }
 }
 
 MessageItem.create = createShorthandFactory(MessageItem, (content) => ({ content }))
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index 7262f0ad58..e8f5933762 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -15,7 +16,8 @@ import MessageItem from './MessageItem'
 /**
  * A message can contain a list of items.
  */
-const MessageList = React.forwardRef(function (props, ref) {
+const MessageList = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { children, className, items } = props
 
   const classes = cx('list', className)
@@ -44,8 +46,10 @@ MessageList.propTypes = {
   items: customPropTypes.collectionShorthand,
 }
 
-MessageList.defaultProps = {
-  as: 'ul',
+function getDefaultProps() {
+  return {
+    as: 'ul',
+  }
 }
 
 MessageList.create = createShorthandFactory(MessageList, (val) => ({ items: val }))
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index d9bf410c1a..d3caf35f39 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -25,7 +26,8 @@ import TableRow from './TableRow'
 /**
  * A table displays a collections of data grouped into rows.
  */
-const Table = React.forwardRef(function (props, ref) {
+const Table = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     attached,
     basic,
@@ -116,8 +118,10 @@ const Table = React.forwardRef(function (props, ref) {
 })
 
 Table.displayName = 'Table'
-Table.defaultProps = {
-  as: 'table',
+function getDefaultProps() {
+  return {
+    as: 'table',
+  }
 }
 
 Table.propTypes = {
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index 605512e7d4..f383e54dcd 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -1,10 +1,12 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { getElementType, getUnhandledProps } from '../../lib'
 
-const TableBody = React.forwardRef(function (props, ref) {
+const TableBody = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { children, className } = props
   const classes = cx(className)
   const rest = getUnhandledProps(TableBody, props)
@@ -18,8 +20,10 @@ const TableBody = React.forwardRef(function (props, ref) {
 })
 
 TableBody.displayName = 'TableBody'
-TableBody.defaultProps = {
-  as: 'tbody',
+function getDefaultProps() {
+  return {
+    as: 'tbody',
+  }
 }
 
 TableBody.propTypes = {
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index dcb008c3d8..99d9c3b3ac 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -20,7 +21,8 @@ import Icon from '../../elements/Icon'
 /**
  * A table row can have cells.
  */
-const TableCell = React.forwardRef(function (props, ref) {
+const TableCell = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     active,
     children,
@@ -74,8 +76,10 @@ const TableCell = React.forwardRef(function (props, ref) {
   )
 })
 
-TableCell.defaultProps = {
-  as: 'td',
+function getDefaultProps() {
+  return {
+    as: 'td',
+  }
 }
 
 TableCell.displayName = 'TableCell'
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index c5ff0b8e6b..676f47f8a1 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -7,7 +8,8 @@ import TableHeader from './TableHeader'
 /**
  * A table can have a footer.
  */
-const TableFooter = React.forwardRef(function (props, ref) {
+const TableFooter = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { as } = props
   const rest = getUnhandledProps(TableFooter, props)
 
@@ -20,8 +22,10 @@ TableFooter.propTypes = {
   as: PropTypes.elementType,
 }
 
-TableFooter.defaultProps = {
-  as: 'tfoot',
+function getDefaultProps() {
+  return {
+    as: 'tfoot',
+  }
 }
 
 export default TableFooter
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index 4c7f9fe284..ef663909a2 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -13,7 +14,8 @@ import {
 /**
  * A table can have a header.
  */
-const TableHeader = React.forwardRef(function (props, ref) {
+const TableHeader = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { children, className, content, fullWidth } = props
   const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)
@@ -26,8 +28,10 @@ const TableHeader = React.forwardRef(function (props, ref) {
   )
 })
 
-TableHeader.defaultProps = {
-  as: 'thead',
+function getDefaultProps() {
+  return {
+    as: 'thead',
+  }
 }
 
 TableHeader.displayName = 'TableHeader'
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index a4a23b2488..bcd0f86eba 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -8,7 +9,8 @@ import TableCell from './TableCell'
 /**
  * A table can have a header cell.
  */
-const TableHeaderCell = React.forwardRef(function (props, ref) {
+const TableHeaderCell = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { as, className, sorted } = props
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
   const rest = getUnhandledProps(TableHeaderCell, props)
@@ -28,8 +30,10 @@ TableHeaderCell.propTypes = {
   sorted: PropTypes.oneOf(['ascending', 'descending']),
 }
 
-TableHeaderCell.defaultProps = {
-  as: 'th',
+function getDefaultProps() {
+  return {
+    as: 'th',
+  }
 }
 
 export default TableHeaderCell
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 5e7e83d1d5..850f79b4db 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -19,7 +20,8 @@ import TableCell from './TableCell'
 /**
  * A table can have rows.
  */
-const TableRow = React.forwardRef(function (props, ref) {
+const TableRow = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     active,
     cellAs,
@@ -64,9 +66,11 @@ const TableRow = React.forwardRef(function (props, ref) {
   )
 })
 
-TableRow.defaultProps = {
-  as: 'tr',
-  cellAs: 'td',
+function getDefaultProps() {
+  return {
+    as: 'tr',
+    cellAs: 'td',
+  }
 }
 
 TableRow.displayName = 'TableRow'
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index f2fd188de6..4317a90bf7 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -70,7 +71,8 @@ function hasIconClass(props) {
  * @see Icon
  * @see Label
  */
-const Button = React.forwardRef(function (props, ref) {
+const Button = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     active,
     animated,
@@ -96,7 +98,7 @@ const Button = React.forwardRef(function (props, ref) {
     secondary,
     size,
     toggle,
-    type
+    type,
   } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
@@ -315,8 +317,10 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
 }
 
-Button.defaultProps = {
-  as: 'button',
+function getDefaultProps() {
+  return {
+    as: 'button',
+  }
 }
 
 Button.Content = ButtonContent
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 2c17cfbf36..42cf6937ef 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,7 +9,8 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI
 /**
  * Several icons can be used together as a group.
  */
-const IconGroup = React.forwardRef(function (props, ref) {
+const IconGroup = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { children, className, content, size } = props
 
   const classes = cx(size, 'icons', className)
@@ -40,8 +42,10 @@ IconGroup.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
-IconGroup.defaultProps = {
-  as: 'i',
+function getDefaultProps() {
+  return {
+    as: 'i',
+  }
 }
 
 export default IconGroup
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index c72c22ff79..704042c770 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -25,7 +26,8 @@ import ImageGroup from './ImageGroup'
  * An image is a graphic representation of something.
  * @see Icon
  */
-const Image = React.forwardRef(function (props, ref) {
+const Image = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     avatar,
     bordered,
@@ -183,9 +185,11 @@ Image.propTypes = {
   wrapped: PropTypes.bool,
 }
 
-Image.defaultProps = {
-  as: 'img',
-  ui: true,
+function getDefaultProps() {
+  return {
+    as: 'img',
+    ui: true,
+  }
 }
 
 Image.create = createShorthandFactory(Image, (value) => ({ src: value }))
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 7f830a4a65..928a626414 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -26,7 +27,8 @@ import Label from '../Label'
  * @see Icon
  * @see Label
  */
-const Input = React.forwardRef(function (props, ref) {
+const Input = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     action,
     actionPosition,
@@ -234,8 +236,10 @@ Input.propTypes = {
   type: PropTypes.string,
 }
 
-Input.defaultProps = {
-  type: 'text',
+function getDefaultProps() {
+  return {
+    type: 'text',
+  }
 }
 
 Input.create = createShorthandFactory(Input, (type) => ({ type }))
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index 8b6227d7f5..188f4fbea2 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -44,7 +45,8 @@ function computeNewIndex(exclusive, activeIndex, itemIndex) {
 /**
  * An Accordion can contain sub-accordions.
  */
-const AccordionAccordion = React.forwardRef(function (props, ref) {
+const AccordionAccordion = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { className, children, exclusive, panels } = props
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
@@ -92,8 +94,10 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
   )
 })
 
-AccordionAccordion.defaultProps = {
-  exclusive: true,
+function getDefaultProps() {
+  return {
+    exclusive: true,
+  }
 }
 
 AccordionAccordion.displayName = 'AccordionAccordion'
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index 00eeeb80a6..e3014d9f74 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -24,7 +25,8 @@ const debug = makeDebugger('checkbox')
  * @see Form
  * @see Radio
  */
-const Checkbox = React.forwardRef(function (props, ref) {
+const Checkbox = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     className,
     disabled,
@@ -319,8 +321,10 @@ Checkbox.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
-Checkbox.defaultProps = {
-  type: 'checkbox',
+function getDefaultProps() {
+  return {
+    type: 'checkbox',
+  }
 }
 
 export default Checkbox
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 8f46f28f1c..94115098ff 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,7 +9,8 @@ import { createShorthandFactory, getElementType, getUnhandledProps } from '../..
 /**
  * A search item sub-component for Dropdown component.
  */
-const DropdownSearchInput = React.forwardRef(function (props, ref) {
+const DropdownSearchInput = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { autoComplete, className, tabIndex, type, value } = props
 
   const handleChange = (e) => {
@@ -57,10 +59,12 @@ DropdownSearchInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-DropdownSearchInput.defaultProps = {
-  as: 'input',
-  autoComplete: 'off',
-  type: 'text',
+function getDefaultProps() {
+  return {
+    as: 'input',
+    autoComplete: 'off',
+    type: 'text',
+  }
 }
 
 DropdownSearchInput.create = createShorthandFactory(DropdownSearchInput, (type) => ({ type }))
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index cf35c358bb..7f6ce77c40 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 import shallowEqual from 'shallowequal'
@@ -33,7 +34,8 @@ const debug = makeDebugger('modal')
  * @see Confirm
  * @see Portal
  */
-const Modal = React.forwardRef(function (props, ref) {
+const Modal = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     actions,
     basic,
@@ -398,12 +400,14 @@ Modal.propTypes = {
    */
 }
 
-Modal.defaultProps = {
-  centered: true,
-  dimmer: true,
-  closeOnDimmerClick: true,
-  closeOnDocumentClick: false,
-  eventPool: 'Modal',
+function getDefaultProps() {
+  return {
+    centered: true,
+    dimmer: true,
+    closeOnDimmerClick: true,
+    closeOnDocumentClick: false,
+    eventPool: 'Modal',
+  }
 }
 
 Modal.Actions = ModalActions
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index f6d1111ed1..9557dc0cc7 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -1,6 +1,7 @@
+import _, { defaults } from 'lodash'
 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 { Popper } from 'react-popper'
@@ -111,7 +112,8 @@ function usePositioningEffect(popperDependencies, positionUpdate) {
 /**
  * A Popup displays additional information on top of a page.
  */
-const Popup = React.forwardRef(function (props, ref) {
+const Popup = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     basic,
     className,
@@ -469,13 +471,15 @@ Popup.propTypes = {
   wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
 }
 
-Popup.defaultProps = {
-  disabled: false,
-  eventsEnabled: true,
-  on: ['click', 'hover'],
-  pinned: false,
-  popperModifiers: [],
-  position: 'top left',
+function getDefaultProps() {
+  return {
+    disabled: false,
+    eventsEnabled: true,
+    on: ['click', 'hover'],
+    pinned: false,
+    popperModifiers: [],
+    position: 'top left',
+  }
 }
 
 Popup.Content = PopupContent
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index f4bf35a6d9..e7af3d5ad2 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -15,7 +16,8 @@ import RatingIcon from './RatingIcon'
 /**
  * A rating indicates user interest in content.
  */
-const Rating = React.forwardRef(function (props, ref) {
+const Rating = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { className, clearable, disabled, icon, maxRating, size } = props
 
   const [rating, setRating] = useAutoControlledValue({
@@ -151,9 +153,11 @@ Rating.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
 }
 
-Rating.defaultProps = {
-  clearable: 'auto',
-  maxRating: 1,
+function getDefaultProps() {
+  return {
+    clearable: 'auto',
+    maxRating: 1,
+  }
 }
 
 Rating.Icon = RatingIcon
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 22cc558e09..4b37306214 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -1,6 +1,7 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
 import keyboardKey from 'keyboard-key'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -9,7 +10,8 @@ import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
 /**
  * An internal icon sub-component for Rating component
  */
-const RatingIcon = React.forwardRef(function (props, ref) {
+const RatingIcon = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { active, className, selected } = props
 
   const classes = cx(
@@ -97,8 +99,10 @@ RatingIcon.propTypes = {
   selected: PropTypes.bool,
 }
 
-RatingIcon.defaultProps = {
-  as: 'i',
+function getDefaultProps() {
+  return {
+    as: 'i',
+  }
 }
 
 export default RatingIcon
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 71d9c01224..2a554546f6 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -11,7 +12,8 @@ import {
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
-const SearchCategory = React.forwardRef(function (props, ref) {
+const SearchCategory = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { active, children, className, content, layoutRenderer, renderer } = props
 
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
@@ -28,9 +30,11 @@ const SearchCategory = React.forwardRef(function (props, ref) {
   )
 })
 
-SearchCategory.defaultProps = {
-  layoutRenderer: SearchCategoryLayout,
-  renderer: ({ name }) => name,
+function getDefaultProps() {
+  return {
+    layoutRenderer: SearchCategoryLayout,
+    renderer: ({ name }) => name,
+  }
 }
 
 SearchCategory.displayName = 'SearchCategory'
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index 69f3ac5239..cc225fa073 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -31,7 +32,8 @@ const defaultRenderer = ({ image, price, title, description }) => [
   </div>,
 ]
 
-const SearchResult = React.forwardRef(function (props, ref) {
+const SearchResult = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { active, className, renderer } = props
 
   const handleClick = (e) => {
@@ -99,8 +101,10 @@ SearchResult.propTypes = {
   title: PropTypes.string.isRequired,
 }
 
-SearchResult.defaultProps = {
-  renderer: defaultRenderer,
+function getDefaultProps() {
+  return {
+    renderer: defaultRenderer,
+  }
 }
 
 export default SearchResult
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index ab8c821c9a..43e555b683 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -1,5 +1,6 @@
+import _, { defaults } from 'lodash'
 import cx from 'clsx'
-import _ from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -16,7 +17,8 @@ import {
 /**
  * Sticky content stays fixed to the browser viewport while another column of content is visible on the page.
  */
-const Sticky = React.forwardRef(function (props, ref) {
+const Sticky = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const {
     active,
     bottomOffset,
@@ -333,11 +335,13 @@ Sticky.propTypes = {
   styleElement: PropTypes.object,
 }
 
-Sticky.defaultProps = {
-  active: true,
-  bottomOffset: 0,
-  offset: 0,
-  scrollContext: isBrowser() ? window : null,
+function getDefaultProps() {
+  return {
+    active: true,
+    bottomOffset: 0,
+    offset: 0,
+    scrollContext: isBrowser() ? window : null,
+  }
 }
 
 export default Sticky
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index 3004f4ceda..fbcd5fa645 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -18,7 +19,8 @@ import TabPane from './TabPane'
  * @see Menu
  * @see Segment
  */
-const Tab = React.forwardRef(function (props, ref) {
+const Tab = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { grid, menu, panes, menuPosition, renderActiveOnly } = props
 
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
@@ -157,10 +159,12 @@ Tab.propTypes = {
 
 Tab.autoControlledProps = ['activeIndex']
 
-Tab.defaultProps = {
-  grid: { paneWidth: 12, tabWidth: 4 },
-  menu: { attached: true, tabular: true },
-  renderActiveOnly: true,
+function getDefaultProps() {
+  return {
+    grid: { paneWidth: 12, tabWidth: 4 },
+    menu: { attached: true, tabular: true },
+    renderActiveOnly: true,
+  }
 }
 
 Tab.Pane = TabPane
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 4551dfb497..78a80c0d90 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -15,7 +16,8 @@ import Segment from '../../elements/Segment/Segment'
 /**
  * A tab pane holds the content of a tab.
  */
-const TabPane = React.forwardRef(function (props, ref) {
+const TabPane = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { active, children, className, content, loading } = props
 
   const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
@@ -35,9 +37,11 @@ const TabPane = React.forwardRef(function (props, ref) {
   )
 })
 
-TabPane.defaultProps = {
-  as: Segment,
-  active: true,
+function getDefaultProps() {
+  return {
+    as: Segment,
+    active: true,
+  }
 }
 
 TabPane.displayName = 'TabPane'
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 0a8142939e..0ea341197e 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import _, { defaults } from 'lodash'
+
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -107,7 +108,8 @@ function useWrappedChildren(children, animation, duration, directional) {
 /**
  * A Transition.Group animates children as they mount and unmount.
  */
-const TransitionGroup = React.forwardRef(function (props, ref) {
+const TransitionGroup = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   debug('render')
   debug('props', props)
 
@@ -153,10 +155,12 @@ TransitionGroup.propTypes = {
   ]),
 }
 
-TransitionGroup.defaultProps = {
-  as: React.Fragment,
-  animation: 'fade',
-  duration: 500,
+function getDefaultProps() {
+  return {
+    as: React.Fragment,
+    animation: 'fade',
+    duration: 500,
+  }
 }
 
 export default TransitionGroup
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index 3dde605c83..fcf79b9b07 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -13,7 +14,8 @@ import {
 /**
  * A comment can contain an action.
  */
-const CommentAction = React.forwardRef(function (props, ref) {
+const CommentAction = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { active, className, children, content } = props
 
   const classes = cx(useKeyOnly(active, 'active'), className)
@@ -27,8 +29,10 @@ const CommentAction = React.forwardRef(function (props, ref) {
   )
 })
 
-CommentAction.defaultProps = {
-  as: 'a',
+function getDefaultProps() {
+  return {
+    as: 'a',
+  }
 }
 
 CommentAction.displayName = 'CommentAction'
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index 70eca84786..7010950b8b 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -8,7 +9,8 @@ import Icon from '../../elements/Icon'
 /**
  * A feed can contain a like element.
  */
-const FeedLike = React.forwardRef(function (props, ref) {
+const FeedLike = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { children, className, content, icon } = props
 
   const classes = cx('like', className)
@@ -31,8 +33,10 @@ const FeedLike = React.forwardRef(function (props, ref) {
   )
 })
 
-FeedLike.defaultProps = {
-  as: 'a',
+function getDefaultProps() {
+  return {
+    as: 'a',
+  }
 }
 
 FeedLike.displayName = 'FeedLike'
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index 9b7d44e55c..7601ff3fb3 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -1,3 +1,4 @@
+import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -7,7 +8,8 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A feed can contain a user element.
  */
-const FeedUser = React.forwardRef(function (props, ref) {
+const FeedUser = React.forwardRef(function (partialProps, ref) {
+  const props = defaults(partialProps, getDefaultProps())
   const { children, className, content } = props
   const classes = cx('user', className)
   const rest = getUnhandledProps(FeedUser, props)
@@ -35,8 +37,10 @@ FeedUser.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-FeedUser.defaultProps = {
-  as: 'a',
+function getDefaultProps() {
+  return {
+    as: 'a',
+  }
 }
 
 export default FeedUser

From ebc4dfcfc2d5e27aab7348b16e59b34258691ce0 Mon Sep 17 00:00:00 2001
From: tourman <8002615@gmail.com>
Date: Mon, 11 Dec 2023 16:18:21 +0000
Subject: [PATCH 03/17] Revert "4426: component changes"

This reverts commit bf72914f9c1dd76fecd9a1b5b3842d9e459d4253.
---
 src/addons/Confirm/Confirm.js               | 18 +++----
 src/addons/Pagination/Pagination.js         | 52 ++++++++++-----------
 src/addons/Radio/Radio.js                   | 10 ++--
 src/addons/TextArea/TextArea.js             | 14 ++----
 src/collections/Form/Form.js                | 12 ++---
 src/collections/Form/FormDropdown.js        | 12 ++---
 src/collections/Form/FormInput.js           | 12 ++---
 src/collections/Form/FormRadio.js           | 12 ++---
 src/collections/Form/FormSelect.js          | 12 ++---
 src/collections/Form/FormTextArea.js        | 12 ++---
 src/collections/Message/MessageItem.js      | 10 ++--
 src/collections/Message/MessageList.js      | 12 ++---
 src/collections/Table/Table.js              | 12 ++---
 src/collections/Table/TableBody.js          | 10 ++--
 src/collections/Table/TableCell.js          | 12 ++---
 src/collections/Table/TableFooter.js        | 10 ++--
 src/collections/Table/TableHeader.js        | 10 ++--
 src/collections/Table/TableHeaderCell.js    | 10 ++--
 src/collections/Table/TableRow.js           | 14 ++----
 src/elements/Button/Button.js               | 14 ++----
 src/elements/Icon/IconGroup.js              | 12 ++---
 src/elements/Image/Image.js                 | 14 ++----
 src/elements/Input/Input.js                 | 12 ++---
 src/modules/Accordion/AccordionAccordion.js | 12 ++---
 src/modules/Checkbox/Checkbox.js            | 12 ++---
 src/modules/Dropdown/DropdownSearchInput.js | 16 +++----
 src/modules/Modal/Modal.js                  | 20 ++++----
 src/modules/Popup/Popup.js                  | 22 ++++-----
 src/modules/Rating/Rating.js                | 14 ++----
 src/modules/Rating/RatingIcon.js            | 12 ++---
 src/modules/Search/SearchCategory.js        | 12 ++---
 src/modules/Search/SearchResult.js          | 12 ++---
 src/modules/Sticky/Sticky.js                | 18 +++----
 src/modules/Tab/Tab.js                      | 16 +++----
 src/modules/Tab/TabPane.js                  | 12 ++---
 src/modules/Transition/TransitionGroup.js   | 16 +++----
 src/views/Comment/CommentAction.js          | 10 ++--
 src/views/Feed/FeedLike.js                  | 10 ++--
 src/views/Feed/FeedUser.js                  | 10 ++--
 39 files changed, 193 insertions(+), 349 deletions(-)

diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index c9a65beb3d..2b3e7c004e 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -11,8 +10,7 @@ import Modal from '../../modules/Modal'
  * A Confirm modal gives the user a choice to confirm or cancel an action.
  * @see Modal
  */
-const Confirm = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Confirm = React.forwardRef(function (props, ref) {
   const { cancelButton, confirmButton, content, header, open, size } = props
   const rest = getUnhandledProps(Confirm, props)
 
@@ -98,13 +96,11 @@ Confirm.propTypes = {
   size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
 }
 
-function getDefaultProps() {
-  return {
-    cancelButton: 'Cancel',
-    confirmButton: 'OK',
-    content: 'Are you sure?',
-    size: 'small',
-  }
+Confirm.defaultProps = {
+  cancelButton: 'Cancel',
+  confirmButton: 'OK',
+  content: 'Are you sure?',
+  size: 'small',
 }
 
 export default Confirm
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index 1633a08896..078389ab26 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -15,8 +14,7 @@ import PaginationItem from './PaginationItem'
 /**
  * A component to render a pagination.
  */
-const Pagination = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Pagination = React.forwardRef(function (props, ref) {
   const {
     'aria-label': ariaLabel,
     boundaryRange,
@@ -131,30 +129,28 @@ Pagination.propTypes = {
   totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
-function getDefaultProps() {
-  return {
-    'aria-label': 'Pagination Navigation',
-    boundaryRange: 1,
-    ellipsisItem: '...',
-    firstItem: {
-      'aria-label': 'First item',
-      content: '«',
-    },
-    lastItem: {
-      'aria-label': 'Last item',
-      content: '»',
-    },
-    nextItem: {
-      'aria-label': 'Next item',
-      content: '⟩',
-    },
-    pageItem: {},
-    prevItem: {
-      'aria-label': 'Previous item',
-      content: '⟨',
-    },
-    siblingRange: 1,
-  }
+Pagination.defaultProps = {
+  'aria-label': 'Pagination Navigation',
+  boundaryRange: 1,
+  ellipsisItem: '...',
+  firstItem: {
+    'aria-label': 'First item',
+    content: '«',
+  },
+  lastItem: {
+    'aria-label': 'Last item',
+    content: '»',
+  },
+  nextItem: {
+    'aria-label': 'Next item',
+    content: '⟩',
+  },
+  pageItem: {},
+  prevItem: {
+    'aria-label': 'Previous item',
+    content: '⟨',
+  },
+  siblingRange: 1,
 }
 
 Pagination.Item = PaginationItem
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index c7e902d8ed..0159880db2 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import React from 'react'
 
 import { getUnhandledProps } from '../../lib'
@@ -10,8 +9,7 @@ import Checkbox from '../../modules/Checkbox'
  * @see Checkbox
  * @see Form
  */
-const Radio = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Radio = React.forwardRef(function (props, ref) {
   const { slider, toggle, type } = props
 
   const rest = getUnhandledProps(Radio, props)
@@ -35,10 +33,8 @@ Radio.propTypes = {
   type: Checkbox.propTypes.type,
 }
 
-function getDefaultProps() {
-  return {
-    type: 'radio',
-  }
+Radio.defaultProps = {
+  type: 'radio',
 }
 
 export default Radio
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index df76cedf1d..d6b0537f02 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -9,8 +8,7 @@ import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
-const TextArea = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TextArea = React.forwardRef(function (props, ref) {
   const { rows, value } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
@@ -67,11 +65,9 @@ TextArea.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'textarea',
-    rows: 3,
-  }
+TextArea.defaultProps = {
+  as: 'textarea',
+  rows: 3,
 }
 
 export default TextArea
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index fff8f54d9a..6c1facc274 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -25,8 +24,7 @@ import FormTextArea from './FormTextArea'
  * @see Radio
  * @see Select
  */
-const Form = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Form = React.forwardRef(function (props, ref) {
   const {
     action,
     children,
@@ -119,10 +117,8 @@ Form.propTypes = {
   widths: PropTypes.oneOf(['equal']),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'form',
-  }
+Form.defaultProps = {
+  as: 'form',
 }
 
 Form.Field = FormField
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index fc8afffcf0..aeeb745314 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -11,8 +10,7 @@ import FormField from './FormField'
  * @see Dropdown
  * @see Form
  */
-const FormDropdown = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const FormDropdown = React.forwardRef(function (props, ref) {
   const { control } = props
   const rest = getUnhandledProps(FormDropdown, props)
   const ElementType = getElementType(FormDropdown, props)
@@ -29,11 +27,9 @@ FormDropdown.propTypes = {
   control: FormField.propTypes.control,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: Dropdown,
-  }
+FormDropdown.defaultProps = {
+  as: FormField,
+  control: Dropdown,
 }
 
 export default FormDropdown
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index 97ff3aa862..bd5468a81e 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -11,8 +10,7 @@ import FormField from './FormField'
  * @see Form
  * @see Input
  */
-const FormInput = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const FormInput = React.forwardRef(function (props, ref) {
   const { control } = props
   const rest = getUnhandledProps(FormInput, props)
   const ElementType = getElementType(FormInput, props)
@@ -29,11 +27,9 @@ FormInput.propTypes = {
   control: FormField.propTypes.control,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: Input,
-  }
+FormInput.defaultProps = {
+  as: FormField,
+  control: Input,
 }
 
 export default FormInput
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 10f78dc627..82dd3bfc64 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -11,8 +10,7 @@ import FormField from './FormField'
  * @see Form
  * @see Radio
  */
-const FormRadio = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const FormRadio = React.forwardRef(function (props, ref) {
   const { control } = props
   const rest = getUnhandledProps(FormRadio, props)
   const ElementType = getElementType(FormRadio, props)
@@ -29,11 +27,9 @@ FormRadio.propTypes = {
   control: FormField.propTypes.control,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: Radio,
-  }
+FormRadio.defaultProps = {
+  as: FormField,
+  control: Radio,
 }
 
 export default FormRadio
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index b21cfe7efd..30c6d3f185 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -12,8 +11,7 @@ import FormField from './FormField'
  * @see Form
  * @see Select
  */
-const FormSelect = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const FormSelect = React.forwardRef(function (props, ref) {
   const { control, options } = props
   const rest = getUnhandledProps(FormSelect, props)
   const ElementType = getElementType(FormSelect, props)
@@ -33,11 +31,9 @@ FormSelect.propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: Select,
-  }
+FormSelect.defaultProps = {
+  as: FormField,
+  control: Select,
 }
 
 export default FormSelect
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index 01969d10fa..2395749970 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -11,8 +10,7 @@ import FormField from './FormField'
  * @see Form
  * @see TextArea
  */
-const FormTextArea = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const FormTextArea = React.forwardRef(function (props, ref) {
   const { control } = props
   const rest = getUnhandledProps(FormTextArea, props)
   const ElementType = getElementType(FormTextArea, props)
@@ -29,11 +27,9 @@ FormTextArea.propTypes = {
   control: FormField.propTypes.control,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: TextArea,
-  }
+FormTextArea.defaultProps = {
+  as: FormField,
+  control: TextArea,
 }
 
 export default FormTextArea
diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index e05a4d5e30..73cfe5af42 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -14,8 +13,7 @@ import {
 /**
  * A message list can contain an item.
  */
-const MessageItem = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const MessageItem = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
 
   const classes = cx('content', className)
@@ -44,10 +42,8 @@ MessageItem.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'li',
-  }
+MessageItem.defaultProps = {
+  as: 'li',
 }
 
 MessageItem.create = createShorthandFactory(MessageItem, (content) => ({ content }))
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index e8f5933762..7262f0ad58 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -16,8 +15,7 @@ import MessageItem from './MessageItem'
 /**
  * A message can contain a list of items.
  */
-const MessageList = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const MessageList = React.forwardRef(function (props, ref) {
   const { children, className, items } = props
 
   const classes = cx('list', className)
@@ -46,10 +44,8 @@ MessageList.propTypes = {
   items: customPropTypes.collectionShorthand,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'ul',
-  }
+MessageList.defaultProps = {
+  as: 'ul',
 }
 
 MessageList.create = createShorthandFactory(MessageList, (val) => ({ items: val }))
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index d3caf35f39..d9bf410c1a 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -26,8 +25,7 @@ import TableRow from './TableRow'
 /**
  * A table displays a collections of data grouped into rows.
  */
-const Table = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Table = React.forwardRef(function (props, ref) {
   const {
     attached,
     basic,
@@ -118,10 +116,8 @@ const Table = React.forwardRef(function (partialProps, ref) {
 })
 
 Table.displayName = 'Table'
-function getDefaultProps() {
-  return {
-    as: 'table',
-  }
+Table.defaultProps = {
+  as: 'table',
 }
 
 Table.propTypes = {
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index f383e54dcd..605512e7d4 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -1,12 +1,10 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { getElementType, getUnhandledProps } from '../../lib'
 
-const TableBody = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TableBody = React.forwardRef(function (props, ref) {
   const { children, className } = props
   const classes = cx(className)
   const rest = getUnhandledProps(TableBody, props)
@@ -20,10 +18,8 @@ const TableBody = React.forwardRef(function (partialProps, ref) {
 })
 
 TableBody.displayName = 'TableBody'
-function getDefaultProps() {
-  return {
-    as: 'tbody',
-  }
+TableBody.defaultProps = {
+  as: 'tbody',
 }
 
 TableBody.propTypes = {
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index 99d9c3b3ac..dcb008c3d8 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -21,8 +20,7 @@ import Icon from '../../elements/Icon'
 /**
  * A table row can have cells.
  */
-const TableCell = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TableCell = React.forwardRef(function (props, ref) {
   const {
     active,
     children,
@@ -76,10 +74,8 @@ const TableCell = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'td',
-  }
+TableCell.defaultProps = {
+  as: 'td',
 }
 
 TableCell.displayName = 'TableCell'
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index 676f47f8a1..c5ff0b8e6b 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,8 +7,7 @@ import TableHeader from './TableHeader'
 /**
  * A table can have a footer.
  */
-const TableFooter = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TableFooter = React.forwardRef(function (props, ref) {
   const { as } = props
   const rest = getUnhandledProps(TableFooter, props)
 
@@ -22,10 +20,8 @@ TableFooter.propTypes = {
   as: PropTypes.elementType,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'tfoot',
-  }
+TableFooter.defaultProps = {
+  as: 'tfoot',
 }
 
 export default TableFooter
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index ef663909a2..4c7f9fe284 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -14,8 +13,7 @@ import {
 /**
  * A table can have a header.
  */
-const TableHeader = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TableHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, fullWidth } = props
   const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)
@@ -28,10 +26,8 @@ const TableHeader = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'thead',
-  }
+TableHeader.defaultProps = {
+  as: 'thead',
 }
 
 TableHeader.displayName = 'TableHeader'
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index bcd0f86eba..a4a23b2488 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -9,8 +8,7 @@ import TableCell from './TableCell'
 /**
  * A table can have a header cell.
  */
-const TableHeaderCell = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TableHeaderCell = React.forwardRef(function (props, ref) {
   const { as, className, sorted } = props
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
   const rest = getUnhandledProps(TableHeaderCell, props)
@@ -30,10 +28,8 @@ TableHeaderCell.propTypes = {
   sorted: PropTypes.oneOf(['ascending', 'descending']),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'th',
-  }
+TableHeaderCell.defaultProps = {
+  as: 'th',
 }
 
 export default TableHeaderCell
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 850f79b4db..5e7e83d1d5 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -20,8 +19,7 @@ import TableCell from './TableCell'
 /**
  * A table can have rows.
  */
-const TableRow = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TableRow = React.forwardRef(function (props, ref) {
   const {
     active,
     cellAs,
@@ -66,11 +64,9 @@ const TableRow = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'tr',
-    cellAs: 'td',
-  }
+TableRow.defaultProps = {
+  as: 'tr',
+  cellAs: 'td',
 }
 
 TableRow.displayName = 'TableRow'
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index 4317a90bf7..f2fd188de6 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -71,8 +70,7 @@ function hasIconClass(props) {
  * @see Icon
  * @see Label
  */
-const Button = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Button = React.forwardRef(function (props, ref) {
   const {
     active,
     animated,
@@ -98,7 +96,7 @@ const Button = React.forwardRef(function (partialProps, ref) {
     secondary,
     size,
     toggle,
-    type,
+    type
   } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
@@ -317,10 +315,8 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'button',
-  }
+Button.defaultProps = {
+  as: 'button',
 }
 
 Button.Content = ButtonContent
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 42cf6937ef..2c17cfbf36 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -9,8 +8,7 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI
 /**
  * Several icons can be used together as a group.
  */
-const IconGroup = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const IconGroup = React.forwardRef(function (props, ref) {
   const { children, className, content, size } = props
 
   const classes = cx(size, 'icons', className)
@@ -42,10 +40,8 @@ IconGroup.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'i',
-  }
+IconGroup.defaultProps = {
+  as: 'i',
 }
 
 export default IconGroup
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index 704042c770..c72c22ff79 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -26,8 +25,7 @@ import ImageGroup from './ImageGroup'
  * An image is a graphic representation of something.
  * @see Icon
  */
-const Image = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Image = React.forwardRef(function (props, ref) {
   const {
     avatar,
     bordered,
@@ -185,11 +183,9 @@ Image.propTypes = {
   wrapped: PropTypes.bool,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'img',
-    ui: true,
-  }
+Image.defaultProps = {
+  as: 'img',
+  ui: true,
 }
 
 Image.create = createShorthandFactory(Image, (value) => ({ src: value }))
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 928a626414..7f830a4a65 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -27,8 +26,7 @@ import Label from '../Label'
  * @see Icon
  * @see Label
  */
-const Input = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Input = React.forwardRef(function (props, ref) {
   const {
     action,
     actionPosition,
@@ -236,10 +234,8 @@ Input.propTypes = {
   type: PropTypes.string,
 }
 
-function getDefaultProps() {
-  return {
-    type: 'text',
-  }
+Input.defaultProps = {
+  type: 'text',
 }
 
 Input.create = createShorthandFactory(Input, (type) => ({ type }))
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index 188f4fbea2..8b6227d7f5 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -45,8 +44,7 @@ function computeNewIndex(exclusive, activeIndex, itemIndex) {
 /**
  * An Accordion can contain sub-accordions.
  */
-const AccordionAccordion = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const AccordionAccordion = React.forwardRef(function (props, ref) {
   const { className, children, exclusive, panels } = props
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
@@ -94,10 +92,8 @@ const AccordionAccordion = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    exclusive: true,
-  }
+AccordionAccordion.defaultProps = {
+  exclusive: true,
 }
 
 AccordionAccordion.displayName = 'AccordionAccordion'
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index e3014d9f74..00eeeb80a6 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -25,8 +24,7 @@ const debug = makeDebugger('checkbox')
  * @see Form
  * @see Radio
  */
-const Checkbox = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Checkbox = React.forwardRef(function (props, ref) {
   const {
     className,
     disabled,
@@ -321,10 +319,8 @@ Checkbox.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
-function getDefaultProps() {
-  return {
-    type: 'checkbox',
-  }
+Checkbox.defaultProps = {
+  type: 'checkbox',
 }
 
 export default Checkbox
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 94115098ff..8f46f28f1c 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -9,8 +8,7 @@ import { createShorthandFactory, getElementType, getUnhandledProps } from '../..
 /**
  * A search item sub-component for Dropdown component.
  */
-const DropdownSearchInput = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const DropdownSearchInput = React.forwardRef(function (props, ref) {
   const { autoComplete, className, tabIndex, type, value } = props
 
   const handleChange = (e) => {
@@ -59,12 +57,10 @@ DropdownSearchInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'input',
-    autoComplete: 'off',
-    type: 'text',
-  }
+DropdownSearchInput.defaultProps = {
+  as: 'input',
+  autoComplete: 'off',
+  type: 'text',
 }
 
 DropdownSearchInput.create = createShorthandFactory(DropdownSearchInput, (type) => ({ type }))
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index 7f6ce77c40..cf35c358bb 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 import shallowEqual from 'shallowequal'
@@ -34,8 +33,7 @@ const debug = makeDebugger('modal')
  * @see Confirm
  * @see Portal
  */
-const Modal = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Modal = React.forwardRef(function (props, ref) {
   const {
     actions,
     basic,
@@ -400,14 +398,12 @@ Modal.propTypes = {
    */
 }
 
-function getDefaultProps() {
-  return {
-    centered: true,
-    dimmer: true,
-    closeOnDimmerClick: true,
-    closeOnDocumentClick: false,
-    eventPool: 'Modal',
-  }
+Modal.defaultProps = {
+  centered: true,
+  dimmer: true,
+  closeOnDimmerClick: true,
+  closeOnDocumentClick: false,
+  eventPool: 'Modal',
 }
 
 Modal.Actions = ModalActions
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 9557dc0cc7..f6d1111ed1 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -1,7 +1,6 @@
-import _, { defaults } from 'lodash'
 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 { Popper } from 'react-popper'
@@ -112,8 +111,7 @@ function usePositioningEffect(popperDependencies, positionUpdate) {
 /**
  * A Popup displays additional information on top of a page.
  */
-const Popup = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Popup = React.forwardRef(function (props, ref) {
   const {
     basic,
     className,
@@ -471,15 +469,13 @@ Popup.propTypes = {
   wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
 }
 
-function getDefaultProps() {
-  return {
-    disabled: false,
-    eventsEnabled: true,
-    on: ['click', 'hover'],
-    pinned: false,
-    popperModifiers: [],
-    position: 'top left',
-  }
+Popup.defaultProps = {
+  disabled: false,
+  eventsEnabled: true,
+  on: ['click', 'hover'],
+  pinned: false,
+  popperModifiers: [],
+  position: 'top left',
 }
 
 Popup.Content = PopupContent
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index e7af3d5ad2..f4bf35a6d9 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -16,8 +15,7 @@ import RatingIcon from './RatingIcon'
 /**
  * A rating indicates user interest in content.
  */
-const Rating = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Rating = React.forwardRef(function (props, ref) {
   const { className, clearable, disabled, icon, maxRating, size } = props
 
   const [rating, setRating] = useAutoControlledValue({
@@ -153,11 +151,9 @@ Rating.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
 }
 
-function getDefaultProps() {
-  return {
-    clearable: 'auto',
-    maxRating: 1,
-  }
+Rating.defaultProps = {
+  clearable: 'auto',
+  maxRating: 1,
 }
 
 Rating.Icon = RatingIcon
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 4b37306214..22cc558e09 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -1,7 +1,6 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
 import keyboardKey from 'keyboard-key'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,8 +9,7 @@ import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
 /**
  * An internal icon sub-component for Rating component
  */
-const RatingIcon = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const RatingIcon = React.forwardRef(function (props, ref) {
   const { active, className, selected } = props
 
   const classes = cx(
@@ -99,10 +97,8 @@ RatingIcon.propTypes = {
   selected: PropTypes.bool,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'i',
-  }
+RatingIcon.defaultProps = {
+  as: 'i',
 }
 
 export default RatingIcon
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 2a554546f6..71d9c01224 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -12,8 +11,7 @@ import {
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
-const SearchCategory = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const SearchCategory = React.forwardRef(function (props, ref) {
   const { active, children, className, content, layoutRenderer, renderer } = props
 
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
@@ -30,11 +28,9 @@ const SearchCategory = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    layoutRenderer: SearchCategoryLayout,
-    renderer: ({ name }) => name,
-  }
+SearchCategory.defaultProps = {
+  layoutRenderer: SearchCategoryLayout,
+  renderer: ({ name }) => name,
 }
 
 SearchCategory.displayName = 'SearchCategory'
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index cc225fa073..69f3ac5239 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -32,8 +31,7 @@ const defaultRenderer = ({ image, price, title, description }) => [
   </div>,
 ]
 
-const SearchResult = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const SearchResult = React.forwardRef(function (props, ref) {
   const { active, className, renderer } = props
 
   const handleClick = (e) => {
@@ -101,10 +99,8 @@ SearchResult.propTypes = {
   title: PropTypes.string.isRequired,
 }
 
-function getDefaultProps() {
-  return {
-    renderer: defaultRenderer,
-  }
+SearchResult.defaultProps = {
+  renderer: defaultRenderer,
 }
 
 export default SearchResult
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index 43e555b683..ab8c821c9a 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -1,6 +1,5 @@
-import _, { defaults } from 'lodash'
 import cx from 'clsx'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -17,8 +16,7 @@ import {
 /**
  * Sticky content stays fixed to the browser viewport while another column of content is visible on the page.
  */
-const Sticky = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Sticky = React.forwardRef(function (props, ref) {
   const {
     active,
     bottomOffset,
@@ -335,13 +333,11 @@ Sticky.propTypes = {
   styleElement: PropTypes.object,
 }
 
-function getDefaultProps() {
-  return {
-    active: true,
-    bottomOffset: 0,
-    offset: 0,
-    scrollContext: isBrowser() ? window : null,
-  }
+Sticky.defaultProps = {
+  active: true,
+  bottomOffset: 0,
+  offset: 0,
+  scrollContext: isBrowser() ? window : null,
 }
 
 export default Sticky
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index fbcd5fa645..3004f4ceda 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -19,8 +18,7 @@ import TabPane from './TabPane'
  * @see Menu
  * @see Segment
  */
-const Tab = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const Tab = React.forwardRef(function (props, ref) {
   const { grid, menu, panes, menuPosition, renderActiveOnly } = props
 
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
@@ -159,12 +157,10 @@ Tab.propTypes = {
 
 Tab.autoControlledProps = ['activeIndex']
 
-function getDefaultProps() {
-  return {
-    grid: { paneWidth: 12, tabWidth: 4 },
-    menu: { attached: true, tabular: true },
-    renderActiveOnly: true,
-  }
+Tab.defaultProps = {
+  grid: { paneWidth: 12, tabWidth: 4 },
+  menu: { attached: true, tabular: true },
+  renderActiveOnly: true,
 }
 
 Tab.Pane = TabPane
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 78a80c0d90..4551dfb497 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -16,8 +15,7 @@ import Segment from '../../elements/Segment/Segment'
 /**
  * A tab pane holds the content of a tab.
  */
-const TabPane = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TabPane = React.forwardRef(function (props, ref) {
   const { active, children, className, content, loading } = props
 
   const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
@@ -37,11 +35,9 @@ const TabPane = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: Segment,
-    active: true,
-  }
+TabPane.defaultProps = {
+  as: Segment,
+  active: true,
 }
 
 TabPane.displayName = 'TabPane'
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 0ea341197e..0a8142939e 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -1,5 +1,4 @@
-import _, { defaults } from 'lodash'
-
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -108,8 +107,7 @@ function useWrappedChildren(children, animation, duration, directional) {
 /**
  * A Transition.Group animates children as they mount and unmount.
  */
-const TransitionGroup = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const TransitionGroup = React.forwardRef(function (props, ref) {
   debug('render')
   debug('props', props)
 
@@ -155,12 +153,10 @@ TransitionGroup.propTypes = {
   ]),
 }
 
-function getDefaultProps() {
-  return {
-    as: React.Fragment,
-    animation: 'fade',
-    duration: 500,
-  }
+TransitionGroup.defaultProps = {
+  as: React.Fragment,
+  animation: 'fade',
+  duration: 500,
 }
 
 export default TransitionGroup
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index fcf79b9b07..3dde605c83 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -14,8 +13,7 @@ import {
 /**
  * A comment can contain an action.
  */
-const CommentAction = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const CommentAction = React.forwardRef(function (props, ref) {
   const { active, className, children, content } = props
 
   const classes = cx(useKeyOnly(active, 'active'), className)
@@ -29,10 +27,8 @@ const CommentAction = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'a',
-  }
+CommentAction.defaultProps = {
+  as: 'a',
 }
 
 CommentAction.displayName = 'CommentAction'
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index 7010950b8b..70eca84786 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -9,8 +8,7 @@ import Icon from '../../elements/Icon'
 /**
  * A feed can contain a like element.
  */
-const FeedLike = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const FeedLike = React.forwardRef(function (props, ref) {
   const { children, className, content, icon } = props
 
   const classes = cx('like', className)
@@ -33,10 +31,8 @@ const FeedLike = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'a',
-  }
+FeedLike.defaultProps = {
+  as: 'a',
 }
 
 FeedLike.displayName = 'FeedLike'
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index 7601ff3fb3..9b7d44e55c 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -1,4 +1,3 @@
-import { defaults } from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -8,8 +7,7 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A feed can contain a user element.
  */
-const FeedUser = React.forwardRef(function (partialProps, ref) {
-  const props = defaults(partialProps, getDefaultProps())
+const FeedUser = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('user', className)
   const rest = getUnhandledProps(FeedUser, props)
@@ -37,10 +35,8 @@ FeedUser.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'a',
-  }
+FeedUser.defaultProps = {
+  as: 'a',
 }
 
 export default FeedUser

From 6828b40d4cd0786d845984ff6a53a424e1c80d0f Mon Sep 17 00:00:00 2001
From: tourman <8002615@gmail.com>
Date: Mon, 11 Dec 2023 16:20:49 +0000
Subject: [PATCH 04/17] 4426: using _. style for lodash functions

---
 transform.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/transform.js b/transform.js
index 9f1fe41bb9..f266523859 100644
--- a/transform.js
+++ b/transform.js
@@ -25,9 +25,11 @@ async function defaultProps(code) {
   lines.splice(
     functionExpressionIndex + 1,
     0,
-    `const props = defaults(partialProps, getDefaultProps())`,
+    `const props = _.defaults(partialProps, getDefaultProps())`,
   )
-  lines.unshift('import { defaults } from "lodash"')
+  if (!lines.find((line) => line.includes("import _ from 'lodash'"))) {
+    lines.unshift("import _ from 'lodash'")
+  }
   const result = lines.join('\n')
   return result
 }

From c661d20e389de4fdfde8825cef172a9363af3f58 Mon Sep 17 00:00:00 2001
From: tourman <8002615@gmail.com>
Date: Mon, 11 Dec 2023 16:21:16 +0000
Subject: [PATCH 05/17] 4426: component changes

---
 src/addons/Confirm/Confirm.js               | 15 ++++---
 src/addons/Pagination/Pagination.js         | 49 +++++++++++----------
 src/addons/Radio/Radio.js                   | 10 +++--
 src/addons/TextArea/TextArea.js             | 11 +++--
 src/collections/Form/Form.js                |  9 ++--
 src/collections/Form/FormDropdown.js        | 12 +++--
 src/collections/Form/FormInput.js           | 12 +++--
 src/collections/Form/FormRadio.js           | 12 +++--
 src/collections/Form/FormSelect.js          | 12 +++--
 src/collections/Form/FormTextArea.js        | 12 +++--
 src/collections/Message/MessageItem.js      | 10 +++--
 src/collections/Message/MessageList.js      |  9 ++--
 src/collections/Table/Table.js              |  9 ++--
 src/collections/Table/TableBody.js          | 10 +++--
 src/collections/Table/TableCell.js          |  9 ++--
 src/collections/Table/TableFooter.js        | 10 +++--
 src/collections/Table/TableHeader.js        | 10 +++--
 src/collections/Table/TableHeaderCell.js    | 10 +++--
 src/collections/Table/TableRow.js           | 11 +++--
 src/elements/Button/Button.js               | 11 +++--
 src/elements/Icon/IconGroup.js              |  9 ++--
 src/elements/Image/Image.js                 | 11 +++--
 src/elements/Input/Input.js                 |  9 ++--
 src/modules/Accordion/AccordionAccordion.js |  9 ++--
 src/modules/Checkbox/Checkbox.js            |  9 ++--
 src/modules/Dropdown/DropdownSearchInput.js | 13 +++---
 src/modules/Modal/Modal.js                  | 17 ++++---
 src/modules/Popup/Popup.js                  | 19 ++++----
 src/modules/Rating/Rating.js                | 11 +++--
 src/modules/Rating/RatingIcon.js            |  9 ++--
 src/modules/Search/SearchCategory.js        | 12 +++--
 src/modules/Search/SearchResult.js          |  9 ++--
 src/modules/Sticky/Sticky.js                | 15 ++++---
 src/modules/Tab/Tab.js                      | 13 +++---
 src/modules/Tab/TabPane.js                  | 12 +++--
 src/modules/Transition/TransitionGroup.js   | 13 +++---
 src/views/Comment/CommentAction.js          | 10 +++--
 src/views/Feed/FeedLike.js                  | 10 +++--
 src/views/Feed/FeedUser.js                  | 10 +++--
 39 files changed, 303 insertions(+), 170 deletions(-)

diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 2b3e7c004e..89c7679521 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -10,7 +10,8 @@ import Modal from '../../modules/Modal'
  * A Confirm modal gives the user a choice to confirm or cancel an action.
  * @see Modal
  */
-const Confirm = React.forwardRef(function (props, ref) {
+const Confirm = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { cancelButton, confirmButton, content, header, open, size } = props
   const rest = getUnhandledProps(Confirm, props)
 
@@ -96,11 +97,13 @@ Confirm.propTypes = {
   size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
 }
 
-Confirm.defaultProps = {
-  cancelButton: 'Cancel',
-  confirmButton: 'OK',
-  content: 'Are you sure?',
-  size: 'small',
+function getDefaultProps() {
+  return {
+    cancelButton: 'Cancel',
+    confirmButton: 'OK',
+    content: 'Are you sure?',
+    size: 'small',
+  }
 }
 
 export default Confirm
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index 078389ab26..2a0550f4bb 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -14,7 +14,8 @@ import PaginationItem from './PaginationItem'
 /**
  * A component to render a pagination.
  */
-const Pagination = React.forwardRef(function (props, ref) {
+const Pagination = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     'aria-label': ariaLabel,
     boundaryRange,
@@ -129,28 +130,30 @@ Pagination.propTypes = {
   totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
-Pagination.defaultProps = {
-  'aria-label': 'Pagination Navigation',
-  boundaryRange: 1,
-  ellipsisItem: '...',
-  firstItem: {
-    'aria-label': 'First item',
-    content: '«',
-  },
-  lastItem: {
-    'aria-label': 'Last item',
-    content: '»',
-  },
-  nextItem: {
-    'aria-label': 'Next item',
-    content: '⟩',
-  },
-  pageItem: {},
-  prevItem: {
-    'aria-label': 'Previous item',
-    content: '⟨',
-  },
-  siblingRange: 1,
+function getDefaultProps() {
+  return {
+    'aria-label': 'Pagination Navigation',
+    boundaryRange: 1,
+    ellipsisItem: '...',
+    firstItem: {
+      'aria-label': 'First item',
+      content: '«',
+    },
+    lastItem: {
+      'aria-label': 'Last item',
+      content: '»',
+    },
+    nextItem: {
+      'aria-label': 'Next item',
+      content: '⟩',
+    },
+    pageItem: {},
+    prevItem: {
+      'aria-label': 'Previous item',
+      content: '⟨',
+    },
+    siblingRange: 1,
+  }
 }
 
 Pagination.Item = PaginationItem
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index 0159880db2..4199880908 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import React from 'react'
 
 import { getUnhandledProps } from '../../lib'
@@ -9,7 +10,8 @@ import Checkbox from '../../modules/Checkbox'
  * @see Checkbox
  * @see Form
  */
-const Radio = React.forwardRef(function (props, ref) {
+const Radio = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { slider, toggle, type } = props
 
   const rest = getUnhandledProps(Radio, props)
@@ -33,8 +35,10 @@ Radio.propTypes = {
   type: Checkbox.propTypes.type,
 }
 
-Radio.defaultProps = {
-  type: 'radio',
+function getDefaultProps() {
+  return {
+    type: 'radio',
+  }
 }
 
 export default Radio
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index d6b0537f02..21ca975e48 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -8,7 +8,8 @@ import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
-const TextArea = React.forwardRef(function (props, ref) {
+const TextArea = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { rows, value } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
@@ -65,9 +66,11 @@ TextArea.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-TextArea.defaultProps = {
-  as: 'textarea',
-  rows: 3,
+function getDefaultProps() {
+  return {
+    as: 'textarea',
+    rows: 3,
+  }
 }
 
 export default TextArea
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 6c1facc274..4d028e4446 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -24,7 +24,8 @@ import FormTextArea from './FormTextArea'
  * @see Radio
  * @see Select
  */
-const Form = React.forwardRef(function (props, ref) {
+const Form = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     action,
     children,
@@ -117,8 +118,10 @@ Form.propTypes = {
   widths: PropTypes.oneOf(['equal']),
 }
 
-Form.defaultProps = {
-  as: 'form',
+function getDefaultProps() {
+  return {
+    as: 'form',
+  }
 }
 
 Form.Field = FormField
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index aeeb745314..260b9f02d3 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import FormField from './FormField'
  * @see Dropdown
  * @see Form
  */
-const FormDropdown = React.forwardRef(function (props, ref) {
+const FormDropdown = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { control } = props
   const rest = getUnhandledProps(FormDropdown, props)
   const ElementType = getElementType(FormDropdown, props)
@@ -27,9 +29,11 @@ FormDropdown.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormDropdown.defaultProps = {
-  as: FormField,
-  control: Dropdown,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: Dropdown,
+  }
 }
 
 export default FormDropdown
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index bd5468a81e..d7fbfbe7bb 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import FormField from './FormField'
  * @see Form
  * @see Input
  */
-const FormInput = React.forwardRef(function (props, ref) {
+const FormInput = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { control } = props
   const rest = getUnhandledProps(FormInput, props)
   const ElementType = getElementType(FormInput, props)
@@ -27,9 +29,11 @@ FormInput.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormInput.defaultProps = {
-  as: FormField,
-  control: Input,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: Input,
+  }
 }
 
 export default FormInput
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 82dd3bfc64..2d9853f9ef 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import FormField from './FormField'
  * @see Form
  * @see Radio
  */
-const FormRadio = React.forwardRef(function (props, ref) {
+const FormRadio = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { control } = props
   const rest = getUnhandledProps(FormRadio, props)
   const ElementType = getElementType(FormRadio, props)
@@ -27,9 +29,11 @@ FormRadio.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormRadio.defaultProps = {
-  as: FormField,
-  control: Radio,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: Radio,
+  }
 }
 
 export default FormRadio
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index 30c6d3f185..17b76d4e6d 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -11,7 +12,8 @@ import FormField from './FormField'
  * @see Form
  * @see Select
  */
-const FormSelect = React.forwardRef(function (props, ref) {
+const FormSelect = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { control, options } = props
   const rest = getUnhandledProps(FormSelect, props)
   const ElementType = getElementType(FormSelect, props)
@@ -31,9 +33,11 @@ FormSelect.propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,
 }
 
-FormSelect.defaultProps = {
-  as: FormField,
-  control: Select,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: Select,
+  }
 }
 
 export default FormSelect
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index 2395749970..b5a5efe3fb 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -10,7 +11,8 @@ import FormField from './FormField'
  * @see Form
  * @see TextArea
  */
-const FormTextArea = React.forwardRef(function (props, ref) {
+const FormTextArea = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { control } = props
   const rest = getUnhandledProps(FormTextArea, props)
   const ElementType = getElementType(FormTextArea, props)
@@ -27,9 +29,11 @@ FormTextArea.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormTextArea.defaultProps = {
-  as: FormField,
-  control: TextArea,
+function getDefaultProps() {
+  return {
+    as: FormField,
+    control: TextArea,
+  }
 }
 
 export default FormTextArea
diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index 73cfe5af42..fbd2a9b7ea 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -13,7 +14,8 @@ import {
 /**
  * A message list can contain an item.
  */
-const MessageItem = React.forwardRef(function (props, ref) {
+const MessageItem = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { children, className, content } = props
 
   const classes = cx('content', className)
@@ -42,8 +44,10 @@ MessageItem.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-MessageItem.defaultProps = {
-  as: 'li',
+function getDefaultProps() {
+  return {
+    as: 'li',
+  }
 }
 
 MessageItem.create = createShorthandFactory(MessageItem, (content) => ({ content }))
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index 7262f0ad58..e820df92e2 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -15,7 +15,8 @@ import MessageItem from './MessageItem'
 /**
  * A message can contain a list of items.
  */
-const MessageList = React.forwardRef(function (props, ref) {
+const MessageList = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { children, className, items } = props
 
   const classes = cx('list', className)
@@ -44,8 +45,10 @@ MessageList.propTypes = {
   items: customPropTypes.collectionShorthand,
 }
 
-MessageList.defaultProps = {
-  as: 'ul',
+function getDefaultProps() {
+  return {
+    as: 'ul',
+  }
 }
 
 MessageList.create = createShorthandFactory(MessageList, (val) => ({ items: val }))
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index d9bf410c1a..8da2b56ede 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -25,7 +25,8 @@ import TableRow from './TableRow'
 /**
  * A table displays a collections of data grouped into rows.
  */
-const Table = React.forwardRef(function (props, ref) {
+const Table = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     attached,
     basic,
@@ -116,8 +117,10 @@ const Table = React.forwardRef(function (props, ref) {
 })
 
 Table.displayName = 'Table'
-Table.defaultProps = {
-  as: 'table',
+function getDefaultProps() {
+  return {
+    as: 'table',
+  }
 }
 
 Table.propTypes = {
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index 605512e7d4..8fe9d5c318 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -1,10 +1,12 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 import { getElementType, getUnhandledProps } from '../../lib'
 
-const TableBody = React.forwardRef(function (props, ref) {
+const TableBody = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { children, className } = props
   const classes = cx(className)
   const rest = getUnhandledProps(TableBody, props)
@@ -18,8 +20,10 @@ const TableBody = React.forwardRef(function (props, ref) {
 })
 
 TableBody.displayName = 'TableBody'
-TableBody.defaultProps = {
-  as: 'tbody',
+function getDefaultProps() {
+  return {
+    as: 'tbody',
+  }
 }
 
 TableBody.propTypes = {
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index dcb008c3d8..2f6edfc475 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -20,7 +20,8 @@ import Icon from '../../elements/Icon'
 /**
  * A table row can have cells.
  */
-const TableCell = React.forwardRef(function (props, ref) {
+const TableCell = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     active,
     children,
@@ -74,8 +75,10 @@ const TableCell = React.forwardRef(function (props, ref) {
   )
 })
 
-TableCell.defaultProps = {
-  as: 'td',
+function getDefaultProps() {
+  return {
+    as: 'td',
+  }
 }
 
 TableCell.displayName = 'TableCell'
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index c5ff0b8e6b..5247548ca2 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -7,7 +8,8 @@ import TableHeader from './TableHeader'
 /**
  * A table can have a footer.
  */
-const TableFooter = React.forwardRef(function (props, ref) {
+const TableFooter = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { as } = props
   const rest = getUnhandledProps(TableFooter, props)
 
@@ -20,8 +22,10 @@ TableFooter.propTypes = {
   as: PropTypes.elementType,
 }
 
-TableFooter.defaultProps = {
-  as: 'tfoot',
+function getDefaultProps() {
+  return {
+    as: 'tfoot',
+  }
 }
 
 export default TableFooter
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index 4c7f9fe284..10574799fe 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -13,7 +14,8 @@ import {
 /**
  * A table can have a header.
  */
-const TableHeader = React.forwardRef(function (props, ref) {
+const TableHeader = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { children, className, content, fullWidth } = props
   const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)
@@ -26,8 +28,10 @@ const TableHeader = React.forwardRef(function (props, ref) {
   )
 })
 
-TableHeader.defaultProps = {
-  as: 'thead',
+function getDefaultProps() {
+  return {
+    as: 'thead',
+  }
 }
 
 TableHeader.displayName = 'TableHeader'
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index a4a23b2488..2bcc2ee479 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -8,7 +9,8 @@ import TableCell from './TableCell'
 /**
  * A table can have a header cell.
  */
-const TableHeaderCell = React.forwardRef(function (props, ref) {
+const TableHeaderCell = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { as, className, sorted } = props
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
   const rest = getUnhandledProps(TableHeaderCell, props)
@@ -28,8 +30,10 @@ TableHeaderCell.propTypes = {
   sorted: PropTypes.oneOf(['ascending', 'descending']),
 }
 
-TableHeaderCell.defaultProps = {
-  as: 'th',
+function getDefaultProps() {
+  return {
+    as: 'th',
+  }
 }
 
 export default TableHeaderCell
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 5e7e83d1d5..1f0f62ecc6 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -19,7 +19,8 @@ import TableCell from './TableCell'
 /**
  * A table can have rows.
  */
-const TableRow = React.forwardRef(function (props, ref) {
+const TableRow = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     active,
     cellAs,
@@ -64,9 +65,11 @@ const TableRow = React.forwardRef(function (props, ref) {
   )
 })
 
-TableRow.defaultProps = {
-  as: 'tr',
-  cellAs: 'td',
+function getDefaultProps() {
+  return {
+    as: 'tr',
+    cellAs: 'td',
+  }
 }
 
 TableRow.displayName = 'TableRow'
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index f2fd188de6..4895043ec0 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -70,7 +70,8 @@ function hasIconClass(props) {
  * @see Icon
  * @see Label
  */
-const Button = React.forwardRef(function (props, ref) {
+const Button = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     active,
     animated,
@@ -96,7 +97,7 @@ const Button = React.forwardRef(function (props, ref) {
     secondary,
     size,
     toggle,
-    type
+    type,
   } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
@@ -315,8 +316,10 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
 }
 
-Button.defaultProps = {
-  as: 'button',
+function getDefaultProps() {
+  return {
+    as: 'button',
+  }
 }
 
 Button.Content = ButtonContent
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 2c17cfbf36..0228c0bf26 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -8,7 +8,8 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI
 /**
  * Several icons can be used together as a group.
  */
-const IconGroup = React.forwardRef(function (props, ref) {
+const IconGroup = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { children, className, content, size } = props
 
   const classes = cx(size, 'icons', className)
@@ -40,8 +41,10 @@ IconGroup.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
-IconGroup.defaultProps = {
-  as: 'i',
+function getDefaultProps() {
+  return {
+    as: 'i',
+  }
 }
 
 export default IconGroup
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index c72c22ff79..aa2945ec42 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -25,7 +25,8 @@ import ImageGroup from './ImageGroup'
  * An image is a graphic representation of something.
  * @see Icon
  */
-const Image = React.forwardRef(function (props, ref) {
+const Image = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     avatar,
     bordered,
@@ -183,9 +184,11 @@ Image.propTypes = {
   wrapped: PropTypes.bool,
 }
 
-Image.defaultProps = {
-  as: 'img',
-  ui: true,
+function getDefaultProps() {
+  return {
+    as: 'img',
+    ui: true,
+  }
 }
 
 Image.create = createShorthandFactory(Image, (value) => ({ src: value }))
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 7f830a4a65..99445d7547 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -26,7 +26,8 @@ import Label from '../Label'
  * @see Icon
  * @see Label
  */
-const Input = React.forwardRef(function (props, ref) {
+const Input = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     action,
     actionPosition,
@@ -234,8 +235,10 @@ Input.propTypes = {
   type: PropTypes.string,
 }
 
-Input.defaultProps = {
-  type: 'text',
+function getDefaultProps() {
+  return {
+    type: 'text',
+  }
 }
 
 Input.create = createShorthandFactory(Input, (type) => ({ type }))
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index 8b6227d7f5..7bbd6bf204 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -44,7 +44,8 @@ function computeNewIndex(exclusive, activeIndex, itemIndex) {
 /**
  * An Accordion can contain sub-accordions.
  */
-const AccordionAccordion = React.forwardRef(function (props, ref) {
+const AccordionAccordion = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { className, children, exclusive, panels } = props
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
@@ -92,8 +93,10 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
   )
 })
 
-AccordionAccordion.defaultProps = {
-  exclusive: true,
+function getDefaultProps() {
+  return {
+    exclusive: true,
+  }
 }
 
 AccordionAccordion.displayName = 'AccordionAccordion'
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index 00eeeb80a6..af17c2e1c3 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -24,7 +24,8 @@ const debug = makeDebugger('checkbox')
  * @see Form
  * @see Radio
  */
-const Checkbox = React.forwardRef(function (props, ref) {
+const Checkbox = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     className,
     disabled,
@@ -319,8 +320,10 @@ Checkbox.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
-Checkbox.defaultProps = {
-  type: 'checkbox',
+function getDefaultProps() {
+  return {
+    type: 'checkbox',
+  }
 }
 
 export default Checkbox
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 8f46f28f1c..65e786affd 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -8,7 +8,8 @@ import { createShorthandFactory, getElementType, getUnhandledProps } from '../..
 /**
  * A search item sub-component for Dropdown component.
  */
-const DropdownSearchInput = React.forwardRef(function (props, ref) {
+const DropdownSearchInput = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { autoComplete, className, tabIndex, type, value } = props
 
   const handleChange = (e) => {
@@ -57,10 +58,12 @@ DropdownSearchInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-DropdownSearchInput.defaultProps = {
-  as: 'input',
-  autoComplete: 'off',
-  type: 'text',
+function getDefaultProps() {
+  return {
+    as: 'input',
+    autoComplete: 'off',
+    type: 'text',
+  }
 }
 
 DropdownSearchInput.create = createShorthandFactory(DropdownSearchInput, (type) => ({ type }))
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index cf35c358bb..bf98580d26 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -33,7 +33,8 @@ const debug = makeDebugger('modal')
  * @see Confirm
  * @see Portal
  */
-const Modal = React.forwardRef(function (props, ref) {
+const Modal = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     actions,
     basic,
@@ -398,12 +399,14 @@ Modal.propTypes = {
    */
 }
 
-Modal.defaultProps = {
-  centered: true,
-  dimmer: true,
-  closeOnDimmerClick: true,
-  closeOnDocumentClick: false,
-  eventPool: 'Modal',
+function getDefaultProps() {
+  return {
+    centered: true,
+    dimmer: true,
+    closeOnDimmerClick: true,
+    closeOnDocumentClick: false,
+    eventPool: 'Modal',
+  }
 }
 
 Modal.Actions = ModalActions
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index f6d1111ed1..313bc05bed 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -111,7 +111,8 @@ function usePositioningEffect(popperDependencies, positionUpdate) {
 /**
  * A Popup displays additional information on top of a page.
  */
-const Popup = React.forwardRef(function (props, ref) {
+const Popup = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     basic,
     className,
@@ -469,13 +470,15 @@ Popup.propTypes = {
   wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
 }
 
-Popup.defaultProps = {
-  disabled: false,
-  eventsEnabled: true,
-  on: ['click', 'hover'],
-  pinned: false,
-  popperModifiers: [],
-  position: 'top left',
+function getDefaultProps() {
+  return {
+    disabled: false,
+    eventsEnabled: true,
+    on: ['click', 'hover'],
+    pinned: false,
+    popperModifiers: [],
+    position: 'top left',
+  }
 }
 
 Popup.Content = PopupContent
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index f4bf35a6d9..91d546f235 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -15,7 +15,8 @@ import RatingIcon from './RatingIcon'
 /**
  * A rating indicates user interest in content.
  */
-const Rating = React.forwardRef(function (props, ref) {
+const Rating = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { className, clearable, disabled, icon, maxRating, size } = props
 
   const [rating, setRating] = useAutoControlledValue({
@@ -151,9 +152,11 @@ Rating.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
 }
 
-Rating.defaultProps = {
-  clearable: 'auto',
-  maxRating: 1,
+function getDefaultProps() {
+  return {
+    clearable: 'auto',
+    maxRating: 1,
+  }
 }
 
 Rating.Icon = RatingIcon
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 22cc558e09..df6668c3eb 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -9,7 +9,8 @@ import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
 /**
  * An internal icon sub-component for Rating component
  */
-const RatingIcon = React.forwardRef(function (props, ref) {
+const RatingIcon = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { active, className, selected } = props
 
   const classes = cx(
@@ -97,8 +98,10 @@ RatingIcon.propTypes = {
   selected: PropTypes.bool,
 }
 
-RatingIcon.defaultProps = {
-  as: 'i',
+function getDefaultProps() {
+  return {
+    as: 'i',
+  }
 }
 
 export default RatingIcon
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 71d9c01224..0df622b640 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -11,7 +12,8 @@ import {
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
-const SearchCategory = React.forwardRef(function (props, ref) {
+const SearchCategory = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { active, children, className, content, layoutRenderer, renderer } = props
 
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
@@ -28,9 +30,11 @@ const SearchCategory = React.forwardRef(function (props, ref) {
   )
 })
 
-SearchCategory.defaultProps = {
-  layoutRenderer: SearchCategoryLayout,
-  renderer: ({ name }) => name,
+function getDefaultProps() {
+  return {
+    layoutRenderer: SearchCategoryLayout,
+    renderer: ({ name }) => name,
+  }
 }
 
 SearchCategory.displayName = 'SearchCategory'
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index 69f3ac5239..d8d751b1d1 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -31,7 +31,8 @@ const defaultRenderer = ({ image, price, title, description }) => [
   </div>,
 ]
 
-const SearchResult = React.forwardRef(function (props, ref) {
+const SearchResult = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { active, className, renderer } = props
 
   const handleClick = (e) => {
@@ -99,8 +100,10 @@ SearchResult.propTypes = {
   title: PropTypes.string.isRequired,
 }
 
-SearchResult.defaultProps = {
-  renderer: defaultRenderer,
+function getDefaultProps() {
+  return {
+    renderer: defaultRenderer,
+  }
 }
 
 export default SearchResult
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index ab8c821c9a..f2e187e8b7 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -16,7 +16,8 @@ import {
 /**
  * Sticky content stays fixed to the browser viewport while another column of content is visible on the page.
  */
-const Sticky = React.forwardRef(function (props, ref) {
+const Sticky = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const {
     active,
     bottomOffset,
@@ -333,11 +334,13 @@ Sticky.propTypes = {
   styleElement: PropTypes.object,
 }
 
-Sticky.defaultProps = {
-  active: true,
-  bottomOffset: 0,
-  offset: 0,
-  scrollContext: isBrowser() ? window : null,
+function getDefaultProps() {
+  return {
+    active: true,
+    bottomOffset: 0,
+    offset: 0,
+    scrollContext: isBrowser() ? window : null,
+  }
 }
 
 export default Sticky
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index 3004f4ceda..d691024cfd 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -18,7 +18,8 @@ import TabPane from './TabPane'
  * @see Menu
  * @see Segment
  */
-const Tab = React.forwardRef(function (props, ref) {
+const Tab = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { grid, menu, panes, menuPosition, renderActiveOnly } = props
 
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
@@ -157,10 +158,12 @@ Tab.propTypes = {
 
 Tab.autoControlledProps = ['activeIndex']
 
-Tab.defaultProps = {
-  grid: { paneWidth: 12, tabWidth: 4 },
-  menu: { attached: true, tabular: true },
-  renderActiveOnly: true,
+function getDefaultProps() {
+  return {
+    grid: { paneWidth: 12, tabWidth: 4 },
+    menu: { attached: true, tabular: true },
+    renderActiveOnly: true,
+  }
 }
 
 Tab.Pane = TabPane
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 4551dfb497..30a6b0f630 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -15,7 +16,8 @@ import Segment from '../../elements/Segment/Segment'
 /**
  * A tab pane holds the content of a tab.
  */
-const TabPane = React.forwardRef(function (props, ref) {
+const TabPane = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { active, children, className, content, loading } = props
 
   const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
@@ -35,9 +37,11 @@ const TabPane = React.forwardRef(function (props, ref) {
   )
 })
 
-TabPane.defaultProps = {
-  as: Segment,
-  active: true,
+function getDefaultProps() {
+  return {
+    as: Segment,
+    active: true,
+  }
 }
 
 TabPane.displayName = 'TabPane'
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 0a8142939e..0780331d87 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -107,7 +107,8 @@ function useWrappedChildren(children, animation, duration, directional) {
 /**
  * A Transition.Group animates children as they mount and unmount.
  */
-const TransitionGroup = React.forwardRef(function (props, ref) {
+const TransitionGroup = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   debug('render')
   debug('props', props)
 
@@ -153,10 +154,12 @@ TransitionGroup.propTypes = {
   ]),
 }
 
-TransitionGroup.defaultProps = {
-  as: React.Fragment,
-  animation: 'fade',
-  duration: 500,
+function getDefaultProps() {
+  return {
+    as: React.Fragment,
+    animation: 'fade',
+    duration: 500,
+  }
 }
 
 export default TransitionGroup
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index 3dde605c83..ef5fd25426 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -13,7 +14,8 @@ import {
 /**
  * A comment can contain an action.
  */
-const CommentAction = React.forwardRef(function (props, ref) {
+const CommentAction = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { active, className, children, content } = props
 
   const classes = cx(useKeyOnly(active, 'active'), className)
@@ -27,8 +29,10 @@ const CommentAction = React.forwardRef(function (props, ref) {
   )
 })
 
-CommentAction.defaultProps = {
-  as: 'a',
+function getDefaultProps() {
+  return {
+    as: 'a',
+  }
 }
 
 CommentAction.displayName = 'CommentAction'
diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index 70eca84786..e50a8526d5 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -8,7 +9,8 @@ import Icon from '../../elements/Icon'
 /**
  * A feed can contain a like element.
  */
-const FeedLike = React.forwardRef(function (props, ref) {
+const FeedLike = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { children, className, content, icon } = props
 
   const classes = cx('like', className)
@@ -31,8 +33,10 @@ const FeedLike = React.forwardRef(function (props, ref) {
   )
 })
 
-FeedLike.defaultProps = {
-  as: 'a',
+function getDefaultProps() {
+  return {
+    as: 'a',
+  }
 }
 
 FeedLike.displayName = 'FeedLike'
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index 9b7d44e55c..46b908d39c 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -7,7 +8,8 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A feed can contain a user element.
  */
-const FeedUser = React.forwardRef(function (props, ref) {
+const FeedUser = React.forwardRef(function (partialProps, ref) {
+  const props = _.defaults(partialProps, getDefaultProps())
   const { children, className, content } = props
   const classes = cx('user', className)
   const rest = getUnhandledProps(FeedUser, props)
@@ -35,8 +37,10 @@ FeedUser.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-FeedUser.defaultProps = {
-  as: 'a',
+function getDefaultProps() {
+  return {
+    as: 'a',
+  }
 }
 
 export default FeedUser

From 232c41ff4d43d931cfc28e39f385b778fe4817ba Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 18:44:57 +0100
Subject: [PATCH 06/17] apply suggested changes

---
 src/addons/Confirm/Confirm.js       | 21 ++++------
 src/addons/Pagination/Pagination.js | 64 ++++++++++++++---------------
 src/addons/Radio/Radio.js           | 12 +-----
 3 files changed, 42 insertions(+), 55 deletions(-)

diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 89c7679521..57a360e6f4 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -10,9 +10,15 @@ import Modal from '../../modules/Modal'
  * A Confirm modal gives the user a choice to confirm or cancel an action.
  * @see Modal
  */
-const Confirm = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { cancelButton, confirmButton, content, header, open, size } = props
+const Confirm = React.forwardRef(function (props, ref) {
+  const {
+    cancelButton = 'Cancel',
+    confirmButton = 'OK',
+    content = 'Are you sure?',
+    header,
+    open,
+    size = 'small',
+  } = props
   const rest = getUnhandledProps(Confirm, props)
 
   const handleCancel = (e) => {
@@ -97,13 +103,4 @@ Confirm.propTypes = {
   size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
 }
 
-function getDefaultProps() {
-  return {
-    cancelButton: 'Cancel',
-    confirmButton: 'OK',
-    content: 'Are you sure?',
-    size: 'small',
-  }
-}
-
 export default Confirm
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index 2a0550f4bb..05a8b39c4a 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -14,14 +14,30 @@ import PaginationItem from './PaginationItem'
 /**
  * A component to render a pagination.
  */
-const Pagination = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Pagination = React.forwardRef(function (props, ref) {
   const {
-    'aria-label': ariaLabel,
-    boundaryRange,
+    'aria-label': ariaLabel = 'Pagination Navigation',
+    boundaryRange = 1,
     disabled,
-    ellipsisItem,
-    siblingRange,
+    ellipsisItem = '...',
+    firstItem = {
+      'aria-label': 'First item',
+      content: '«',
+    },
+    lastItem = {
+      'aria-label': 'Last item',
+      content: '»',
+    },
+    nextItem = {
+      'aria-label': 'Next item',
+      content: '⟩',
+    },
+    pageItem = {},
+    prevItem = {
+      'aria-label': 'Previous item',
+      content: '⟨',
+    },
+    siblingRange = 1,
     totalPages,
   } = props
   const [activePage, setActivePage] = useAutoControlledValue({
@@ -64,10 +80,18 @@ const Pagination = React.forwardRef(function (partialProps, ref) {
   })
   const rest = getUnhandledProps(Pagination, props)
 
+  const paginationItemTypes = {
+    firstItem,
+    lastItem,
+    nextItem,
+    pageItem,
+    prevItem,
+  }
+
   return (
     <Menu {...rest} aria-label={ariaLabel} pagination role='navigation' ref={ref}>
       {_.map(items, ({ active, type, value }) =>
-        PaginationItem.create(props[type], {
+        PaginationItem.create(paginationItemTypes[type], {
           defaultProps: {
             content: value,
             disabled,
@@ -130,32 +154,6 @@ Pagination.propTypes = {
   totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
-function getDefaultProps() {
-  return {
-    'aria-label': 'Pagination Navigation',
-    boundaryRange: 1,
-    ellipsisItem: '...',
-    firstItem: {
-      'aria-label': 'First item',
-      content: '«',
-    },
-    lastItem: {
-      'aria-label': 'Last item',
-      content: '»',
-    },
-    nextItem: {
-      'aria-label': 'Next item',
-      content: '⟩',
-    },
-    pageItem: {},
-    prevItem: {
-      'aria-label': 'Previous item',
-      content: '⟨',
-    },
-    siblingRange: 1,
-  }
-}
-
 Pagination.Item = PaginationItem
 
 export default Pagination
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index 4199880908..957e1baaba 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import React from 'react'
 
 import { getUnhandledProps } from '../../lib'
@@ -10,9 +9,8 @@ import Checkbox from '../../modules/Checkbox'
  * @see Checkbox
  * @see Form
  */
-const Radio = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { slider, toggle, type } = props
+const Radio = React.forwardRef(function (props, ref) {
+  const { slider, toggle, type = 'radio' } = props
 
   const rest = getUnhandledProps(Radio, props)
   // const ElementType = getElementType(Radio, props)
@@ -35,10 +33,4 @@ Radio.propTypes = {
   type: Checkbox.propTypes.type,
 }
 
-function getDefaultProps() {
-  return {
-    type: 'radio',
-  }
-}
-
 export default Radio

From e77b826c66480220dfaec231d6b14a876bac26e1 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 18:46:15 +0100
Subject: [PATCH 07/17] remove transform

---
 transform.js | 60 ----------------------------------------------------
 1 file changed, 60 deletions(-)
 delete mode 100644 transform.js

diff --git a/transform.js b/transform.js
deleted file mode 100644
index f266523859..0000000000
--- a/transform.js
+++ /dev/null
@@ -1,60 +0,0 @@
-const { execSync } = require('child_process')
-const { readFile, writeFile } = require('fs/promises')
-
-async function defaultProps(code) {
-  const lines = code.split('\n')
-  const defaultPropsBeginIndex = lines.findIndex((line) => line.includes('.defaultProps = {'))
-  const defaultPropsEndIndex =
-    lines.slice(defaultPropsBeginIndex).findIndex((line) => line === '}') + defaultPropsBeginIndex
-  const componentName = lines[defaultPropsBeginIndex].match(/^(\S+)\.defaultProps/)[1]
-  if (!componentName) {
-    return code
-  }
-  lines[defaultPropsBeginIndex] = lines[defaultPropsBeginIndex].replace(
-    /^\S+\.defaultProps\s+=/,
-    'function getDefaultProps() { return',
-  )
-  lines[defaultPropsEndIndex] = '}}'
-  const functionExpressionIndex = lines.findIndex(
-    (line) => line.startsWith(`const ${componentName} =`) && line.includes('forwardRef(function'),
-  )
-  if (functionExpressionIndex === -1) {
-    return code
-  }
-  lines[functionExpressionIndex] = lines[functionExpressionIndex].replace('props', 'partialProps')
-  lines.splice(
-    functionExpressionIndex + 1,
-    0,
-    `const props = _.defaults(partialProps, getDefaultProps())`,
-  )
-  if (!lines.find((line) => line.includes("import _ from 'lodash'"))) {
-    lines.unshift("import _ from 'lodash'")
-  }
-  const result = lines.join('\n')
-  return result
-}
-
-;(async function main() {
-  // const paths = ['./src/collections/Message/MessageItem.js']
-  const paths = execSync('git ls-files | grep -P js$ | xargs grep -lF ".defaultProps ="')
-    .toString()
-    .split('\n')
-    .map((line) => line.trim())
-    .filter((line) => line)
-  const results = await Promise.all(
-    paths.map((path) =>
-      Promise.resolve()
-        .then(() => readFile(path, 'utf8'))
-        .then(defaultProps)
-        .then((code) => writeFile(path, code, 'utf8'))
-        .then(() => {})
-        .catch((error) => ({ path, error })),
-    ),
-  )
-  const errorResutls = results.filter((payload) => payload).filter(({ error }) => error)
-  if (errorResutls.length) {
-    // eslint-disable-next-line no-console
-    console.error(errorResutls)
-  }
-  execSync(`prettier --write ${paths.join(' ')}`)
-})()

From c51a34bcf85bb6fb223a017923f04a807ac76c78 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 18:56:35 +0100
Subject: [PATCH 08/17] replace getElementType with getComponentType

---
 .../{getElementType.js => getComponentType.js}  | 17 +++++++++--------
 src/lib/index.js                                |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)
 rename src/lib/{getElementType.js => getComponentType.js} (59%)

diff --git a/src/lib/getElementType.js b/src/lib/getComponentType.js
similarity index 59%
rename from src/lib/getElementType.js
rename to src/lib/getComponentType.js
index 27c2bc6769..9c1c5f183a 100644
--- a/src/lib/getElementType.js
+++ b/src/lib/getComponentType.js
@@ -2,18 +2,19 @@
  * Returns a createElement() type based on the props of the Component.
  * Useful for calculating what type a component should render as.
  *
- * @param {function} Component A function or ReactClass.
  * @param {object} props A ReactElement props object
- * @param {function} [getDefault] A function that returns a default element type.
- * @returns {string|function} A ReactElement type
+ * @param {object} [options={}]
+ * @param {string|Function} [options.defaultAs] A default element type.
+ * @param {Function} [options.getDefault] A function that returns a default element type.
+ * @returns {string|Function} A ReactElement type
  */
-function getElementType(Component, props, getDefault) {
-  const { defaultProps = {} } = Component
+function getComponentType(props, options = {}) {
+  const { defaultAs, getDefault } = options
 
   // ----------------------------------------
   // user defined "as" element type
 
-  if (props.as && props.as !== defaultProps.as) return props.as
+  if (props.as && props.as !== defaultAs) return props.as
 
   // ----------------------------------------
   // computed default element type
@@ -31,7 +32,7 @@ function getElementType(Component, props, getDefault) {
   // ----------------------------------------
   // use defaultProp or 'div'
 
-  return defaultProps.as || 'div'
+  return defaultAs || 'div'
 }
 
-export default getElementType
+export default getComponentType
diff --git a/src/lib/index.js b/src/lib/index.js
index 9325384369..a405193eb8 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -17,8 +17,8 @@ export * as customPropTypes from './customPropTypes'
 export eventStack from './eventStack'
 
 export * from './factories'
+export getComponentType from './getComponentType'
 export getUnhandledProps from './getUnhandledProps'
-export getElementType from './getElementType'
 
 export {
   htmlInputAttrs,

From 32de4326267c9896a8765de1832d60332fc68718 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 18:57:23 +0100
Subject: [PATCH 09/17] apply suggestions

---
 src/views/Feed/FeedLike.js | 14 +++-----------
 src/views/Feed/FeedUser.js | 15 ++++-----------
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/views/Feed/FeedLike.js b/src/views/Feed/FeedLike.js
index e50a8526d5..b5e4c8bf2d 100644
--- a/src/views/Feed/FeedLike.js
+++ b/src/views/Feed/FeedLike.js
@@ -1,21 +1,19 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import Icon from '../../elements/Icon'
 
 /**
  * A feed can contain a like element.
  */
-const FeedLike = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const FeedLike = React.forwardRef(function (props, ref) {
   const { children, className, content, icon } = props
 
   const classes = cx('like', className)
   const rest = getUnhandledProps(FeedLike, props)
-  const ElementType = getElementType(FeedLike, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -33,12 +31,6 @@ const FeedLike = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'a',
-  }
-}
-
 FeedLike.displayName = 'FeedLike'
 FeedLike.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/views/Feed/FeedUser.js b/src/views/Feed/FeedUser.js
index 46b908d39c..10866e8720 100644
--- a/src/views/Feed/FeedUser.js
+++ b/src/views/Feed/FeedUser.js
@@ -1,19 +1,18 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A feed can contain a user element.
  */
-const FeedUser = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const FeedUser = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('user', className)
   const rest = getUnhandledProps(FeedUser, props)
-  const ElementType = getElementType(FeedUser, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -37,10 +36,4 @@ FeedUser.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'a',
-  }
-}
-
 export default FeedUser

From e039d38f9585272c553e1d4c1b25ca354865ce11 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 18:57:44 +0100
Subject: [PATCH 10/17] fix tests

---
 test/specs/commonTests/implementsShorthandProp.js |  3 +--
 test/specs/commonTests/isConformant.js            | 12 ++++++++++--
 test/specs/elements/Image/Image-test.js           |  3 +--
 test/utils/getComponentProps.js                   |  1 -
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/test/specs/commonTests/implementsShorthandProp.js b/test/specs/commonTests/implementsShorthandProp.js
index 64c8f7fc57..de7a17db3b 100644
--- a/test/specs/commonTests/implementsShorthandProp.js
+++ b/test/specs/commonTests/implementsShorthandProp.js
@@ -90,10 +90,9 @@ export default (Component, options = {}) => {
       }
     }
 
-    if (alwaysPresent || (Component.defaultProps && Component.defaultProps[propKey])) {
+    if (alwaysPresent) {
       it(`has default ${name} when not defined`, () => {
         wrapper = mount(React.createElement(Component, requiredProps))
-
         wrapper.should.have.descendants(ShorthandComponent)
       })
     } else {
diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
index 616e7de4e6..d183696e2e 100644
--- a/test/specs/commonTests/isConformant.js
+++ b/test/specs/commonTests/isConformant.js
@@ -211,7 +211,6 @@ export default function isConformant(Component, options = {}) {
     it('Component.handledProps includes all handled props', () => {
       const computedProps = _.union(
         componentProps.autoControlledProps,
-        _.keys(componentProps.defaultProps),
         _.keys(componentProps.propTypes),
       )
       const expectedProps = _.uniq(computedProps).sort()
@@ -219,7 +218,7 @@ export default function isConformant(Component, options = {}) {
       componentProps.handledProps.should.to.deep.equal(
         expectedProps,
         'It seems that not all props were defined in Component.handledProps, you need to check that they are equal ' +
-          'to the union of Component.autoControlledProps and keys of Component.defaultProps and Component.propTypes',
+          'to the union of Component.autoControlledProps and keys of Component.propTypes',
       )
     })
   })
@@ -314,6 +313,15 @@ export default function isConformant(Component, options = {}) {
     })
   })
 
+  // ----------------------------------------
+  // Has no deprecated .defaultProps
+  // ----------------------------------------
+  describe('defaultProps', () => {
+    it('does not exist', () => {
+      expect(Component.defaultProps).to.be.undefined()
+    })
+  })
+
   // ----------------------------------------
   // Handles className
   // ----------------------------------------
diff --git a/test/specs/elements/Image/Image-test.js b/test/specs/elements/Image/Image-test.js
index 79cd097f5d..013515efd6 100644
--- a/test/specs/elements/Image/Image-test.js
+++ b/test/specs/elements/Image/Image-test.js
@@ -88,8 +88,7 @@ describe('Image', () => {
 
   describe('ui', () => {
     it('is true by default', () => {
-      Image.defaultProps.should.have.any.keys('ui')
-      Image.defaultProps.ui.should.equal(true)
+      shallow(<Image />).should.have.className('ui')
     })
     it('adds the "ui" className when true', () => {
       shallow(<Image ui />).should.have.className('ui')
diff --git a/test/utils/getComponentProps.js b/test/utils/getComponentProps.js
index 61b81536ef..6e8c28397d 100644
--- a/test/utils/getComponentProps.js
+++ b/test/utils/getComponentProps.js
@@ -13,7 +13,6 @@ export default function getComponentProps(Component) {
 
   return {
     autoControlledProps: Component.autoControlledProps,
-    defaultProps: Component.defaultProps,
     handledProps: Component.handledProps,
     propTypes: Component.propTypes,
   }

From 0a43c3d4f1bfae096fdb8fae7ce922a0d2d08992 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 18:58:26 +0100
Subject: [PATCH 11/17] remove rule changes

---
 .eslintrc | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 208d9aa5aa..151942c8b8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,14 +6,6 @@
     "browser": true
   },
   "rules": {
-    "no-use-before-define": [
-      "error",
-      {
-        "functions": false,
-        "classes": true,
-        "variables": true
-      }
-    ],
     "newline-per-chained-call": "off",
     "class-methods-use-this": "off",
     "consistent-return": "off",

From baed0afab1dfc5c365f617cf3fc856aa5f61aea3 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 19:03:34 +0100
Subject: [PATCH 12/17] remove transform

---
 src/modules/Tab/Tab.js                    | 25 +++++++++--------------
 src/modules/Tab/TabPane.js                | 17 ++++-----------
 src/modules/Transition/TransitionGroup.js | 21 ++++++-------------
 src/views/Comment/CommentAction.js        | 14 +++----------
 4 files changed, 23 insertions(+), 54 deletions(-)

diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index d691024cfd..03ef505cea 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useAutoControlledValue,
 } from '../../lib'
@@ -18,9 +18,14 @@ import TabPane from './TabPane'
  * @see Menu
  * @see Segment
  */
-const Tab = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { grid, menu, panes, menuPosition, renderActiveOnly } = props
+const Tab = React.forwardRef(function (props, ref) {
+  const {
+    grid = { paneWidth: 12, tabWidth: 4 },
+    menu = { attached: true, tabular: true },
+    menuPosition,
+    panes,
+    renderActiveOnly = true,
+  } = props
 
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
@@ -87,7 +92,7 @@ const Tab = React.forwardRef(function (partialProps, ref) {
 
   const menuElement = renderMenu()
   const rest = getUnhandledProps(Tab, props)
-  const ElementType = getElementType(Tab, props)
+  const ElementType = getComponentType(props)
 
   if (menuElement.props.vertical) {
     return (
@@ -156,16 +161,6 @@ Tab.propTypes = {
   renderActiveOnly: PropTypes.bool,
 }
 
-Tab.autoControlledProps = ['activeIndex']
-
-function getDefaultProps() {
-  return {
-    grid: { paneWidth: 12, tabWidth: 4 },
-    menu: { attached: true, tabular: true },
-    renderActiveOnly: true,
-  }
-}
-
 Tab.Pane = TabPane
 
 export default Tab
diff --git a/src/modules/Tab/TabPane.js b/src/modules/Tab/TabPane.js
index 30a6b0f630..0e1bdbad45 100644
--- a/src/modules/Tab/TabPane.js
+++ b/src/modules/Tab/TabPane.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -7,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -16,13 +15,12 @@ import Segment from '../../elements/Segment/Segment'
 /**
  * A tab pane holds the content of a tab.
  */
-const TabPane = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { active, children, className, content, loading } = props
+const TabPane = React.forwardRef(function (props, ref) {
+  const { active = true, children, className, content, loading } = props
 
   const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
   const rest = getUnhandledProps(TabPane, props)
-  const ElementType = getElementType(TabPane, props)
+  const ElementType = getComponentType(props, { defaultAs: Segment })
 
   const calculatedDefaultProps = {}
 
@@ -37,13 +35,6 @@ const TabPane = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: Segment,
-    active: true,
-  }
-}
-
 TabPane.displayName = 'TabPane'
 TabPane.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Transition/TransitionGroup.js b/src/modules/Transition/TransitionGroup.js
index 0780331d87..4708820aba 100644
--- a/src/modules/Transition/TransitionGroup.js
+++ b/src/modules/Transition/TransitionGroup.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   SUI,
@@ -19,7 +19,7 @@ const debug = makeDebugger('transition_group')
  * Wraps all children elements with proper callbacks and props.
  *
  * @param {React.ReactNode} children
- * @param {Stream} animation
+ * @param {String} animation
  * @param {Number|String|Object} duration
  * @param {Boolean} directional
  *
@@ -107,19 +107,18 @@ function useWrappedChildren(children, animation, duration, directional) {
 /**
  * A Transition.Group animates children as they mount and unmount.
  */
-const TransitionGroup = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const TransitionGroup = React.forwardRef(function (props, ref) {
   debug('render')
   debug('props', props)
 
   const children = useWrappedChildren(
     props.children,
-    props.animation,
-    props.duration,
+    props.animation ?? 'fade',
+    props.duration ?? 500,
     props.directional,
   )
 
-  const ElementType = getElementType(TransitionGroup, props)
+  const ElementType = getComponentType(props, { defaultAs: React.Fragment })
   const rest = getUnhandledProps(TransitionGroup, props)
 
   return (
@@ -154,12 +153,4 @@ TransitionGroup.propTypes = {
   ]),
 }
 
-function getDefaultProps() {
-  return {
-    as: React.Fragment,
-    animation: 'fade',
-    duration: 500,
-  }
-}
-
 export default TransitionGroup
diff --git a/src/views/Comment/CommentAction.js b/src/views/Comment/CommentAction.js
index ef5fd25426..82eae2cc95 100644
--- a/src/views/Comment/CommentAction.js
+++ b/src/views/Comment/CommentAction.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -6,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -14,13 +13,12 @@ import {
 /**
  * A comment can contain an action.
  */
-const CommentAction = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const CommentAction = React.forwardRef(function (props, ref) {
   const { active, className, children, content } = props
 
   const classes = cx(useKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(CommentAction, props)
-  const ElementType = getElementType(CommentAction, props)
+  const ElementType = getComponentType(props, { defaultAs: 'a' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -29,12 +27,6 @@ const CommentAction = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'a',
-  }
-}
-
 CommentAction.displayName = 'CommentAction'
 CommentAction.propTypes = {
   /** An element type to render as (string or function). */

From 45982c11287b405d4cc9b653e89ed31513ef2f56 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 19:12:46 +0100
Subject: [PATCH 13/17] apply changes

---
 src/modules/Modal/Modal.js           | 27 ++++++++-----------------
 src/modules/Popup/Popup.js           | 30 +++++++++-------------------
 src/modules/Rating/Rating.js         | 16 ++++-----------
 src/modules/Rating/RatingIcon.js     | 13 +++---------
 src/modules/Search/SearchCategory.js | 24 ++++++++++------------
 src/modules/Search/SearchResult.js   | 15 ++++----------
 src/modules/Sticky/Sticky.js         | 24 +++++++---------------
 7 files changed, 46 insertions(+), 103 deletions(-)

diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index bf98580d26..dbd1b4679e 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   doesNodeContainClick,
   eventStack,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   isBrowser,
   makeDebugger,
@@ -33,20 +33,19 @@ const debug = makeDebugger('modal')
  * @see Confirm
  * @see Portal
  */
-const Modal = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Modal = React.forwardRef(function (props, ref) {
   const {
     actions,
     basic,
-    centered,
+    centered = true,
     children,
     className,
     closeIcon,
-    closeOnDimmerClick,
-    closeOnDocumentClick,
+    closeOnDimmerClick = true,
+    closeOnDocumentClick = false,
     content,
-    dimmer,
-    eventPool,
+    dimmer = true,
+    eventPool = 'Modal',
     header,
     size,
     style,
@@ -186,7 +185,7 @@ const Modal = React.forwardRef(function (partialProps, ref) {
       'modal transition visible active',
       className,
     )
-    const ElementType = getElementType(Modal, props)
+    const ElementType = getComponentType(props)
 
     const closeIconName = closeIcon === true ? 'close' : closeIcon
     const closeIconJSX = Icon.create(closeIconName, {
@@ -399,16 +398,6 @@ Modal.propTypes = {
    */
 }
 
-function getDefaultProps() {
-  return {
-    centered: true,
-    dimmer: true,
-    closeOnDimmerClick: true,
-    closeOnDocumentClick: false,
-    eventPool: 'Modal',
-  }
-}
-
 Modal.Actions = ModalActions
 Modal.Content = ModalContent
 Modal.Description = ModalDescription
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 313bc05bed..c0b7276928 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -10,7 +10,7 @@ import {
   childrenUtils,
   createHTMLDivision,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   SUI,
@@ -35,7 +35,7 @@ const debug = makeDebugger('popup')
  */
 function getPortalProps(props) {
   const portalProps = {}
-  const normalizedOn = _.isArray(props.on) ? props.on : [props.on]
+  const normalizedOn = _.isArray(props.on) ? props.on ?? ['click', 'hover'] : [props.on]
 
   if (props.hoverable) {
     portalProps.closeOnPortalMouseLeave = true
@@ -111,25 +111,24 @@ function usePositioningEffect(popperDependencies, positionUpdate) {
 /**
  * A Popup displays additional information on top of a page.
  */
-const Popup = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Popup = React.forwardRef(function (props, ref) {
   const {
     basic,
     className,
     content,
     context,
     children,
-    disabled,
-    eventsEnabled,
+    disabled = false,
+    eventsEnabled = true,
     flowing,
     header,
     inverted,
     offset,
-    pinned,
+    pinned = false,
     popper,
     popperDependencies,
-    popperModifiers,
-    position,
+    popperModifiers = [],
+    position = 'top left',
     positionFixed,
     size,
     style,
@@ -231,7 +230,7 @@ const Popup = React.forwardRef(function (partialProps, ref) {
       'popup transition visible',
       className,
     )
-    const ElementType = getElementType(Popup, props)
+    const ElementType = getComponentType(props)
 
     const styles = {
       // Heads up! We need default styles to get working correctly `flowing`
@@ -470,17 +469,6 @@ Popup.propTypes = {
   wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]),
 }
 
-function getDefaultProps() {
-  return {
-    disabled: false,
-    eventsEnabled: true,
-    on: ['click', 'hover'],
-    pinned: false,
-    popperModifiers: [],
-    position: 'top left',
-  }
-}
-
 Popup.Content = PopupContent
 Popup.Header = PopupHeader
 
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index 91d546f235..c41a299797 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import {
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -15,9 +15,8 @@ import RatingIcon from './RatingIcon'
 /**
  * A rating indicates user interest in content.
  */
-const Rating = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { className, clearable, disabled, icon, maxRating, size } = props
+const Rating = React.forwardRef(function (props, ref) {
+  const { className, clearable = 'auto', disabled, icon, maxRating = 1, size } = props
 
   const [rating, setRating] = useAutoControlledValue({
     state: props.rating,
@@ -37,7 +36,7 @@ const Rating = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const rest = getUnhandledProps(Rating, props)
-  const ElementType = getElementType(Rating, props)
+  const ElementType = getComponentType(props)
 
   const handleIconClick = (e, { index }) => {
     if (disabled) {
@@ -152,13 +151,6 @@ Rating.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')),
 }
 
-function getDefaultProps() {
-  return {
-    clearable: 'auto',
-    maxRating: 1,
-  }
-}
-
 Rating.Icon = RatingIcon
 
 export default Rating
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index df6668c3eb..6c7376c704 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -4,13 +4,12 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * An internal icon sub-component for Rating component
  */
-const RatingIcon = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const RatingIcon = React.forwardRef(function (props, ref) {
   const { active, className, selected } = props
 
   const classes = cx(
@@ -20,7 +19,7 @@ const RatingIcon = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const rest = getUnhandledProps(RatingIcon, props)
-  const ElementType = getElementType(RatingIcon, props)
+  const ElementType = getComponentType(props, { as: 'i' })
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
@@ -98,10 +97,4 @@ RatingIcon.propTypes = {
   selected: PropTypes.bool,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'i',
-  }
-}
-
 export default RatingIcon
diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js
index 0df622b640..218da2083f 100644
--- a/src/modules/Search/SearchCategory.js
+++ b/src/modules/Search/SearchCategory.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -6,19 +5,25 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
 import SearchCategoryLayout from './SearchCategoryLayout'
 
-const SearchCategory = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { active, children, className, content, layoutRenderer, renderer } = props
+const SearchCategory = React.forwardRef(function (props, ref) {
+  const {
+    active,
+    children,
+    className,
+    content,
+    layoutRenderer = SearchCategoryLayout,
+    renderer = ({ name }) => name,
+  } = props
 
   const classes = cx(useKeyOnly(active, 'active'), 'category', className)
   const rest = getUnhandledProps(SearchCategory, props)
-  const ElementType = getElementType(SearchCategory, props)
+  const ElementType = getComponentType(props)
 
   const categoryContent = renderer(props)
   const resultsContent = childrenUtils.isNil(children) ? content : children
@@ -30,13 +35,6 @@ const SearchCategory = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    layoutRenderer: SearchCategoryLayout,
-    renderer: ({ name }) => name,
-  }
-}
-
 SearchCategory.displayName = 'SearchCategory'
 SearchCategory.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index d8d751b1d1..7bba25b50a 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -31,9 +31,8 @@ const defaultRenderer = ({ image, price, title, description }) => [
   </div>,
 ]
 
-const SearchResult = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { active, className, renderer } = props
+const SearchResult = React.forwardRef(function (props, ref) {
+  const { active, className, renderer = defaultRenderer } = props
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
@@ -41,7 +40,7 @@ const SearchResult = React.forwardRef(function (partialProps, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'result', className)
   const rest = getUnhandledProps(SearchResult, props)
-  const ElementType = getElementType(SearchResult, props)
+  const ElementType = getComponentType(props)
 
   // Note: You technically only need the 'content' wrapper when there's an
   // image. However, optionally wrapping it makes this function a lot more
@@ -100,10 +99,4 @@ SearchResult.propTypes = {
   title: PropTypes.string.isRequired,
 }
 
-function getDefaultProps() {
-  return {
-    renderer: defaultRenderer,
-  }
-}
-
 export default SearchResult
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index f2e187e8b7..3a30afa4c4 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -5,7 +5,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   isRefObject,
   isBrowser,
@@ -16,16 +16,15 @@ import {
 /**
  * Sticky content stays fixed to the browser viewport while another column of content is visible on the page.
  */
-const Sticky = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Sticky = React.forwardRef(function (props, ref) {
   const {
-    active,
-    bottomOffset,
+    active = true,
+    bottomOffset = 0,
     children,
     className,
     context,
-    offset,
-    scrollContext,
+    offset = 0,
+    scrollContext = isBrowser() ? window : null,
     styleElement,
   } = props
 
@@ -243,7 +242,7 @@ const Sticky = React.forwardRef(function (partialProps, ref) {
   // ----------------------------------------
 
   const rest = getUnhandledProps(Sticky, props)
-  const ElementType = getElementType(Sticky, props)
+  const ElementType = getComponentType(props)
 
   const containerClasses = cx(
     sticky && 'ui',
@@ -334,13 +333,4 @@ Sticky.propTypes = {
   styleElement: PropTypes.object,
 }
 
-function getDefaultProps() {
-  return {
-    active: true,
-    bottomOffset: 0,
-    offset: 0,
-    scrollContext: isBrowser() ? window : null,
-  }
-}
-
 export default Sticky

From 721e71c1f55f719fe4dd7554570275c2dcc53275 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 19:18:22 +0100
Subject: [PATCH 14/17] apply changes

---
 src/elements/Image/Image.js                 | 35 +++++++++------------
 src/elements/Input/Input.js                 | 15 +++------
 src/modules/Accordion/AccordionAccordion.js | 15 +++------
 src/modules/Checkbox/Checkbox.js            | 15 +++------
 src/modules/Dropdown/DropdownSearchInput.js | 17 +++-------
 5 files changed, 31 insertions(+), 66 deletions(-)

diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
index aa2945ec42..7f3df45277 100644
--- a/src/elements/Image/Image.js
+++ b/src/elements/Image/Image.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlImageProps,
   partitionHTMLProps,
@@ -25,8 +25,7 @@ import ImageGroup from './ImageGroup'
  * An image is a graphic representation of something.
  * @see Icon
  */
-const Image = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Image = React.forwardRef(function (props, ref) {
   const {
     avatar,
     bordered,
@@ -48,7 +47,7 @@ const Image = React.forwardRef(function (partialProps, ref) {
     spaced,
     verticalAlign,
     wrapped,
-    ui,
+    ui = true,
   } = props
 
   const classes = cx(
@@ -73,15 +72,18 @@ const Image = React.forwardRef(function (partialProps, ref) {
   const rest = getUnhandledProps(Image, props)
   const [imgTagProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
 
-  const ElementType = getElementType(Image, props, () => {
-    if (
-      !_.isNil(dimmer) ||
-      !_.isNil(label) ||
-      !_.isNil(wrapped) ||
-      !childrenUtils.isNil(children)
-    ) {
-      return 'div'
-    }
+  const ElementType = getComponentType(props, {
+    defaultAs: 'img',
+    getDefault: () => {
+      if (
+        !_.isNil(dimmer) ||
+        !_.isNil(label) ||
+        !_.isNil(wrapped) ||
+        !childrenUtils.isNil(children)
+      ) {
+        return 'div'
+      }
+    },
   })
 
   if (!childrenUtils.isNil(children)) {
@@ -184,13 +186,6 @@ Image.propTypes = {
   wrapped: PropTypes.bool,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'img',
-    ui: true,
-  }
-}
-
 Image.create = createShorthandFactory(Image, (value) => ({ src: value }))
 
 export default Image
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 99445d7547..9cbccb499d 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -8,7 +8,7 @@ import {
   createHTMLInput,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   partitionHTMLProps,
   useKeyOnly,
@@ -26,8 +26,7 @@ import Label from '../Label'
  * @see Icon
  * @see Label
  */
-const Input = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Input = React.forwardRef(function (props, ref) {
   const {
     action,
     actionPosition,
@@ -47,7 +46,7 @@ const Input = React.forwardRef(function (partialProps, ref) {
     size,
     tabIndex,
     transparent,
-    type,
+    type = 'text',
   } = props
 
   const computeIcon = () => {
@@ -109,7 +108,7 @@ const Input = React.forwardRef(function (partialProps, ref) {
     'input',
     className,
   )
-  const ElementType = getElementType(Input, props)
+  const ElementType = getComponentType(props)
   const [htmlInputProps, rest] = partitionProps()
 
   // Render with children
@@ -235,12 +234,6 @@ Input.propTypes = {
   type: PropTypes.string,
 }
 
-function getDefaultProps() {
-  return {
-    type: 'text',
-  }
-}
-
 Input.create = createShorthandFactory(Input, (type) => ({ type }))
 
 export default Input
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index 7bbd6bf204..f2ba942e7f 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useAutoControlledValue,
   useEventCallback,
@@ -44,9 +44,8 @@ function computeNewIndex(exclusive, activeIndex, itemIndex) {
 /**
  * An Accordion can contain sub-accordions.
  */
-const AccordionAccordion = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { className, children, exclusive, panels } = props
+const AccordionAccordion = React.forwardRef(function (props, ref) {
+  const { className, children, exclusive = true, panels } = props
   const [activeIndex, setActiveIndex] = useAutoControlledValue({
     state: props.activeIndex,
     defaultState: props.defaultActiveIndex,
@@ -55,7 +54,7 @@ const AccordionAccordion = React.forwardRef(function (partialProps, ref) {
 
   const classes = cx('accordion', className)
   const rest = getUnhandledProps(AccordionAccordion, props)
-  const ElementType = getElementType(AccordionAccordion, props)
+  const ElementType = getComponentType(props)
 
   const handleTitleClick = useEventCallback((e, titleProps) => {
     const { index } = titleProps
@@ -93,12 +92,6 @@ const AccordionAccordion = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    exclusive: true,
-  }
-}
-
 AccordionAccordion.displayName = 'AccordionAccordion'
 AccordionAccordion.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index af17c2e1c3..b2a80d0360 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createHTMLLabel,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlInputAttrs,
   makeDebugger,
@@ -24,8 +24,7 @@ const debug = makeDebugger('checkbox')
  * @see Form
  * @see Radio
  */
-const Checkbox = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Checkbox = React.forwardRef(function (props, ref) {
   const {
     className,
     disabled,
@@ -37,7 +36,7 @@ const Checkbox = React.forwardRef(function (partialProps, ref) {
     slider,
     tabIndex,
     toggle,
-    type,
+    type = 'checkbox',
     value,
   } = props
 
@@ -194,7 +193,7 @@ const Checkbox = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const unhandled = getUnhandledProps(Checkbox, props)
-  const ElementType = getElementType(Checkbox, props)
+  const ElementType = getComponentType(props)
   const [htmlInputProps, rest] = partitionHTMLProps(unhandled, { htmlProps: htmlInputAttrs })
 
   // Heads Up!
@@ -320,10 +319,4 @@ Checkbox.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
-function getDefaultProps() {
-  return {
-    type: 'checkbox',
-  }
-}
-
 export default Checkbox
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 65e786affd..78bb7c93c7 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -3,14 +3,13 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { createShorthandFactory, getElementType, getUnhandledProps } from '../../lib'
+import { createShorthandFactory, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A search item sub-component for Dropdown component.
  */
-const DropdownSearchInput = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { autoComplete, className, tabIndex, type, value } = props
+const DropdownSearchInput = React.forwardRef(function (props, ref) {
+  const { autoComplete = 'off', className, tabIndex, type = 'text', value } = props
 
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
@@ -19,7 +18,7 @@ const DropdownSearchInput = React.forwardRef(function (partialProps, ref) {
   }
 
   const classes = cx('search', className)
-  const ElementType = getElementType(DropdownSearchInput, props)
+  const ElementType = getComponentType(props, { defaultAs: 'input' })
   const rest = getUnhandledProps(DropdownSearchInput, props)
 
   return (
@@ -58,14 +57,6 @@ DropdownSearchInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'input',
-    autoComplete: 'off',
-    type: 'text',
-  }
-}
-
 DropdownSearchInput.create = createShorthandFactory(DropdownSearchInput, (type) => ({ type }))
 
 export default DropdownSearchInput

From 08c1ba7416a9d6bbeb673ab5b9b442d744a95e5b Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 19:26:30 +0100
Subject: [PATCH 15/17] apply changes

---
 src/collections/Message/MessageItem.js   | 14 +++-----------
 src/collections/Message/MessageList.js   | 13 +++----------
 src/collections/Table/Table.js           | 13 +++----------
 src/collections/Table/TableBody.js       | 15 ++++-----------
 src/collections/Table/TableCell.js       | 13 +++----------
 src/collections/Table/TableFooter.js     | 12 ++----------
 src/collections/Table/TableHeader.js     | 15 ++++-----------
 src/collections/Table/TableHeaderCell.js | 14 +++-----------
 src/collections/Table/TableRow.js        | 16 ++++------------
 src/elements/Button/Button.js            | 22 +++++++++-------------
 src/elements/Icon/IconGroup.js           | 13 +++----------
 11 files changed, 41 insertions(+), 119 deletions(-)

diff --git a/src/collections/Message/MessageItem.js b/src/collections/Message/MessageItem.js
index fbd2a9b7ea..fc15f147fb 100644
--- a/src/collections/Message/MessageItem.js
+++ b/src/collections/Message/MessageItem.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -7,20 +6,19 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
 /**
  * A message list can contain an item.
  */
-const MessageItem = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const MessageItem = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
 
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageItem, props)
-  const ElementType = getElementType(MessageItem, props)
+  const ElementType = getComponentType(props, { defaultAs: 'li' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -44,12 +42,6 @@ MessageItem.propTypes = {
   content: customPropTypes.contentShorthand,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'li',
-  }
-}
-
 MessageItem.create = createShorthandFactory(MessageItem, (content) => ({ content }))
 
 export default MessageItem
diff --git a/src/collections/Message/MessageList.js b/src/collections/Message/MessageList.js
index e820df92e2..8c48ee5f74 100644
--- a/src/collections/Message/MessageList.js
+++ b/src/collections/Message/MessageList.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import MessageItem from './MessageItem'
@@ -15,13 +15,12 @@ import MessageItem from './MessageItem'
 /**
  * A message can contain a list of items.
  */
-const MessageList = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const MessageList = React.forwardRef(function (props, ref) {
   const { children, className, items } = props
 
   const classes = cx('list', className)
   const rest = getUnhandledProps(MessageList, props)
-  const ElementType = getElementType(MessageList, props)
+  const ElementType = getComponentType(props, { defaultAs: 'ul' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -45,12 +44,6 @@ MessageList.propTypes = {
   items: customPropTypes.collectionShorthand,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'ul',
-  }
-}
-
 MessageList.create = createShorthandFactory(MessageList, (val) => ({ items: val }))
 
 export default MessageList
diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js
index 8da2b56ede..7ebbbdec43 100644
--- a/src/collections/Table/Table.js
+++ b/src/collections/Table/Table.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -25,8 +25,7 @@ import TableRow from './TableRow'
 /**
  * A table displays a collections of data grouped into rows.
  */
-const Table = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Table = React.forwardRef(function (props, ref) {
   const {
     attached,
     basic,
@@ -85,7 +84,7 @@ const Table = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const rest = getUnhandledProps(Table, props)
-  const ElementType = getElementType(Table, props)
+  const ElementType = getComponentType(props, { defaultAs: 'table' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -117,12 +116,6 @@ const Table = React.forwardRef(function (partialProps, ref) {
 })
 
 Table.displayName = 'Table'
-function getDefaultProps() {
-  return {
-    as: 'table',
-  }
-}
-
 Table.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableBody.js b/src/collections/Table/TableBody.js
index 8fe9d5c318..a8a1994872 100644
--- a/src/collections/Table/TableBody.js
+++ b/src/collections/Table/TableBody.js
@@ -1,16 +1,15 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
-const TableBody = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const TableBody = React.forwardRef(function (props, ref) {
   const { children, className } = props
+
   const classes = cx(className)
   const rest = getUnhandledProps(TableBody, props)
-  const ElementType = getElementType(TableBody, props)
+  const ElementType = getComponentType(props, { defaultAs: 'tbody' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -20,12 +19,6 @@ const TableBody = React.forwardRef(function (partialProps, ref) {
 })
 
 TableBody.displayName = 'TableBody'
-function getDefaultProps() {
-  return {
-    as: 'tbody',
-  }
-}
-
 TableBody.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js
index 2f6edfc475..8471f454b7 100644
--- a/src/collections/Table/TableCell.js
+++ b/src/collections/Table/TableCell.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -20,8 +20,7 @@ import Icon from '../../elements/Icon'
 /**
  * A table row can have cells.
  */
-const TableCell = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const TableCell = React.forwardRef(function (props, ref) {
   const {
     active,
     children,
@@ -57,7 +56,7 @@ const TableCell = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const rest = getUnhandledProps(TableCell, props)
-  const ElementType = getElementType(TableCell, props)
+  const ElementType = getComponentType(props, { defaultAs: 'td' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -75,12 +74,6 @@ const TableCell = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'td',
-  }
-}
-
 TableCell.displayName = 'TableCell'
 TableCell.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js
index 5247548ca2..0d2e584de1 100644
--- a/src/collections/Table/TableFooter.js
+++ b/src/collections/Table/TableFooter.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,9 +7,8 @@ import TableHeader from './TableHeader'
 /**
  * A table can have a footer.
  */
-const TableFooter = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { as } = props
+const TableFooter = React.forwardRef(function (props, ref) {
+  const { as = 'tfoot' } = props
   const rest = getUnhandledProps(TableFooter, props)
 
   return <TableHeader {...rest} as={as} ref={ref} />
@@ -22,10 +20,4 @@ TableFooter.propTypes = {
   as: PropTypes.elementType,
 }
 
-function getDefaultProps() {
-  return {
-    as: 'tfoot',
-  }
-}
-
 export default TableFooter
diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js
index 10574799fe..bddf5ec557 100644
--- a/src/collections/Table/TableHeader.js
+++ b/src/collections/Table/TableHeader.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -6,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -14,12 +13,12 @@ import {
 /**
  * A table can have a header.
  */
-const TableHeader = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const TableHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, fullWidth } = props
+
   const classes = cx(useKeyOnly(fullWidth, 'full-width'), className)
   const rest = getUnhandledProps(TableHeader, props)
-  const ElementType = getElementType(TableHeader, props)
+  const ElementType = getComponentType(props, { defaultAs: 'thead' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -28,12 +27,6 @@ const TableHeader = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'thead',
-  }
-}
-
 TableHeader.displayName = 'TableHeader'
 TableHeader.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index 2bcc2ee479..0b9ddcead1 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -9,11 +8,10 @@ import TableCell from './TableCell'
 /**
  * A table can have a header cell.
  */
-const TableHeaderCell = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { as, className, sorted } = props
+const TableHeaderCell = React.forwardRef(function (props, ref) {
+  const { as = 'th', className, sorted } = props
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
-  const rest = getUnhandledProps(TableHeaderCell, props)
+  const rest = getUnhandledProps(props)
 
   return <TableCell {...rest} as={as} className={classes} ref={ref} />
 })
@@ -30,10 +28,4 @@ TableHeaderCell.propTypes = {
   sorted: PropTypes.oneOf(['ascending', 'descending']),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'th',
-  }
-}
-
 export default TableHeaderCell
diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 1f0f62ecc6..7efdc2283f 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -19,11 +19,10 @@ import TableCell from './TableCell'
 /**
  * A table can have rows.
  */
-const TableRow = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const TableRow = React.forwardRef(function (props, ref) {
   const {
     active,
-    cellAs,
+    cellAs = 'td',
     cells,
     children,
     className,
@@ -48,7 +47,7 @@ const TableRow = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const rest = getUnhandledProps(TableRow, props)
-  const ElementType = getElementType(TableRow, props)
+  const ElementType = getComponentType(props, { defaultAs: 'tr' })
 
   if (!childrenUtils.isNil(children)) {
     return (
@@ -65,13 +64,6 @@ const TableRow = React.forwardRef(function (partialProps, ref) {
   )
 })
 
-function getDefaultProps() {
-  return {
-    as: 'tr',
-    cellAs: 'td',
-  }
-}
-
 TableRow.displayName = 'TableRow'
 TableRow.propTypes = {
   /** An element type to render as (string or function). */
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index 4895043ec0..e3a704577f 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -70,8 +70,7 @@ function hasIconClass(props) {
  * @see Icon
  * @see Label
  */
-const Button = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Button = React.forwardRef(function (props, ref) {
   const {
     active,
     animated,
@@ -124,10 +123,13 @@ const Button = React.forwardRef(function (partialProps, ref) {
   const wrapperClasses = cx(useKeyOnly(disabled, 'disabled'), useValueAndKey(floated, 'floated'))
 
   const rest = getUnhandledProps(Button, props)
-  const ElementType = getElementType(Button, props, () => {
-    if (!_.isNil(attached) || !_.isNil(label)) {
-      return 'div'
-    }
+  const ElementType = getComponentType(props, {
+    defaultAs: 'button',
+    getDefault: () => {
+      if (!_.isNil(attached) || !_.isNil(label)) {
+        return 'div'
+      }
+    },
   })
   const tabIndex = computeTabIndex(ElementType, disabled, props.tabIndex)
 
@@ -316,12 +318,6 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'button',
-  }
-}
-
 Button.Content = ButtonContent
 Button.Group = ButtonGroup
 Button.Or = ButtonOr
diff --git a/src/elements/Icon/IconGroup.js b/src/elements/Icon/IconGroup.js
index 0228c0bf26..55cb7adbf7 100644
--- a/src/elements/Icon/IconGroup.js
+++ b/src/elements/Icon/IconGroup.js
@@ -3,18 +3,17 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 
 /**
  * Several icons can be used together as a group.
  */
-const IconGroup = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const IconGroup = React.forwardRef(function (props, ref) {
   const { children, className, content, size } = props
 
   const classes = cx(size, 'icons', className)
   const rest = getUnhandledProps(IconGroup, props)
-  const ElementType = getElementType(IconGroup, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -41,10 +40,4 @@ IconGroup.propTypes = {
   size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'i',
-  }
-}
-
 export default IconGroup

From 3981cce876c0dc8afecbe7fe95fb6d4755d61700 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 19:34:01 +0100
Subject: [PATCH 16/17] apply changes

---
 src/addons/TextArea/TextArea.js      | 16 ++++------------
 src/collections/Form/Form.js         | 13 +++----------
 src/collections/Form/FormButton.js   | 13 ++++---------
 src/collections/Form/FormCheckbox.js | 13 ++++---------
 src/collections/Form/FormDropdown.js | 18 +++++-------------
 src/collections/Form/FormField.js    |  5 ++---
 src/collections/Form/FormGroup.js    |  5 ++---
 src/collections/Form/FormInput.js    | 18 +++++-------------
 src/collections/Form/FormRadio.js    | 18 +++++-------------
 src/collections/Form/FormSelect.js   | 18 +++++-------------
 src/collections/Form/FormTextArea.js | 18 +++++-------------
 11 files changed, 44 insertions(+), 111 deletions(-)

diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index 21ca975e48..4c2c1d7aac 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -2,15 +2,14 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
+import { getComponentType, getUnhandledProps, useMergedRefs } from '../../lib'
 
 /**
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
-const TextArea = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { rows, value } = props
+const TextArea = React.forwardRef(function (props, ref) {
+  const { rows = 3, value } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
   const handleChange = (e) => {
@@ -26,7 +25,7 @@ const TextArea = React.forwardRef(function (partialProps, ref) {
   }
 
   const rest = getUnhandledProps(TextArea, props)
-  const ElementType = getElementType(TextArea, props)
+  const ElementType = getComponentType(props, { defaultAs: 'textarea' })
 
   return (
     <ElementType
@@ -66,11 +65,4 @@ TextArea.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'textarea',
-    rows: 3,
-  }
-}
-
 export default TextArea
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 4d028e4446..8f869d01f8 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
+import { getComponentType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
 import FormButton from './FormButton'
 import FormCheckbox from './FormCheckbox'
 import FormDropdown from './FormDropdown'
@@ -24,8 +24,7 @@ import FormTextArea from './FormTextArea'
  * @see Radio
  * @see Select
  */
-const Form = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
+const Form = React.forwardRef(function (props, ref) {
   const {
     action,
     children,
@@ -63,7 +62,7 @@ const Form = React.forwardRef(function (partialProps, ref) {
     className,
   )
   const rest = getUnhandledProps(Form, props)
-  const ElementType = getElementType(Form, props)
+  const ElementType = getComponentType(props, { defaultAs: 'form' })
 
   return (
     <ElementType {...rest} action={action} className={classes} onSubmit={handleSubmit} ref={ref}>
@@ -118,12 +117,6 @@ Form.propTypes = {
   widths: PropTypes.oneOf(['equal']),
 }
 
-function getDefaultProps() {
-  return {
-    as: 'form',
-  }
-}
-
 Form.Field = FormField
 Form.Button = FormButton
 Form.Checkbox = FormCheckbox
diff --git a/src/collections/Form/FormButton.js b/src/collections/Form/FormButton.js
index cf4a5f816f..57400fe08b 100644
--- a/src/collections/Form/FormButton.js
+++ b/src/collections/Form/FormButton.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Button from '../../elements/Button'
 import FormField from './FormField'
 
@@ -11,15 +11,15 @@ import FormField from './FormField'
  * @see Form
  */
 const FormButton = React.forwardRef((props, ref) => {
-  const { control } = props
+  const { control = Button } = props
+
   const rest = getUnhandledProps(FormButton, props)
-  const ElementType = getElementType(FormButton, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
 
 FormButton.displayName = 'FormButton'
-
 FormButton.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -28,9 +28,4 @@ FormButton.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormButton.defaultProps = {
-  as: FormField,
-  control: Button,
-}
-
 export default FormButton
diff --git a/src/collections/Form/FormCheckbox.js b/src/collections/Form/FormCheckbox.js
index f98dad56cc..6f0d5fa01d 100644
--- a/src/collections/Form/FormCheckbox.js
+++ b/src/collections/Form/FormCheckbox.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Checkbox from '../../modules/Checkbox'
 import FormField from './FormField'
 
@@ -11,15 +11,15 @@ import FormField from './FormField'
  * @see Form
  */
 const FormCheckbox = React.forwardRef((props, ref) => {
-  const { control } = props
+  const { control = Checkbox } = props
+
   const rest = getUnhandledProps(FormCheckbox, props)
-  const ElementType = getElementType(FormCheckbox, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
 
 FormCheckbox.displayName = 'FormCheckbox'
-
 FormCheckbox.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -28,9 +28,4 @@ FormCheckbox.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormCheckbox.defaultProps = {
-  as: FormField,
-  control: Checkbox,
-}
-
 export default FormCheckbox
diff --git a/src/collections/Form/FormDropdown.js b/src/collections/Form/FormDropdown.js
index 260b9f02d3..62f845a31e 100644
--- a/src/collections/Form/FormDropdown.js
+++ b/src/collections/Form/FormDropdown.js
@@ -1,8 +1,7 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Dropdown from '../../modules/Dropdown'
 import FormField from './FormField'
 
@@ -11,11 +10,11 @@ import FormField from './FormField'
  * @see Dropdown
  * @see Form
  */
-const FormDropdown = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { control } = props
+const FormDropdown = React.forwardRef(function (props, ref) {
+  const { control = Dropdown } = props
+
   const rest = getUnhandledProps(FormDropdown, props)
-  const ElementType = getElementType(FormDropdown, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -29,11 +28,4 @@ FormDropdown.propTypes = {
   control: FormField.propTypes.control,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: Dropdown,
-  }
-}
-
 export default FormDropdown
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index 29d0448df2..ae5c613b0d 100644
--- a/src/collections/Form/FormField.js
+++ b/src/collections/Form/FormField.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLLabel,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -53,7 +53,7 @@ const FormField = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(FormField, props)
-  const ElementType = getElementType(FormField, props)
+  const ElementType = getComponentType(props)
 
   const errorPointing = _.get(error, 'pointing', 'above')
   const errorLabel = Label.create(error, {
@@ -145,7 +145,6 @@ const FormField = React.forwardRef(function (props, ref) {
 })
 
 FormField.displayName = 'FormField'
-
 FormField.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormGroup.js b/src/collections/Form/FormGroup.js
index cbfb2bcc89..b1a2cc3f95 100644
--- a/src/collections/Form/FormGroup.js
+++ b/src/collections/Form/FormGroup.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -29,7 +29,7 @@ const FormGroup = React.forwardRef((props, ref) => {
     className,
   )
   const rest = getUnhandledProps(FormGroup, props)
-  const ElementType = getElementType(FormGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
@@ -39,7 +39,6 @@ const FormGroup = React.forwardRef((props, ref) => {
 })
 
 FormGroup.displayName = 'FormGroup'
-
 FormGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/collections/Form/FormInput.js b/src/collections/Form/FormInput.js
index d7fbfbe7bb..71b3865d14 100644
--- a/src/collections/Form/FormInput.js
+++ b/src/collections/Form/FormInput.js
@@ -1,8 +1,7 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Input from '../../elements/Input'
 import FormField from './FormField'
 
@@ -11,11 +10,11 @@ import FormField from './FormField'
  * @see Form
  * @see Input
  */
-const FormInput = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { control } = props
+const FormInput = React.forwardRef(function (props, ref) {
+  const { control = Input } = props
+
   const rest = getUnhandledProps(FormInput, props)
-  const ElementType = getElementType(FormInput, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -29,11 +28,4 @@ FormInput.propTypes = {
   control: FormField.propTypes.control,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: Input,
-  }
-}
-
 export default FormInput
diff --git a/src/collections/Form/FormRadio.js b/src/collections/Form/FormRadio.js
index 2d9853f9ef..7ce0a38f32 100644
--- a/src/collections/Form/FormRadio.js
+++ b/src/collections/Form/FormRadio.js
@@ -1,8 +1,7 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Radio from '../../addons/Radio'
 import FormField from './FormField'
 
@@ -11,11 +10,11 @@ import FormField from './FormField'
  * @see Form
  * @see Radio
  */
-const FormRadio = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { control } = props
+const FormRadio = React.forwardRef(function (props, ref) {
+  const { control = Radio } = props
+
   const rest = getUnhandledProps(FormRadio, props)
-  const ElementType = getElementType(FormRadio, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -29,11 +28,4 @@ FormRadio.propTypes = {
   control: FormField.propTypes.control,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: Radio,
-  }
-}
-
 export default FormRadio
diff --git a/src/collections/Form/FormSelect.js b/src/collections/Form/FormSelect.js
index 17b76d4e6d..8658048bfd 100644
--- a/src/collections/Form/FormSelect.js
+++ b/src/collections/Form/FormSelect.js
@@ -1,8 +1,7 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Select from '../../addons/Select'
 import Dropdown from '../../modules/Dropdown'
 import FormField from './FormField'
@@ -12,11 +11,11 @@ import FormField from './FormField'
  * @see Form
  * @see Select
  */
-const FormSelect = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { control, options } = props
+const FormSelect = React.forwardRef(function (props, ref) {
+  const { control = Select, options } = props
+
   const rest = getUnhandledProps(FormSelect, props)
-  const ElementType = getElementType(FormSelect, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} options={options} ref={ref} />
 })
@@ -33,11 +32,4 @@ FormSelect.propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape(Dropdown.Item.propTypes)).isRequired,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: Select,
-  }
-}
-
 export default FormSelect
diff --git a/src/collections/Form/FormTextArea.js b/src/collections/Form/FormTextArea.js
index b5a5efe3fb..4fb4a8e1d6 100644
--- a/src/collections/Form/FormTextArea.js
+++ b/src/collections/Form/FormTextArea.js
@@ -1,8 +1,7 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import TextArea from '../../addons/TextArea'
 import FormField from './FormField'
 
@@ -11,11 +10,11 @@ import FormField from './FormField'
  * @see Form
  * @see TextArea
  */
-const FormTextArea = React.forwardRef(function (partialProps, ref) {
-  const props = _.defaults(partialProps, getDefaultProps())
-  const { control } = props
+const FormTextArea = React.forwardRef(function (props, ref) {
+  const { control = TextArea } = props
+
   const rest = getUnhandledProps(FormTextArea, props)
-  const ElementType = getElementType(FormTextArea, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -29,11 +28,4 @@ FormTextArea.propTypes = {
   control: FormField.propTypes.control,
 }
 
-function getDefaultProps() {
-  return {
-    as: FormField,
-    control: TextArea,
-  }
-}
-
 export default FormTextArea

From 77f795373756848d87a60779080b5548dae51d21 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 29 Dec 2023 20:49:03 +0100
Subject: [PATCH 17/17] fix tests & use getComponentType()

---
 src/addons/Pagination/Pagination.js           |  1 +
 src/addons/Radio/Radio.js                     |  1 -
 .../TransitionablePortal.js                   | 15 +++--
 src/collections/Breadcrumb/Breadcrumb.js      |  4 +-
 .../Breadcrumb/BreadcrumbDivider.js           |  4 +-
 .../Breadcrumb/BreadcrumbSection.js           |  8 ++-
 src/collections/Grid/Grid.js                  |  4 +-
 src/collections/Grid/GridColumn.js            |  4 +-
 src/collections/Grid/GridRow.js               |  4 +-
 src/collections/Menu/Menu.js                  |  4 +-
 src/collections/Menu/MenuHeader.js            |  4 +-
 src/collections/Menu/MenuItem.js              |  8 ++-
 src/collections/Menu/MenuMenu.js              |  4 +-
 src/collections/Message/Message.js            |  4 +-
 src/collections/Message/MessageContent.js     |  4 +-
 src/collections/Message/MessageHeader.js      |  4 +-
 src/collections/Table/TableHeaderCell.js      |  3 +-
 src/elements/Button/ButtonContent.js          |  4 +-
 src/elements/Button/ButtonGroup.js            |  4 +-
 src/elements/Button/ButtonOr.js               |  5 +-
 src/elements/Container/Container.js           |  4 +-
 src/elements/Divider/Divider.js               |  4 +-
 src/elements/Flag/Flag.js                     |  9 +--
 src/elements/Header/Header.js                 |  4 +-
 src/elements/Header/HeaderContent.js          |  5 +-
 src/elements/Header/HeaderSubheader.js        |  5 +-
 src/elements/Icon/Icon.js                     |  8 +--
 src/elements/Image/ImageGroup.js              |  4 +-
 src/elements/Label/Label.js                   |  4 +-
 src/elements/Label/LabelDetail.js             |  4 +-
 src/elements/Label/LabelGroup.js              |  4 +-
 src/elements/List/List.js                     |  4 +-
 src/elements/List/ListContent.js              |  4 +-
 src/elements/List/ListDescription.js          |  5 +-
 src/elements/List/ListHeader.js               |  4 +-
 src/elements/List/ListItem.js                 |  4 +-
 src/elements/List/ListList.js                 |  4 +-
 src/elements/Loader/Loader.js                 |  4 +-
 src/elements/Placeholder/Placeholder.js       |  4 +-
 src/elements/Placeholder/PlaceholderHeader.js |  4 +-
 src/elements/Placeholder/PlaceholderImage.js  |  4 +-
 src/elements/Placeholder/PlaceholderLine.js   |  5 +-
 .../Placeholder/PlaceholderParagraph.js       |  5 +-
 src/elements/Rail/Rail.js                     |  4 +-
 src/elements/Reveal/Reveal.js                 |  4 +-
 src/elements/Reveal/RevealContent.js          |  4 +-
 src/elements/Segment/Segment.js               |  4 +-
 src/elements/Segment/SegmentGroup.js          |  4 +-
 src/elements/Segment/SegmentInline.js         |  4 +-
 src/elements/Step/Step.js                     | 12 ++--
 src/elements/Step/StepContent.js              |  4 +-
 src/elements/Step/StepDescription.js          |  4 +-
 src/elements/Step/StepGroup.js                |  4 +-
 src/elements/Step/StepTitle.js                |  4 +-
 src/modules/Accordion/AccordionContent.js     |  4 +-
 src/modules/Accordion/AccordionTitle.js       |  4 +-
 src/modules/Dimmer/DimmerDimmable.js          |  4 +-
 src/modules/Dimmer/DimmerInner.js             |  4 +-
 src/modules/Dropdown/Dropdown.js              | 60 ++++++++++++-------
 src/modules/Dropdown/DropdownDivider.js       |  4 +-
 src/modules/Dropdown/DropdownHeader.js        |  4 +-
 src/modules/Dropdown/DropdownItem.js          |  4 +-
 src/modules/Dropdown/DropdownMenu.js          |  4 +-
 src/modules/Dropdown/DropdownText.js          |  4 +-
 src/modules/Embed/Embed.js                    |  4 +-
 src/modules/Modal/ModalActions.js             |  4 +-
 src/modules/Modal/ModalContent.js             |  4 +-
 src/modules/Modal/ModalDescription.js         |  4 +-
 src/modules/Modal/ModalDimmer.js              |  4 +-
 src/modules/Modal/ModalHeader.js              |  4 +-
 src/modules/Popup/Popup.js                    |  4 +-
 src/modules/Popup/PopupContent.js             |  4 +-
 src/modules/Popup/PopupHeader.js              |  4 +-
 src/modules/Progress/Progress.js              |  4 +-
 src/modules/Rating/RatingIcon.js              |  2 +-
 src/modules/Search/Search.js                  | 34 +++++++----
 src/modules/Search/SearchResults.js           |  4 +-
 src/modules/Sidebar/Sidebar.js                | 21 ++++---
 src/modules/Sidebar/SidebarPushable.js        |  4 +-
 src/modules/Sidebar/SidebarPusher.js          |  4 +-
 src/views/Advertisement/Advertisement.js      |  4 +-
 src/views/Card/Card.js                        | 12 ++--
 src/views/Card/CardContent.js                 |  4 +-
 src/views/Card/CardDescription.js             |  4 +-
 src/views/Card/CardGroup.js                   |  4 +-
 src/views/Card/CardHeader.js                  |  4 +-
 src/views/Card/CardMeta.js                    |  4 +-
 src/views/Comment/Comment.js                  |  4 +-
 src/views/Comment/CommentActions.js           |  4 +-
 src/views/Comment/CommentAuthor.js            |  4 +-
 src/views/Comment/CommentAvatar.js            |  4 +-
 src/views/Comment/CommentContent.js           |  4 +-
 src/views/Comment/CommentGroup.js             |  4 +-
 src/views/Comment/CommentMetadata.js          |  4 +-
 src/views/Comment/CommentText.js              |  4 +-
 src/views/Feed/Feed.js                        |  4 +-
 src/views/Feed/FeedContent.js                 |  4 +-
 src/views/Feed/FeedDate.js                    |  4 +-
 src/views/Feed/FeedEvent.js                   |  4 +-
 src/views/Feed/FeedExtra.js                   |  4 +-
 src/views/Feed/FeedLabel.js                   |  4 +-
 src/views/Feed/FeedMeta.js                    |  4 +-
 src/views/Feed/FeedSummary.js                 |  4 +-
 src/views/Item/Item.js                        |  4 +-
 src/views/Item/ItemContent.js                 |  4 +-
 src/views/Item/ItemDescription.js             |  5 +-
 src/views/Item/ItemExtra.js                   |  5 +-
 src/views/Item/ItemGroup.js                   |  4 +-
 src/views/Item/ItemHeader.js                  |  5 +-
 src/views/Item/ItemMeta.js                    |  5 +-
 src/views/Statistic/Statistic.js              |  4 +-
 src/views/Statistic/StatisticGroup.js         |  4 +-
 src/views/Statistic/StatisticLabel.js         |  4 +-
 src/views/Statistic/StatisticValue.js         |  4 +-
 test/specs/addons/Confirm/Confirm-test.js     | 14 ++++-
 test/specs/commonTests/classNameHelpers.js    |  5 +-
 .../commonTests/implementsClassNameProps.js   |  3 +
 .../commonTests/implementsCommonProps.js      |  1 +
 .../commonTests/implementsShorthandProp.js    | 14 +++--
 test/specs/modules/Dropdown/Dropdown-test.js  |  2 +-
 test/specs/modules/Modal/Modal-test.js        |  6 +-
 test/specs/modules/Popup/Popup-test.js        |  1 -
 test/specs/modules/Search/Search-test.js      |  1 -
 test/specs/modules/Sidebar/Sidebar-test.js    |  4 +-
 test/specs/modules/Tab/Tab-test.js            | 12 ++--
 test/specs/modules/Tab/TabPane-test.js        |  2 +-
 126 files changed, 366 insertions(+), 303 deletions(-)

diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index 05a8b39c4a..fb99c755ae 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -83,6 +83,7 @@ const Pagination = React.forwardRef(function (props, ref) {
   const paginationItemTypes = {
     firstItem,
     lastItem,
+    ellipsisItem,
     nextItem,
     pageItem,
     prevItem,
diff --git a/src/addons/Radio/Radio.js b/src/addons/Radio/Radio.js
index 957e1baaba..cfc216d338 100644
--- a/src/addons/Radio/Radio.js
+++ b/src/addons/Radio/Radio.js
@@ -13,7 +13,6 @@ const Radio = React.forwardRef(function (props, ref) {
   const { slider, toggle, type = 'radio' } = props
 
   const rest = getUnhandledProps(Radio, props)
-  // const ElementType = getElementType(Radio, props)
   // radio, slider, toggle are exclusive
   // use an undefined radio if slider or toggle are present
   const radio = !(slider || toggle) || undefined
diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js
index 37bce0ee52..2adb7c22cf 100644
--- a/src/addons/TransitionablePortal/TransitionablePortal.js
+++ b/src/addons/TransitionablePortal/TransitionablePortal.js
@@ -47,7 +47,13 @@ function usePortalState(props) {
  * @see Transition
  */
 function TransitionablePortal(props) {
-  const { children, transition } = props
+  const {
+    children,
+    transition = {
+      animation: 'scale',
+      duration: 400,
+    },
+  } = props
 
   const [portalOpen, setPortalOpen] = usePortalState(props)
   const [transitionVisible, setTransitionVisible] = React.useState(false)
@@ -165,11 +171,4 @@ TransitionablePortal.propTypes = {
   transition: PropTypes.object,
 }
 
-TransitionablePortal.defaultProps = {
-  transition: {
-    animation: 'scale',
-    duration: 400,
-  },
-}
-
 export default TransitionablePortal
diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js
index e638b16101..c50b438bc4 100644
--- a/src/collections/Breadcrumb/Breadcrumb.js
+++ b/src/collections/Breadcrumb/Breadcrumb.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getUnhandledProps, getElementType, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getUnhandledProps, getComponentType, SUI } from '../../lib'
 import BreadcrumbDivider from './BreadcrumbDivider'
 import BreadcrumbSection from './BreadcrumbSection'
 
@@ -15,7 +15,7 @@ const Breadcrumb = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, 'breadcrumb', className)
   const rest = getUnhandledProps(Breadcrumb, props)
-  const ElementType = getElementType(Breadcrumb, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
index e91b5c0f81..88190f0333 100644
--- a/src/collections/Breadcrumb/BreadcrumbDivider.js
+++ b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -8,7 +8,7 @@ import {
   createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
@@ -20,7 +20,7 @@ const BreadcrumbDivider = React.forwardRef(function (props, ref) {
 
   const classes = cx('divider', className)
   const rest = getUnhandledProps(BreadcrumbDivider, props)
-  const ElementType = getElementType(BreadcrumbDivider, props)
+  const ElementType = getComponentType(props)
 
   if (!_.isNil(icon)) {
     return Icon.create(icon, {
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index d8349a2ac8..f3d9b19eb3 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -8,7 +8,7 @@ import {
   createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
   useKeyOnly,
   useEventCallback,
 } from '../../lib'
@@ -21,8 +21,10 @@ const BreadcrumbSection = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'section', className)
   const rest = getUnhandledProps(BreadcrumbSection, props)
-  const ElementType = getElementType(BreadcrumbSection, props, () => {
-    if (link || onClick) return 'a'
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (link || onClick) return 'a'
+    },
   })
 
   const handleClick = useEventCallback((e) => _.invoke(props, 'onClick', e, props))
diff --git a/src/collections/Grid/Grid.js b/src/collections/Grid/Grid.js
index 7f856c5bdf..b884dbd1b5 100644
--- a/src/collections/Grid/Grid.js
+++ b/src/collections/Grid/Grid.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -60,7 +60,7 @@ const Grid = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Grid, props)
-  const ElementType = getElementType(Grid, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Grid/GridColumn.js b/src/collections/Grid/GridColumn.js
index 44d2e9be8a..46e9d7f589 100644
--- a/src/collections/Grid/GridColumn.js
+++ b/src/collections/Grid/GridColumn.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -54,7 +54,7 @@ const GridColumn = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(GridColumn, props)
-  const ElementType = getElementType(GridColumn, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Grid/GridRow.js b/src/collections/Grid/GridRow.js
index b84de480bc..7dae17ab50 100644
--- a/src/collections/Grid/GridRow.js
+++ b/src/collections/Grid/GridRow.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -46,7 +46,7 @@ const GridRow = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(GridRow, props)
-  const ElementType = getElementType(GridRow, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 5e2db94868..6c984eb871 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   createShorthandFactory,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -78,7 +78,7 @@ const Menu = React.forwardRef(function (props, ref) {
     'menu',
   )
   const rest = getUnhandledProps(Menu, props)
-  const ElementType = getElementType(Menu, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/collections/Menu/MenuHeader.js b/src/collections/Menu/MenuHeader.js
index 9c0652d1dc..7a4d62fc5d 100644
--- a/src/collections/Menu/MenuHeader.js
+++ b/src/collections/Menu/MenuHeader.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A menu item may include a header or may itself be a header.
@@ -11,7 +11,7 @@ const MenuHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(MenuHeader, props)
-  const ElementType = getElementType(MenuHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 728a8ec13f..c4f6bafe5c 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -48,8 +48,10 @@ const MenuItem = React.forwardRef(function (props, ref) {
     'item',
     className,
   )
-  const ElementType = getElementType(MenuItem, props, () => {
-    if (onClick) return 'a'
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) return 'a'
+    },
   })
   const rest = getUnhandledProps(MenuItem, props)
 
diff --git a/src/collections/Menu/MenuMenu.js b/src/collections/Menu/MenuMenu.js
index f87a8619cc..6b3489041d 100644
--- a/src/collections/Menu/MenuMenu.js
+++ b/src/collections/Menu/MenuMenu.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A menu can contain a sub menu.
@@ -12,7 +12,7 @@ const MenuMenu = React.forwardRef(function (props, ref) {
 
   const classes = cx(position, 'menu', className)
   const rest = getUnhandledProps(MenuMenu, props)
-  const ElementType = getElementType(MenuMenu, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index 68cfe3e3aa..f6e8e3fb1e 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLParagraph,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -68,7 +68,7 @@ const Message = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Message, props)
-  const ElementType = getElementType(Message, props)
+  const ElementType = getComponentType(props)
 
   const handleDismiss = useEventCallback((e) => {
     _.invoke(props, 'onDismiss', e, props)
diff --git a/src/collections/Message/MessageContent.js b/src/collections/Message/MessageContent.js
index b6412b3d8b..c0266127e2 100644
--- a/src/collections/Message/MessageContent.js
+++ b/src/collections/Message/MessageContent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A message can contain a content.
@@ -11,7 +11,7 @@ const MessageContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(MessageContent, props)
-  const ElementType = getElementType(MessageContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Message/MessageHeader.js b/src/collections/Message/MessageHeader.js
index 88536f4846..ee1f8a1578 100644
--- a/src/collections/Message/MessageHeader.js
+++ b/src/collections/Message/MessageHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const MessageHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(MessageHeader, props)
-  const ElementType = getElementType(MessageHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js
index 0b9ddcead1..aaf4a96656 100644
--- a/src/collections/Table/TableHeaderCell.js
+++ b/src/collections/Table/TableHeaderCell.js
@@ -10,8 +10,9 @@ import TableCell from './TableCell'
  */
 const TableHeaderCell = React.forwardRef(function (props, ref) {
   const { as = 'th', className, sorted } = props
+
   const classes = cx(useValueAndKey(sorted, 'sorted'), className)
-  const rest = getUnhandledProps(props)
+  const rest = getUnhandledProps(TableHeaderCell, props)
 
   return <TableCell {...rest} as={as} className={classes} ref={ref} />
 })
diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js
index af248b1022..ebe7d58a46 100644
--- a/src/elements/Button/ButtonContent.js
+++ b/src/elements/Button/ButtonContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -23,7 +23,7 @@ const ButtonContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ButtonContent, props)
-  const ElementType = getElementType(ButtonContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
index 79a1db17c5..07ad032136 100644
--- a/src/elements/Button/ButtonGroup.js
+++ b/src/elements/Button/ButtonGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -67,7 +67,7 @@ const ButtonGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ButtonGroup, props)
-  const ElementType = getElementType(ButtonGroup, props)
+  const ElementType = getComponentType(props)
 
   if (_.isNil(buttons)) {
     return (
diff --git a/src/elements/Button/ButtonOr.js b/src/elements/Button/ButtonOr.js
index 89b05a80fa..f4db380360 100644
--- a/src/elements/Button/ButtonOr.js
+++ b/src/elements/Button/ButtonOr.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * Button groups can contain conditionals.
  */
 const ButtonOr = React.forwardRef(function (props, ref) {
   const { className, text } = props
+
   const classes = cx('or', className)
   const rest = getUnhandledProps(ButtonOr, props)
-  const ElementType = getElementType(ButtonOr, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} data-text={text} ref={ref} />
 })
diff --git a/src/elements/Container/Container.js b/src/elements/Container/Container.js
index ea9cafe64d..741ca019fd 100644
--- a/src/elements/Container/Container.js
+++ b/src/elements/Container/Container.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -26,7 +26,7 @@ const Container = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Container, props)
-  const ElementType = getElementType(Container, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index 2f2147c188..a8c4b2e3ac 100644
--- a/src/elements/Divider/Divider.js
+++ b/src/elements/Divider/Divider.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -40,7 +40,7 @@ const Divider = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Divider, props)
-  const ElementType = getElementType(Divider, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Flag/Flag.js b/src/elements/Flag/Flag.js
index 1ad15a8aaa..4d0c7d481a 100644
--- a/src/elements/Flag/Flag.js
+++ b/src/elements/Flag/Flag.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -507,13 +507,13 @@ export const names = [
 ]
 
 /**
- * A flag is is used to represent a political state.
+ * A flag is used to represent a political state.
  */
 const Flag = React.forwardRef(function (props, ref) {
   const { className, name } = props
   const classes = cx(name, 'flag', className)
   const rest = getUnhandledProps(Flag, props)
-  const ElementType = getElementType(Flag, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
@@ -535,8 +535,5 @@ Flag.propTypes = {
 const MemoFlag = React.memo(Flag)
 
 MemoFlag.create = createShorthandFactory(MemoFlag, (value) => ({ name: value }))
-MemoFlag.defaultProps = {
-  as: 'i',
-}
 
 export default MemoFlag
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index b25a7421df..ad1d099f3b 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useValueAndKey,
@@ -61,7 +61,7 @@ const Header = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Header, props)
-  const ElementType = getElementType(Header, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Header/HeaderContent.js b/src/elements/Header/HeaderContent.js
index b6dc8a1bf4..a8d0aef2d1 100644
--- a/src/elements/Header/HeaderContent.js
+++ b/src/elements/Header/HeaderContent.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * Header content wraps the main content when there is an adjacent Icon or Image.
  */
 const HeaderContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('content', className)
   const rest = getUnhandledProps(HeaderContent, props)
-  const ElementType = getElementType(HeaderContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 3925146440..9cd4523bfa 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/src/elements/Header/HeaderSubheader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const HeaderSubheader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('sub header', className)
   const rest = getUnhandledProps(HeaderSubheader, props)
-  const ElementType = getElementType(HeaderSubheader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 1e180fcecd..45fd57915b 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useEventCallback,
@@ -74,7 +74,7 @@ const Icon = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(Icon, props)
-  const ElementType = getElementType(Icon, props)
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
   const ariaProps = getAriaProps(props)
 
   const handleClick = useEventCallback((e) => {
@@ -155,8 +155,4 @@ const MemoIcon = React.memo(Icon)
 MemoIcon.Group = IconGroup
 MemoIcon.create = createShorthandFactory(MemoIcon, (value) => ({ name: value }))
 
-MemoIcon.defaultProps = {
-  as: 'i',
-}
-
 export default MemoIcon
diff --git a/src/elements/Image/ImageGroup.js b/src/elements/Image/ImageGroup.js
index 8ac80b9221..9b02ba722b 100644
--- a/src/elements/Image/ImageGroup.js
+++ b/src/elements/Image/ImageGroup.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 
 /**
  * A group of images.
@@ -12,7 +12,7 @@ const ImageGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, className, 'images')
   const rest = getUnhandledProps(ImageGroup, props)
-  const ElementType = getElementType(ImageGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index 30abb13cde..d52c33bf78 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -75,7 +75,7 @@ const Label = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Label, props)
-  const ElementType = getElementType(Label, props)
+  const ElementType = getComponentType(props)
 
   const handleClick = useEventCallback((e) => {
     _.invoke(props, 'onClick', e, props)
diff --git a/src/elements/Label/LabelDetail.js b/src/elements/Label/LabelDetail.js
index 6da4de001a..64a045607f 100644
--- a/src/elements/Label/LabelDetail.js
+++ b/src/elements/Label/LabelDetail.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,7 +15,7 @@ const LabelDetail = React.forwardRef(function (props, ref) {
 
   const classes = cx('detail', className)
   const rest = getUnhandledProps(LabelDetail, props)
-  const ElementType = getElementType(LabelDetail, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Label/LabelGroup.js b/src/elements/Label/LabelGroup.js
index 01cf51dc5d..d790595d92 100644
--- a/src/elements/Label/LabelGroup.js
+++ b/src/elements/Label/LabelGroup.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -27,7 +27,7 @@ const LabelGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(LabelGroup, props)
-  const ElementType = getElementType(LabelGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index f805838b3c..29c90ba26c 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -64,7 +64,7 @@ const List = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(List, props)
-  const ElementType = getElementType(List, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/List/ListContent.js b/src/elements/List/ListContent.js
index 667e6bf0f6..61ed2ba01a 100644
--- a/src/elements/List/ListContent.js
+++ b/src/elements/List/ListContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useValueAndKey,
@@ -28,7 +28,7 @@ const ListContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ListContent, props)
-  const ElementType = getElementType(ListContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/List/ListDescription.js b/src/elements/List/ListDescription.js
index b2672442e3..c4c0557e56 100644
--- a/src/elements/List/ListDescription.js
+++ b/src/elements/List/ListDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ListDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx(className, 'description')
   const rest = getUnhandledProps(ListDescription, props)
-  const ElementType = getElementType(ListDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/ListHeader.js b/src/elements/List/ListHeader.js
index c26850c199..d67ae15b58 100644
--- a/src/elements/List/ListHeader.js
+++ b/src/elements/List/ListHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const ListHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(ListHeader, props)
-  const ElementType = getElementType(ListHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index c0fba5fb72..2491728065 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -35,7 +35,7 @@ const ListItem = React.forwardRef(function (props, ref) {
     value,
   } = props
 
-  const ElementType = getElementType(ListItem, props)
+  const ElementType = getComponentType(props)
   const classes = cx(
     useKeyOnly(active, 'active'),
     useKeyOnly(disabled, 'disabled'),
diff --git a/src/elements/List/ListList.js b/src/elements/List/ListList.js
index 403d243b79..9e7e3244b2 100644
--- a/src/elements/List/ListList.js
+++ b/src/elements/List/ListList.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -17,7 +17,7 @@ const ListList = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
 
   const rest = getUnhandledProps(ListList, props)
-  const ElementType = getElementType(ListList, props)
+  const ElementType = getComponentType(props)
   const classes = cx(useKeyOnly(ElementType !== 'ul' && ElementType !== 'ol', 'list'), className)
 
   return (
diff --git a/src/elements/Loader/Loader.js b/src/elements/Loader/Loader.js
index ed270fa6cd..87e1a08491 100644
--- a/src/elements/Loader/Loader.js
+++ b/src/elements/Loader/Loader.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -42,7 +42,7 @@ const Loader = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Loader, props)
-  const ElementType = getElementType(Loader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/Placeholder.js b/src/elements/Placeholder/Placeholder.js
index d7bd272da5..d3df48b785 100644
--- a/src/elements/Placeholder/Placeholder.js
+++ b/src/elements/Placeholder/Placeholder.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -27,7 +27,7 @@ const Placeholder = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Placeholder, props)
-  const ElementType = getElementType(Placeholder, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/PlaceholderHeader.js b/src/elements/Placeholder/PlaceholderHeader.js
index 6f8293b3ad..80fc8f6990 100644
--- a/src/elements/Placeholder/PlaceholderHeader.js
+++ b/src/elements/Placeholder/PlaceholderHeader.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -17,7 +17,7 @@ const PlaceholderHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, image } = props
   const classes = cx(useKeyOnly(image, 'image'), 'header', className)
   const rest = getUnhandledProps(PlaceholderHeader, props)
-  const ElementType = getElementType(PlaceholderHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js
index 86f3a6e824..7413d4ee55 100644
--- a/src/elements/Placeholder/PlaceholderImage.js
+++ b/src/elements/Placeholder/PlaceholderImage.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { customPropTypes, getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
+import { customPropTypes, getComponentType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * A placeholder can contain an image.
@@ -16,7 +16,7 @@ const PlaceholderImage = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(PlaceholderImage, props)
-  const ElementType = getElementType(PlaceholderImage, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/elements/Placeholder/PlaceholderLine.js b/src/elements/Placeholder/PlaceholderLine.js
index 7ff192252e..7f8c153614 100644
--- a/src/elements/Placeholder/PlaceholderLine.js
+++ b/src/elements/Placeholder/PlaceholderLine.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder can contain have lines of text.
  */
 const PlaceholderLine = React.forwardRef(function (props, ref) {
   const { className, length } = props
+
   const classes = cx('line', length, className)
   const rest = getUnhandledProps(PlaceholderLine, props)
-  const ElementType = getElementType(PlaceholderLine, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/elements/Placeholder/PlaceholderParagraph.js b/src/elements/Placeholder/PlaceholderParagraph.js
index 91a949d7a5..208a6baa68 100644
--- a/src/elements/Placeholder/PlaceholderParagraph.js
+++ b/src/elements/Placeholder/PlaceholderParagraph.js
@@ -2,16 +2,17 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder can contain a paragraph.
  */
 const PlaceholderParagraph = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('paragraph', className)
   const rest = getUnhandledProps(PlaceholderParagraph, props)
-  const ElementType = getElementType(PlaceholderParagraph, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index 74ffc79607..6904fa8407 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -41,7 +41,7 @@ const Rail = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Rail, props)
-  const ElementType = getElementType(Rail, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Reveal/Reveal.js b/src/elements/Reveal/Reveal.js
index f18fcf120f..14fe502083 100644
--- a/src/elements/Reveal/Reveal.js
+++ b/src/elements/Reveal/Reveal.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -27,7 +27,7 @@ const Reveal = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Reveal, props)
-  const ElementType = getElementType(Reveal, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Reveal/RevealContent.js b/src/elements/Reveal/RevealContent.js
index 1a2fb4cf30..0caac64f9b 100644
--- a/src/elements/Reveal/RevealContent.js
+++ b/src/elements/Reveal/RevealContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const RevealContent = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(RevealContent, props)
-  const ElementType = getElementType(RevealContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index cb73a0e7d6..d0a76652dd 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -73,7 +73,7 @@ const Segment = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Segment, props)
-  const ElementType = getElementType(Segment, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js
index a5b00d6c30..8efff38bbc 100644
--- a/src/elements/Segment/SegmentGroup.js
+++ b/src/elements/Segment/SegmentGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -30,7 +30,7 @@ const SegmentGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(SegmentGroup, props)
-  const ElementType = getElementType(SegmentGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Segment/SegmentInline.js b/src/elements/Segment/SegmentInline.js
index 2ce0aeb0e9..4b524e3280 100644
--- a/src/elements/Segment/SegmentInline.js
+++ b/src/elements/Segment/SegmentInline.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A placeholder segment can be inline.
@@ -11,7 +11,7 @@ const SegmentInline = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('inline', className)
   const rest = getUnhandledProps(SegmentInline, props)
-  const ElementType = getElementType(SegmentInline, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index bebf135191..85e72bfd38 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -53,10 +53,12 @@ const Step = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(Step, props)
-  const ElementType = getElementType(Step, props, () => {
-    if (onClick) {
-      return 'a'
-    }
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) {
+        return 'a'
+      }
+    },
   })
 
   if (!childrenUtils.isNil(children)) {
diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js
index d71a931e21..55968739c4 100644
--- a/src/elements/Step/StepContent.js
+++ b/src/elements/Step/StepContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import StepDescription from './StepDescription'
@@ -19,7 +19,7 @@ const StepContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, title } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(StepContent, props)
-  const ElementType = getElementType(StepContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Step/StepDescription.js b/src/elements/Step/StepDescription.js
index 6bde53b17e..2d0e6224e2 100644
--- a/src/elements/Step/StepDescription.js
+++ b/src/elements/Step/StepDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -14,7 +14,7 @@ const StepDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(StepDescription, props)
-  const ElementType = getElementType(StepDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js
index 1b7967809f..3cce7faf0a 100644
--- a/src/elements/Step/StepGroup.js
+++ b/src/elements/Step/StepGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   numberToWordMap,
   SUI,
@@ -51,7 +51,7 @@ const StepGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(StepGroup, props)
-  const ElementType = getElementType(StepGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/elements/Step/StepTitle.js b/src/elements/Step/StepTitle.js
index ad03ec96df..7a27872b8d 100644
--- a/src/elements/Step/StepTitle.js
+++ b/src/elements/Step/StepTitle.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const StepTitle = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('title', className)
   const rest = getUnhandledProps(StepTitle, props)
-  const ElementType = getElementType(StepTitle, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Accordion/AccordionContent.js b/src/modules/Accordion/AccordionContent.js
index 9fae433ee0..3fae3cc6f3 100644
--- a/src/modules/Accordion/AccordionContent.js
+++ b/src/modules/Accordion/AccordionContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -19,7 +19,7 @@ const AccordionContent = React.forwardRef(function (props, ref) {
 
   const classes = cx('content', useKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(AccordionContent, props)
-  const ElementType = getElementType(AccordionContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index f9c7ef7fde..1432a15d61 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useEventCallback,
@@ -22,7 +22,7 @@ const AccordionTitle = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'title', className)
   const rest = getUnhandledProps(AccordionTitle, props)
-  const ElementType = getElementType(AccordionTitle, props)
+  const ElementType = getComponentType(props)
   const iconValue = _.isNil(icon) ? 'dropdown' : icon
 
   const handleClick = useEventCallback((e) => {
diff --git a/src/modules/Dimmer/DimmerDimmable.js b/src/modules/Dimmer/DimmerDimmable.js
index 5219cf8d1f..2b3cfbb11b 100644
--- a/src/modules/Dimmer/DimmerDimmable.js
+++ b/src/modules/Dimmer/DimmerDimmable.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -23,7 +23,7 @@ const DimmerDimmable = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DimmerDimmable, props)
-  const ElementType = getElementType(DimmerDimmable, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index 78680f065b..aeb9d09aad 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   customPropTypes,
   doesNodeContainClick,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useVerticalAlignProp,
@@ -68,7 +68,7 @@ const DimmerInner = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DimmerInner, props)
-  const ElementType = getElementType(DimmerInner, props)
+  const ElementType = getComponentType(props)
 
   const childrenContent = childrenUtils.isNil(children) ? content : children
 
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 7c7a8a5bcd..d77720b102 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -11,7 +11,7 @@ import {
   childrenUtils,
   customPropTypes,
   doesNodeContainClick,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   makeDebugger,
   objectDiff,
@@ -66,7 +66,44 @@ function renderItemContent(item) {
  * @see Menu
  */
 const Dropdown = React.forwardRef((props, ref) => {
-  return <DropdownInner {...props} innerRef={ref} />
+  const {
+    additionLabel = 'Add ',
+    additionPosition = 'top',
+    closeOnBlur = true,
+    closeOnEscape = true,
+    deburr = false,
+    icon = 'dropdown',
+    minCharacters = 1,
+    noResultsMessage = 'No results found.',
+    openOnFocus = true,
+    renderLabel = renderItemContent,
+    searchInput = 'text',
+    selectOnBlur = true,
+    selectOnNavigation = true,
+    wrapSelection = true,
+    ...rest
+  } = props
+
+  return (
+    <DropdownInner
+      additionLabel={additionLabel}
+      additionPosition={additionPosition}
+      closeOnBlur={closeOnBlur}
+      closeOnEscape={closeOnEscape}
+      deburr={deburr}
+      icon={icon}
+      minCharacters={minCharacters}
+      noResultsMessage={noResultsMessage}
+      openOnFocus={openOnFocus}
+      renderLabel={renderLabel}
+      searchInput={searchInput}
+      selectOnBlur={selectOnBlur}
+      selectOnNavigation={selectOnNavigation}
+      wrapSelection={wrapSelection}
+      {...rest}
+      innerRef={ref}
+    />
+  )
 })
 
 class DropdownInner extends Component {
@@ -1088,7 +1125,7 @@ class DropdownInner extends Component {
       className,
     )
     const rest = getUnhandledProps(Dropdown, this.props)
-    const ElementType = getElementType(Dropdown, this.props)
+    const ElementType = getComponentType(this.props)
     const ariaOptions = this.getDropdownAriaOptions(ElementType, this.props)
 
     return (
@@ -1442,27 +1479,10 @@ Dropdown.propTypes = {
 }
 
 Dropdown.displayName = 'Dropdown'
-Dropdown.defaultProps = {
-  additionLabel: 'Add ',
-  additionPosition: 'top',
-  closeOnBlur: true,
-  closeOnEscape: true,
-  deburr: false,
-  icon: 'dropdown',
-  minCharacters: 1,
-  noResultsMessage: 'No results found.',
-  openOnFocus: true,
-  renderLabel: renderItemContent,
-  searchInput: 'text',
-  selectOnBlur: true,
-  selectOnNavigation: true,
-  wrapSelection: true,
-}
 
 DropdownInner.autoControlledProps = ['open', 'searchQuery', 'selectedLabel', 'value', 'upward']
 
 if (process.env.NODE_ENV !== 'production') {
-  DropdownInner.defaultProps = Dropdown.defaultProps
   DropdownInner.propTypes = Dropdown.propTypes
 }
 
diff --git a/src/modules/Dropdown/DropdownDivider.js b/src/modules/Dropdown/DropdownDivider.js
index e4f283bbe5..4ffa5a3d82 100644
--- a/src/modules/Dropdown/DropdownDivider.js
+++ b/src/modules/Dropdown/DropdownDivider.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A dropdown menu can contain dividers to separate related content.
@@ -12,7 +12,7 @@ const DropdownDivider = React.forwardRef(function (props, ref) {
 
   const classes = cx('divider', className)
   const rest = getUnhandledProps(DropdownDivider, props)
-  const ElementType = getElementType(DropdownDivider, props)
+  const ElementType = getComponentType(props)
 
   return <ElementType {...rest} className={classes} ref={ref} />
 })
diff --git a/src/modules/Dropdown/DropdownHeader.js b/src/modules/Dropdown/DropdownHeader.js
index 9cb15436a0..c91bf12c2e 100644
--- a/src/modules/Dropdown/DropdownHeader.js
+++ b/src/modules/Dropdown/DropdownHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -19,7 +19,7 @@ const DropdownHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(DropdownHeader, props)
-  const ElementType = getElementType(DropdownHeader, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 5f4fb65419..5722d0b767 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -8,7 +8,7 @@ import {
   createShorthand,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -52,7 +52,7 @@ const DropdownItem = React.forwardRef(function (props, ref) {
     ? childrenUtils.someByType(children, 'DropdownMenu') && 'dropdown'
     : icon
   const rest = getUnhandledProps(DropdownItem, props)
-  const ElementType = getElementType(DropdownItem, props)
+  const ElementType = getComponentType(props)
   const ariaOptions = {
     role: 'option',
     'aria-disabled': disabled,
diff --git a/src/modules/Dropdown/DropdownMenu.js b/src/modules/Dropdown/DropdownMenu.js
index cdc53ef6b1..e77535e2c8 100644
--- a/src/modules/Dropdown/DropdownMenu.js
+++ b/src/modules/Dropdown/DropdownMenu.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const DropdownMenu = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(DropdownMenu, props)
-  const ElementType = getElementType(DropdownMenu, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Dropdown/DropdownText.js b/src/modules/Dropdown/DropdownText.js
index fd7a106947..17e29bc4de 100644
--- a/src/modules/Dropdown/DropdownText.js
+++ b/src/modules/Dropdown/DropdownText.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const DropdownText = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('divider', className)
   const rest = getUnhandledProps(DropdownText, props)
-  const ElementType = getElementType(DropdownText, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index 06dddd6bff..ebcaaa7c10 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLIframe,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useAutoControlledValue,
@@ -109,7 +109,7 @@ const Embed = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', aspectRatio, useKeyOnly(active, 'active'), 'embed', className)
   const rest = getUnhandledProps(Embed, props)
-  const ElementType = getElementType(Embed, props)
+  const ElementType = getComponentType(props)
 
   const iconShorthand = icon !== undefined ? icon : 'video play'
 
diff --git a/src/modules/Modal/ModalActions.js b/src/modules/Modal/ModalActions.js
index 37bf007bea..b401e6aa73 100644
--- a/src/modules/Modal/ModalActions.js
+++ b/src/modules/Modal/ModalActions.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Button from '../../elements/Button'
@@ -20,7 +20,7 @@ const ModalActions = React.forwardRef(function (props, ref) {
 
   const classes = cx('actions', className)
   const rest = getUnhandledProps(ModalActions, props)
-  const ElementType = getElementType(ModalActions, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/modules/Modal/ModalContent.js b/src/modules/Modal/ModalContent.js
index 5c41101b59..4f04805dae 100644
--- a/src/modules/Modal/ModalContent.js
+++ b/src/modules/Modal/ModalContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -24,7 +24,7 @@ const ModalContent = React.forwardRef(function (props, ref) {
     'content',
   )
   const rest = getUnhandledProps(ModalContent, props)
-  const ElementType = getElementType(ModalContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Modal/ModalDescription.js b/src/modules/Modal/ModalDescription.js
index 99c1a11502..691f1d56e8 100644
--- a/src/modules/Modal/ModalDescription.js
+++ b/src/modules/Modal/ModalDescription.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A modal can contain a description with one or more paragraphs.
@@ -11,7 +11,7 @@ const ModalDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('description', className)
   const rest = getUnhandledProps(ModalDescription, props)
-  const ElementType = getElementType(ModalDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Modal/ModalDimmer.js b/src/modules/Modal/ModalDimmer.js
index 7599a54583..bad1132c16 100644
--- a/src/modules/Modal/ModalDimmer.js
+++ b/src/modules/Modal/ModalDimmer.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useClassNamesOnNode,
   useKeyOnly,
@@ -34,7 +34,7 @@ const ModalDimmer = React.forwardRef(function (props, ref) {
   )
 
   const rest = getUnhandledProps(ModalDimmer, props)
-  const ElementType = getElementType(ModalDimmer, props)
+  const ElementType = getComponentType(props)
 
   useClassNamesOnNode(mountNode, bodyClasses)
 
diff --git a/src/modules/Modal/ModalHeader.js b/src/modules/Modal/ModalHeader.js
index 14fa4404aa..6e0822f247 100644
--- a/src/modules/Modal/ModalHeader.js
+++ b/src/modules/Modal/ModalHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const ModalHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('header', className)
   const rest = getUnhandledProps(ModalHeader, props)
-  const ElementType = getElementType(ModalHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index c0b7276928..1237cb0d07 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -35,7 +35,9 @@ const debug = makeDebugger('popup')
  */
 function getPortalProps(props) {
   const portalProps = {}
-  const normalizedOn = _.isArray(props.on) ? props.on ?? ['click', 'hover'] : [props.on]
+
+  const on = props.on ?? ['click', 'hover']
+  const normalizedOn = _.isArray(on) ? on : [on]
 
   if (props.hoverable) {
     portalProps.closeOnPortalMouseLeave = true
diff --git a/src/modules/Popup/PopupContent.js b/src/modules/Popup/PopupContent.js
index fa30a42244..167cef2c44 100644
--- a/src/modules/Popup/PopupContent.js
+++ b/src/modules/Popup/PopupContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const PopupContent = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('content', className)
   const rest = getUnhandledProps(PopupContent, props)
-  const ElementType = getElementType(PopupContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Popup/PopupHeader.js b/src/modules/Popup/PopupHeader.js
index 94e6384ee9..8eff4c7fda 100644
--- a/src/modules/Popup/PopupHeader.js
+++ b/src/modules/Popup/PopupHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -18,7 +18,7 @@ const PopupHeader = React.forwardRef(function (props, ref) {
 
   const classes = cx('header', className)
   const rest = getUnhandledProps(PopupHeader, props)
-  const ElementType = getElementType(PopupHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 6e26f4afd1..7c20634714 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLDivision,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -141,7 +141,7 @@ const Progress = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Progress, props)
-  const ElementType = getElementType(Progress, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 6c7376c704..1d87534b71 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -19,7 +19,7 @@ const RatingIcon = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(RatingIcon, props)
-  const ElementType = getComponentType(props, { as: 'i' })
+  const ElementType = getComponentType(props, { defaultAs: 'i' })
 
   const handleClick = (e) => {
     _.invoke(props, 'onClick', e, props)
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 8cfd84fda9..145cc8f22a 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -9,7 +9,7 @@ import {
   ModernAutoControlledComponent as Component,
   customPropTypes,
   eventStack,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlInputAttrs,
   isBrowser,
@@ -45,7 +45,26 @@ const overrideSearchInputProps = (predefinedProps) => {
  * A search module allows a user to query for results from a selection of data
  */
 const Search = React.forwardRef((props, ref) => {
-  return <SearchInner {...props} innerRef={ref} />
+  const {
+    icon = 'search',
+    input = 'text',
+    minCharacters = 1,
+    noResultsMessage = 'No results found.',
+    showNoResults = true,
+    ...rest
+  } = props
+
+  return (
+    <SearchInner
+      icon={icon}
+      input={input}
+      minCharacters={minCharacters}
+      noResultsMessage={noResultsMessage}
+      showNoResults={showNoResults}
+      {...rest}
+      innerRef={ref}
+    />
+  )
 })
 
 class SearchInner extends Component {
@@ -499,7 +518,7 @@ class SearchInner extends Component {
       className,
     )
     const unhandled = getUnhandledProps(Search, this.props)
-    const ElementType = getElementType(Search, this.props)
+    const ElementType = getComponentType(this.props)
     const [htmlInputProps, rest] = partitionHTMLProps(unhandled, {
       htmlProps: htmlInputAttrs,
     })
@@ -679,18 +698,9 @@ Search.propTypes = {
   placeholder: PropTypes.string,
 }
 
-Search.defaultProps = {
-  icon: 'search',
-  input: 'text',
-  minCharacters: 1,
-  noResultsMessage: 'No results found.',
-  showNoResults: true,
-}
-
 SearchInner.autoControlledProps = ['open', 'value']
 
 if (process.env.NODE_ENV !== 'production') {
-  SearchInner.defaultProps = Search.defaultProps
   SearchInner.propTypes = Search.propTypes
 }
 
diff --git a/src/modules/Search/SearchResults.js b/src/modules/Search/SearchResults.js
index dc39226950..5c44b66e31 100644
--- a/src/modules/Search/SearchResults.js
+++ b/src/modules/Search/SearchResults.js
@@ -2,13 +2,13 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 const SearchResults = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('results transition', className)
   const rest = getUnhandledProps(SearchResults, props)
-  const ElementType = getElementType(SearchResults, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 764c16178e..0e6c470bdc 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -9,7 +9,7 @@ import {
   customPropTypes,
   doesNodeContainClick,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
   isRefObject,
   useKeyOnly,
   useIsomorphicLayoutEffect,
@@ -50,7 +50,16 @@ function useAnimationTick(visible) {
  * A sidebar hides additional content beside a page.
  */
 const Sidebar = React.forwardRef((props, ref) => {
-  const { animation, className, children, content, direction, target, visible, width } = props
+  const {
+    animation,
+    className,
+    children,
+    content,
+    direction = 'left',
+    target = documentRef,
+    visible = false,
+    width,
+  } = props
 
   const [animationTick, resetAnimationTick] = useAnimationTick(visible)
   const elementRef = useMergedRefs(ref, React.useRef())
@@ -107,7 +116,7 @@ const Sidebar = React.forwardRef((props, ref) => {
     className,
   )
   const rest = getUnhandledProps(Sidebar, props)
-  const ElementType = getElementType(Sidebar, props)
+  const ElementType = getComponentType(props)
   const targetProp = isRefObject(target) ? { targetRef: target } : { target }
 
   return (
@@ -190,12 +199,6 @@ Sidebar.propTypes = {
   width: PropTypes.oneOf(['very thin', 'thin', 'wide', 'very wide']),
 }
 
-Sidebar.defaultProps = {
-  direction: 'left',
-  target: documentRef,
-  visible: false,
-}
-
 Sidebar.animationDuration = 500
 
 Sidebar.Pushable = SidebarPushable
diff --git a/src/modules/Sidebar/SidebarPushable.js b/src/modules/Sidebar/SidebarPushable.js
index ab7ce6b604..b8f5dd8b0c 100644
--- a/src/modules/Sidebar/SidebarPushable.js
+++ b/src/modules/Sidebar/SidebarPushable.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A pushable sub-component for Sidebar.
@@ -11,7 +11,7 @@ const SidebarPushable = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('pushable', className)
   const rest = getUnhandledProps(SidebarPushable, props)
-  const ElementType = getElementType(SidebarPushable, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/modules/Sidebar/SidebarPusher.js b/src/modules/Sidebar/SidebarPusher.js
index 670e92eb92..ffc791dee5 100644
--- a/src/modules/Sidebar/SidebarPusher.js
+++ b/src/modules/Sidebar/SidebarPusher.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -18,7 +18,7 @@ const SidebarPusher = React.forwardRef(function (props, ref) {
 
   const classes = cx('pusher', useKeyOnly(dimmed, 'dimmed'), className)
   const rest = getUnhandledProps(SidebarPusher, props)
-  const ElementType = getElementType(SidebarPusher, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Advertisement/Advertisement.js b/src/views/Advertisement/Advertisement.js
index 733e20c3b2..30c35845d5 100644
--- a/src/views/Advertisement/Advertisement.js
+++ b/src/views/Advertisement/Advertisement.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -25,7 +25,7 @@ const Advertisement = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Advertisement, props)
-  const ElementType = getElementType(Advertisement, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} data-text={test} ref={ref}>
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index 13cefed144..f2763c3285 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -52,10 +52,12 @@ const Card = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Card, props)
-  const ElementType = getElementType(Card, props, () => {
-    if (onClick) {
-      return 'a'
-    }
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (onClick) {
+        return 'a'
+      }
+    },
   })
 
   const handleClick = useEventCallback((e) => {
diff --git a/src/views/Card/CardContent.js b/src/views/Card/CardContent.js
index 475ca2e719..ecb0a3afe6 100644
--- a/src/views/Card/CardContent.js
+++ b/src/views/Card/CardContent.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -25,7 +25,7 @@ const CardContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(extra, 'extra'), useTextAlignProp(textAlign), 'content', className)
   const rest = getUnhandledProps(CardContent, props)
-  const ElementType = getElementType(CardContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Card/CardDescription.js b/src/views/Card/CardDescription.js
index 49352e62f7..0de11e2a4b 100644
--- a/src/views/Card/CardDescription.js
+++ b/src/views/Card/CardDescription.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardDescription = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'description', className)
   const rest = getUnhandledProps(CardDescription, props)
-  const ElementType = getElementType(CardDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Card/CardGroup.js b/src/views/Card/CardGroup.js
index 276aa27056..7263a66e8c 100644
--- a/src/views/Card/CardGroup.js
+++ b/src/views/Card/CardGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -42,7 +42,7 @@ const CardGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(CardGroup, props)
-  const ElementType = getElementType(CardGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Card/CardHeader.js b/src/views/Card/CardHeader.js
index 9dd0e16d31..bf41e51cfe 100644
--- a/src/views/Card/CardHeader.js
+++ b/src/views/Card/CardHeader.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'header', className)
   const rest = getUnhandledProps(CardHeader, props)
-  const ElementType = getElementType(CardHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Card/CardMeta.js b/src/views/Card/CardMeta.js
index ac1377d220..d45b075fac 100644
--- a/src/views/Card/CardMeta.js
+++ b/src/views/Card/CardMeta.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useTextAlignProp,
@@ -19,7 +19,7 @@ const CardMeta = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
   const classes = cx(useTextAlignProp(textAlign), 'meta', className)
   const rest = getUnhandledProps(CardMeta, props)
-  const ElementType = getElementType(CardMeta, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/Comment.js b/src/views/Comment/Comment.js
index bf136fbed0..59db4e52df 100644
--- a/src/views/Comment/Comment.js
+++ b/src/views/Comment/Comment.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -26,7 +26,7 @@ const Comment = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(collapsed, 'collapsed'), 'comment', className)
   const rest = getUnhandledProps(Comment, props)
-  const ElementType = getElementType(Comment, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentActions.js b/src/views/Comment/CommentActions.js
index 8286ae7005..c1cca85fc9 100644
--- a/src/views/Comment/CommentActions.js
+++ b/src/views/Comment/CommentActions.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain an list of actions a user may perform related to this comment.
@@ -11,7 +11,7 @@ const CommentActions = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('actions', className)
   const rest = getUnhandledProps(CommentActions, props)
-  const ElementType = getElementType(CommentActions, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentAuthor.js b/src/views/Comment/CommentAuthor.js
index be3e412ac7..01b3747c19 100644
--- a/src/views/Comment/CommentAuthor.js
+++ b/src/views/Comment/CommentAuthor.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain an author.
@@ -11,7 +11,7 @@ const CommentAuthor = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('author', className)
   const rest = getUnhandledProps(CommentAuthor, props)
-  const ElementType = getElementType(CommentAuthor, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentAvatar.js b/src/views/Comment/CommentAvatar.js
index c709321080..dc5aee78d1 100644
--- a/src/views/Comment/CommentAvatar.js
+++ b/src/views/Comment/CommentAvatar.js
@@ -4,7 +4,7 @@ import React from 'react'
 
 import {
   createHTMLImage,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   htmlImageProps,
   partitionHTMLProps,
@@ -19,7 +19,7 @@ const CommentAvatar = React.forwardRef(function (props, ref) {
   const classes = cx('avatar', className)
   const rest = getUnhandledProps(CommentAvatar, props)
   const [imageProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
-  const ElementType = getElementType(CommentAvatar, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rootProps} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentContent.js b/src/views/Comment/CommentContent.js
index 9badf0c8ec..df72aeb471 100644
--- a/src/views/Comment/CommentContent.js
+++ b/src/views/Comment/CommentContent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain content.
@@ -11,7 +11,7 @@ const CommentContent = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'content')
   const rest = getUnhandledProps(CommentContent, props)
-  const ElementType = getElementType(CommentContent, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js
index 5b18238dea..2eea6998e6 100644
--- a/src/views/Comment/CommentGroup.js
+++ b/src/views/Comment/CommentGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -28,7 +28,7 @@ const CommentGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(CommentGroup, props)
-  const ElementType = getElementType(CommentGroup, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentMetadata.js b/src/views/Comment/CommentMetadata.js
index f06970322e..92fee6d069 100644
--- a/src/views/Comment/CommentMetadata.js
+++ b/src/views/Comment/CommentMetadata.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.
@@ -11,7 +11,7 @@ const CommentMetadata = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx('metadata', className)
   const rest = getUnhandledProps(CommentMetadata, props)
-  const ElementType = getElementType(CommentMetadata, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Comment/CommentText.js b/src/views/Comment/CommentText.js
index 45392353bf..17f2bbd895 100644
--- a/src/views/Comment/CommentText.js
+++ b/src/views/Comment/CommentText.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * A comment can contain text.
@@ -11,7 +11,7 @@ const CommentText = React.forwardRef(function (props, ref) {
   const { className, children, content } = props
   const classes = cx(className, 'text')
   const rest = getUnhandledProps(CommentText, props)
-  const ElementType = getElementType(CommentText, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Feed/Feed.js b/src/views/Feed/Feed.js
index 725db44d14..c3a35703b1 100644
--- a/src/views/Feed/Feed.js
+++ b/src/views/Feed/Feed.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps, SUI } from '../../lib'
 import FeedContent from './FeedContent'
 import FeedDate from './FeedDate'
 import FeedEvent from './FeedEvent'
@@ -22,7 +22,7 @@ const Feed = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, 'feed', className)
   const rest = getUnhandledProps(Feed, props)
-  const ElementType = getElementType(Feed, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedContent.js b/src/views/Feed/FeedContent.js
index 1ee33e2eb8..8874ae80a8 100644
--- a/src/views/Feed/FeedContent.js
+++ b/src/views/Feed/FeedContent.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedDate from './FeedDate'
@@ -19,7 +19,7 @@ const FeedContent = React.forwardRef(function (props, ref) {
 
   const classes = cx('content', className)
   const rest = getUnhandledProps(FeedContent, props)
-  const ElementType = getElementType(FeedContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedDate.js b/src/views/Feed/FeedDate.js
index 628f73aabb..e4a836d355 100644
--- a/src/views/Feed/FeedDate.js
+++ b/src/views/Feed/FeedDate.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 
 /**
  * An event or an event summary can contain a date.
@@ -11,7 +11,7 @@ const FeedDate = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('date', className)
   const rest = getUnhandledProps(FeedDate, props)
-  const ElementType = getElementType(FeedDate, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Feed/FeedEvent.js b/src/views/Feed/FeedEvent.js
index 31867b3b73..e4f971bddc 100644
--- a/src/views/Feed/FeedEvent.js
+++ b/src/views/Feed/FeedEvent.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { createShorthand, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { createShorthand, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import FeedContent from './FeedContent'
 import FeedLabel from './FeedLabel'
 
@@ -25,7 +25,7 @@ const FeedEvent = React.forwardRef(function (props, ref) {
 
   const classes = cx('event', className)
   const rest = getUnhandledProps(FeedEvent, props)
-  const ElementType = getElementType(FeedEvent, props)
+  const ElementType = getComponentType(props)
 
   const hasContentProp = content || date || extraImages || extraText || meta || summary
   const contentProps = { content, date, extraImages, extraText, meta, summary }
diff --git a/src/views/Feed/FeedExtra.js b/src/views/Feed/FeedExtra.js
index cb5d446fe6..50f51a8ce8 100644
--- a/src/views/Feed/FeedExtra.js
+++ b/src/views/Feed/FeedExtra.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -25,7 +25,7 @@ const FeedExtra = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(FeedExtra, props)
-  const ElementType = getElementType(FeedExtra, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedLabel.js b/src/views/Feed/FeedLabel.js
index 93f28bd6cd..56fd9acd6b 100644
--- a/src/views/Feed/FeedLabel.js
+++ b/src/views/Feed/FeedLabel.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createHTMLImage,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -19,7 +19,7 @@ const FeedLabel = React.forwardRef(function (props, ref) {
 
   const classes = cx('label', className)
   const rest = getUnhandledProps(FeedLabel, props)
-  const ElementType = getElementType(FeedLabel, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedMeta.js b/src/views/Feed/FeedMeta.js
index 816dbc9dba..b0c5d0f222 100644
--- a/src/views/Feed/FeedMeta.js
+++ b/src/views/Feed/FeedMeta.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedLike from './FeedLike'
@@ -19,7 +19,7 @@ const FeedMeta = React.forwardRef(function (props, ref) {
 
   const classes = cx('meta', className)
   const rest = getUnhandledProps(FeedMeta, props)
-  const ElementType = getElementType(FeedMeta, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Feed/FeedSummary.js b/src/views/Feed/FeedSummary.js
index 2e2055c7f8..2be1f0c4b3 100644
--- a/src/views/Feed/FeedSummary.js
+++ b/src/views/Feed/FeedSummary.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthand,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 import FeedDate from './FeedDate'
@@ -20,7 +20,7 @@ const FeedSummary = React.forwardRef(function (props, ref) {
 
   const classes = cx('summary', className)
   const rest = getUnhandledProps(FeedSummary, props)
-  const ElementType = getElementType(FeedSummary, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/Item.js b/src/views/Item/Item.js
index e76e5e4862..41f37257a6 100644
--- a/src/views/Item/Item.js
+++ b/src/views/Item/Item.js
@@ -2,7 +2,7 @@ import cx from 'clsx'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { childrenUtils, customPropTypes, getComponentType, getUnhandledProps } from '../../lib'
 import ItemContent from './ItemContent'
 import ItemDescription from './ItemDescription'
 import ItemExtra from './ItemExtra'
@@ -19,7 +19,7 @@ const Item = React.forwardRef(function (props, ref) {
 
   const classes = cx('item', className)
   const rest = getUnhandledProps(Item, props)
-  const ElementType = getElementType(Item, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemContent.js b/src/views/Item/ItemContent.js
index 6699a1cbc1..add8a28dd4 100644
--- a/src/views/Item/ItemContent.js
+++ b/src/views/Item/ItemContent.js
@@ -5,7 +5,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useVerticalAlignProp,
@@ -23,7 +23,7 @@ const ItemContent = React.forwardRef(function (props, ref) {
 
   const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
   const rest = getUnhandledProps(ItemContent, props)
-  const ElementType = getElementType(ItemContent, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemDescription.js b/src/views/Item/ItemDescription.js
index be5440a41d..8e5082c97b 100644
--- a/src/views/Item/ItemDescription.js
+++ b/src/views/Item/ItemDescription.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemDescription = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('description', className)
   const rest = getUnhandledProps(ItemDescription, props)
-  const ElementType = getElementType(ItemDescription, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemExtra.js b/src/views/Item/ItemExtra.js
index ed9a2a0add..3402f02f3a 100644
--- a/src/views/Item/ItemExtra.js
+++ b/src/views/Item/ItemExtra.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemExtra = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('extra', className)
   const rest = getUnhandledProps(ItemExtra, props)
-  const ElementType = getElementType(ItemExtra, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemGroup.js b/src/views/Item/ItemGroup.js
index 7ceca3b9ea..33269ecce3 100644
--- a/src/views/Item/ItemGroup.js
+++ b/src/views/Item/ItemGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
   useKeyOrValueAndKey,
@@ -29,7 +29,7 @@ const ItemGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(ItemGroup, props)
-  const ElementType = getElementType(ItemGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Item/ItemHeader.js b/src/views/Item/ItemHeader.js
index 610e6d649a..4a841b8a50 100644
--- a/src/views/Item/ItemHeader.js
+++ b/src/views/Item/ItemHeader.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(ItemHeader, props)
-  const ElementType = getElementType(ItemHeader, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Item/ItemMeta.js b/src/views/Item/ItemMeta.js
index 307bf59a72..73d347d9d8 100644
--- a/src/views/Item/ItemMeta.js
+++ b/src/views/Item/ItemMeta.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -15,9 +15,10 @@ import {
  */
 const ItemMeta = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('meta', className)
   const rest = getUnhandledProps(ItemMeta, props)
-  const ElementType = getElementType(ItemMeta, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index e11df59393..05b910d017 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -7,7 +7,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -46,7 +46,7 @@ const Statistic = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Statistic, props)
-  const ElementType = getElementType(Statistic, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index eac360d23b..c85df42892 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -6,7 +6,7 @@ import React from 'react'
 import {
   childrenUtils,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   SUI,
   useKeyOnly,
@@ -31,7 +31,7 @@ const StatisticGroup = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(StatisticGroup, props)
-  const ElementType = getElementType(StatisticGroup, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index efc01ab9bc..b1134cd185 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
 } from '../../lib'
 
@@ -17,7 +17,7 @@ const StatisticLabel = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
   const classes = cx('label', className)
   const rest = getUnhandledProps(StatisticLabel, props)
-  const ElementType = getElementType(StatisticLabel, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index 78ac615220..2ce9eda25a 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -6,7 +6,7 @@ import {
   childrenUtils,
   createShorthandFactory,
   customPropTypes,
-  getElementType,
+  getComponentType,
   getUnhandledProps,
   useKeyOnly,
 } from '../../lib'
@@ -19,7 +19,7 @@ const StatisticValue = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(text, 'text'), 'value', className)
   const rest = getUnhandledProps(StatisticValue, props)
-  const ElementType = getElementType(StatisticValue, props)
+  const ElementType = getComponentType(props)
 
   return (
     <ElementType {...rest} className={classes} ref={ref}>
diff --git a/test/specs/addons/Confirm/Confirm-test.js b/test/specs/addons/Confirm/Confirm-test.js
index 46a96b471e..499aa41366 100644
--- a/test/specs/addons/Confirm/Confirm-test.js
+++ b/test/specs/addons/Confirm/Confirm-test.js
@@ -37,6 +37,7 @@ describe('Confirm', () => {
     requiredProps: { open: true },
   })
   common.implementsShorthandProp(Confirm, {
+    defaultValue: 'OK',
     autoGenerateKey: false,
     propKey: 'content',
     ShorthandComponent: Modal.Content,
@@ -67,7 +68,12 @@ describe('Confirm', () => {
 
   describe('cancelButton', () => {
     it('is "Cancel" by default', () => {
-      Confirm.defaultProps.cancelButton.should.equal('Cancel')
+      shallow(<Confirm />)
+        .find('Button')
+        .first()
+        .shallow()
+        .childAt(0)
+        .should.have.text('Cancel')
     })
     it('sets the cancel button text', () => {
       shallow(<Confirm cancelButton='foo' />)
@@ -81,7 +87,11 @@ describe('Confirm', () => {
 
   describe('confirmButton', () => {
     it('is "OK" by default', () => {
-      Confirm.defaultProps.confirmButton.should.equal('OK')
+      shallow(<Confirm />)
+        .find('Button[primary]')
+        .shallow()
+        .childAt(0)
+        .should.have.text('OK')
     })
     it('sets the confirm button text', () => {
       shallow(<Confirm confirmButton='foo' />)
diff --git a/test/specs/commonTests/classNameHelpers.js b/test/specs/commonTests/classNameHelpers.js
index 65671731a1..6fc47dc6de 100644
--- a/test/specs/commonTests/classNameHelpers.js
+++ b/test/specs/commonTests/classNameHelpers.js
@@ -37,13 +37,12 @@ export const noClassNameFromBoolProps = (Component, propKey, propValues, options
 }
 
 export const noDefaultClassNameFromProp = (Component, propKey, propValues, options = {}) => {
-  const { defaultProps = {} } = Component
-  const { className = propKey, requiredProps = {} } = options
+  const { className = propKey, requiredProps = {}, defaultValue } = options
 
   // required props may include a prop that creates a className
   // if so, we cannot assert that it doesn't exist by default because it is required to exist
   // skip assertions for required props
-  if (propKey in defaultProps) return
+  if (defaultValue) return
   if (propKey in requiredProps) return
 
   it('is not included in className when not defined', () => {
diff --git a/test/specs/commonTests/implementsClassNameProps.js b/test/specs/commonTests/implementsClassNameProps.js
index 154ccd93c7..8b73ea2b8b 100644
--- a/test/specs/commonTests/implementsClassNameProps.js
+++ b/test/specs/commonTests/implementsClassNameProps.js
@@ -37,6 +37,7 @@ export const propKeyAndValueToClassName = (Component, propKey, propValues, optio
  * @param {String} propKey A props key.
  * @param {Object} [options={}]
  * @param {Object} [options.className=propKey] The className to assert exists.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {Object} [options.className=propKey] The className to assert exists.
  */
@@ -80,6 +81,7 @@ export const propKeyOnlyToClassName = (Component, propKey, options = {}) => {
  * @param {String} propKey A props key.
  * @param {array} propValues Array of possible values of prop.
  * @param {Object} [options={}]
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {Object} [options.className=propKey] The className to assert exists.
  */
@@ -125,6 +127,7 @@ export const propKeyOrValueAndKeyToClassName = (Component, propKey, propValues,
  * @param {array} propValues Array of possible props values.
  * @param {Object} [options={}]
  * @param {Object} [options.className=propKey] The className to assert exists.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Number} [options.nestingLevel=0] The nesting level of the component.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  */
diff --git a/test/specs/commonTests/implementsCommonProps.js b/test/specs/commonTests/implementsCommonProps.js
index dc7a4b2dea..ec0eb026d6 100644
--- a/test/specs/commonTests/implementsCommonProps.js
+++ b/test/specs/commonTests/implementsCommonProps.js
@@ -105,6 +105,7 @@ export const implementsHTMLLabelProp = (Component, options = {}) => {
  * @param {string|function} [options.ShorthandComponent] The component that should be rendered from the shorthand value.
  * @param {function} [options.mapValueToProps] A function that maps a primitive value to the Component props
  * @param {Object} [options.requiredProps={}] Props required to render the component.
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
diff --git a/test/specs/commonTests/implementsShorthandProp.js b/test/specs/commonTests/implementsShorthandProp.js
index de7a17db3b..e89dcdb565 100644
--- a/test/specs/commonTests/implementsShorthandProp.js
+++ b/test/specs/commonTests/implementsShorthandProp.js
@@ -30,12 +30,14 @@ const shorthandComponentName = (ShorthandComponent) => {
  * @param {Boolean} [options.parentIsFragment=false] A flag that shows the type of the Component to test.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
  * @param {boolean} [options.rendersPortal=false] Does this component render a Portal powered component?
+ * @param {boolean|string} [options.defaultValue] The default value for the shorthand prop.
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
 export default (Component, options = {}) => {
   const {
     alwaysPresent,
+    defaultValue,
     assertExactMatch = true,
     autoGenerateKey = true,
     mapValueToProps,
@@ -100,14 +102,16 @@ export default (Component, options = {}) => {
         noDefaultClassNameFromProp(Component, propKey, [], options)
       }
 
-      it(`has no ${name} when not defined`, () => {
-        wrapper = mount(React.createElement(Component, requiredProps))
+      if (!defaultValue) {
+        it(`has no ${name} when not defined`, () => {
+          wrapper = mount(React.createElement(Component, requiredProps))
 
-        wrapper.should.not.have.descendants(ShorthandComponent)
-      })
+          wrapper.should.not.have.descendants(ShorthandComponent)
+        })
+      }
     }
 
-    if (!alwaysPresent) {
+    if (!alwaysPresent && !defaultValue) {
       it(`has no ${name} when null`, () => {
         const element = React.createElement(Component, { ...requiredProps, [propKey]: null })
         wrapper = mount(element)
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 8f43d884aa..4b3d9e8d06 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -112,6 +112,7 @@ describe('Dropdown', () => {
   ])
 
   common.implementsIconProp(Dropdown, {
+    defaultValue: 'search',
     assertExactMatch: false,
     autoGenerateKey: false,
   })
@@ -682,7 +683,6 @@ describe('Dropdown', () => {
 
   describe('icon', () => {
     it('defaults to a dropdown icon', () => {
-      Dropdown.defaultProps.icon.should.equal('dropdown')
       wrapperMount(<Dropdown />).should.contain.descendants('.dropdown.icon')
     })
 
diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js
index fb42392a6d..71d10213c0 100644
--- a/test/specs/modules/Modal/Modal-test.js
+++ b/test/specs/modules/Modal/Modal-test.js
@@ -420,7 +420,11 @@ describe('Modal', () => {
 
   describe('closeOnDocumentClick', () => {
     it('is false by default', () => {
-      Modal.defaultProps.closeOnDocumentClick.should.equal(false)
+      wrapperMount(<Modal defaultOpen />)
+
+      assertBodyContains('.ui.dimmer')
+      domEvent.click(document.body)
+      assertBodyContains('.ui.dimmer', true)
     })
     it('closes the modal on document click when true', () => {
       wrapperMount(<Modal defaultOpen closeOnDocumentClick />)
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
index 20844c9235..78450d3c3e 100644
--- a/test/specs/modules/Popup/Popup-test.js
+++ b/test/specs/modules/Popup/Popup-test.js
@@ -113,7 +113,6 @@ describe('Popup', () => {
   describe('eventsEnabled ', () => {
     it(`is "true" by default`, () => {
       wrapperMount(<Popup open />)
-      wrapper.should.have.prop('eventsEnabled', true)
 
       const modifiers = wrapper.find('Popper').prop('modifiers')
       const eventListeners = _.find(modifiers, (m) => m.name === 'eventListeners')
diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js
index 897f91229a..0720f3e4d9 100644
--- a/test/specs/modules/Search/Search-test.js
+++ b/test/specs/modules/Search/Search-test.js
@@ -125,7 +125,6 @@ describe('Search', () => {
 
   describe('icon', () => {
     it('defaults to a search icon', () => {
-      Search.defaultProps.icon.should.equal('search')
       wrapperMount(<Search />).should.contain.descendants('.search.icon')
     })
   })
diff --git a/test/specs/modules/Sidebar/Sidebar-test.js b/test/specs/modules/Sidebar/Sidebar-test.js
index 21afd96f93..57bd6e4e0e 100644
--- a/test/specs/modules/Sidebar/Sidebar-test.js
+++ b/test/specs/modules/Sidebar/Sidebar-test.js
@@ -20,7 +20,9 @@ describe('Sidebar', () => {
     'slide out',
     'slide along',
   ])
-  common.propValueOnlyToClassName(Sidebar, 'direction', ['top', 'right', 'bottom', 'left'])
+  common.propValueOnlyToClassName(Sidebar, 'direction', ['top', 'right', 'bottom', 'left'], {
+    defaultValue: 'left',
+  })
   common.propValueOnlyToClassName(Sidebar, 'width', ['very thin', 'thin', 'wide', 'very wide'])
 
   describe('componentWillUnmount', () => {
diff --git a/test/specs/modules/Tab/Tab-test.js b/test/specs/modules/Tab/Tab-test.js
index 14bfcf1003..b662824ff5 100644
--- a/test/specs/modules/Tab/Tab-test.js
+++ b/test/specs/modules/Tab/Tab-test.js
@@ -127,22 +127,18 @@ describe('Tab', () => {
     it('is set when clicking an item', () => {
       const wrapper = mount(<Tab panes={panes} />)
 
-      wrapper.find('TabPane[active]').should.contain.text('Tab 1 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 1')
 
       wrapper.find('MenuItem').at(1).simulate('click')
-
-      wrapper.find('TabPane[active]').should.contain.text('Tab 2 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 2 Content')
     })
 
     it('can be set via props', () => {
       const wrapper = mount(<Tab panes={panes} activeIndex={1} />)
 
-      wrapper.find('TabPane[active]').should.contain.text('Tab 2 Content')
+      wrapper.find('TabPane').should.contain.text('Tab 2 Content')
 
-      wrapper
-        .setProps({ activeIndex: 2 })
-        .find('TabPane[active]')
-        .should.contain.text('Tab 3 Content')
+      wrapper.setProps({ activeIndex: 2 }).find('TabPane').should.contain.text('Tab 3 Content')
     })
 
     it('determines which pane render method is called', () => {
diff --git a/test/specs/modules/Tab/TabPane-test.js b/test/specs/modules/Tab/TabPane-test.js
index 5e69a69f68..d20688af22 100644
--- a/test/specs/modules/Tab/TabPane-test.js
+++ b/test/specs/modules/Tab/TabPane-test.js
@@ -9,7 +9,7 @@ describe('TabPane', () => {
 
   common.implementsCreateMethod(TabPane)
 
-  common.propKeyOnlyToClassName(TabPane, 'active')
+  common.propKeyOnlyToClassName(TabPane, 'active', { defaultValue: 'left' })
   common.propKeyOnlyToClassName(TabPane, 'loading')
 
   it('renders a Segment by default', () => {