fix(EllipsisText): use RootComponent for host

packages/vkui/src/components/Typography/EllipsisText/EllipsisText.test.tsx

@@ -1,24 +1,40 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { baselineComponent } from '../../../testing/utils';
 import { EllipsisText } from './EllipsisText';
 import styles from './EllipsisText.module.css';
 
-describe('EllipsisText', () => {
+const mockText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
+
+describe(EllipsisText, () => {
   baselineComponent((props) => <EllipsisText {...props}>EllipsisText</EllipsisText>);
 
-  it('should have specific className when maxLines > 1', async () => {
-    render(
+  it('should have specific className when maxLines > 1', () => {
+    const result = render(
       <EllipsisText maxLines={2} data-testid="text-wrapper">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        {mockText}
       </EllipsisText>,
     );
 
-    const text = screen.getByTestId('text-wrapper').firstElementChild as HTMLElement;
+    const text = result.getByTestId('text-wrapper').firstElementChild as HTMLElement;
     expect(text).not.toBeNull();
     expect(text).toHaveClass(styles.contentMultiline);
   });
+
+  it('should not apply title attribute', () => {
+    const result = render(<EllipsisText data-testid="host">{mockText}</EllipsisText>);
+    expect(result.getByTestId('host')).toHaveAttribute('title');
+    expect(result.getByTestId('host')).not.toHaveClass(styles.disableNativeTitle);
+
+    result.rerender(
+      <EllipsisText data-testid="host" disableNativeTitle>
+        {mockText}
+      </EllipsisText>,
+    );
+    expect(result.getByTestId('host')).not.toHaveAttribute('title');
+    expect(result.getByTestId('host')).toHaveClass(styles.disableNativeTitle);
+  });
 });

packages/vkui/src/components/Typography/EllipsisText/EllipsisText.tsx

@@ -5,7 +5,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { getTextFromChildren } from '../../../lib/children';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 import type { HasRootRef } from '../../../types';
-import type { RootComponentProps } from '../../RootComponent/RootComponent';
+import { RootComponent, type RootComponentProps } from '../../RootComponent/RootComponent';
 import styles from './EllipsisText.module.css';
 
 export interface EllipsisTextProps
@@ -37,8 +37,8 @@ export interface EllipsisTextProps
  * @see https://vkcom.github.io/VKUI/#/EllipsisText
  */
 const EllipsisText = ({
+  Component = 'span',
   className,
-  getRootRef,
   children,
   maxWidth,
   maxLines = 1,
@@ -54,8 +54,8 @@ const EllipsisText = ({
   }, [contentRef, maxLines]);
 
   return (
-    <span
-      ref={getRootRef}
+    <RootComponent
+      Component={Component}
       className={classNames(
         styles.host,
         disableNativeTitle && styles.disableNativeTitle,
@@ -71,7 +71,7 @@ const EllipsisText = ({
       >
         {children}
       </span>
-    </span>
+    </RootComponent>
   );
 };