4426: component changes

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

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

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

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

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

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

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

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

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

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

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 }))