Merge pull request #40 from smooth-code/create-system-component-forward-ref

fix: use React.forwardRef in createSystemComponent

Author: gregberge

packages/styled-components/src/styled.js

@@ -22,7 +22,7 @@ export function styled(component) {
   return getCreateStyle(scStyled(component))
 }
 
-const InnerBox = createSystemComponent(React.createElement)
+const InnerBox = createSystemComponent(React)
 
 export const Box = styled(InnerBox)(createBox)
 
@@ -31,6 +31,6 @@ styled.box = styled(Box)
 Object.keys(scStyled).forEach(key => {
   styled[key] = styled(key)
   styled[`${key}Box`] = styled(
-    Box.withComponent(createSystemComponent(React.createElement, key)),
+    Box.withComponent(createSystemComponent(React, key)),
   )
 })

packages/system/src/systemComponent.js

@@ -2,15 +2,18 @@ import { omit } from './util'
 import { system as allSystem } from './styles/index'
 
 export const createSystemComponent = (
-  createElement,
+  { createElement, forwardRef },
   defaultComponent = 'div',
   system = allSystem,
 ) => {
-  function SystemComponent({ as, ...props }) {
+  const SystemComponent = forwardRef(function SystemComponent(
+    { as, ...props },
+    ref,
+  ) {
     const omittedProps = omit(props, system.meta.props)
     const Component = as || defaultComponent
-    return createElement(Component, omittedProps)
-  }
+    return createElement(Component, { ref, ...omittedProps })
+  })
   SystemComponent.displayName = 'SystemComponent'
   return SystemComponent
 }

packages/system/src/systemComponent.test.js

@@ -8,17 +8,28 @@ afterEach(cleanup)
 describe('systemComponent', () => {
   describe('#createSystemComponent', () => {
     it('creates a div that omit props', () => {
-      const Box = createSystemComponent(React.createElement)
+      const Box = createSystemComponent(React)
       const { container } = render(<Box display="block" />)
       expect(container.firstChild.tagName).toBe('DIV')
       expect(container.firstChild).not.toHaveAttribute('display')
     })
 
     it('supports "as" prop', () => {
-      const Box = createSystemComponent(React.createElement)
+      const Box = createSystemComponent(React)
       const { container } = render(<Box as="header" display="block" />)
       expect(container.firstChild.tagName).toBe('HEADER')
       expect(container.firstChild).not.toHaveAttribute('display')
     })
+
+    it('forwards ref', () => {
+      const Box = createSystemComponent(React)
+      const ref = jest.fn()
+      const { container } = render(
+        <Box ref={ref} as="header" display="block" />,
+      )
+      expect(container.firstChild.tagName).toBe('HEADER')
+      expect(container.firstChild).not.toHaveAttribute('display')
+      expect(ref).toHaveBeenCalled()
+    })
   })
 })

website/src/pages/docs/system-components.mdx

@@ -71,7 +71,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { system, createSystemComponent } from '@xstyled/system'
 
-const InnerBox = createSystemComponent(React.createElement)
+const InnerBox = createSystemComponent(React)
 const Box = styled(InnerBox)(system)
 ```
 

website/src/pages/docs/system-props.mdx

@@ -56,7 +56,7 @@ const colors = compose(
   backgroundColor,
 )
 
-const InnerBox = createSystemComponent(React.createElement, 'div', colors)
+const InnerBox = createSystemComponent(React, 'div', colors)
 
 const Box = styled(InnerBox)`
   ${colors}