From bd6d877987a2a1cab77434d5f0c6a57253e6f1d8 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 8 Jan 2025 19:51:54 +0200
Subject: [PATCH] feat(Dialog): allow observing content resize without a
 re-render triggered

---
 .../core/src/components/Dialog/Dialog.tsx     | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Dialog/Dialog.tsx b/packages/core/src/components/Dialog/Dialog.tsx
index 52a6a6c096..47b3e92ee8 100644
--- a/packages/core/src/components/Dialog/Dialog.tsx
+++ b/packages/core/src/components/Dialog/Dialog.tsx
@@ -154,6 +154,15 @@ export interface DialogProps extends VibeComponentProps {
    * If string use it as selector to prevent scroll.
    */
   disableContainerScroll?: boolean | string;
+  /**
+   * Enables the observation of content resize for the popper element.
+   * When set to `true`, a ResizeObserver is attached to the popper content,
+   * automatically triggering repositioning when the size of the content changes.
+   *
+   * This is useful for dialogs, tooltips, or popovers with dynamic content
+   * that may grow or shrink without a re-render being triggered.
+   */
+  observeContentResize?: boolean;
 }
 
 export interface DialogState {
@@ -191,7 +200,8 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
     hideWhenReferenceHidden: false,
     shouldCallbackOnMount: false,
     instantShowAndHide: false,
-    addKeyboardHideShowTriggersByDefault: false
+    addKeyboardHideShowTriggersByDefault: false,
+    observeContentResize: false
   };
   private showTimeout: NodeJS.Timeout;
   private hideTimeout: NodeJS.Timeout;
@@ -498,6 +508,7 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
       hideWhenReferenceHidden,
       disableContainerScroll,
       containerSelector,
+      observeContentResize,
       id,
       "data-testid": dataTestId
     } = this.props;
@@ -573,6 +584,22 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
                     return state;
                   }
                 },
+                {
+                  name: "observeContentResize",
+                  enabled: observeContentResize,
+                  phase: "beforeWrite",
+                  fn() {},
+                  effect({ state, instance }) {
+                    const observer = new ResizeObserver(() => {
+                      instance.update();
+                    });
+                    observer.observe(state.elements.popper);
+
+                    return () => {
+                      observer.disconnect();
+                    };
+                  }
+                },
                 ...modifiers
               ]}
             >