fix(Panel): Add event listener to Panel in order to update the footer…

…'s sticky property correctly when content changes dynamically (#33520)

change/@fluentui-react-da358841-feeb-4166-a7d8-e955d9e51ad7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Add event listener to Panel in order to update the footer's sticky property correctly when content changes dynamically.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/Panel/Panel.base.tsx

@@ -61,6 +61,7 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
   private _hasCustomNavigation: boolean = !!(this.props.onRenderNavigation || this.props.onRenderNavigationContent);
   private _headerTextId: string | undefined;
   private _allowTouchBodyScroll: boolean;
+  private _resizeObserver: ResizeObserver | null;
 
   public static getDerivedStateFromProps(
     nextProps: Readonly<IPanelProps>,
@@ -149,6 +150,7 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
   public componentWillUnmount(): void {
     this._async.dispose();
     this._events.dispose();
+    this._resizeObserver?.disconnect();
   }
 
   public render(): JSX.Element | null {
@@ -310,9 +312,27 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
     );
   }
 
+  private _createResizeObserver(callback: ResizeObserverCallback): ResizeObserver | null {
+    const doc = getDocumentEx(this.context);
+    let resizeObserver: ResizeObserver | null = null;
+
+    if (doc?.defaultView?.ResizeObserver) {
+      resizeObserver = new doc.defaultView.ResizeObserver(callback);
+    }
+
+    return resizeObserver;
+  }
+
   // Allow the user to scroll within the panel but not on the body
   private _allowScrollOnPanel = (elt: HTMLDivElement | null): void => {
+    this._resizeObserver = this._createResizeObserver(entries => {
+      if (entries.length > 0 && entries[0].target === elt) {
+        this._updateFooterPosition();
+      }
+    });
+
     if (elt) {
+      this._resizeObserver?.observe(elt);
       if (this._allowTouchBodyScroll) {
         allowOverscrollOnElement(elt, this._events);
       } else {