From c8835fbd334756b064ad9904cd58c737db462afc Mon Sep 17 00:00:00 2001
From: richbachman <rb@richbachman.com>
Date: Mon, 14 Dec 2020 13:50:53 -0700
Subject: [PATCH] fix(disclosure): add forwardRef

BREAKING CHANGE: component is now using fowardRef
---
 .../components/disclosure/src/Disclosure.tsx  | 31 ++++++++++++-------
 .../disclosure/src/DisclosureContent.tsx      |  6 ++--
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/paste-core/components/disclosure/src/Disclosure.tsx b/packages/paste-core/components/disclosure/src/Disclosure.tsx
index e2e4af3b4c..45a3b49091 100644
--- a/packages/paste-core/components/disclosure/src/Disclosure.tsx
+++ b/packages/paste-core/components/disclosure/src/Disclosure.tsx
@@ -5,6 +5,7 @@ import {
   DisclosurePrimitiveInitialState,
   DisclosurePrimitveStateReturn,
 } from '@twilio-paste/disclosure-primitive';
+import {Box} from '@twilio-paste/box';
 import {Card} from '@twilio-paste/card';
 
 export type Variants = 'contained' | 'default';
@@ -26,23 +27,31 @@ export interface DisclosureProps extends DisclosurePrimitiveInitialState {
   variant?: Variants;
 }
 
-const Disclosure: React.FC<DisclosureProps> = ({children, variant = 'default', state, ...props}) => {
-  const disclosure = state || useDisclosurePrimitiveState({...props});
-  const disclosureContext = {
-    disclosure,
-    variant,
-  };
+const Disclosure = React.forwardRef<HTMLDivElement, DisclosureProps>(
+  ({children, variant = 'default', state, ...props}, ref) => {
+    const disclosure = state || useDisclosurePrimitiveState({...props});
+    const disclosureContext = {
+      disclosure,
+      variant,
+    };
+
+    if (variant === 'contained') {
+      return (
+        <DisclosureContext.Provider value={disclosureContext}>
+          <Card padding="space0" ref={ref}>
+            {children}
+          </Card>
+        </DisclosureContext.Provider>
+      );
+    }
 
-  if (variant === 'contained') {
     return (
       <DisclosureContext.Provider value={disclosureContext}>
-        <Card padding="space0">{children}</Card>
+        <Box ref={ref}>{children}</Box>
       </DisclosureContext.Provider>
     );
   }
-
-  return <DisclosureContext.Provider value={disclosureContext}>{children}</DisclosureContext.Provider>;
-};
+);
 Disclosure.displayName = 'Disclosure';
 
 if (process.env.NODE_ENV === 'development') {
diff --git a/packages/paste-core/components/disclosure/src/DisclosureContent.tsx b/packages/paste-core/components/disclosure/src/DisclosureContent.tsx
index 240b3b1456..d58b434296 100644
--- a/packages/paste-core/components/disclosure/src/DisclosureContent.tsx
+++ b/packages/paste-core/components/disclosure/src/DisclosureContent.tsx
@@ -21,14 +21,14 @@ const getVariantStyles = (variant: Variants): BoxStyleProps => {
 export interface DisclosureContentProps extends Omit<DisclosurePrimitiveContentProps, keyof BoxStyleProps> {
   children: NonNullable<React.ReactNode>;
 }
-const DisclosureContent: React.FC<DisclosureContentProps> = ({children, ...props}) => {
+const DisclosureContent = React.forwardRef<HTMLDivElement, DisclosureContentProps>(({children, ...props}, ref) => {
   const {disclosure, variant} = React.useContext(DisclosureContext);
   return (
-    <DisclosurePrimitiveContent {...disclosure} {...props} as={Box} {...getVariantStyles(variant)}>
+    <DisclosurePrimitiveContent {...disclosure} {...props} as={Box} ref={ref} {...getVariantStyles(variant)}>
       {children}
     </DisclosurePrimitiveContent>
   );
-};
+});
 DisclosureContent.displayName = 'DisclosureContent';
 
 if (process.env.NODE_ENV === 'development') {