Forward ref support for TableRow, Tabs, ToggleButton & ToggleButtonGroup

.changeset/nine-comics-work.md

@@ -0,0 +1,6 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+Forward ref support for TableRow, Tabs, ToggleButton & ToggleButtonGroup

packages/react/src/primitives/Table/TableRow.tsx

@@ -1,21 +1,24 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../shared/constants';
-import { Primitive, TableRowProps } from '../types';
+import { PrimitiveWithForwardRef, TableRowProps } from '../types';
 import { View } from '../View';
 
-export const TableRow: Primitive<TableRowProps, 'tr'> = ({
-  children,
-  className,
-  ...rest
-}) => (
+const TableRowPrimitive: PrimitiveWithForwardRef<TableRowProps, 'tr'> = (
+  { children, className, ...rest },
+  ref
+) => (
   <View
     as="tr"
     className={classNames(ComponentClassNames.TableRow, className)}
+    ref={ref}
     {...rest}
   >
     {children}
   </View>
 );
 
+export const TableRow = React.forwardRef(TableRowPrimitive);
+
 TableRow.displayName = 'TableRow';

packages/react/src/primitives/Table/__tests__/Table.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import * as React from 'react';
 
 import {
   Table,
@@ -154,4 +155,14 @@ describe('Table primitive', () => {
       expect($table).toHaveAttribute('data-variation', variation);
     });
   });
+
+  describe('Forward ref: ', () => {
+    it('should forward ref to TableRow DOM element', async () => {
+      const ref = React.createRef<HTMLTableRowElement>();
+      render(<TableRow ref={ref} />);
+
+      await screen.findByRole('row');
+      expect(ref.current.nodeName).toBe('TR');
+    });
+  });
 });

packages/react/src/primitives/Tabs/Tabs.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
+import classNames from 'classnames';
 import {
   Root,
   List,
   Trigger as RadixTab,
   Content as Panel,
 } from '@radix-ui/react-tabs';
-import { TabsProps, TabItemProps } from '../types';
+import * as React from 'react';
+
 import { Flex } from '../Flex';
+import { View } from '../View';
+import { TabsProps, TabItemProps, PrimitiveWithForwardRef } from '../types';
 import { ComponentClassNames } from '../shared/constants';
-import classNames from 'classnames';
-import { convertStylePropsToStyleObj, prefixer } from '../shared/styleUtils';
-import { Primitive } from '../types';
 
 const isTabsType = (child: any): child is React.Component<TabItemProps> => {
   return (
@@ -21,29 +21,26 @@ const isTabsType = (child: any): child is React.Component<TabItemProps> => {
   );
 };
 
-export const Tabs: Primitive<TabsProps, typeof Flex> = ({
-  alignContent,
-  alignItems,
-  ariaLabel,
-  children,
-  className,
-  defaultIndex = 0,
-  currentIndex,
-  onChange,
-  indicatorPosition,
-  direction,
-  gap = '0',
-  spacing,
-  justifyContent,
-  wrap,
-  ...rest
-}: TabsProps) => {
+const TabsPrimitive: PrimitiveWithForwardRef<TabsProps, typeof Flex> = (
+  {
+    ariaLabel,
+    children,
+    className,
+    defaultIndex = 0,
+    currentIndex,
+    onChange,
+    indicatorPosition,
+    spacing,
+    ...rest
+  }: TabsProps,
+  ref
+) => {
   const tabs = React.Children.map(children, (child) => {
     if (!isTabsType(child)) {
       console.warn(
         'Amplify UI: <Tabs> component only accepts <TabItem> as children.'
       );
-      return null;
+      return {};
     }
 
     return child.props;
@@ -58,33 +55,26 @@ export const Tabs: Primitive<TabsProps, typeof Flex> = ({
     value: currentIndex != null ? currentIndex.toString() : undefined,
     onValueChange: onChange,
   };
-
   return (
     <Root {...rootProps}>
       <List aria-label={ariaLabel}>
         <Flex
-          alignContent={alignContent}
-          alignItems={alignItems}
           className={classNames(ComponentClassNames.Tabs, className)}
-          direction={direction}
-          gap={gap}
-          justifyContent={justifyContent}
-          wrap={wrap}
           data-indicator-position={indicatorPosition}
+          ref={ref}
           {...rest}
         >
-          {tabs.map(({ className, isDisabled, title, ...rest }, index) => (
-            <RadixTab
-              className={classNames(ComponentClassNames.TabItems, className)}
-              data-spacing={spacing}
-              disabled={isDisabled}
-              key={index}
-              style={prefixer(convertStylePropsToStyleObj(rest))}
-              value={`${index}`}
-            >
-              {title}
-            </RadixTab>
-          ))}
+          {React.Children.map(children, (child, index) => {
+            if (!isTabsType(child)) {
+              return null;
+            }
+
+            return React.cloneElement(child, {
+              ['data-spacing']: spacing,
+              key: index,
+              value: `${index}`,
+            });
+          })}
         </Flex>
       </List>
       {tabs.map((tab, index) => (
@@ -96,7 +86,22 @@ export const Tabs: Primitive<TabsProps, typeof Flex> = ({
   );
 };
 
-export const TabItem: React.FC<TabItemProps> = () => <></>;
+const TabItemPrimitvie: PrimitiveWithForwardRef<TabItemProps, 'div'> = (
+  { className, title, ...rest },
+  ref
+) => (
+  <View
+    as={RadixTab}
+    className={classNames(ComponentClassNames.TabItems, className)}
+    ref={ref}
+    {...rest}
+  >
+    {title}
+  </View>
+);
+
+export const Tabs = React.forwardRef(TabsPrimitive);
+export const TabItem = React.forwardRef(TabItemPrimitvie);
 
 Tabs.displayName = 'Tabs';
 TabItem.displayName = 'TabItem';

packages/react/src/primitives/Tabs/__tests__/Tabs.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+
 import { Tabs, TabItem } from '../Tabs';
 import { Text } from '../../Text';
 import { ComponentClassNames } from '../../shared';
-import { ComponentPropsToStylePropsMap } from '../../types';
-import kebabCase from 'lodash/kebabCase';
 
 describe('Tabs: ', () => {
   it('can render custom classnames', async () => {
@@ -29,6 +29,19 @@ describe('Tabs: ', () => {
     expect(tabs.dataset['demo']).toBe('true');
   });
 
+  it('should forward ref to Tabs DOM element', async () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(
+      <Tabs ref={ref} testId="tabsId">
+        <TabItem title="Tab 1">Tab 1</TabItem>
+      </Tabs>
+    );
+
+    await screen.findByTestId('tabsId');
+    expect(ref.current.nodeName).toBe('DIV');
+  });
+
   describe('TabItem: ', () => {
     it('can render custom classnames', async () => {
       render(
@@ -67,5 +80,20 @@ describe('Tabs: ', () => {
       const tab = await screen.findByRole('tab');
       expect(tab).toHaveAttribute('aria-disabled');
     });
+
+    it('should forward ref to TabItem DOM element', async () => {
+      const ref = React.createRef<HTMLDivElement>();
+
+      render(
+        <Tabs>
+          <TabItem ref={ref} title="Tab 1">
+            Tab 1
+          </TabItem>
+        </Tabs>
+      );
+
+      await screen.findByRole('tab');
+      expect(ref.current.nodeName).toBe('DIV');
+    });
   });
 });

packages/react/src/primitives/ToggleButton/ToggleButton.tsx

@@ -1,23 +1,30 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { useToggleButton } from './useToggleButton';
 import { Button } from '../Button';
-import { ToggleButtonProps, Primitive } from '../types';
+import { ToggleButtonProps, PrimitiveWithForwardRef } from '../types';
 import { ComponentClassNames } from '../shared/constants';
 
-export const ToggleButton: Primitive<ToggleButtonProps, typeof Button> = ({
-  className,
-  children,
-  defaultPressed = false,
-  isDisabled,
-  isPressed: isPressedProp,
-  onChange,
-  onClick,
-  size,
-  value,
-  variation,
-  ...rest
-}) => {
+const ToggleButtonPrimitive: PrimitiveWithForwardRef<
+  ToggleButtonProps,
+  typeof Button
+> = (
+  {
+    className,
+    children,
+    defaultPressed = false,
+    isDisabled,
+    isPressed: isPressedProp,
+    onChange,
+    onClick,
+    size,
+    value,
+    variation,
+    ...rest
+  },
+  ref
+) => {
   const { isPressed, handleClick } = useToggleButton({
     isPressed: isPressedProp,
     defaultPressed,
@@ -31,6 +38,7 @@ export const ToggleButton: Primitive<ToggleButtonProps, typeof Button> = ({
       className={classNames(ComponentClassNames.ToggleButton, className)}
       isDisabled={isDisabled}
       onClick={handleClick}
+      ref={ref}
       size={size}
       type="button"
       variation={variation}
@@ -41,4 +49,6 @@ export const ToggleButton: Primitive<ToggleButtonProps, typeof Button> = ({
   );
 };
 
+export const ToggleButton = React.forwardRef(ToggleButtonPrimitive);
+
 ToggleButton.displayName = 'ToggleButton';

packages/react/src/primitives/ToggleButton/__tests__/ToggleButton.test.tsx

@@ -1,13 +1,13 @@
-import { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { ToggleButton } from '../ToggleButton';
 
 describe('ToggleButton: ', () => {
   const ControlledToggleButton = () => {
-    const [pressed, setPressed] = useState(false);
+    const [pressed, setPressed] = React.useState(false);
     return (
       <ToggleButton isPressed={pressed} onChange={() => setPressed(!pressed)} />
     );
@@ -67,4 +67,12 @@ describe('ToggleButton: ', () => {
     userEvent.click(toggleButton);
     expect(toggleButton).toHaveAttribute('aria-pressed', 'false');
   });
+
+  it('should forward ref to DOM element', async () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(<ToggleButton ref={ref} />);
+
+    await screen.findByRole('button');
+    expect(ref.current.nodeName).toBe('BUTTON');
+  });
 });