feat(MidEllipsis): We can now spread any prop and ref to the first child

and so use data-testid for example

react/MidEllipsis/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -14,32 +14,34 @@ import PropTypes from 'prop-types'
  * */
 const LRM = <>&#8206;</>
 
-const MidEllipsis = props => {
-  const { text, className, children } = props
-
-  if (text && typeof text !== 'string')
-    throw new Error('The "text" prop of MidEllipsis can only be a string')
-
-  if (children && typeof children !== 'string')
-    throw new Error('The children of MidEllipsis can only be a string')
-
-  const str = text || children
-
-  const partLength = Math.round(str.length / 2)
-  const firstPart = str.substr(0, partLength)
-  const lastPart = str.substr(partLength, str.length)
-
-  return (
-    <div className={cx('u-midellipsis', className)}>
-      <span>{firstPart}</span>
-      <span>
-        {LRM}
-        {lastPart}
-        {LRM}
-      </span>
-    </div>
-  )
-}
+const MidEllipsis = forwardRef(
+  ({ text, className, children, ...props }, ref) => {
+    if (text && typeof text !== 'string')
+      throw new Error('The "text" prop of MidEllipsis can only be a string')
+
+    if (children && typeof children !== 'string')
+      throw new Error('The children of MidEllipsis can only be a string')
+
+    const str = text || children
+
+    const partLength = Math.round(str.length / 2)
+    const firstPart = str.substr(0, partLength)
+    const lastPart = str.substr(partLength, str.length)
+
+    return (
+      <div className={cx('u-midellipsis', className)} ref={ref} {...props}>
+        <span>{firstPart}</span>
+        <span>
+          {LRM}
+          {lastPart}
+          {LRM}
+        </span>
+      </div>
+    )
+  }
+)
+
+MidEllipsis.displayName = 'MidEllipsis'
 
 MidEllipsis.propTypes = {
   text: PropTypes.string,