[breaking] Change to make the Alert component fully controlled

apps/website/screens/components/alert/code/AlertCodePage.tsx

@@ -40,9 +40,7 @@ const sections = [
               <TableCode>boolean</TableCode>
             </td>
             <td>
-              If true, the alert will have a close button that will remove the message from the alert, only in banner
-              and inline modes. The rest of the functionality will depend on the <Code>onClose</Code> event of each
-              message (e.g. closing the modal alert).
+              If true, the alert will have a close button that will call the <Code>onClose</Code>.
             </td>
             <td>
               <TableCode>true</TableCode>
@@ -58,9 +56,9 @@ const sections = [
               <ExtendedTableCode>{messageTypeString}</ExtendedTableCode>
             </td>
             <td>
-              List of messages to be displayed. Each message has a close action that will, apart from remove from the
-              alert the current message, call the <Code>onClose</Code> if it is defined. If the message is an array, the
-              alert will show a navigation bar to move between the messages. <br />
+              List of messages to be displayed. Each message has a close action that will call the <Code>onClose</Code>{" "}
+              if it is defined. If the message is an array, the alert will show a navigation bar to move between the
+              messages. <br />
               The <Code>modal</Code> mode only allows one message per alert. In this case, the message must be an object
               and the presence of the <Code>onClose</Code> attribute is mandatory, since the management of the closing
               of the alert relies completely on the user.

apps/website/screens/components/alert/code/examples/severalMessages.tsx

@@ -1,11 +1,33 @@
 import { DxcAlert, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
 
 const code = `() => {
-  const messages = [
-    { text: "Your document as been auto-saved." },
-    { text: "You can continue working without worrying, as all changes are automatically saved." },
-    { text: "You can also go back to the previous version of the document." },
-  ];
+  const [messages, setMessages] = useState([
+    {
+      text: "Your document as been auto-saved.",
+      onClose: () => {
+        setMessages((prevMessages) => prevMessages.filter(({ text }) => text !== "Your document as been auto-saved."));
+      },
+    },
+    {
+      text: "You can continue working without worrying, as all changes are automatically saved.",
+      onClose: () => {
+        setMessages((prevMessages) =>
+          prevMessages.filter(
+            ({ text }) => text !== "You can continue working without worrying, as all changes are automatically saved."
+          )
+        );
+      },
+    },
+    {
+      text: "You can also go back to the previous version of the document.",
+      onClose: () => {
+        setMessages((prevMessages) =>
+          prevMessages.filter(({ text }) => text !== "You can also go back to the previous version of the document.")
+        );
+      },
+    },
+  ]);
 
   return (
     <DxcInset space="var(--spacing-padding-xl)">
@@ -25,6 +47,7 @@ const scope = {
   DxcAlert,
   DxcInset,
   DxcFlex,
+  useState,
 };
 
 export default { code, scope };

packages/lib/src/alert/Alert.test.tsx

@@ -68,26 +68,6 @@ describe("Alert component tests", () => {
     fireEvent.click(closeButton);
     expect(onClose).toHaveBeenCalled();
   });
-  test("Alert with several messages closes properly each one", () => {
-    const { getByRole, getByText } = render(<DxcAlert title="Info" message={messages} />);
-    const closeButton = getByRole("button", { name: "Close message" });
-    const nextButton = getByRole("button", { name: "Next message" });
-    expect(getByText("1 of 4")).toBeTruthy();
-    expect(getByText("Message 1")).toBeTruthy();
-    fireEvent.click(closeButton);
-    expect(getByText("Message 2")).toBeTruthy();
-    expect(getByText("1 of 3")).toBeTruthy();
-    fireEvent.click(nextButton);
-    fireEvent.click(nextButton);
-    expect(getByText("Message 4")).toBeTruthy();
-    expect(getByText("3 of 3")).toBeTruthy();
-    fireEvent.click(closeButton);
-    expect(getByText("Message 3")).toBeTruthy();
-    expect(getByText("2 of 2")).toBeTruthy();
-    fireEvent.click(closeButton);
-    expect(getByRole("button", { name: "Close alert" })).toBeTruthy();
-    expect(getByText("Message 2")).toBeTruthy();
-  });
   test("Alert actions are correctly called when pressed", () => {
     const primaryAction = jest.fn();
     const secondaryAction = jest.fn();

packages/lib/src/alert/Alert.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-import { useState, useId, useEffect, useCallback, useContext } from "react";
+import { useState, useId, useEffect, useCallback, useContext, useMemo } from "react";
 import AlertPropsType from "./types";
 import DxcIcon from "../icon/Icon";
 import DxcDivider from "../divider/Divider";
@@ -101,7 +101,7 @@ const DxcAlert = ({
   semantic = "info",
   title = "",
 }: AlertPropsType) => {
-  const [messages, setMessages] = useState(Array.isArray(message) ? message : [message]);
+  const messages = useMemo(() => (Array.isArray(message) ? message : [message]), [message]);
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const id = useId();
@@ -116,9 +116,6 @@ const DxcAlert = ({
 
   const handleOnClose = useCallback(() => {
     messages[currentIndex]?.onClose?.();
-    if (mode !== "modal") {
-      setMessages((prevMessages) => prevMessages.filter((_, index) => index !== currentIndex));
-    }
   }, [messages, currentIndex, mode]);
 
   useEffect(() => {