fix(react): adjust bx--actions-list in data table to use display grid instead of position absolute

packages/components/src/components/data-table/_data-table-action.scss

@@ -20,9 +20,8 @@
     // Need for batch actions
     position: relative;
     display: flex;
-    overflow: hidden;
     width: 100%;
-    height: $spacing-09;
+    min-height: $spacing-09;
     background-color: $layer;
   }
 
@@ -320,17 +319,14 @@
   //-------------------------------------------------
   .#{$prefix}--batch-actions {
     position: absolute;
-    top: 0;
+    right: 0;
+    bottom: 0;
     left: 0;
     display: flex;
-    width: 100%;
-    height: 100%;
     align-items: center;
-    padding-right: $spacing-06;
-    padding-left: $spacing-06;
+    justify-content: space-between;
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-    overflow-x: auto;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
     transition: transform $duration--fast-02 motion(standard, productive),
@@ -344,22 +340,22 @@
   }
 
   .#{$prefix}--batch-actions--active {
+    overflow: auto hidden;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     pointer-events: all;
     transform: translate3d(0, 0, 0);
   }
 
   //btns container
   .#{$prefix}--action-list {
-    position: absolute;
-    right: 0;
     display: flex;
+    align-items: center;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn {
-    min-width: 0;
     padding: $button-padding-ghost;
     color: $text-on-color;
+    white-space: nowrap;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn:disabled {
@@ -424,22 +420,26 @@
     transition: opacity $transition--base $carbon--standard-easing;
   }
 
-  // cancel btn
-  .#{$prefix}--batch-summary__cancel {
-    position: relative;
-    padding-right: $spacing-05;
-  }
-
   // items selected text
   .#{$prefix}--batch-summary {
-    position: absolute;
+    position: sticky;
+    z-index: 100000;
     left: 0;
     display: flex;
+    // overflow: clip;
+    // width: auto;
+    height: 100%;
     align-items: center;
-    margin-left: $spacing-05;
+    padding: 0 $spacing-05;
+    background-color: $background-brand;
+
     color: $text-on-color;
   }
 
+  .#{$prefix}--batch-summary__scroll {
+    box-shadow: 0.5px 0 0.2px $hover-primary-text;
+  }
+
   .#{$prefix}--batch-summary__para {
     @include type-style('body-short-01');
   }

packages/react/src/components/DataTable/TableBatchActions.js

@@ -36,6 +36,7 @@ const TableBatchActions = ({
   translateWithId: t,
   ...rest
 }) => {
+  const [isScrolling, setIsScrolling] = React.useState();
   const batchActionsClasses = cx(
     {
       [`${prefix}--batch-actions`]: true,
@@ -44,12 +45,19 @@ const TableBatchActions = ({
     className
   );
 
+  const batchSummaryClasses = cx(`${prefix}--batch-summary`, {
+    [`${prefix}--batch-summary__scroll`]: isScrolling,
+  });
+
   return (
     <div
-      {...rest}
+      onScroll={() => {
+        setIsScrolling(!isScrolling);
+      }}
       aria-hidden={!shouldShowBatchActions}
-      className={batchActionsClasses}>
-      <div className={`${prefix}--batch-summary`}>
+      className={batchActionsClasses}
+      {...rest}>
+      <div className={batchSummaryClasses}>
         <p className={`${prefix}--batch-summary__para`}>
           <span>
             {totalSelected > 1 || totalSelected === 0

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -2036,6 +2036,7 @@ exports[`DataTable should render 1`] = `
             <div
               aria-hidden={true}
               className="bx--batch-actions"
+              onScroll={[Function]}
             >
               <div
                 className="bx--batch-summary"
@@ -3100,6 +3101,7 @@ exports[`DataTable sticky header should render 1`] = `
             <div
               aria-hidden={true}
               className="bx--batch-actions"
+              onScroll={[Function]}
             >
               <div
                 className="bx--batch-summary"

packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap

@@ -11,6 +11,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
   <div
     aria-hidden={true}
     className="bx--batch-actions custom-class"
+    onScroll={[Function]}
   >
     <div
       className="bx--batch-summary"
@@ -73,6 +74,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
   <div
     aria-hidden={false}
     className="bx--batch-actions bx--batch-actions--active custom-class"
+    onScroll={[Function]}
   >
     <div
       className="bx--batch-summary"

packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js

@@ -155,3 +155,133 @@ export const Usage = () => (
     )}
   </DataTable>
 );
+
+export const LotsOfBatchActions = () => (
+  <DataTable rows={rows} headers={headers}>
+    {({
+      rows,
+      headers,
+      getHeaderProps,
+      getRowProps,
+      getSelectionProps,
+      getToolbarProps,
+      getBatchActionProps,
+      onInputChange,
+      selectedRows,
+      getTableProps,
+      getTableContainerProps,
+    }) => (
+      <TableContainer
+        title="DataTable"
+        description="With batch actions"
+        {...getTableContainerProps()}>
+        <TableToolbar {...getToolbarProps()}>
+          <TableBatchActions {...getBatchActionProps()}>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Delete}
+              onClick={batchActionClick(selectedRows)}>
+              Item 1
+            </TableBatchAction>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Save}
+              onClick={batchActionClick(selectedRows)}>
+              Item 2
+            </TableBatchAction>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Save}
+              onClick={batchActionClick(selectedRows)}>
+              Item 3
+            </TableBatchAction>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Save}
+              onClick={batchActionClick(selectedRows)}>
+              Item 4
+            </TableBatchAction>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Save}
+              onClick={batchActionClick(selectedRows)}>
+              Item 5
+            </TableBatchAction>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Download}
+              onClick={batchActionClick(selectedRows)}>
+              Item 6
+            </TableBatchAction>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Download}
+              onClick={batchActionClick(selectedRows)}>
+              Item 7
+            </TableBatchAction>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Download}
+              onClick={batchActionClick(selectedRows)}>
+              Item 8
+            </TableBatchAction>
+            <TableBatchAction
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
+              renderIcon={Download}
+              onClick={batchActionClick(selectedRows)}>
+              Item 9
+            </TableBatchAction>
+          </TableBatchActions>
+          <TableToolbarContent>
+            <TableToolbarSearch
+              persistent="true"
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+              onChange={onInputChange}
+            />
+            <TableToolbarMenu
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}>
+              <TableToolbarAction onClick={() => alert('Alert 1')}>
+                Action 1
+              </TableToolbarAction>
+              <TableToolbarAction onClick={() => alert('Alert 2')}>
+                Action 2
+              </TableToolbarAction>
+              <TableToolbarAction onClick={() => alert('Alert 3')}>
+                Action 3
+              </TableToolbarAction>
+            </TableToolbarMenu>
+            <Button
+              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+              onClick={action('Add new row')}
+              size="small"
+              kind="primary">
+              Add new
+            </Button>
+          </TableToolbarContent>
+        </TableToolbar>
+        <Table {...getTableProps()}>
+          <TableHead>
+            <TableRow>
+              <TableSelectAll {...getSelectionProps()} />
+              {headers.map((header, i) => (
+                <TableHeader key={i} {...getHeaderProps({ header })}>
+                  {header.header}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row, i) => (
+              <TableRow key={i} {...getRowProps({ row })}>
+                <TableSelectRow {...getSelectionProps({ row })} />
+                {row.cells.map((cell) => (
+                  <TableCell key={cell.id}>{cell.value}</TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    )}
+  </DataTable>
+);