From 5e4632c2dd6cf1199cfe39350120267674b53098 Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Wed, 21 Aug 2024 13:11:55 -0300
Subject: [PATCH] fix(fileuploaderitem): use refs for ellipsis, add fowardRef
 to `Text` (#17104)

* fix: changed from document to useRef

* fix: fixed ref in Text component

* test: updated snapshots

---------

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
---
 .../__snapshots__/PublicAPI-test.js.snap        |  2 ++
 .../FileUploader/FileUploaderItem.tsx           |  6 ++++--
 packages/react/src/components/Text/Text.tsx     | 17 ++++++++---------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index c01834ff4f62..ce3f5c07e529 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10020,6 +10020,7 @@ Map {
     },
   },
   "unstable_Text" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "as": Object {
         "args": Array [
@@ -10052,6 +10053,7 @@ Map {
         "type": "oneOf",
       },
     },
+    "render": [Function],
   },
   "unstable_TextDirection" => Object {
     "propTypes": Object {
diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.tsx b/packages/react/src/components/FileUploader/FileUploaderItem.tsx
index f614637b70cb..21afe581b606 100644
--- a/packages/react/src/components/FileUploader/FileUploaderItem.tsx
+++ b/packages/react/src/components/FileUploader/FileUploaderItem.tsx
@@ -86,6 +86,7 @@ function FileUploaderItem({
   className,
   ...other
 }: FileUploaderItemProps) {
+  const textRef = useRef<HTMLParagraphElement>(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
   const { current: id } = useRef(uuid || uid());
@@ -108,8 +109,7 @@ function FileUploaderItem({
   };
 
   useLayoutEffect(() => {
-    const element = document.querySelector(`[title="${name}"]`);
-    isEllipsisActive(element);
+    isEllipsisActive(textRef.current);
   }, [prefix, name]);
 
   return (
@@ -122,6 +122,7 @@ function FileUploaderItem({
             className={`${prefix}--file-filename-tooltip`}>
             <button className={`${prefix}--file-filename-button`} type="button">
               <Text
+                ref={textRef}
                 as="p"
                 title={name}
                 className={`${prefix}--file-filename-button`}
@@ -133,6 +134,7 @@ function FileUploaderItem({
         </div>
       ) : (
         <Text
+          ref={textRef}
           as="p"
           title={name}
           className={`${prefix}--file-filename`}
diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
index 3999d8b3bd04..4931dabbbb9e 100644
--- a/packages/react/src/components/Text/Text.tsx
+++ b/packages/react/src/components/Text/Text.tsx
@@ -6,10 +6,11 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { ReactNode, useContext } from 'react';
+import React, { ReactNode, useContext, useRef } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { TextDir } from './TextDirection';
 import { TextDirectionContext } from './TextDirectionContext';
+import { useMergeRefs } from '@floating-ui/react';
 
 export interface TextBaseProps {
   dir?: TextDir | undefined;
@@ -19,12 +20,10 @@ export type TextProps<T extends React.ElementType> = PolymorphicProps<
   T,
   TextBaseProps
 >;
-function Text<T extends React.ElementType>({
-  as,
-  children,
-  dir = 'auto',
-  ...rest
-}: TextProps<T>) {
+const Text = React.forwardRef(function Text<T extends React.ElementType>(
+  { as, children, dir = 'auto', ...rest }: TextProps<T>,
+  ref: React.Ref<HTMLElement>
+) {
   // TODO: Update with context typing once its been converted to TS
   const context = useContext<any>(TextDirectionContext);
   const textProps: { dir?: TextDir } = {};
@@ -59,12 +58,12 @@ function Text<T extends React.ElementType>({
 
   return (
     <TextDirectionContext.Provider value={value}>
-      <BaseComponent {...rest} {...textProps}>
+      <BaseComponent ref={ref} {...rest} {...textProps}>
         {children}
       </BaseComponent>
     </TextDirectionContext.Provider>
   );
-}
+});
 
 Text.propTypes = {
   /**