chore(Message): use React.forwardRef()

src/collections/Message/Message.js

@@ -1,7 +1,7 @@
 import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React from 'react'
 
 import {
   childrenUtils,
@@ -12,6 +12,7 @@ import {
   SUI,
   useKeyOnly,
   useKeyOrValueAndKey,
+  useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 import MessageContent from './MessageContent'
@@ -23,86 +24,82 @@ import MessageItem from './MessageItem'
  * A message displays information that explains nearby content.
  * @see Form
  */
-export default class Message extends Component {
-  handleDismiss = (e) => {
-    const { onDismiss } = this.props
-
-    if (onDismiss) onDismiss(e, this.props)
-  }
-
-  render() {
-    const {
-      attached,
-      children,
-      className,
-      color,
-      compact,
-      content,
-      error,
-      floating,
-      header,
-      hidden,
-      icon,
-      info,
-      list,
-      negative,
-      onDismiss,
-      positive,
-      size,
-      success,
-      visible,
-      warning,
-    } = this.props
-
-    const classes = cx(
-      'ui',
-      color,
-      size,
-      useKeyOnly(compact, 'compact'),
-      useKeyOnly(error, 'error'),
-      useKeyOnly(floating, 'floating'),
-      useKeyOnly(hidden, 'hidden'),
-      useKeyOnly(icon, 'icon'),
-      useKeyOnly(info, 'info'),
-      useKeyOnly(negative, 'negative'),
-      useKeyOnly(positive, 'positive'),
-      useKeyOnly(success, 'success'),
-      useKeyOnly(visible, 'visible'),
-      useKeyOnly(warning, 'warning'),
-      useKeyOrValueAndKey(attached, 'attached'),
-      'message',
-      className,
-    )
-
-    const dismissIcon = onDismiss && <Icon name='close' onClick={this.handleDismiss} />
-    const rest = getUnhandledProps(Message, this.props)
-    const ElementType = getElementType(Message, this.props)
-
-    if (!childrenUtils.isNil(children)) {
-      return (
-        <ElementType {...rest} className={classes}>
-          {dismissIcon}
-          {children}
-        </ElementType>
-      )
-    }
-
+const Message = React.forwardRef(function (props, ref) {
+  const {
+    attached,
+    children,
+    className,
+    color,
+    compact,
+    content,
+    error,
+    floating,
+    header,
+    hidden,
+    icon,
+    info,
+    list,
+    negative,
+    onDismiss,
+    positive,
+    size,
+    success,
+    visible,
+    warning,
+  } = props
+
+  const classes = cx(
+    'ui',
+    color,
+    size,
+    useKeyOnly(compact, 'compact'),
+    useKeyOnly(error, 'error'),
+    useKeyOnly(floating, 'floating'),
+    useKeyOnly(hidden, 'hidden'),
+    useKeyOnly(icon, 'icon'),
+    useKeyOnly(info, 'info'),
+    useKeyOnly(negative, 'negative'),
+    useKeyOnly(positive, 'positive'),
+    useKeyOnly(success, 'success'),
+    useKeyOnly(visible, 'visible'),
+    useKeyOnly(warning, 'warning'),
+    useKeyOrValueAndKey(attached, 'attached'),
+    'message',
+    className,
+  )
+  const rest = getUnhandledProps(Message, props)
+  const ElementType = getElementType(Message, props)
+
+  const handleDismiss = useEventCallback((e) => {
+    _.invoke(props, 'onDismiss', e, props)
+  })
+  const dismissIcon = onDismiss && <Icon name='close' onClick={handleDismiss} />
+
+  if (!childrenUtils.isNil(children)) {
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} ref={ref}>
         {dismissIcon}
-        {Icon.create(icon, { autoGenerateKey: false })}
-        {(!_.isNil(header) || !_.isNil(content) || !_.isNil(list)) && (
-          <MessageContent>
-            {MessageHeader.create(header, { autoGenerateKey: false })}
-            {MessageList.create(list, { autoGenerateKey: false })}
-            {createHTMLParagraph(content, { autoGenerateKey: false })}
-          </MessageContent>
-        )}
+        {children}
       </ElementType>
     )
   }
-}
 
+  return (
+    <ElementType {...rest} className={classes} ref={ref}>
+      {dismissIcon}
+      {Icon.create(icon, { autoGenerateKey: false })}
+      {(!_.isNil(header) || !_.isNil(content) || !_.isNil(list)) && (
+        <MessageContent>
+          {MessageHeader.create(header, { autoGenerateKey: false })}
+          {MessageList.create(list, { autoGenerateKey: false })}
+          {createHTMLParagraph(content, { autoGenerateKey: false })}
+        </MessageContent>
+      )}
+    </ElementType>
+  )
+})
+
+Message.displayName = 'Message'
 Message.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -178,3 +175,5 @@ Message.Content = MessageContent
 Message.Header = MessageHeader
 Message.List = MessageList
 Message.Item = MessageItem
+
+export default Message

src/collections/Message/MessageContent.js

@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A message can contain a content.
  */
-function MessageContent(props) {
+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)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+MessageContent.displayName = 'MessageContent'
 MessageContent.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/collections/Message/MessageHeader.js

@@ -13,19 +13,21 @@ import {
 /**
  * A message can contain a header.
  */
-function MessageHeader(props) {
+const MessageHeader = React.forwardRef(function (props, ref) {
   const { children, className, content } = props
+
   const classes = cx('header', className)
   const rest = getUnhandledProps(MessageHeader, props)
   const ElementType = getElementType(MessageHeader, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+MessageHeader.displayName = 'MessageHeader'
 MessageHeader.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/collections/Message/MessageItem.js

@@ -13,19 +13,21 @@ import {
 /**
  * A message list can contain an item.
  */
-function MessageItem(props) {
+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)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+MessageItem.displayName = 'MessageItem'
 MessageItem.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

src/collections/Message/MessageList.js

@@ -15,19 +15,21 @@ import MessageItem from './MessageItem'
 /**
  * A message can contain a list of items.
  */
-function MessageList(props) {
+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)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? _.map(items, MessageItem.create) : children}
     </ElementType>
   )
-}
+})
 
+MessageList.displayName = 'MessageList'
 MessageList.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,

test/specs/collections/Message/Message-test.js

@@ -11,6 +11,8 @@ import { sandbox } from 'test/utils'
 
 describe('Message', () => {
   common.isConformant(Message)
+  common.forwardsRef(Message)
+  common.forwardsRef(Message, { requiredProps: { children: <span /> } })
   common.hasSubcomponents(Message, [MessageContent, MessageHeader, MessageList])
   common.hasUIClassName(Message)
   common.rendersChildren(Message, {

test/specs/collections/Message/MessageContent-test.js

@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MessageContent', () => {
   common.isConformant(MessageContent)
+  common.forwardsRef(MessageContent)
   common.rendersChildren(MessageContent)
 
   it('renders an div tag', () => {

test/specs/collections/Message/MessageHeader-test.js

@@ -5,6 +5,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MessageHeader', () => {
   common.isConformant(MessageHeader)
+  common.forwardsRef(MessageHeader)
   common.implementsCreateMethod(MessageHeader)
   common.rendersChildren(MessageHeader)
 

test/specs/collections/Message/MessageItem-test.js

@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MessageItem', () => {
   common.isConformant(MessageItem)
+  common.forwardsRef(MessageItem, { tagName: 'li' })
   common.implementsCreateMethod(MessageItem)
   common.rendersChildren(MessageItem)
 

test/specs/collections/Message/MessageList-test.js

@@ -4,6 +4,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('MessageList', () => {
   common.isConformant(MessageList)
+  common.forwardsRef(MessageList, { tagName: 'ul' })
   common.implementsCreateMethod(MessageList)
   common.rendersChildren(MessageList, {
     rendersContent: false,