chore: Track table counter text from title as fallback (#3549)

Author: michaeldowseza

package.json

@@ -164,7 +164,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "786 kB",
+      "limit": "790 kB",
       "ignore": "react-dom"
     }
   ],

pages/funnel-analytics/with-table.page.tsx

@@ -91,7 +91,7 @@ export default function WithTablePage() {
         }}
         selectionType="multi"
         header={
-          <Header headingTagOverride="h1" counter={`(${allItems.length})`}>
+          <Header headingTagOverride="h1" counter={`(1/${allItems.length})`}>
             Table title
           </Header>
         }

src/header/analytics/use-table-integration.ts

@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useMemo } from 'react';
+
+import { parseCountValue } from '../../internal/analytics/utils/parse-count-text';
+import { useTableComponentsContext } from '../../internal/context/table-component-context';
+
+/**
+ * Custom hook that integrates table counter values with table component context.
+ *
+ * The extracted count value is automatically synchronized with the table header
+ * component through the table context, updating the countText property.
+ */
+export const useTableIntegration = (countText: string | undefined) => {
+  const tableComponentContext = useTableComponentsContext();
+  const countValue = useMemo(() => parseCountValue(countText), [countText]);
+
+  useEffect(() => {
+    if (tableComponentContext?.headerRef?.current && countValue !== undefined) {
+      tableComponentContext.headerRef.current.totalCount = countValue;
+
+      return () => {
+        delete tableComponentContext.headerRef.current?.totalCount;
+      };
+    }
+  }, [tableComponentContext?.headerRef, countValue]);
+};

src/header/internal.tsx

@@ -16,6 +16,7 @@ import { useMobile } from '../internal/hooks/use-mobile';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { SomeRequired } from '../internal/types';
+import { useTableIntegration } from './analytics/use-table-integration';
 import { HeaderProps } from './interfaces';
 
 import analyticsSelectors from './analytics-metadata/styles.css.js';
@@ -49,6 +50,9 @@ export default function InternalHeader({
   const assignHeaderId = useContext(CollectionLabelContext).assignId;
   const isInContainer = useContainerHeader();
   const headingId = useUniqueId('heading');
+
+  useTableIntegration(counter);
+
   if (assignHeaderId !== undefined) {
     assignHeaderId(headingId);
   }

src/internal/analytics/utils/__tests__/parse-count-text.test.ts

@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { parseCountValue } from '../../../../../lib/components/internal/analytics/utils/parse-count-text.js';
+
+test('parses out only the number from a given countText', () => {
+  expect(parseCountValue('1 item')).toBe(1);
+});
+
+test('parses out the total number from a given countText', () => {
+  expect(parseCountValue('1/5')).toBe(5);
+});
+
+test('parse out the number on open ended counts', () => {
+  expect(parseCountValue('100+')).toBe(100);
+});
+
+test('returns undefined when no numbers found', () => {
+  expect(parseCountValue('No items')).toBeUndefined();
+  expect(parseCountValue('items only')).toBeUndefined();
+});
+
+// Format variations
+test('handles parentheses format', () => {
+  expect(parseCountValue('Items (25)')).toBe(25);
+  expect(parseCountValue('(100)')).toBe(100);
+});
+
+test('handles strings with extra whitespace', () => {
+  expect(parseCountValue('  100  ')).toBe(100);
+  expect(parseCountValue('\t50\n')).toBe(50);
+});
+
+test('returns undefined for undefined input', () => {
+  expect(parseCountValue(undefined)).toBeUndefined();
+});
+
+test('returns undefined for empty string', () => {
+  expect(parseCountValue('')).toBeUndefined();
+});
+
+test('returns undefined for non-string input', () => {
+  expect(parseCountValue(123 as any)).toBeUndefined();
+  expect(parseCountValue(null as any)).toBeUndefined();
+});

src/internal/analytics/utils/parse-count-text.ts

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Extracts the count value from table header/filter text.
+ *
+ * Parses various counter string formats and extracts the relevant numeric value:
+ * - "Items (100)" - Extracts 100 (first number found)
+ * - "1/100" - Extracts 100 (denominator of fraction, representing total count)
+ * - "100+" - Extracts 100 (first number found)
+ */
+export const parseCountValue = (countText: string | undefined): number | undefined => {
+  if (!countText || typeof countText !== 'string') {
+    return undefined;
+  }
+
+  const target = countText.includes('/') ? countText.split('/')[1] : countText;
+  const match = target.match(/\d+/);
+  return match ? parseInt(match[0], 10) : undefined;
+};

src/internal/context/__tests__/table-component-context.test.tsx

@@ -31,6 +31,7 @@ describe('Verify TableComponentsContext', () => {
           },
           filterRef: { current: { filterText: 'test', filterCount: 10, filtered: true } },
           preferencesRef: { current: { pageSize: 20, visibleColumns: ['id'] } },
+          headerRef: { current: { totalCount: 10 } },
         }}
       >
         <ChildComponent />
@@ -90,6 +91,7 @@ describe('Verify TableComponentsContext', () => {
           },
           filterRef: { current: { filterText: 'test', filterCount: 10, filtered: true } },
           preferencesRef: { current: { pageSize: 20, visibleColumns: ['id'] } },
+          headerRef: { current: { totalCount: 10 } },
         }}
       >
         <ChildComponent />

src/internal/context/table-component-context.ts

@@ -2,6 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 import { createContext, RefObject, useContext } from 'react';
 
+export interface HeaderRef {
+  totalCount?: number;
+}
+
 export interface FilterRef {
   filtered?: boolean;
   filterText?: string;
@@ -21,6 +25,7 @@ export interface PreferencesRef {
 }
 
 interface TableComponentsContextProps {
+  headerRef: RefObject<HeaderRef>;
   filterRef: RefObject<FilterRef>;
   paginationRef: RefObject<PaginationRef>;
   preferencesRef: RefObject<PreferencesRef>;

src/table/__integ__/component-metrics.test.ts

@@ -53,6 +53,7 @@ const baseComponentConfiguration = {
   },
   filtered: false,
   filteredBy: [],
+  filteredCount: 4000,
   totalNumberOfResources: 4000,
   pagination: {
     currentPageIndex: 1,
@@ -80,6 +81,7 @@ const basePropertyFilterConfiguration = {
   },
   filtered: false,
   filteredBy: [],
+  filteredCount: 4000,
   totalNumberOfResources: 4000,
   pagination: {
     currentPageIndex: 1,
@@ -298,7 +300,7 @@ describe('filtering', () => {
         componentConfiguration: {
           ...baseComponentConfiguration,
           filtered: true,
-          totalNumberOfResources: 92,
+          filteredCount: 92,
           pagination: {
             currentPageIndex: 1,
             openEnd: false,
@@ -327,7 +329,7 @@ describe('filtering', () => {
           ...basePropertyFilterConfiguration,
           filtered: true,
           filteredBy: ['state'],
-          totalNumberOfResources: 852,
+          filteredCount: 852,
           pagination: {
             currentPageIndex: 1,
             openEnd: false,
@@ -356,7 +358,7 @@ describe('filtering', () => {
           ...basePropertyFilterConfiguration,
           filtered: true,
           filteredBy: [],
-          totalNumberOfResources: 852,
+          filteredCount: 852,
           pagination: {
             currentPageIndex: 1,
             openEnd: false,

src/table/internal.tsx

@@ -18,6 +18,7 @@ import { CollectionLabelContext } from '../internal/context/collection-label-con
 import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 import {
   FilterRef,
+  HeaderRef,
   PaginationRef,
   PreferencesRef,
   TableComponentsContextProvider,
@@ -193,6 +194,7 @@ const InternalTable = React.forwardRef(
     const paginationRef = useRef<PaginationRef>({});
     const filterRef = useRef<FilterRef>({});
     const preferencesRef = useRef<PreferencesRef>({});
+    const headerRef = useRef<HeaderRef>({});
     /* istanbul ignore next: performance marks do not work in JSDOM */
     const getHeaderText = () =>
       toolsHeaderPerformanceMarkRef.current?.querySelector<HTMLElement>(`.${headerStyles['heading-text']}`)
@@ -232,6 +234,7 @@ const InternalTable = React.forwardRef(
       });
     };
     const getComponentConfiguration = () => {
+      const headerData = headerRef.current;
       const filterData = filterRef.current;
       const paginationData = paginationRef.current;
       const preferencesData = preferencesRef.current;
@@ -248,9 +251,10 @@ const InternalTable = React.forwardRef(
           columnId: sortingColumn?.sortingField,
           sortingOrder: sortingColumn ? (sortingDescending ? 'desc' : 'asc') : undefined,
         },
-        filtered: Boolean(filterData.filtered),
+        filtered: filterData?.filtered ?? null,
         filteredBy: filterData?.filteredBy ?? [],
-        totalNumberOfResources: filterRef.current?.filterCount ?? null,
+        filteredCount: filterData?.filterCount ?? null,
+        totalNumberOfResources: headerData?.totalCount ?? null,
         tablePreferences: {
           visibleColumns: preferencesData?.visibleColumns ?? [],
           resourcesPerPage: preferencesData?.pageSize ?? null,
@@ -433,7 +437,7 @@ const InternalTable = React.forwardRef(
 
     return (
       <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
-        <TableComponentsContextProvider value={{ paginationRef, filterRef, preferencesRef }}>
+        <TableComponentsContextProvider value={{ paginationRef, filterRef, preferencesRef, headerRef }}>
           <ColumnWidthsProvider
             visibleColumns={visibleColumnWidthsWithSelection}
             resizableColumns={resizableColumns}