From 19d4c32932af96b555683864d41b665834369d6f Mon Sep 17 00:00:00 2001
From: chinmay17 <chaudharychinmay@gmail.com>
Date: Tue, 7 Apr 2020 13:54:14 +0530
Subject: [PATCH] Use forwardRef to pass on the ref(#169)

---
 package.json      |  4 ++--
 src/withStyles.js | 21 +++++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 62afb8bd..5f3cd225 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
   "dependencies": {
     "hoist-non-react-statics": "^3.0.0",
     "loader-utils": "^1.2.3",
-    "react": "^16.3.0"
+    "react": "^16.3.0",
+    "prop-types": "^15.7.2"
   },
   "devDependencies": {
     "@babel/core": "^7.3.3",
@@ -53,7 +54,6 @@
     "husky": "^1.3.1",
     "jest": "^24.1.0",
     "prettier": "^1.16.4",
-    "prop-types": "^15.7.2",
     "react-dom": "^16.8.2",
     "rollup": "^1.2.1",
     "rollup-plugin-babel": "^4.3.2",
diff --git a/src/withStyles.js b/src/withStyles.js
index 5b7d7d73..5bb9b56c 100644
--- a/src/withStyles.js
+++ b/src/withStyles.js
@@ -8,6 +8,7 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
 import hoistStatics from 'hoist-non-react-statics'
 
 import StyleContext from './StyleContext'
@@ -27,17 +28,29 @@ function withStyles(...styles) {
       }
 
       render() {
-        return <ComposedComponent {...this.props} />
+        const { __$$withStylesRef, ...props } = this.props
+        return <ComposedComponent ref={__$$withStylesRef} {...props} />
       }
     }
 
     const displayName = ComposedComponent.displayName || ComposedComponent.name || 'Component'
 
-    WithStyles.displayName = `WithStyles(${displayName})`
+    WithStyles.propTypes = {
+      __$$withStylesRef: PropTypes.func,
+    }
+    WithStyles.defaultProps = {
+      __$$withStylesRef: undefined,
+    }
     WithStyles.contextType = StyleContext
-    WithStyles.ComposedComponent = ComposedComponent
 
-    return hoistStatics(WithStyles, ComposedComponent)
+    const ForwardedWithStyles = React.forwardRef((props, ref) => (
+      <WithStyles {...props} __$$withStylesRef={ref} />
+    ))
+
+    ForwardedWithStyles.ComposedComponent = ComposedComponent
+    ForwardedWithStyles.displayName = `WithStyles(${displayName})`
+
+    return hoistStatics(ForwardedWithStyles, ComposedComponent)
   }
 }