fix(Table): passing ref as prop

taskany-inc · Aug 17, 2023 · 8845a43 · 8845a43
1 parent ab1969a
commit 8845a43
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { gray4, gray6 } from '@taskany/colors';
 
@@ -70,8 +70,10 @@ const mapRuleSet: { [key in AlignProps['align'] | JustifyProps['justify']]: stri
     between: 'space-between',
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Table = styled(({ gap, width, ...props }: TableProps) => <div {...props} />)`
+export const Table = styled(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    forwardRef<HTMLDivElement, TableProps>(({ gap, width, ...props }, ref) => <div {...props} ref={ref} />),
+)`
     display: flex;
     flex-direction: column;
 
@@ -88,10 +90,12 @@ export const Table = styled(({ gap, width, ...props }: TableProps) => <div {...p
         `}
 `;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const TableRow = styled(({ gap, interactive, focused, justify, align, ...props }: TableRowProps) => (
-    <div {...props} />
-))`
+export const TableRow = styled(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    forwardRef<HTMLDivElement, TableRowProps>(({ gap, interactive, focused, justify, align, ...props }, ref) => (
+        <div {...props} ref={ref} />
+    )),
+)`
     display: flex;
     flex-basis: 100%;
     align-items: flex-start;
@@ -131,8 +135,12 @@ export const TableRow = styled(({ gap, interactive, focused, justify, align, ...
         `}
 `;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const TableCell = styled(({ col, min, justify, align, width, ...props }: TableCellProps) => <div {...props} />)`
+export const TableCell = styled(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    forwardRef<HTMLDivElement, TableCellProps>(({ col, min, justify, align, width, ...props }, ref) => (
+        <div {...props} ref={ref} />
+    )),
+)`
     display: inline-flex;
     align-items: baseline;
     flex-wrap: wrap;

diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx
@@ -98,7 +98,7 @@ export const Default: Story = () => {
                     </TableCell>
                     <TableCell justify="end">
                         {tags.map((t) => (
-                            <Tag size="s" title={t} />
+                            <Tag size="s">{t}</Tag>
                         ))}
                     </TableCell>
                     <TableCell min justify="center">
@@ -202,7 +202,7 @@ export const FocusAndHover: Story = () => {
                     </TableCell>
                     <TableCell justify="end">
                         {tags.map((t) => (
-                            <Tag size="s" title={t} />
+                            <Tag size="s">{t}</Tag>
                         ))}
                     </TableCell>
                     <TableCell min justify="center">