From 445e6c6bcab619655d322175a6b932c06dd9edcc Mon Sep 17 00:00:00 2001
From: Minh Quy <sugiacupit@gmail.com>
Date: Tue, 5 Apr 2022 07:02:32 +0200
Subject: [PATCH] feat: Support ref for Title, Text, Paragraph (#34847)

* feat: Support ref for Title, Text, Paragraph

* feat: Add tests for Title, Paragraph and Text
---
 components/typography/Paragraph.tsx           |  6 ++++--
 components/typography/Text.tsx                |  9 +++++---
 components/typography/Title.tsx               |  6 +++---
 components/typography/__tests__/index.test.js | 21 +++++++++++++++++++
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/components/typography/Paragraph.tsx b/components/typography/Paragraph.tsx
index 7ed007e2e3..e9e18db5b2 100644
--- a/components/typography/Paragraph.tsx
+++ b/components/typography/Paragraph.tsx
@@ -5,6 +5,8 @@ export interface ParagraphProps extends BlockProps {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-const Paragraph: React.FC<ParagraphProps> = props => <Base {...props} component="div" />;
+const Paragraph: React.ForwardRefRenderFunction<HTMLDivElement, ParagraphProps> = (props, ref) => (
+  <Base ref={ref} {...props} component="div" />
+);
 
-export default Paragraph;
+export default React.forwardRef(Paragraph);
diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx
index f6ba85c03d..aca1fbe11f 100644
--- a/components/typography/Text.tsx
+++ b/components/typography/Text.tsx
@@ -8,7 +8,10 @@ export interface TextProps extends BlockProps {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => {
+const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
+  { ellipsis, ...restProps },
+  ref,
+) => {
   const mergedEllipsis = React.useMemo(() => {
     if (ellipsis && typeof ellipsis === 'object') {
       return omit(ellipsis as any, ['expandable', 'rows']);
@@ -25,7 +28,7 @@ const Text: React.FC<TextProps> = ({ ellipsis, ...restProps }) => {
     '`ellipsis` do not support `expandable` or `rows` props.',
   );
 
-  return <Base {...restProps} ellipsis={mergedEllipsis} component="span" />;
+  return <Base ref={ref} {...restProps} ellipsis={mergedEllipsis} component="span" />;
 };
 
-export default Text;
+export default React.forwardRef(Text);
diff --git a/components/typography/Title.tsx b/components/typography/Title.tsx
index 9ba9cd5643..c8f10f38f8 100644
--- a/components/typography/Title.tsx
+++ b/components/typography/Title.tsx
@@ -13,7 +13,7 @@ export type TitleProps = Omit<
   'strong'
 >;
 
-const Title: React.FC<TitleProps> = props => {
+const Title: React.ForwardRefRenderFunction<HTMLHeadingElement, TitleProps> = (props, ref) => {
   const { level = 1, ...restProps } = props;
   let component: string;
 
@@ -28,7 +28,7 @@ const Title: React.FC<TitleProps> = props => {
     component = 'h1';
   }
 
-  return <Base {...restProps} component={component} />;
+  return <Base ref={ref} {...restProps} component={component} />;
 };
 
-export default Title;
+export default React.forwardRef(Title);
diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js
index 62fa4fc231..390c4b12b3 100644
--- a/components/typography/__tests__/index.test.js
+++ b/components/typography/__tests__/index.test.js
@@ -402,4 +402,25 @@ describe('Typography', () => {
 
     expect(errorSpy).not.toHaveBeenCalled();
   });
+
+  it('should get HTMLHeadingElement ref from Title', () => {
+    const ref = React.createRef();
+
+    mount(<Title level={1} ref={ref} />);
+    expect(ref.current instanceof HTMLHeadingElement).toBe(true);
+  });
+
+  it('should get HTMLDivElement ref from Paragraph', () => {
+    const ref = React.createRef();
+
+    mount(<Paragraph ref={ref} />);
+    expect(ref.current instanceof HTMLDivElement).toBe(true);
+  });
+
+  it('should get HTMLSpanElement ref from Text', () => {
+    const ref = React.createRef();
+
+    mount(<Text ref={ref} />);
+    expect(ref.current instanceof HTMLSpanElement).toBe(true);
+  });
 });