Resize Popout to fit content on popout

common/changes/@itwin/appui-layout-react/joeh-resizePopout_2023-11-02-18-19.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-layout-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-layout-react"
+}

common/changes/@itwin/appui-react/joeh-resizePopout_2023-11-02-18-19.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Popout widgets will now popout to preferredFloatingWidgetSize. Will popout to container size if preferredFloatingWidgetSize is not set",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

docs/changehistory/NextVersion.md

@@ -63,6 +63,7 @@ Table of contents:
 ### Changes
 
 - `AppNotificationManager` no longer requires `StatusBar` to be rendered in the active frontstage to show messages.
+- Popout widgets will now popout to `preferredFloatingWidgetSize`. Will popout to container size if `preferredFloatingWidgetSize` is not set.
 
 ### Fixes
 

full-stack-tests/ui/tests/popout-widget.test.ts

@@ -93,8 +93,8 @@ test.describe("popout widget", () => {
     await expect(popoutPage).toHaveTitle(/View Attributes/);
 
     expect(popoutPage.viewportSize()).toEqual({
-      height: 800,
-      width: 600,
+      height: 270,
+      width: 218,
     });
 
     // Update widget size and close the popout.

ui/appui-layout-react/src/appui-layout-react/state/NineZoneStateReducer.ts

@@ -530,9 +530,31 @@ export function NineZoneStateReducer(
       if (location && isPopoutTabLocation(location)) return state;
 
       const savedTab = state.savedTabs.byId[id];
+
+      const tab = state.tabs[id];
+
+      let contentHeight = 800;
+      let contentWidth = 600;
+
+      if (tab.preferredFloatingWidgetSize) {
+        contentWidth = tab.preferredFloatingWidgetSize.width;
+        contentHeight = tab.preferredFloatingWidgetSize.height;
+      } else {
+        const popoutContentContainer = document.getElementById(
+          `content-container:${id}`
+        );
+        if (popoutContentContainer !== null) {
+          contentWidth = popoutContentContainer.offsetWidth + 20;
+          contentHeight = popoutContentContainer.offsetHeight + 20;
+        }
+      }
+
       let preferredBounds = savedTab?.popoutBounds
         ? Rectangle.create(savedTab.popoutBounds)
-        : Rectangle.createFromSize({ height: 800, width: 600 });
+        : Rectangle.createFromSize({
+            height: contentHeight,
+            width: contentWidth,
+          });
       if (size) preferredBounds = preferredBounds.setSize(size);
       if (position) preferredBounds = preferredBounds.setPosition(position);
 

ui/appui-layout-react/src/appui-layout-react/widget/ContentRenderer.tsx

@@ -78,9 +78,14 @@ export function WidgetContentRenderer(props: WidgetContentRendererProps) {
     };
   }, [renderTo, widgetContentManager, props.tabId]);
   return ReactDOM.createPortal(
-    <TabIdContext.Provider value={props.tabId}>
-      {props.children}
-    </TabIdContext.Provider>,
+    <div
+      style={{ height: "100%", width: "100%" }}
+      id={`content-container:${props.tabId}`}
+    >
+      <TabIdContext.Provider value={props.tabId}>
+        {props.children}
+      </TabIdContext.Provider>
+    </div>,
     container.current
   );
 }

ui/appui-layout-react/src/test/state/NineZoneStateReducer.test.ts

@@ -20,6 +20,7 @@ import { addTabs } from "../Utils";
 import { createDraggedTabState } from "../../appui-layout-react/state/internal/TabStateHelpers";
 import { updatePanelState } from "../../appui-layout-react/state/internal/PanelStateHelpers";
 import { assert } from "@itwin/core-bentley";
+import { stub } from "sinon";
 
 describe("NineZoneStateReducer", () => {
   it("should not update for unhandled action", () => {
@@ -1619,6 +1620,52 @@ describe("NineZoneStateReducer", () => {
         widgetIndex: 0,
       });
     });
+
+    it("should popout a tab and fit to preferredFloatingWidgetSize if bounds are not set", () => {
+      let state = createNineZoneState();
+      state = addTab(state, "t1", {
+        preferredFloatingWidgetSize: { width: 50, height: 50 },
+      });
+      state = addPanelWidget(state, "left", "w1", ["t1"]);
+
+      const newState = NineZoneStateReducer(state, {
+        type: "WIDGET_TAB_POPOUT",
+        id: "t1",
+      });
+      newState.popoutWidgets.allIds.should.length(1);
+      const popoutWidgetId = newState.popoutWidgets.allIds[0];
+      newState.popoutWidgets.byId[popoutWidgetId].bounds.should.eql({
+        left: 0,
+        top: 0,
+        bottom: 50,
+        right: 50,
+      });
+    });
+
+    it("should popout a tab and fit to content container if preferredFloatingWidgetSize is not set", () => {
+      let state = createNineZoneState();
+
+      const blankHTML = document.createElement("div");
+
+      stub(document, "getElementById").returns(blankHTML);
+      state = addTab(state, "t1");
+      state = addPanelWidget(state, "left", "w1", ["t1"]);
+
+      const newState = NineZoneStateReducer(state, {
+        type: "WIDGET_TAB_POPOUT",
+        id: "t1",
+      });
+
+      newState.popoutWidgets.allIds.should.length(1);
+      const popoutWidgetId = newState.popoutWidgets.allIds[0];
+
+      newState.popoutWidgets.byId[popoutWidgetId].bounds.should.eql({
+        left: 0,
+        top: 0,
+        bottom: 20,
+        right: 20,
+      });
+    });
   });
 
   describe("WIDGET_TAB_HIDE", () => {

ui/appui-react/src/appui-react/childwindow/PopoutWidget.tsx

@@ -15,7 +15,7 @@ interface PopoutWidgetProps {
   widgetDef: WidgetDef;
 }
 
-/** Component used to wrap a widget for use is a child window.
+/** Component used to wrap a widget for use in a child window.
  * @internal
  */
 export function PopoutWidget({