fix: Prevent popup from leaving window

client/src/lib/popup/with-popup.jsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
 
@@ -8,6 +9,9 @@ export default (WrappedComponent, defaultProps) => {
   const Popup = React.memo(({ children, ...props }) => {
     const [isOpened, setIsOpened] = useState(false);
 
+    const wrapper = useRef(null);
+    const resizeObserver = useRef(null);
+
     const handleOpen = useCallback(() => {
       setIsOpened(true);
     }, []);
@@ -37,6 +41,29 @@ export default (WrappedComponent, defaultProps) => {
       [children],
     );
 
+    const handleContentRef = useCallback((element) => {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
+
+      if (!element) {
+        resizeObserver.current = null;
+        return;
+      }
+
+      resizeObserver.current = new ResizeObserver(() => {
+        if (resizeObserver.current.isInitial) {
+          resizeObserver.current.isInitial = false;
+          return;
+        }
+
+        wrapper.current.positionUpdate();
+      });
+
+      resizeObserver.current.isInitial = true;
+      resizeObserver.current.observe(element);
+    }, []);
+
     const tigger = React.cloneElement(children, {
       onClick: handleTriggerClick,
     });
@@ -45,6 +72,7 @@ export default (WrappedComponent, defaultProps) => {
       <SemanticUIPopup
         basic
         wide
+        ref={wrapper}
         trigger={tigger}
         on="click"
         open={isOpened}
@@ -64,9 +92,11 @@ export default (WrappedComponent, defaultProps) => {
         onClick={handleClick}
         {...defaultProps} // eslint-disable-line react/jsx-props-no-spreading
       >
-        <Button icon="close" onClick={handleClose} className={styles.closeButton} />
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <WrappedComponent {...props} onClose={handleClose} />
+        <div ref={handleContentRef}>
+          <Button icon="close" onClick={handleClose} className={styles.closeButton} />
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <WrappedComponent {...props} onClose={handleClose} />
+        </div>
       </SemanticUIPopup>
     );
   });