chore: Mark Table component as a funnel substep

src/internal/analytics/__tests__/components/analytics-funnel.test.tsx

@@ -15,6 +15,7 @@ import Button from '../../../../../lib/components/button';
 import FormField from '../../../../../lib/components/form-field';
 import Container from '../../../../../lib/components/container';
 import Cards from '../../../../../lib/components/cards';
+import Table from '../../../../../lib/components/table';
 import ExpandableSection from '../../../../../lib/components/expandable-section';
 
 import { mockedFunnelInteractionId, mockFunnelMetrics } from '../mocks';
@@ -321,6 +322,7 @@ describe('AnalyticsFunnelStep', () => {
           Step Content
           <Container />
           <Cards items={[]} cardDefinition={{}} />
+          <Table items={[]} columnDefinitions={[]} />
           <ExpandableSection variant="container" />
         </AnalyticsFunnelStep>
       </AnalyticsFunnel>
@@ -333,7 +335,7 @@ describe('AnalyticsFunnelStep', () => {
       stepNumber,
       stepNameSelector,
       subStepAllSelector: expect.any(String),
-      totalSubSteps: 3,
+      totalSubSteps: 4,
     });
   });
 
@@ -347,6 +349,7 @@ describe('AnalyticsFunnelStep', () => {
           Step Content
           <Container />
           <Cards items={[]} cardDefinition={{}} />
+          <Table items={[]} columnDefinitions={[]} />
           <ExpandableSection variant="container" />
         </AnalyticsFunnelStep>
       </AnalyticsFunnel>
@@ -364,10 +367,47 @@ describe('AnalyticsFunnelStep', () => {
       stepNumber,
       stepNameSelector,
       subStepAllSelector: expect.any(String),
-      totalSubSteps: 3,
+      totalSubSteps: 4,
     });
   });
 
+  test('treats container-like tables as their own substep', () => {
+    render(
+      <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+        <AnalyticsFunnelStep stepNumber={1} stepNameSelector={''}>
+          <Table items={[]} columnDefinitions={[]} variant="container" />
+          <Table items={[]} columnDefinitions={[]} variant="stacked" />
+          <Table items={[]} columnDefinitions={[]} variant="full-page" />
+        </AnalyticsFunnelStep>
+      </AnalyticsFunnel>
+    );
+    act(() => void jest.runAllTimers());
+
+    expect(FunnelMetrics.funnelStepStart).toHaveBeenCalledWith(
+      expect.objectContaining({
+        totalSubSteps: 3,
+      })
+    );
+  });
+
+  test('does not treat embedded tables as their own substep', () => {
+    render(
+      <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+        <AnalyticsFunnelStep stepNumber={1} stepNameSelector={''}>
+          <Table items={[]} columnDefinitions={[]} variant="embedded" />
+          <Table items={[]} columnDefinitions={[]} variant="borderless" />
+        </AnalyticsFunnelStep>
+      </AnalyticsFunnel>
+    );
+    act(() => void jest.runAllTimers());
+
+    expect(FunnelMetrics.funnelStepStart).toHaveBeenCalledWith(
+      expect.objectContaining({
+        totalSubSteps: 0,
+      })
+    );
+  });
+
   test('does not call funnelStepComplete when the funnel unmounts without submitting', () => {
     const stepNumber = 1;
     const stepNameSelector = '.step-name-selector';

src/table/index.tsx

@@ -5,6 +5,7 @@ import { TableForwardRefType, TableProps } from './interfaces';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalTable from './internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
+import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
 
 export { TableProps };
 const Table = React.forwardRef(
@@ -13,7 +14,8 @@ const Table = React.forwardRef(
     ref: React.Ref<TableProps.Ref>
   ) => {
     const baseComponentProps = useBaseComponent('Table');
-    return (
+
+    const table = (
       <InternalTable
         items={items}
         selectedItems={selectedItems}
@@ -24,6 +26,11 @@ const Table = React.forwardRef(
         ref={ref}
       />
     );
+    if (variant === 'borderless' || variant === 'embedded') {
+      return table;
+    }
+
+    return <AnalyticsFunnelSubStep>{table}</AnalyticsFunnelSubStep>;
   }
 ) as TableForwardRefType;