@kaizen/components 1.70.4 → 1.70.6

package/dist/cjs/KaizenProvider/KaizenProvider.cjs

@@ -21,20 +21,16 @@ var KaizenProvider = function (_a) {
   var _c = React.useState(false),
     documentIsAvailable = _c[0],
     setDocumentIsAvailable = _c[1];
-  var _d = React.useState(),
-    notificationsList = _d[0],
-    setNotificationsList = _d[1];
   React.useEffect(function () {
     // SSR does not have a document, which is required for ToastNotificationsList.
     // Await document render before rendering the component.
     if (document !== undefined) {
-      setNotificationsList(React__default.default.createElement(ToastNotificationsList.ToastNotificationsList, null));
       setDocumentIsAvailable(true);
     }
-  }, [documentIsAvailable]);
+  }, []);
   return React__default.default.createElement(OptionalIntlProvider.OptionalIntlProvider, {
     locale: locale
-  }, React__default.default.createElement(ToastNotificationContext.ToastNotificationProvider, null, notificationsList, children), React__default.default.createElement(FontDefinitions.FontDefinitions, null));
+  }, React__default.default.createElement(ToastNotificationContext.ToastNotificationProvider, null, documentIsAvailable && React__default.default.createElement(ToastNotificationsList.ToastNotificationsList, null), children), React__default.default.createElement(FontDefinitions.FontDefinitions, null));
 };
 KaizenProvider.displayName = 'KaizenProvider';
 exports.KaizenProvider = KaizenProvider;

package/dist/cjs/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var ReactDOM = require('react-dom');
 var ToastNotificationContext = require('../context/ToastNotificationContext.cjs');
 var ToastNotificationsMap = require('./subcomponents/ToastNotificationsMap/ToastNotificationsMap.cjs');
 var ToastNotificationsList_module = require('./ToastNotificationsList.module.scss.cjs');
@@ -11,28 +10,31 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var toastNotificationListId = 'toast-notifications-list';
 var ToastNotificationsList = function () {
   var _a = ToastNotificationContext.useToastNotificationContext(),
     notifications = _a.notifications,
     removeToastNotification = _a.removeToastNotification;
-  var containers = document.querySelectorAll('[data-testid="toast-notifications-list"');
-  if (containers) {
-    // Remove any duplicate instances
-    // (eg. Storybook docs page has multiple stories each with their own context)
-    containers.forEach(function (c, i) {
-      if (i === 0) return;
-      c.remove();
-    });
-  }
-  return ReactDOM.createPortal(React__default.default.createElement("div", {
-    "data-testid": "toast-notifications-list",
-    role: "status",
-    className: ToastNotificationsList_module.toastNotificationsList
-  }, React__default.default.createElement(ToastNotificationsMap.ToastNotificationsMap, {
+  var _b = React.useState(null),
+    toastContainer = _b[0],
+    setToastContainer = _b[1];
+  React.useEffect(function () {
+    // this is to ensure that the container is created only once. Regardless of how many KaizenProvider is set up, they will also reuse the same container.
+    var container = document.querySelector("[id=\"".concat(toastNotificationListId, "\"]"));
+    if (!container) {
+      container = document.createElement('div');
+      container.setAttribute('id', toastNotificationListId);
+      container.setAttribute('role', 'status');
+      container.className = ToastNotificationsList_module.toastNotificationsList;
+      document.body.appendChild(container);
+    }
+    setToastContainer(container);
+  }, []);
+  return toastContainer ? React__default.default.createElement(ToastNotificationsMap.ToastNotificationsMap, {
     notifications: notifications,
     onHide: removeToastNotification,
-    container: containers[0]
-  })), document.body);
+    container: toastContainer
+  }) : React__default.default.createElement(React__default.default.Fragment, null);
 };
 ToastNotificationsList.displayName = 'ToastNotificationsList';
 exports.ToastNotificationsList = ToastNotificationsList;

package/dist/esm/KaizenProvider/KaizenProvider.mjs

@@ -14,20 +14,16 @@ const KaizenProvider = /*#__PURE__*/function () {
     var _c = useState(false),
       documentIsAvailable = _c[0],
       setDocumentIsAvailable = _c[1];
-    var _d = useState(),
-      notificationsList = _d[0],
-      setNotificationsList = _d[1];
     useEffect(function () {
       // SSR does not have a document, which is required for ToastNotificationsList.
       // Await document render before rendering the component.
       if (document !== undefined) {
-        setNotificationsList( /*#__PURE__*/React.createElement(ToastNotificationsList, null));
         setDocumentIsAvailable(true);
       }
-    }, [documentIsAvailable]);
+    }, []);
     return /*#__PURE__*/React.createElement(OptionalIntlProvider, {
       locale: locale
-    }, /*#__PURE__*/React.createElement(ToastNotificationProvider, null, notificationsList, children), /*#__PURE__*/React.createElement(FontDefinitions, null));
+    }, /*#__PURE__*/React.createElement(ToastNotificationProvider, null, documentIsAvailable && /*#__PURE__*/React.createElement(ToastNotificationsList, null), children), /*#__PURE__*/React.createElement(FontDefinitions, null));
   };
   KaizenProvider.displayName = 'KaizenProvider';
   return KaizenProvider;

package/dist/esm/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.mjs

@@ -1,31 +1,33 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
+import React, { useState, useEffect } from 'react';
 import { useToastNotificationContext } from '../context/ToastNotificationContext.mjs';
 import { ToastNotificationsMap } from './subcomponents/ToastNotificationsMap/ToastNotificationsMap.mjs';
 import styles from './ToastNotificationsList.module.scss.mjs';
+var toastNotificationListId = 'toast-notifications-list';
 const ToastNotificationsList = /*#__PURE__*/function () {
   const ToastNotificationsList = function () {
     var _a = useToastNotificationContext(),
       notifications = _a.notifications,
       removeToastNotification = _a.removeToastNotification;
-    var containers = document.querySelectorAll('[data-testid="toast-notifications-list"');
-    if (containers) {
-      // Remove any duplicate instances
-      // (eg. Storybook docs page has multiple stories each with their own context)
-      containers.forEach(function (c, i) {
-        if (i === 0) return;
-        c.remove();
-      });
-    }
-    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
-      "data-testid": "toast-notifications-list",
-      role: "status",
-      className: styles.toastNotificationsList
-    }, /*#__PURE__*/React.createElement(ToastNotificationsMap, {
+    var _b = useState(null),
+      toastContainer = _b[0],
+      setToastContainer = _b[1];
+    useEffect(function () {
+      // this is to ensure that the container is created only once. Regardless of how many KaizenProvider is set up, they will also reuse the same container.
+      var container = document.querySelector("[id=\"".concat(toastNotificationListId, "\"]"));
+      if (!container) {
+        container = document.createElement('div');
+        container.setAttribute('id', toastNotificationListId);
+        container.setAttribute('role', 'status');
+        container.className = styles.toastNotificationsList;
+        document.body.appendChild(container);
+      }
+      setToastContainer(container);
+    }, []);
+    return toastContainer ? ( /*#__PURE__*/React.createElement(ToastNotificationsMap, {
       notifications: notifications,
       onHide: removeToastNotification,
-      container: containers[0]
-    })), document.body);
+      container: toastContainer
+    })) : ( /*#__PURE__*/React.createElement(React.Fragment, null));
   };
   ToastNotificationsList.displayName = 'ToastNotificationsList';
   return ToastNotificationsList;