Fix useWidget hook issue when used in a popout widget (#1171)

* Fix useWidget hook issue.

* rush change

* Fix test

common/changes/@itwin/appui-react/issue-1170_2025-01-15-09-45.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Fix `useWidget` hook issue when used in a popout widget.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

e2e-tests/tests/popout-widget.test.ts

@@ -68,7 +68,6 @@ test.describe("popout widget", () => {
   });
 
   test("should dock a popout widget (after frontstage change)", async ({
-    context,
     page,
   }) => {
     const tab = tabLocator(page, "WT-2");
@@ -243,3 +242,25 @@ test("should render after link styles are loaded", async ({
     })
   );
 });
+
+test("useWidget hook", async ({ page }) => {
+  await page.goto("./blank?frontstageId=widget-api");
+
+  // TODO: make sure the widget is not overlaid. Need to split into smaller test frontstages.
+  await setWidgetState(
+    page,
+    "appui-test-providers:UseWidgetHookWidget",
+    WidgetState.Floating
+  );
+
+  const tab = tabLocator(page, "Use Widget Hook");
+  const widget = floatingWidgetLocator({
+    tab,
+  });
+
+  const popoutPage = await popoutWidget(widget);
+  const widgetText = popoutPage.getByText(
+    `{"state":0,"widgetLocation":"popout"}`
+  );
+  await expect(widgetText).toBeVisible();
+});

ui/appui-react/src/appui-react/frontstage/FrontstageDef.tsx

@@ -753,6 +753,7 @@ export class FrontstageDef {
       content: popoutContent,
       location: position,
       useDefaultPopoutUrl: UiFramework.useDefaultPopoutUrl,
+      tabId,
     });
 
     // Use outer size if available to avoid inner size + browser zoom issues: https://github.com/iTwin/appui/issues/563