fix(Datagrid): clickable row retain focus after sidepanel closes

e2e/components/Datagrid/Datagrid-test.avt.e2e.js

@@ -10,6 +10,8 @@
 import { expect, test } from '@playwright/test';
 import { visitStory } from '../../test-utils/storybook';
 
+test.describe.configure({ mode: 'parallel' });
+
 test.describe('Datagrid @avt', () => {
   test('@avt-basic-usage', async ({ page }) => {
     await visitStory(page, {
@@ -21,4 +23,32 @@ test.describe('Datagrid @avt', () => {
     });
     await expect(page).toHaveNoACViolations('Datagrid @avt-basic-usage');
   });
+
+  test('@avt-open-and-dismiss-sidepanel-onRowClick', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Datagrid',
+      id: 'ibm-products-components-datagrid-clickablerow--clickable-row-story',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    const table = await page.getByLabel('Data table title');
+    await expect(table).toBeVisible();
+    const firstRow = await table.getByRole('row', {
+      name: 'Toggle Row Selected 1',
+    });
+    firstRow.click();
+    await page.waitForTimeout(3000);
+    const sidePanel = page.locator('[aria-label="Title"]');
+    await page.waitForTimeout(3000);
+    await expect(sidePanel).toBeVisible();
+    const button = sidePanel.getByText('View details');
+    await expect(button).toBeFocused();
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Enter');
+    await expect(firstRow).toBeFocused();
+    await expect(page).toHaveNoACViolations(
+      'Datagrid @avt-open-and-dismiss-sidepanel-onRowClick'
+    );
+  });
 });

packages/ibm-products/src/components/Datagrid/Extensions/ClickableRow/ClickableRow.stories.jsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Edit, TrashCan, Add } from '@carbon/react/icons';
 import { action } from '@storybook/addon-actions';
 import {
@@ -351,6 +351,26 @@ const ClickableRowWithPanel = ({ ...args }) => {
   const [data] = useState(makeData(10));
   const [openSidePanel, setOpenSidePanel] = useState(false);
   const [rowData, setRowData] = useState({});
+  const [focusBackElm, setFocusBackElm] = useState();
+  const sidePanelRef = useRef();
+
+  useEffect(() => {
+    if (openSidePanel) {
+      const focusableElements = sidePanelRef.current.querySelectorAll(
+        'button, [href], input, select, [tabindex]:not([tabindex="-1"])'
+      );
+      const lastFocusableElement =
+        focusableElements[focusableElements.length - 2]; //excluding 'Focus sentinel' span
+      const handleFocus = () => {
+        focusBackElm.focus();
+      };
+      lastFocusableElement.addEventListener('blur', handleFocus);
+      return () => {
+        lastFocusableElement.removeEventListener('blur', handleFocus);
+      };
+    }
+  }, [openSidePanel]);
+
   const datagridState = useDatagrid(
     {
       columns,
@@ -359,6 +379,7 @@ const ClickableRowWithPanel = ({ ...args }) => {
         action()(event);
         setOpenSidePanel(true);
         setRowData(row);
+        setFocusBackElm(event.currentTarget);
       },
       DatagridActions,
       batchActions: true,
@@ -383,7 +404,12 @@ const ClickableRowWithPanel = ({ ...args }) => {
         selectorPageContent={true && '.page-content-wrapper'} // Only if SlideIn
         selectorPrimaryFocus="#side-panel-story__view-link"
         open={openSidePanel}
-        onRequestClose={() => setOpenSidePanel(false)}
+        onRequestClose={() => {
+          setOpenSidePanel(false);
+          focusBackElm.focus();
+        }}
+        ref={sidePanelRef}
+        tabIndex="0"
         size={'sm'}
         title={'Title'}
         slideIn