@alfalab/core-components-table 2.7.4 → 2.8.0

package/src/components/texpandable-row/Component.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { forwardRef, ReactNode, useState } from 'react';
 import cn from 'classnames';
 
 import { TRow, TRowProps } from '../trow';
@@ -15,44 +15,51 @@ export type TExpandableRowProps = TRowProps & {
     renderContent: (expanded: boolean) => ReactNode;
 };
 
-export const TExpandableRow = ({
-    className,
-    selected,
-    expanded,
-    defaultExpanded = false,
-    onToggle = () => null,
-    renderContent = () => null,
-    ...restProps
-}: TExpandableRowProps) => {
-    const [expandedState, setExpandedState] = useState<boolean>(defaultExpanded);
-
-    const uncontrolled = expanded === undefined;
-
-    const isExpanded = (uncontrolled ? expandedState : expanded) as boolean;
-
-    const handleToggle = () => {
-        if (uncontrolled) {
-            setExpandedState(!isExpanded);
-        }
-
-        onToggle(isExpanded);
-    };
-
-    return (
-        <React.Fragment>
-            <TRow
-                className={cn(styles.row, className, {
-                    [styles.selected]: selected,
-                    [styles.expanded]: isExpanded,
-                })}
-                selected={selected}
-                onClick={handleToggle}
-                {...restProps}
-            />
-
-            <tr className={cn(styles.expandable, { [styles.expanded]: isExpanded })}>
-                {renderContent(isExpanded)}
-            </tr>
-        </React.Fragment>
-    );
-};
+export const TExpandableRow = forwardRef<HTMLTableRowElement, TExpandableRowProps>(
+    (
+        {
+            className,
+            selected,
+            expanded,
+            defaultExpanded = false,
+            onToggle = () => null,
+            renderContent = () => null,
+            ...restProps
+        }: TExpandableRowProps,
+        ref,
+    ) => {
+        const [expandedState, setExpandedState] = useState<boolean>(defaultExpanded);
+
+        const uncontrolled = expanded === undefined;
+
+        const isExpanded = (uncontrolled ? expandedState : expanded) as boolean;
+
+        const handleToggle = () => {
+            if (uncontrolled) {
+                setExpandedState(!isExpanded);
+            }
+
+            onToggle(isExpanded);
+        };
+
+        return (
+            <React.Fragment>
+                <TRow
+                    className={cn(styles.row, className, {
+                        [styles.selected]: selected,
+                        [styles.expanded]: isExpanded,
+                    })}
+                    selected={selected}
+                    onClick={handleToggle}
+                    {...restProps}
+                />
+
+                <tr ref={ref} className={cn(styles.expandable, { [styles.expanded]: isExpanded })}>
+                    {renderContent(isExpanded)}
+                </tr>
+            </React.Fragment>
+        );
+    },
+);
+
+TExpandableRow.displayName = 'TExpandableRow';