fix(fileuploaderitem): use refs for ellipsis, add fowardRef to Text (…

…carbon-design-system#17104) * fix: changed from document to useRef * fix: fixed ref in Text component * test: updated snapshots --------- Co-authored-by: Nikhil Tomar <[email protected]>
2nikhiltom · Aug 21, 2024 · 5e4632c · 5e4632c
1 parent 6eb536d
commit 5e4632c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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 = {
   /**