From 5f3d4503637c850c63d7dd96f9705c77645ed287 Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Thu, 17 Aug 2023 16:03:03 -0400
Subject: [PATCH 1/3] feat(DataTable): render select all button is onSelectAll
 is provided

---
 .../__snapshots__/PublicAPI-test.js.snap      | 14 ++++
 .../src/components/DataTable/DataTable.tsx    |  4 +
 .../components/DataTable/TableBatchActions.js | 29 +++++++
 .../DataTable/__tests__/DataTable-test.js     | 55 ++++++++-----
 .../__snapshots__/DataTable-test.js.snap      | 80 ++++++++++++-------
 .../DataTable-batch-actions.stories.js        | 10 ++-
 .../data-table/action/_data-table-action.scss |  4 +
 7 files changed, 147 insertions(+), 49 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 6eed0b2fc2e6..8aa8038a1631 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1874,9 +1874,15 @@ Map {
           "isRequired": true,
           "type": "func",
         },
+        "onSelectAll": Object {
+          "type": "func",
+        },
         "shouldShowBatchActions": Object {
           "type": "bool",
         },
+        "totalCount": Object {
+          "type": "number",
+        },
         "totalSelected": Object {
           "isRequired": true,
           "type": "number",
@@ -1889,6 +1895,7 @@ Map {
         "carbon.table.batch.cancel",
         "carbon.table.batch.items.selected",
         "carbon.table.batch.item.selected",
+        "carbon.table.batch.selectAll",
       ],
     },
     "TableBody": Object {
@@ -7805,9 +7812,15 @@ Map {
         "isRequired": true,
         "type": "func",
       },
+      "onSelectAll": Object {
+        "type": "func",
+      },
       "shouldShowBatchActions": Object {
         "type": "bool",
       },
+      "totalCount": Object {
+        "type": "number",
+      },
       "totalSelected": Object {
         "isRequired": true,
         "type": "number",
@@ -7820,6 +7833,7 @@ Map {
       "carbon.table.batch.cancel",
       "carbon.table.batch.items.selected",
       "carbon.table.batch.item.selected",
+      "carbon.table.batch.selectAll",
     ],
   },
   "TableBody" => Object {
diff --git a/packages/react/src/components/DataTable/DataTable.tsx b/packages/react/src/components/DataTable/DataTable.tsx
index e1d578e0a171..28efb0e0a3af 100644
--- a/packages/react/src/components/DataTable/DataTable.tsx
+++ b/packages/react/src/components/DataTable/DataTable.tsx
@@ -170,7 +170,9 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     [key: string]: unknown;
   }) => {
     onCancel: () => void;
+    onSelectAll: () => void;
     shouldShowBatchActions: boolean;
+    totalCount: number;
     totalSelected: number;
     [key: string]: unknown;
   };
@@ -644,6 +646,8 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
     const { shouldShowBatchActions } = this.state;
     const totalSelected = this.getSelectedRows().length;
     return {
+      onSelectAll: () => {},
+      totalCount: this.state.rowIds.length || 0,
       ...props,
       shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
       totalSelected,
diff --git a/packages/react/src/components/DataTable/TableBatchActions.js b/packages/react/src/components/DataTable/TableBatchActions.js
index 9f24cf3152eb..cd9fac394d69 100644
--- a/packages/react/src/components/DataTable/TableBatchActions.js
+++ b/packages/react/src/components/DataTable/TableBatchActions.js
@@ -17,12 +17,16 @@ const translationKeys = {
   'carbon.table.batch.cancel': 'Cancel',
   'carbon.table.batch.items.selected': 'items selected',
   'carbon.table.batch.item.selected': 'item selected',
+  'carbon.table.batch.selectAll': 'Select all',
 };
 
 const translateWithId = (id, state) => {
   if (id === 'carbon.table.batch.cancel') {
     return translationKeys[id];
   }
+  if (id === 'carbon.table.batch.selectAll') {
+    return `${translationKeys[id]} (${state.totalCount})`;
+  }
   return `${state.totalSelected} ${translationKeys[id]}`;
 };
 
@@ -31,7 +35,9 @@ const TableBatchActions = ({
   children,
   shouldShowBatchActions,
   totalSelected,
+  totalCount,
   onCancel,
+  onSelectAll,
   translateWithId: t,
   ...rest
 }) => {
@@ -65,6 +71,16 @@ const TableBatchActions = ({
               : t('carbon.table.batch.item.selected', { totalSelected })}
           </Text>
         </p>
+        {onSelectAll && (
+          <>
+            <span className={`${prefix}--batch-summary__divider`}>&#x7c;</span>
+            <Button
+              onClick={onSelectAll}
+              tabIndex={shouldShowBatchActions ? 0 : -1}>
+              {t('carbon.table.batch.selectAll', { totalCount })}
+            </Button>
+          </>
+        )}
       </div>
       <TableActionList>
         {children}
@@ -91,12 +107,25 @@ TableBatchActions.propTypes = {
    */
   onCancel: PropTypes.func.isRequired,
 
+  /**
+   * Hook required to listen for when the user initiates a select all
+   * request through this component. This _only_ controls the rendering
+   * of the `Select All` button and does not include built in functionality
+   */
+  onSelectAll: PropTypes.func,
+
   /**
    * Boolean specifier for whether or not the batch action bar should be
    * displayed
    */
   shouldShowBatchActions: PropTypes.bool,
 
+  /**
+   * Numeric representation of the total number of items in a table.
+   * This number is used in the select all button text
+   */
+  totalCount: PropTypes.number,
+
   /**
    * Numeric representation of the total number of items selected in a table.
    * This number is used to derive the selection message
diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js
index 003b4a791cd7..98a8b4165dca 100644
--- a/packages/react/src/components/DataTable/__tests__/DataTable-test.js
+++ b/packages/react/src/components/DataTable/__tests__/DataTable-test.js
@@ -35,28 +35,32 @@ import { render, screen, within } from '@testing-library/react';
 const getLastCallFor = (mocker) =>
   mocker.mock.calls[mocker.mock.calls.length - 1];
 
+const onSelectAllFn = jest.fn();
+
+const rows = [
+  {
+    id: 'b',
+    fieldA: 'Field 2:A',
+    fieldB: 'Field 2:B',
+  },
+  {
+    id: 'a',
+    fieldA: 'Field 1:A',
+    fieldB: 'Field 1:B',
+  },
+  {
+    id: 'c',
+    fieldA: 'Field 3:A',
+    fieldB: 'Field 3:B',
+  },
+];
+
 describe('DataTable', () => {
   let mockProps;
 
   beforeEach(() => {
     mockProps = {
-      rows: [
-        {
-          id: 'b',
-          fieldA: 'Field 2:A',
-          fieldB: 'Field 2:B',
-        },
-        {
-          id: 'a',
-          fieldA: 'Field 1:A',
-          fieldB: 'Field 1:B',
-        },
-        {
-          id: 'c',
-          fieldA: 'Field 3:A',
-          fieldB: 'Field 3:B',
-        },
-      ],
+      rows,
       headers: [
         {
           key: 'fieldA',
@@ -334,7 +338,10 @@ describe('DataTable', () => {
             }) => (
               <TableContainer title="DataTable with selection">
                 <TableToolbar>
-                  <TableBatchActions {...getBatchActionProps()}>
+                  <TableBatchActions
+                    {...getBatchActionProps({
+                      onSelectAll: onSelectAllFn,
+                    })}>
                     <TableBatchAction onClick={jest.fn()}>
                       Ghost
                     </TableBatchAction>
@@ -452,6 +459,18 @@ describe('DataTable', () => {
         const { selectedRows } = getLastCallFor(mockProps.render)[0];
         expect(selectedRows.length).toBe(0);
       });
+
+      it('should call the onSelectAll prop if supplied to TableBatchAction component', async () => {
+        render(<DataTable {...mockProps} />);
+        const selectAllCheckbox = screen.getAllByRole('checkbox')[0];
+
+        await userEvent.click(selectAllCheckbox);
+        expect(selectAllCheckbox).toBeChecked();
+
+        const selectAllButton = screen.getByText(`Select all (${rows.length})`);
+        await userEvent.click(selectAllButton);
+        expect(onSelectAllFn).toHaveBeenCalledTimes(1);
+      });
     });
 
     describe('selection with filtering', () => {
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 9b94f0ef8686..34d188921d37 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -10,20 +10,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r4k:-title"
+        id="tc-:r5b:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r4k:-description"
+        id="tc-:r5b:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r4k:-title"
+        aria-labelledby="tc-:r5b:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -60,14 +60,14 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
               >
                 <input
                   class="cds--radio-button"
-                  id="data-table-16__select-row-b"
+                  id="data-table-17__select-row-b"
                   name="select-row-b"
                   type="radio"
                   value=""
                 />
                 <label
                   class="cds--radio-button__label"
-                  for="data-table-16__select-row-b"
+                  for="data-table-17__select-row-b"
                 >
                   <span
                     class="cds--radio-button__appearance"
@@ -97,14 +97,14 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
               >
                 <input
                   class="cds--radio-button"
-                  id="data-table-16__select-row-a"
+                  id="data-table-17__select-row-a"
                   name="select-row-a"
                   type="radio"
                   value=""
                 />
                 <label
                   class="cds--radio-button__label"
-                  for="data-table-16__select-row-a"
+                  for="data-table-17__select-row-a"
                 >
                   <span
                     class="cds--radio-button__appearance"
@@ -134,14 +134,14 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
               >
                 <input
                   class="cds--radio-button"
-                  id="data-table-16__select-row-c"
+                  id="data-table-17__select-row-c"
                   name="select-row-c"
                   type="radio"
                   value=""
                 />
                 <label
                   class="cds--radio-button__label"
-                  for="data-table-16__select-row-c"
+                  for="data-table-17__select-row-c"
                 >
                   <span
                     class="cds--radio-button__appearance"
@@ -179,20 +179,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r4e:-title"
+        id="tc-:r55:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r4e:-description"
+        id="tc-:r55:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r4e:-title"
+        aria-labelledby="tc-:r55:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -229,14 +229,14 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
               >
                 <input
                   class="cds--radio-button"
-                  id="data-table-15__select-row-b"
+                  id="data-table-16__select-row-b"
                   name="select-row-b"
                   type="radio"
                   value=""
                 />
                 <label
                   class="cds--radio-button__label"
-                  for="data-table-15__select-row-b"
+                  for="data-table-16__select-row-b"
                 >
                   <span
                     class="cds--radio-button__appearance"
@@ -266,14 +266,14 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
               >
                 <input
                   class="cds--radio-button"
-                  id="data-table-15__select-row-a"
+                  id="data-table-16__select-row-a"
                   name="select-row-a"
                   type="radio"
                   value=""
                 />
                 <label
                   class="cds--radio-button__label"
-                  for="data-table-15__select-row-a"
+                  for="data-table-16__select-row-a"
                 >
                   <span
                     class="cds--radio-button__appearance"
@@ -303,14 +303,14 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
               >
                 <input
                   class="cds--radio-button"
-                  id="data-table-15__select-row-c"
+                  id="data-table-16__select-row-c"
                   name="select-row-c"
                   type="radio"
                   value=""
                 />
                 <label
                   class="cds--radio-button__label"
-                  for="data-table-15__select-row-c"
+                  for="data-table-16__select-row-c"
                 >
                   <span
                     class="cds--radio-button__appearance"
@@ -348,13 +348,13 @@ exports[`DataTable behaves as expected selection should render and match snapsho
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r22:-title"
+        id="tc-:r28:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r22:-description"
+        id="tc-:r28:-description"
       />
     </div>
     <section
@@ -377,6 +377,18 @@ exports[`DataTable behaves as expected selection should render and match snapsho
               0 items selected
             </span>
           </p>
+          <span
+            class="cds--batch-summary__divider"
+          >
+            |
+          </span>
+          <button
+            class="cds--btn cds--btn--primary"
+            tabindex="-1"
+            type="button"
+          >
+            Select all (3)
+          </button>
         </div>
         <div
           class="cds--action-list"
@@ -553,7 +565,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-labelledby="tooltip-:r28:"
+                aria-labelledby="tooltip-:r2f:"
                 class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
                 title="Settings"
                 type="button"
@@ -582,7 +594,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
             <span
               aria-hidden="true"
               class="cds--popover"
-              id="tooltip-:r28:"
+              id="tooltip-:r2f:"
               role="tooltip"
             >
               <span
@@ -608,7 +620,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r22:-title"
+        aria-labelledby="tc-:r28:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -775,13 +787,13 @@ exports[`DataTable renders as expected - Component API should render and match s
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:rb:-title"
+        id="tc-:rc:-title"
       >
         DataTable with toolbar
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:rb:-description"
+        id="tc-:rc:-description"
       />
     </div>
     <section
@@ -804,6 +816,18 @@ exports[`DataTable renders as expected - Component API should render and match s
               0 items selected
             </span>
           </p>
+          <span
+            class="cds--batch-summary__divider"
+          >
+            |
+          </span>
+          <button
+            class="cds--btn cds--btn--primary"
+            tabindex="-1"
+            type="button"
+          >
+            Select all (0)
+          </button>
         </div>
         <div
           class="cds--action-list"
@@ -980,7 +1004,7 @@ exports[`DataTable renders as expected - Component API should render and match s
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-labelledby="tooltip-:rh:"
+                aria-labelledby="tooltip-:rj:"
                 class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
                 title="Settings"
                 type="button"
@@ -1009,7 +1033,7 @@ exports[`DataTable renders as expected - Component API should render and match s
             <span
               aria-hidden="true"
               class="cds--popover"
-              id="tooltip-:rh:"
+              id="tooltip-:rj:"
               role="tooltip"
             >
               <span
@@ -1035,7 +1059,7 @@ exports[`DataTable renders as expected - Component API should render and match s
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:rb:-title"
+        aria-labelledby="tc-:rc:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
index 068ad7666b7a..a9b0f9a57b49 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
@@ -73,7 +73,11 @@ export const Default = () => (
       getTableProps,
       getTableContainerProps,
     }) => {
-      const batchActionProps = getBatchActionProps();
+      const batchActionProps = {
+        ...getBatchActionProps({
+          onSelectAll: action('Select all rows across all pages'),
+        }),
+      };
 
       return (
         <TableContainer
@@ -135,7 +139,7 @@ export const Default = () => (
               <Button
                 tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
                 onClick={action('Add new row')}
-                size="small"
+                size="sm"
                 kind="primary">
                 Add new
               </Button>
@@ -236,7 +240,7 @@ export const Playground = (args) => (
               <Button
                 tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
                 onClick={action('Add new row')}
-                size="small"
+                size="sm"
                 kind="primary">
                 Add new
               </Button>
diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/packages/styles/scss/components/data-table/action/_data-table-action.scss
index 37cca71b0717..3be4eb510ce8 100644
--- a/packages/styles/scss/components/data-table/action/_data-table-action.scss
+++ b/packages/styles/scss/components/data-table/action/_data-table-action.scss
@@ -510,6 +510,10 @@
     @include type-style('body-compact-01');
   }
 
+  .#{$prefix}--batch-summary__divider {
+    padding-left: $spacing-03;
+  }
+
   //-------------------------------------------------
   //SMALL TOOLBAR
   //-------------------------------------------------

From 3bef839480492133f71d798ca8953fbfa04d4a87 Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Mon, 21 Aug 2023 09:23:18 -0400
Subject: [PATCH 2/3] fix(DataTable): update onSelectAll type

---
 packages/react/src/components/DataTable/DataTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/DataTable/DataTable.tsx b/packages/react/src/components/DataTable/DataTable.tsx
index 28efb0e0a3af..6d4cadde6b74 100644
--- a/packages/react/src/components/DataTable/DataTable.tsx
+++ b/packages/react/src/components/DataTable/DataTable.tsx
@@ -170,7 +170,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     [key: string]: unknown;
   }) => {
     onCancel: () => void;
-    onSelectAll: () => void;
+    onSelectAll?: () => void | undefined;
     shouldShowBatchActions: boolean;
     totalCount: number;
     totalSelected: number;
@@ -646,7 +646,7 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
     const { shouldShowBatchActions } = this.state;
     const totalSelected = this.getSelectedRows().length;
     return {
-      onSelectAll: () => {},
+      onSelectAll: undefined,
       totalCount: this.state.rowIds.length || 0,
       ...props,
       shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,

From 8a6caad1c97108e911cac95a052bb42dd6266ac0 Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Mon, 21 Aug 2023 09:54:29 -0400
Subject: [PATCH 3/3] chore: update test snapshot

---
 .../__snapshots__/DataTable-test.js.snap      | 44 +++++++------------
 1 file changed, 16 insertions(+), 28 deletions(-)

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 34d188921d37..099615dfc45c 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -10,20 +10,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r5b:-title"
+        id="tc-:r55:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r5b:-description"
+        id="tc-:r55:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r5b:-title"
+        aria-labelledby="tc-:r55:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -179,20 +179,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r55:-title"
+        id="tc-:r4v:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r55:-description"
+        id="tc-:r4v:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r55:-title"
+        aria-labelledby="tc-:r4v:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -348,13 +348,13 @@ exports[`DataTable behaves as expected selection should render and match snapsho
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r28:-title"
+        id="tc-:r22:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r28:-description"
+        id="tc-:r22:-description"
       />
     </div>
     <section
@@ -565,7 +565,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-labelledby="tooltip-:r2f:"
+                aria-labelledby="tooltip-:r29:"
                 class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
                 title="Settings"
                 type="button"
@@ -594,7 +594,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
             <span
               aria-hidden="true"
               class="cds--popover"
-              id="tooltip-:r2f:"
+              id="tooltip-:r29:"
               role="tooltip"
             >
               <span
@@ -620,7 +620,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r28:-title"
+        aria-labelledby="tc-:r22:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -787,13 +787,13 @@ exports[`DataTable renders as expected - Component API should render and match s
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:rc:-title"
+        id="tc-:rb:-title"
       >
         DataTable with toolbar
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:rc:-description"
+        id="tc-:rb:-description"
       />
     </div>
     <section
@@ -816,18 +816,6 @@ exports[`DataTable renders as expected - Component API should render and match s
               0 items selected
             </span>
           </p>
-          <span
-            class="cds--batch-summary__divider"
-          >
-            |
-          </span>
-          <button
-            class="cds--btn cds--btn--primary"
-            tabindex="-1"
-            type="button"
-          >
-            Select all (0)
-          </button>
         </div>
         <div
           class="cds--action-list"
@@ -1004,7 +992,7 @@ exports[`DataTable renders as expected - Component API should render and match s
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-labelledby="tooltip-:rj:"
+                aria-labelledby="tooltip-:rh:"
                 class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
                 title="Settings"
                 type="button"
@@ -1033,7 +1021,7 @@ exports[`DataTable renders as expected - Component API should render and match s
             <span
               aria-hidden="true"
               class="cds--popover"
-              id="tooltip-:rj:"
+              id="tooltip-:rh:"
               role="tooltip"
             >
               <span
@@ -1059,7 +1047,7 @@ exports[`DataTable renders as expected - Component API should render and match s
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:rc:-title"
+        aria-labelledby="tc-:rb:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>