From 09617c2a8e6ef4f58ab096563c9c99c74d85780d Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Mon, 26 Jul 2021 11:19:24 +0200
Subject: [PATCH] chore(Segment): use React.forwardRef() (#4238)

---
 src/elements/Segment/Segment.js                   | 7 ++++---
 src/elements/Segment/SegmentGroup.js              | 7 ++++---
 src/elements/Segment/SegmentInline.js             | 7 ++++---
 test/specs/elements/Segment/Segment-test.js       | 1 +
 test/specs/elements/Segment/SegmentGroup-test.js  | 1 +
 test/specs/elements/Segment/SegmentInline-test.js | 1 +
 6 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js
index 015c21bf85..957bff77b7 100644
--- a/src/elements/Segment/Segment.js
+++ b/src/elements/Segment/Segment.js
@@ -20,7 +20,7 @@ import SegmentInline from './SegmentInline'
 /**
  * A segment is used to create a grouping of related content.
  */
-function Segment(props) {
+const Segment = React.forwardRef(function SegmentInner(props, ref) {
   const {
     attached,
     basic,
@@ -76,15 +76,16 @@ function Segment(props) {
   const ElementType = getElementType(Segment, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
 Segment.Group = SegmentGroup
 Segment.Inline = SegmentInline
 
+Segment.displayName = 'Segment'
 Segment.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Segment/SegmentGroup.js b/src/elements/Segment/SegmentGroup.js
index 64b938eb80..da896219b1 100644
--- a/src/elements/Segment/SegmentGroup.js
+++ b/src/elements/Segment/SegmentGroup.js
@@ -15,7 +15,7 @@ import {
 /**
  * A group of segments can be formatted to appear together.
  */
-function SegmentGroup(props) {
+const SegmentGroup = React.forwardRef(function SegmentGroupInner(props, ref) {
   const { children, className, compact, content, horizontal, piled, raised, size, stacked } = props
 
   const classes = cx(
@@ -33,12 +33,13 @@ function SegmentGroup(props) {
   const ElementType = getElementType(SegmentGroup, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SegmentGroup.displayName = 'SegmentGroup'
 SegmentGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/src/elements/Segment/SegmentInline.js b/src/elements/Segment/SegmentInline.js
index 70b1d8db95..410972d881 100644
--- a/src/elements/Segment/SegmentInline.js
+++ b/src/elements/Segment/SegmentInline.js
@@ -7,19 +7,20 @@ import { childrenUtils, customPropTypes, getElementType, getUnhandledProps } fro
 /**
  * A placeholder segment can be inline.
  */
-function SegmentInline(props) {
+const SegmentInline = React.forwardRef(function SegmentInlineInner(props, ref) {
   const { children, className, content } = props
   const classes = cx('inline', className)
   const rest = getUnhandledProps(SegmentInline, props)
   const ElementType = getElementType(SegmentInline, props)
 
   return (
-    <ElementType {...rest} className={classes}>
+    <ElementType {...rest} className={classes} ref={ref}>
       {childrenUtils.isNil(children) ? content : children}
     </ElementType>
   )
-}
+})
 
+SegmentInline.displayName = 'SegmentInline'
 SegmentInline.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
diff --git a/test/specs/elements/Segment/Segment-test.js b/test/specs/elements/Segment/Segment-test.js
index 37a1bc0414..a4ef46f739 100644
--- a/test/specs/elements/Segment/Segment-test.js
+++ b/test/specs/elements/Segment/Segment-test.js
@@ -8,6 +8,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('Segment', () => {
   common.isConformant(Segment)
+  common.forwardsRef(Segment)
   common.hasSubcomponents(Segment, [SegmentGroup, SegmentInline])
   common.hasUIClassName(Segment)
   common.rendersChildren(Segment)
diff --git a/test/specs/elements/Segment/SegmentGroup-test.js b/test/specs/elements/Segment/SegmentGroup-test.js
index d8f919bbe0..b2317e8c9e 100644
--- a/test/specs/elements/Segment/SegmentGroup-test.js
+++ b/test/specs/elements/Segment/SegmentGroup-test.js
@@ -6,6 +6,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('SegmentGroup', () => {
   common.isConformant(SegmentGroup)
+  common.forwardsRef(SegmentGroup)
   common.hasUIClassName(SegmentGroup)
   common.rendersChildren(SegmentGroup)
 
diff --git a/test/specs/elements/Segment/SegmentInline-test.js b/test/specs/elements/Segment/SegmentInline-test.js
index 92b9ab718b..ce85da7d72 100644
--- a/test/specs/elements/Segment/SegmentInline-test.js
+++ b/test/specs/elements/Segment/SegmentInline-test.js
@@ -3,5 +3,6 @@ import * as common from 'test/specs/commonTests'
 
 describe('SegmentInline', () => {
   common.isConformant(SegmentInline)
+  common.forwardsRef(SegmentInline)
   common.rendersChildren(SegmentInline)
 })