From 2acf6737f579a379ade4c85730098e8f43e01b8d Mon Sep 17 00:00:00 2001
From: Pratik Karad <pratikkarad.karad27@gmail.com>
Date: Wed, 22 Mar 2023 13:05:31 +0530
Subject: [PATCH 1/3] fix(ExpandableTile): support forward ref

---
 packages/react/src/components/Tile/Tile.js | 39 ++++++++++++----------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
index 4483ceb2dc5b..ff9859caba10 100644
--- a/packages/react/src/components/Tile/Tile.js
+++ b/packages/react/src/components/Tile/Tile.js
@@ -334,22 +334,25 @@ SelectableTile.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 };
 
-export function ExpandableTile({
-  tabIndex,
-  className,
-  children,
-  expanded,
-  tileMaxHeight, // eslint-disable-line
-  tilePadding, // eslint-disable-line
-  onClick,
-  onKeyUp,
-  tileCollapsedIconText,
-  tileExpandedIconText,
-  tileCollapsedLabel,
-  tileExpandedLabel,
-  light,
-  ...rest
-}) {
+export const ExpandableTile = React.forwardRef(function ExpandableTile(
+  {
+    tabIndex,
+    className,
+    children,
+    expanded,
+    tileMaxHeight, // eslint-disable-line
+    tilePadding, // eslint-disable-line
+    onClick,
+    onKeyUp,
+    tileCollapsedIconText,
+    tileExpandedIconText,
+    tileCollapsedLabel,
+    tileExpandedLabel,
+    light,
+    ...rest
+  },
+  ref
+) {
   const [isTileMaxHeight, setIsTileMaxHeight] = useState(tileMaxHeight);
   const [isTilePadding, setIsTilePadding] = useState(tilePadding);
   const [prevExpanded, setPrevExpanded] = useState(expanded);
@@ -360,7 +363,7 @@ export function ExpandableTile({
   const aboveTheFold = useRef(null);
   const belowTheFold = useRef(null);
   const tileContent = useRef(null);
-  const tile = useRef(null);
+  const tile = useRef(ref);
   const prefix = usePrefix();
 
   if (expanded !== prevExpanded) {
@@ -523,7 +526,7 @@ export function ExpandableTile({
       </div>
     </button>
   );
-}
+});
 
 ExpandableTile.propTypes = {
   /**

From 00404a5b53fc0d06c26b7f45d7bafbfbf3b09da9 Mon Sep 17 00:00:00 2001
From: Pratik Karad <pratikkarad.karad27@gmail.com>
Date: Thu, 23 Mar 2023 18:30:16 +0530
Subject: [PATCH 2/3] fix(ExpandableTile): use useMergedRefs hook

---
 packages/react/src/components/Tile/Tile.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
index ff9859caba10..6e3e9a22788e 100644
--- a/packages/react/src/components/Tile/Tile.js
+++ b/packages/react/src/components/Tile/Tile.js
@@ -13,6 +13,7 @@ import { composeEventHandlers } from '../../tools/events';
 import { usePrefix } from '../../internal/usePrefix';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
 import { getInteractiveContent } from '../../internal/useNoInteractiveChildren';
+import { useMergedRefs } from '../../internal/useMergedRefs';
 
 export const Tile = React.forwardRef(function Tile(
   { children, className, light = false, ...rest },
@@ -351,7 +352,7 @@ export const ExpandableTile = React.forwardRef(function ExpandableTile(
     light,
     ...rest
   },
-  ref
+  forwardRef
 ) {
   const [isTileMaxHeight, setIsTileMaxHeight] = useState(tileMaxHeight);
   const [isTilePadding, setIsTilePadding] = useState(tilePadding);
@@ -363,8 +364,9 @@ export const ExpandableTile = React.forwardRef(function ExpandableTile(
   const aboveTheFold = useRef(null);
   const belowTheFold = useRef(null);
   const tileContent = useRef(null);
-  const tile = useRef(ref);
+  const tile = useRef(null);
   const prefix = usePrefix();
+  const ref = useMergedRefs([forwardRef, tile]);
 
   if (expanded !== prevExpanded) {
     setIsExpanded(expanded);
@@ -479,7 +481,7 @@ export const ExpandableTile = React.forwardRef(function ExpandableTile(
   }, []);
   return interactive ? (
     <div
-      ref={tile}
+      ref={ref}
       className={interactiveClassNames}
       aria-expanded={isExpanded}
       {...rest}>
@@ -504,7 +506,7 @@ export const ExpandableTile = React.forwardRef(function ExpandableTile(
   ) : (
     <button
       type="button"
-      ref={tile}
+      ref={ref}
       className={classNames}
       aria-expanded={isExpanded}
       title={isExpanded ? tileExpandedIconText : tileCollapsedIconText}

From 2ac071a1781ccf9f7d07311c332a2d72aaa888f6 Mon Sep 17 00:00:00 2001
From: Pratik Karad <pratikkarad.karad27@gmail.com>
Date: Thu, 23 Mar 2023 18:31:08 +0530
Subject: [PATCH 3/3] fix(ExpandableTile): update PublicAPI test

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index c4839ab6c935..089bd9c88f53 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2954,6 +2954,7 @@ Map {
     },
   },
   "ExpandableTile" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "defaultProps": Object {
       "expanded": false,
       "onClick": [Function],
@@ -2963,7 +2964,6 @@ Map {
       "tileMaxHeight": 0,
       "tilePadding": 0,
     },
-    "displayName": "ExpandableTile",
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -3000,6 +3000,7 @@ Map {
         "type": "string",
       },
     },
+    "render": [Function],
   },
   "FileUploader" => Object {
     "contextType": Object {