From 6f4786304741896c6edd2a504b9d910f5d7c08a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vagner=20Jos=C3=A9=20Nicolodi?=
 <31249471+VagnerNico@users.noreply.github.com>
Date: Wed, 9 Mar 2022 13:36:07 -0300
Subject: [PATCH] feat(Paper): Added the ref prop to the component (#186)

---
 src/components/Paper/Paper.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Paper/Paper.tsx b/src/components/Paper/Paper.tsx
index 8d62918c..13132602 100644
--- a/src/components/Paper/Paper.tsx
+++ b/src/components/Paper/Paper.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import React, { HTMLAttributes, useMemo } from "react"
+import React, { forwardRef, HTMLAttributes, useMemo } from "react"
 
 export interface PaperProps {
   /** Paper elevation */
@@ -12,13 +12,10 @@ export interface PaperProps {
   onClick?: HTMLAttributes<HTMLDivElement>["onClick"]
 }
 
-const Paper = ({
-  elevation = 1,
-  padding = 6,
-  children,
-  className,
-  onClick,
-}: PaperProps) => {
+const Paper = forwardRef<HTMLDivElement, PaperProps>(function PaperWithRef(
+  { elevation = 1, padding = 6, children, className, onClick }: PaperProps,
+  ref
+) {
   const boxShadow = useMemo(() => {
     if (elevation === 1) return "main"
     if (elevation >= 2) return "dark"
@@ -28,6 +25,7 @@ const Paper = ({
 
   return (
     <div
+      ref={ref}
       sx={{
         p: padding,
         borderRadius: 4,
@@ -40,6 +38,6 @@ const Paper = ({
       {children}
     </div>
   )
-}
+})
 
 export default Paper