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] 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