fix(ExpandableTile): support forward ref (#13390)

* fix(ExpandableTile): support forward ref * fix(ExpandableTile): use useMergedRefs hook * fix(ExpandableTile): update PublicAPI test --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 30, 2023 · eb615ba · eb615ba
1 parent 8980b47
commit eb615ba
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git 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 {

diff --git 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 },
@@ -334,22 +335,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
+  },
+  forwardRef
+) {
   const [isTileMaxHeight, setIsTileMaxHeight] = useState(tileMaxHeight);
   const [isTilePadding, setIsTilePadding] = useState(tilePadding);
   const [prevExpanded, setPrevExpanded] = useState(expanded);
@@ -362,6 +366,7 @@ export function ExpandableTile({
   const tileContent = useRef(null);
   const tile = useRef(null);
   const prefix = usePrefix();
+  const ref = useMergedRefs([forwardRef, tile]);
 
   if (expanded !== prevExpanded) {
     setIsExpanded(expanded);
@@ -476,7 +481,7 @@ export function ExpandableTile({
   }, []);
   return interactive ? (
     <div
-      ref={tile}
+      ref={ref}
       className={interactiveClassNames}
       aria-expanded={isExpanded}
       {...rest}>
@@ -501,7 +506,7 @@ export function ExpandableTile({
   ) : (
     <button
       type="button"
-      ref={tile}
+      ref={ref}
       className={classNames}
       aria-expanded={isExpanded}
       title={isExpanded ? tileExpandedIconText : tileCollapsedIconText}
@@ -523,7 +528,7 @@ export function ExpandableTile({
       </div>
     </button>
   );
-}
+});
 
 ExpandableTile.propTypes = {
   /**