@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/components/manage/Sidebar/SidebarPopup.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
@@ -16,13 +16,26 @@ const SidebarPopup = (props) => {
     onClose();
   };
 
+  const handleEscapeKey = (e) => {
+    if (open && e.key === 'Escape') {
+      onClose();
+      e.stopPropagation();
+    }
+  };
+
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   React.useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside, false);
+    document.addEventListener('keyup', handleEscapeKey, false);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside, false);
+      document.removeEventListener('keyup', handleEscapeKey, false);
     };
   });
-
   return (
     <>
       {overlay && (
@@ -32,9 +45,13 @@ const SidebarPopup = (props) => {
           classNames="overlay-container"
           unmountOnExit
         >
-          <Portal node={document?.body}>
-            <div className="overlay-container"></div>
-          </Portal>
+          <>
+            {document?.body &&
+              createPortal(
+                <div className="overlay-container"></div>,
+                document?.body,
+              )}
+          </>
         </CSSTransition>
       )}
       <CSSTransition
@@ -43,23 +60,27 @@ const SidebarPopup = (props) => {
         classNames="sidebar-container"
         unmountOnExit
       >
-        <Portal>
-          <aside
-            role="presentation"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onKeyDown={(e) => {
-              e.stopPropagation();
-            }}
-            ref={asideElement}
-            key="sidebarpopup"
-            className="sidebar-container"
-            style={{ overflowY: 'auto' }}
-          >
-            {children}
-          </aside>
-        </Portal>
+        <>
+          {isClient &&
+            createPortal(
+              <aside
+                role="presentation"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                }}
+                ref={asideElement}
+                key="sidebarpopup"
+                className="sidebar-container"
+                style={{ overflowY: 'auto' }}
+              >
+                {children}
+              </aside>,
+              document.body,
+            )}
+        </>
       </CSSTransition>
     </>
   );

package/src/components/manage/Sidebar/SidebarPortal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 /**
  * Portal that wraps Sidebar components
@@ -16,8 +16,9 @@ const SidebarPortal = ({ children, selected, tab = 'sidebar-properties' }) => {
 
   return (
     <>
-      {selected && (
-        <Portal node={isClient && document.getElementById(tab)}>
+      {isClient &&
+        selected &&
+        createPortal(
           <div role="form" style={{ height: '100%' }}>
             <div
               style={{ height: '100%' }}
@@ -31,9 +32,9 @@ const SidebarPortal = ({ children, selected, tab = 'sidebar-properties' }) => {
             >
               {children}
             </div>
-          </div>
-        </Portal>
-      )}
+          </div>,
+          document.getElementById(tab),
+        )}
     </>
   );
 };

package/src/components/manage/Toast/Toast.jsx

@@ -29,7 +29,7 @@ const Toast = (props) => {
       <Icon name={getIcon(props)} size="18px" />
       <div className="toast-inner-content">
         {title && <h4>{title}</h4>}
-        <p>{content}</p>
+        <div>{content}</div>
       </div>
     </>
   );
@@ -37,7 +37,7 @@ const Toast = (props) => {
 
 Toast.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  content: PropTypes.string.isRequired,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   info: PropTypes.bool,
   success: PropTypes.bool,
   error: PropTypes.bool,