From 4435c1fd10f81c9366955567fc1bc6a2c5364ba7 Mon Sep 17 00:00:00 2001
From: David Ichim <ichim.david@gmail.com>
Date: Tue, 8 Aug 2023 20:50:11 +0300
Subject: [PATCH] fix(popup): ref error and make sure that all .popup-container
 .popup get their position fixed

- also ensure position is updated when placement is changed so that storybook example
  functions correctly when interacting with the position controls
---
 src/ui/Popup/Popup.jsx                   | 25 +++++++++++++++++++-----
 src/ui/Popup/Popup.stories.jsx           |  2 +-
 theme/themes/eea/extras/banner.less      |  1 -
 theme/themes/eea/globals/utilities.less  |  9 +++++++++
 theme/themes/eea/modules/popup.overrides |  4 ++++
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/ui/Popup/Popup.jsx b/src/ui/Popup/Popup.jsx
index 00d88042ed..2deb320c27 100644
--- a/src/ui/Popup/Popup.jsx
+++ b/src/ui/Popup/Popup.jsx
@@ -54,6 +54,18 @@ class Popup extends React.Component {
     this.popper && this.popper.destroy();
   }
 
+  componentWillUpdate(nextProps, nextState, nextContext) {
+    const position = nextProps.position;
+    if (
+      position &&
+      this.popper.state.placement !== positionsMapping[position]
+    ) {
+      this.popper.setOptions({
+        placement: positionsMapping[position] || 'bottom-end',
+      });
+    }
+  }
+
   togglePopup() {
     this.setState(
       (state) => {
@@ -82,11 +94,14 @@ class Popup extends React.Component {
     const onEvent = 'on' + event.charAt(0).toUpperCase() + event.slice(1);
     return (
       <React.Fragment>
-        {trigger &&
-          React.cloneElement(trigger, {
-            [onEvent]: this.togglePopup,
-            ref: this.triggerRef,
-          })}
+        {trigger && (
+          <div className="popup-trigger" ref={this.triggerRef}>
+            {React.cloneElement(trigger, {
+              [onEvent]: this.togglePopup,
+              ref: this.triggerRef,
+            })}
+          </div>
+        )}
 
         <div className="popup-container" ref={this.popupRef}>
           {this.state.isOpen && (
diff --git a/src/ui/Popup/Popup.stories.jsx b/src/ui/Popup/Popup.stories.jsx
index e9a721cb4b..0310a4d454 100644
--- a/src/ui/Popup/Popup.stories.jsx
+++ b/src/ui/Popup/Popup.stories.jsx
@@ -59,7 +59,7 @@ export default {
 };
 
 export const ButtonPopup = (args) => (
-  <Segment placeholder>
+  <Segment placeholder className={'flex-row flex-items-center'}>
     <Popup
       {...args}
       trigger={
diff --git a/theme/themes/eea/extras/banner.less b/theme/themes/eea/extras/banner.less
index b3b57ca473..a3a0666661 100644
--- a/theme/themes/eea/extras/banner.less
+++ b/theme/themes/eea/extras/banner.less
@@ -110,7 +110,6 @@
 /*Share Popup*/
 
 .ui.popup.share-popup {
-  position: initial; // without position initial popper cannot correctly place popup
   min-width: @sharePopupMinWidth;
   padding: @sharePopupPadding;
   filter: @sharePopupFilter;
diff --git a/theme/themes/eea/globals/utilities.less b/theme/themes/eea/globals/utilities.less
index 0391c530f4..f91435de0e 100644
--- a/theme/themes/eea/globals/utilities.less
+++ b/theme/themes/eea/globals/utilities.less
@@ -27,12 +27,21 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
   z-index: 0;
 }
 
+/* Layout */
 // Flexbox
 .d-flex { display: flex !important; }
+.flex-row { flex-direction: row !important; }
 .flex-items-start { align-items: flex-start !important; }
 .flex-items-end { align-items: flex-end !important; }
 .flex-items-center { align-items: center !important; }
 
+// Columns
+each(range(2, 6), {
+  .has--@{value}--columns {
+    columns: @value;
+  }
+});
+
 // Text
 .text-left,
 .has--text--left,
diff --git a/theme/themes/eea/modules/popup.overrides b/theme/themes/eea/modules/popup.overrides
index c3f2821285..34afc905cc 100644
--- a/theme/themes/eea/modules/popup.overrides
+++ b/theme/themes/eea/modules/popup.overrides
@@ -81,3 +81,7 @@
 .with-popup {
   cursor: @cursor;
 }
+
+.popup-container .popup {
+  position: initial; // without position initial popper cannot correctly place popup
+}