chore(deps): bump react-toastify from 9.1.3 to 11.1.0

Author: adi-herwana-nus

client/app/lib/components/core/__test__/__snapshots__/ErrorText.test.tsx.snap

@@ -10,7 +10,11 @@ exports[`<ErrorText /> when input is a string displays it 1`] = `
       >
         An error.
       </p>
-      <div
+      <section
+        aria-atomic="false"
+        aria-label="Notifications Alt+T"
+        aria-live="polite"
+        aria-relevant="additions text"
         class="Toastify"
       />
     </div>
@@ -21,7 +25,11 @@ exports[`<ErrorText /> when input is a string displays it 1`] = `
     >
       An error.
     </p>
-    <div
+    <section
+      aria-atomic="false"
+      aria-label="Notifications Alt+T"
+      aria-live="polite"
+      aria-relevant="additions text"
       class="Toastify"
     />
   </div>,
@@ -94,7 +102,11 @@ exports[`<ErrorText /> when input is an array displays each error 1`] = `
       >
         Another error.
       </p>
-      <div
+      <section
+        aria-atomic="false"
+        aria-label="Notifications Alt+T"
+        aria-live="polite"
+        aria-relevant="additions text"
         class="Toastify"
       />
     </div>
@@ -110,7 +122,11 @@ exports[`<ErrorText /> when input is an array displays each error 1`] = `
     >
       Another error.
     </p>
-    <div
+    <section
+      aria-atomic="false"
+      aria-label="Notifications Alt+T"
+      aria-live="polite"
+      aria-relevant="additions text"
       class="Toastify"
     />
   </div>,

client/app/lib/components/core/__test__/__snapshots__/LoadingIndicator.test.tsx.snap

@@ -27,7 +27,11 @@ exports[`<LoadingIndicator /> matches the snapshot 1`] = `
         </svg>
       </span>
     </div>
-    <div
+    <section
+      aria-atomic="false"
+      aria-label="Notifications Alt+T"
+      aria-live="polite"
+      aria-relevant="additions text"
       class="Toastify"
     />
   </div>

client/app/lib/components/core/buttons/__test__/__snapshots__/DeleteButton.test.tsx.snap

@@ -30,7 +30,11 @@ exports[`<DeleteButton /> when the delete button is rendered without confirmatio
         />
       </button>
     </span>
-    <div
+    <section
+      aria-atomic="false"
+      aria-label="Notifications Alt+T"
+      aria-live="polite"
+      aria-relevant="additions text"
       class="Toastify"
     />
   </div>

client/app/lib/components/core/buttons/__test__/__snapshots__/EditButton.test.tsx.snap

@@ -30,7 +30,11 @@ exports[`<EditButton /> matches the snapshot 1`] = `
         />
       </button>
     </span>
-    <div
+    <section
+      aria-atomic="false"
+      aria-label="Notifications Alt+T"
+      aria-live="polite"
+      aria-relevant="additions text"
       class="Toastify"
     />
   </div>

client/app/lib/components/wrappers/ToastProvider.tsx

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
 import { ToastContainer, TypeOptions } from 'react-toastify';
-import { injectStyle } from 'react-toastify/dist/inject-style';
 import { Close } from '@mui/icons-material';
 
-injectStyle();
+import 'react-toastify/dist/ReactToastify.css';
 
 export const DEFAULT_TOAST_TIMEOUT_MS = 5000 as const;
 
@@ -26,13 +25,14 @@ const ToastProvider = (props: ToastProviderProps): JSX.Element => {
 
       <ToastContainer
         autoClose={DEFAULT_TOAST_TIMEOUT_MS}
-        bodyClassName={(): string => 'flex'}
+        className="flex"
         closeButton={<Close />}
+        closeOnClick
         draggable={false}
         hideProgressBar
         position="bottom-center"
         toastClassName={(toast): string =>
-          `relative shadow-xl rounded-lg mb-4 flex p-5 items-start justify-between ${
+          `relative shadow-xl rounded-lg mb-4 flex p-5 items-start justify-between w-[320px] [&_p]:w-full ${
             colors[toast?.type ?? 'default']
           }`
         }

client/app/lib/hooks/toast/toast.tsx

@@ -24,12 +24,6 @@ interface PromisedToastMessages {
   success?: ReactNode;
 }
 
-type PromisedToaster = <T = unknown>(
-  data: Promise<T>,
-  messages: PromisedToastMessages,
-  options?: ToastOptions,
-) => Promise<T>;
-
 /**
  * `UpdateOptions` also allows for `render` to be a function of type
  * `<P,>(props: ToastContentProps<P>) => ReactNode`. Here, we define
@@ -108,8 +102,12 @@ const loading: Toaster = (message, options?) =>
 const update = (id: Id, options?: NodeOnlyUpdateOptions): void =>
   toastify.update(id, customize(options));
 
-const promise: PromisedToaster = (data, messages, options?) => {
-  return toastify.promise(
+const promise = <T,>(
+  data: Promise<T>,
+  messages: PromisedToastMessages,
+  options?: ToastOptions<T>,
+): Promise<T> => {
+  return toastify.promise<T>(
     data,
     {
       pending: messages.pending

client/css-includes.json

@@ -3,6 +3,7 @@
   "node_modules/rc-slider/assets",
   "node_modules/react-image-crop/dist/ReactCrop.css",
   "node_modules/react-tooltip/dist/react-tooltip.min.css",
+  "node_modules/react-toastify/dist/ReactToastify.css",
   "node_modules/coursemology-ckeditor/build/index.css",
   "app/lib/components/core/fields/CKEditor.css",
   "app/lib/components/core/fields/AceEditor.css"

client/package.json

@@ -92,7 +92,7 @@
     "react-resizable": "^3.1.3",
     "react-router-dom": "^6.30.3",
     "react-scroll": "^1.9.0",
-    "react-toastify": "^9.1.3",
+    "react-toastify": "^11.1.0",
     "react-tooltip": "^5.26.0",
     "react-window": "^2.2.7",
     "react-xarrows": "^2.0.2",

client/yarn.lock

@@ -12013,12 +12013,12 @@ react-to-print@^2.8.0:
   dependencies:
     prop-types "^15.8.1"
 
-react-toastify@^9.1.3:
-  version "9.1.3"
-  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff"
-  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+react-toastify@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-11.1.0.tgz#3d3c73a44d5cac868ee9a52e0f90dd706532c4a4"
+  integrity sha512-e9h23x3phN0wbFeB6yovmWp7lobzV4CaCH0LO8nVP6H7Y+3GbcLpIzMm9dJhcp1RXbpyfvjgpfXqO80QAmn7sg==
   dependencies:
-    clsx "^1.1.1"
+    clsx "^2.1.1"
 
 react-tooltip@^5.26.0:
   version "5.26.0"