[minor] Popover autoFocus events to manage focus on trigger

apps/website/screens/components/popover/code/PopoverCodePage.tsx

@@ -95,18 +95,47 @@ const sections = [
             <td>
               <TableCode>{"() => void"}</TableCode>
             </td>
+            <td>Callback function when the popover is closed.</td>
+            <td>-</td>
+          </tr>
+          <tr>
             <td>
-              Callback function when the popover is opened. Used only in controlled mode and if the trigger lacks the
-              events to manage the controlled behavior.
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                onCloseAutoFocus
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>{"(event: Event) => void"}</TableCode>
             </td>
+            <td>Callback function when the popover is closed and the focus is set back to the trigger element.</td>
             <td>-</td>
           </tr>
           <tr>
             <td>onOpen</td>
             <td>
               <TableCode>{"() => void"}</TableCode>
             </td>
-            <td>Callback function when the popover is closed.</td>
+            <td>
+              Callback function when the popover is opened. Used only in controlled mode and if the trigger lacks the
+              events to manage the controlled behavior.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                onOpenAutoFocus
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>{"(event: Event) => void"}</TableCode>
+            </td>
+            <td>
+              Callback function when the popover is opened and the focus is set to the first focusable element inside
+              the popover.
+            </td>
             <td>-</td>
           </tr>
           <tr>

packages/lib/src/popover/Popover.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import DxcPopover from "./Popover";
 import userEvent from "@testing-library/user-event";
 import DxcButton from "../button/Button";
@@ -77,4 +77,33 @@ describe("Popover component tests", () => {
     userEvent.unhover(getByText("Trigger"));
     expect(onClose).toHaveBeenCalled();
   });
+
+  test("The component manages onOpenAutoFocus", () => {
+    const autoFocusEvent = jest.fn();
+    const { getByText, queryByText } = render(
+      <DxcPopover onOpenAutoFocus={autoFocusEvent} popoverContent={<div>Popover content</div>}>
+        Trigger
+      </DxcPopover>
+    );
+    expect(queryByText("Trigger")).toBeTruthy();
+    userEvent.click(getByText("Trigger"));
+    expect(getByText("Popover content")).toBeTruthy();
+    expect(autoFocusEvent).toHaveBeenCalled();
+  });
+
+  test("The component manages onCloseAutoFocus", async () => {
+    const autoFocusEvent = jest.fn();
+    const { getByText, queryByText } = render(
+      <DxcPopover onCloseAutoFocus={autoFocusEvent} popoverContent={<div>Popover content</div>}>
+        Trigger
+      </DxcPopover>
+    );
+    expect(queryByText("Trigger")).toBeTruthy();
+    userEvent.click(getByText("Trigger"));
+    expect(getByText("Popover content")).toBeTruthy();
+    userEvent.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(autoFocusEvent).toHaveBeenCalled();
+    });
+  });
 });

packages/lib/src/popover/Popover.tsx

@@ -39,7 +39,9 @@ const DxcPopover = ({
   isOpen,
   offset = 4,
   onOpen,
+  onOpenAutoFocus,
   onClose,
+  onCloseAutoFocus,
   popoverContent,
   side = "bottom",
 }: PopoverPropsType): JSX.Element => {
@@ -88,6 +90,12 @@ const DxcPopover = ({
               align={align}
               side={side}
               sideOffset={offset}
+              onOpenAutoFocus={(event) => {
+                onOpenAutoFocus?.(event);
+              }}
+              onCloseAutoFocus={(event) => {
+                onCloseAutoFocus?.(event);
+              }}
               onInteractOutside={() => handleTrigger(isControlled.current, setOpened, false, onClose)}
               onEscapeKeyDown={() => handleTrigger(isControlled.current, setOpened, false, onClose)}
               onMouseEnter={

packages/lib/src/popover/types.ts

@@ -16,8 +16,14 @@ export type PopoverPropsType = {
   /** Callback function when the popover is opened.
    * Used only in controlled mode and if the trigger lacks the events to manage the controlled behavior. */
   onOpen?: () => void;
+  /** Callback function when the popover is opened and the focus is set to the first focusable element inside the popover.
+   * */
+  onOpenAutoFocus?: (event: Event) => void;
   /** Callback function when the popover is closed. */
   onClose?: () => void;
+  /** Callback function when the popover is closed and the focus is set back to the trigger element.
+   * */
+  onCloseAutoFocus?: (event: Event) => void;
   /** Content to be displayed inside the popover. */
   popoverContent: React.ReactNode;
   /** Side of the trigger where the popover will appear. */