npm - @itwin/appui-react - Versions diffs - 5.3.0 → 5.3.1 - Mend

@itwin/appui-react 5.3.0 → 5.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,6 +1,14 @@
 # Change Log - @itwin/appui-react
-This log was last generated on Fri, 14 Mar 2025 17:37:48 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Mar 2025 11:10:28 GMT and should not be manually modified.
+## 5.3.1
+Thu, 20 Mar 2025 11:10:28 GMT
+### Updates
+- Remove redundant spacing between toolbars when the app button or navigation aid is not displayed.
+- Fix Firefox specific style loading issue of widget popouts.
 ## 5.3.0
 Fri, 14 Mar 2025 17:37:48 GMT

package/lib/appui-react/childwindow/InternalChildWindowManager.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalChildWindowManager.d.ts","sourceRoot":"","sources":["../../../src/appui-react/childwindow/InternalChildWindowManager.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,uCAAuC,CAAC;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;~~AAiC5D~~,gBAAgB;AAChB,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;IACtE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACxB;AAED,UAAU,cAAc;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACxB;AAED;;;;GAIG;AACH,qBAAa,0BAA2B,YAAW,qBAAqB;IACtE,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,wBAAwB,CAG5B;IAEJ,SAAgB,qBAAqB,gBAAqB,IAAI,EAAI;IAElE,IAAW,gBAAgB,kCAE1B;IAED;;;;OAIG;IACI,IAAI,CACT,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC,mBAAmB,GAAG,SAAS;IAQlC;;;;OAIG;IACI,MAAM,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS;IAS3E,OAAO,CAAC,yBAAyB;IAmBjC,gGAAgG;IACzF,QAAQ;IAUf;;;;;OAKG;IACI,KAAK,kBAAmB,MAAM,2CAsBnC;IAEF,OAAO,CAAC,oBAAoB;IAU5B;;;;;;;;OAQG;IACI,IAAI,CACT,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,QAAQ,EAAE,wBAAwB,EAClC,mBAAmB,CAAC,EAAE,OAAO;IAY/B,gEAAgE;IACzD,UAAU,CAAC,EAChB,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,OAAO,EACP,KAAK,EACL,KAAK,GACN,EAAE,cAAc;CAsDlB"}
1	+ {"version":3,"file":"InternalChildWindowManager.d.ts","sourceRoot":"","sources":["../../../src/appui-react/childwindow/InternalChildWindowManager.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,uCAAuC,CAAC;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AA0C5D,gBAAgB;AAChB,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB;IACtE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACxB;AAED,UAAU,cAAc;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,wBAAwB,CAAC;IACnC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACxB;AAED;;;;GAIG;AACH,qBAAa,0BAA2B,YAAW,qBAAqB;IACtE,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,wBAAwB,CAG5B;IAEJ,SAAgB,qBAAqB,gBAAqB,IAAI,EAAI;IAElE,IAAW,gBAAgB,kCAE1B;IAED;;;;OAIG;IACI,IAAI,CACT,aAAa,EAAE,MAAM,GAAG,SAAS,GAChC,mBAAmB,GAAG,SAAS;IAQlC;;;;OAIG;IACI,MAAM,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS;IAS3E,OAAO,CAAC,yBAAyB;IAmBjC,gGAAgG;IACzF,QAAQ;IAUf;;;;;OAKG;IACI,KAAK,kBAAmB,MAAM,2CAsBnC;IAEF,OAAO,CAAC,oBAAoB;IAU5B;;;;;;;;OAQG;IACI,IAAI,CACT,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,QAAQ,EAAE,wBAAwB,EAClC,mBAAmB,CAAC,EAAE,OAAO;IAY/B,gEAAgE;IACzD,UAAU,CAAC,EAChB,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,OAAO,EACP,KAAK,EACL,KAAK,GACN,EAAE,cAAc;CAsDlB"}

package/lib/appui-react/childwindow/InternalChildWindowManager.js CHANGED Viewed

@@ -24,6 +24,14 @@ function addChildHTML(window) {
     }
   `;
     doc.head.appendChild(style);
+    // Fixes a FF specific issue where document.baseURI is "about:blank"
+    const opener = window.opener;
+    const baseURI = opener?.document.baseURI;
+    if (doc.baseURI === "about:blank" && baseURI) {
+        const base = doc.createElement("base");
+        base.href = baseURI;
+        doc.head.appendChild(base);
+    }
     const noScript = doc.createElement("noscript");
     noScript.textContent = "You need to enable JavaScript to run this app.";
     doc.body.appendChild(noScript);

package/lib/appui-react/childwindow/InternalChildWindowManager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalChildWindowManager.js","sourceRoot":"","sources":["../../../src/appui-react/childwindow/InternalChildWindowManager.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\n/** @packageDocumentation\n * @module ChildWindowManager\n /\n\nimport type as React from \"react\";\nimport { BeEvent } from \"@itwin/core-bentley\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport type {\n ChildWindowLocationProps,\n FrameworkChildWindows,\n OpenChildWindowInfo,\n} from \"../framework/FrameworkChildWindows.js\";\nimport { usePopoutsStore } from \"../preview/reparent-popout-widgets/usePopoutsStore.js\";\nimport type { TabState } from \"../layout/state/TabState.js\";\n\nfunction addChildHTML(window: Window) {\n const doc = window.document;\n\n const meta = doc.createElement(\"meta\");\n meta.setAttribute(\"charset\", \"utf-8\");\n doc.head.appendChild(meta);\n\n const style = doc.createElement(\"style\");\n style.textContent = `\n html,\n body {\n height: 100%;\n width: 100%;\n margin: 0;\n overflow: hidden;\n }\n #root {\n height: 100%;\n }\n `;\n doc.head.appendChild(style);\n\n const noScript = doc.createElement(\"noscript\");\n noScript.textContent = \"You need to enable JavaScript to run this app.\";\n doc.body.appendChild(noScript);\n\n const root = doc.createElement(\"div\");\n root.id = \"root\";\n doc.body.appendChild(root);\n}\n\n/** @internal /\nexport interface InternalOpenChildWindowInfo extends OpenChildWindowInfo {\n content?: React.ReactNode;\n tabId?: TabState[\"id\"];\n}\n\ninterface OpenWindowArgs {\n childWindowId: string;\n title: string;\n content: React.ReactNode;\n location: ChildWindowLocationProps;\n useDefaultPopoutUrl: boolean;\n tabId?: TabState[\"id\"];\n}\n\n/* Supports opening a child browser window from the main application window. The child window is managed by the main application\n * and is running in the same security context. The application must deliver the html file iTwinPopup.html along side its index.html.\n * See also: [Child Window Manager]($docs/learning/ui/appui-react/ChildWindows.md)\n * @internal\n /\nexport class InternalChildWindowManager implements FrameworkChildWindows {\n private _openChildWindows: InternalOpenChildWindowInfo[] = [];\n private _childWindowToUnregister = new Map<\n InternalOpenChildWindowInfo[\"childWindowId\"],\n () => void\n >();\n\n public readonly onChildWindowsChanged = new BeEvent<() => void>();\n\n public get openChildWindows() {\n return this._openChildWindows;\n }\n\n /\n Returns the OpenChildWindowInfo for the related id.\n * @param childWindowId Id of the window to retrieve.\n * @returns undefined if not found.\n /\n public find(\n childWindowId: string \| undefined\n ): OpenChildWindowInfo \| undefined {\n if (undefined === childWindowId) return undefined;\n\n return this.openChildWindows.find(\n (openWindow) => openWindow.childWindowId === childWindowId\n );\n }\n\n /\n Return the childWindowId of the provided window.\n * @param contentWindow Window element to identify\n * @returns undefined if not found\n /\n public findId(contentWindow: Window \| undefined \| null): string \| undefined {\n if (!contentWindow) return undefined;\n\n const childWindow = this.openChildWindows.find(\n (openWindow) => openWindow.window === contentWindow\n );\n return childWindow?.childWindowId;\n }\n\n private renderChildWindowContents(\n childWindow: Window,\n childWindowId: string,\n content: React.ReactNode,\n title: string,\n tabId?: TabState[\"id\"]\n ) {\n childWindow.document.title = title;\n\n this._openChildWindows.push({\n childWindowId,\n window: childWindow,\n parentWindow: window,\n content,\n tabId,\n });\n this.onChildWindowsChanged.raiseEvent();\n }\n\n /* Close all child/pop-out windows. This typically is called when the frontstage is changed. /\n public closeAll() {\n this.openChildWindows.forEach((openChildWindow) =>\n openChildWindow.window.close()\n );\n this._childWindowToUnregister.forEach((unregister) => unregister());\n this._childWindowToUnregister.clear();\n this._openChildWindows = [];\n this.onChildWindowsChanged.raiseEvent();\n }\n\n /\n Close a specific child window.\n * @param childWindowId Id of the window to close.\n * @param processWindowClose should the `close` method be called on the closing window. (defaults to true).\n * @returns false if the window could not be found.\n /\n public close = (childWindowId: string, processWindowClose = true) => {\n const windowIndex = this.openChildWindows.findIndex(\n (openWindow) => openWindow.childWindowId === childWindowId\n );\n if (windowIndex === -1) return false;\n const { onClosePopoutWidget } = usePopoutsStore.getState();\n onClosePopoutWidget.raiseEvent({ windowId: childWindowId });\n\n const childWindow = this.openChildWindows[windowIndex];\n this._openChildWindows.splice(windowIndex, 1);\n this._childWindowToUnregister.get(childWindowId)?.();\n this._childWindowToUnregister.delete(childWindowId);\n\n this.onChildWindowsChanged.raiseEvent();\n if (processWindowClose) {\n childWindow.window.close();\n } else {\n // call the following to convert popout to docked widget\n const frontStageDef = UiFramework.frontstages.activeFrontstageDef;\n frontStageDef?.dockWidgetContainerByContainerId(childWindowId);\n }\n return true;\n };\n\n private adjustWindowLocation(location: ChildWindowLocationProps) {\n // If no location is provided, child window will open in the center of the current window.\n if (location.top === 0 && location.left === 0) {\n location.left =\n window.outerWidth / 2 + window.screenX - location.width / 2;\n location.top =\n window.outerHeight / 2 + window.screenY - location.height / 2;\n }\n }\n\n /\n Open a new child window.\n * @param childWindowId Id to assign to the newly created window.\n * @param title Title to display on the window.\n * @param content ReactNode to be rendered in the window.\n * @param location Position and size information\n * @param useDefaultPopoutUrl use \"/iTwinPopup.html\" as the window Url, \"\" otherwise.\n * @returns true if the window is opened successfully.\n /\n public open(\n childWindowId: string,\n title: string,\n content: React.ReactNode,\n location: ChildWindowLocationProps,\n useDefaultPopoutUrl?: boolean\n ) {\n const childWindow = this.openWindow({\n childWindowId,\n title,\n content,\n location,\n useDefaultPopoutUrl: useDefaultPopoutUrl ?? false,\n });\n return !!childWindow;\n }\n\n /* Used internally to open child windows and popout widgets. */\n public openWindow({\n childWindowId,\n location,\n useDefaultPopoutUrl,\n content,\n title,\n tabId,\n }: OpenWindowArgs) {\n if (this.find(childWindowId)) return undefined;\n\n this.adjustWindowLocation(location);\n const url = useDefaultPopoutUrl ? \"/iTwinPopup.html\" : \"\";\n const childWindow = window.open(\n url,\n \"\",\n `width=${location.width},height=${location.height},left=${location.left},top=${location.top},menubar=no,resizable=yes,scrollbars=no,status=no,location=no`\n );\n if (!childWindow) return undefined;\n\n const onPageHide = () => {\n const frontStageDef = UiFramework.frontstages.activeFrontstageDef;\n if (!frontStageDef) return;\n frontStageDef.saveChildWindowSizeAndPosition(childWindowId, childWindow);\n\n // Trigger first so popout can be converted back to main window widget\n this.close(childWindowId, false);\n };\n childWindow.addEventListener(\"pagehide\", onPageHide);\n\n const onDOMContentLoaded = () => {\n this.renderChildWindowContents(\n childWindow,\n childWindowId,\n content,\n title,\n tabId\n );\n };\n if (url.length === 0) {\n addChildHTML(childWindow);\n onDOMContentLoaded();\n } else {\n childWindow.addEventListener(\"DOMContentLoaded\", onDOMContentLoaded);\n }\n\n const onUnload = () => {\n const frontStageDef = UiFramework.frontstages.activeFrontstageDef;\n if (frontStageDef) {\n this.close(childWindowId, true);\n }\n };\n window.addEventListener(\"unload\", onUnload);\n\n this._childWindowToUnregister.set(childWindowId, () => {\n childWindow.removeEventListener(\"pagehide\", onPageHide);\n childWindow.removeEventListener(\"DOMContentLoaded\", onDOMContentLoaded);\n window.removeEventListener(\"unload\", onUnload);\n });\n\n return childWindow;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalChildWindowManager.js","sourceRoot":"","sources":["../../../src/appui-react/childwindow/InternalChildWindowManager.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\n/** @packageDocumentation\n * @module ChildWindowManager\n /\n\nimport type as React from \"react\";\nimport { BeEvent } from \"@itwin/core-bentley\";\nimport { UiFramework } from \"../UiFramework.js\";\nimport type {\n ChildWindowLocationProps,\n FrameworkChildWindows,\n OpenChildWindowInfo,\n} from \"../framework/FrameworkChildWindows.js\";\nimport { usePopoutsStore } from \"../preview/reparent-popout-widgets/usePopoutsStore.js\";\nimport type { TabState } from \"../layout/state/TabState.js\";\n\nfunction addChildHTML(window: Window) {\n const doc = window.document;\n\n const meta = doc.createElement(\"meta\");\n meta.setAttribute(\"charset\", \"utf-8\");\n doc.head.appendChild(meta);\n\n const style = doc.createElement(\"style\");\n style.textContent = `\n html,\n body {\n height: 100%;\n width: 100%;\n margin: 0;\n overflow: hidden;\n }\n #root {\n height: 100%;\n }\n `;\n doc.head.appendChild(style);\n\n // Fixes a FF specific issue where document.baseURI is \"about:blank\"\n const opener: Window \| undefined = window.opener;\n const baseURI = opener?.document.baseURI;\n if (doc.baseURI === \"about:blank\" && baseURI) {\n const base = doc.createElement(\"base\");\n base.href = baseURI;\n doc.head.appendChild(base);\n }\n\n const noScript = doc.createElement(\"noscript\");\n noScript.textContent = \"You need to enable JavaScript to run this app.\";\n doc.body.appendChild(noScript);\n\n const root = doc.createElement(\"div\");\n root.id = \"root\";\n doc.body.appendChild(root);\n}\n\n/** @internal /\nexport interface InternalOpenChildWindowInfo extends OpenChildWindowInfo {\n content?: React.ReactNode;\n tabId?: TabState[\"id\"];\n}\n\ninterface OpenWindowArgs {\n childWindowId: string;\n title: string;\n content: React.ReactNode;\n location: ChildWindowLocationProps;\n useDefaultPopoutUrl: boolean;\n tabId?: TabState[\"id\"];\n}\n\n/* Supports opening a child browser window from the main application window. The child window is managed by the main application\n * and is running in the same security context. The application must deliver the html file iTwinPopup.html along side its index.html.\n * See also: [Child Window Manager]($docs/learning/ui/appui-react/ChildWindows.md)\n * @internal\n /\nexport class InternalChildWindowManager implements FrameworkChildWindows {\n private _openChildWindows: InternalOpenChildWindowInfo[] = [];\n private _childWindowToUnregister = new Map<\n InternalOpenChildWindowInfo[\"childWindowId\"],\n () => void\n >();\n\n public readonly onChildWindowsChanged = new BeEvent<() => void>();\n\n public get openChildWindows() {\n return this._openChildWindows;\n }\n\n /\n Returns the OpenChildWindowInfo for the related id.\n * @param childWindowId Id of the window to retrieve.\n * @returns undefined if not found.\n /\n public find(\n childWindowId: string \| undefined\n ): OpenChildWindowInfo \| undefined {\n if (undefined === childWindowId) return undefined;\n\n return this.openChildWindows.find(\n (openWindow) => openWindow.childWindowId === childWindowId\n );\n }\n\n /\n Return the childWindowId of the provided window.\n * @param contentWindow Window element to identify\n * @returns undefined if not found\n /\n public findId(contentWindow: Window \| undefined \| null): string \| undefined {\n if (!contentWindow) return undefined;\n\n const childWindow = this.openChildWindows.find(\n (openWindow) => openWindow.window === contentWindow\n );\n return childWindow?.childWindowId;\n }\n\n private renderChildWindowContents(\n childWindow: Window,\n childWindowId: string,\n content: React.ReactNode,\n title: string,\n tabId?: TabState[\"id\"]\n ) {\n childWindow.document.title = title;\n\n this._openChildWindows.push({\n childWindowId,\n window: childWindow,\n parentWindow: window,\n content,\n tabId,\n });\n this.onChildWindowsChanged.raiseEvent();\n }\n\n /* Close all child/pop-out windows. This typically is called when the frontstage is changed. /\n public closeAll() {\n this.openChildWindows.forEach((openChildWindow) =>\n openChildWindow.window.close()\n );\n this._childWindowToUnregister.forEach((unregister) => unregister());\n this._childWindowToUnregister.clear();\n this._openChildWindows = [];\n this.onChildWindowsChanged.raiseEvent();\n }\n\n /\n Close a specific child window.\n * @param childWindowId Id of the window to close.\n * @param processWindowClose should the `close` method be called on the closing window. (defaults to true).\n * @returns false if the window could not be found.\n /\n public close = (childWindowId: string, processWindowClose = true) => {\n const windowIndex = this.openChildWindows.findIndex(\n (openWindow) => openWindow.childWindowId === childWindowId\n );\n if (windowIndex === -1) return false;\n const { onClosePopoutWidget } = usePopoutsStore.getState();\n onClosePopoutWidget.raiseEvent({ windowId: childWindowId });\n\n const childWindow = this.openChildWindows[windowIndex];\n this._openChildWindows.splice(windowIndex, 1);\n this._childWindowToUnregister.get(childWindowId)?.();\n this._childWindowToUnregister.delete(childWindowId);\n\n this.onChildWindowsChanged.raiseEvent();\n if (processWindowClose) {\n childWindow.window.close();\n } else {\n // call the following to convert popout to docked widget\n const frontStageDef = UiFramework.frontstages.activeFrontstageDef;\n frontStageDef?.dockWidgetContainerByContainerId(childWindowId);\n }\n return true;\n };\n\n private adjustWindowLocation(location: ChildWindowLocationProps) {\n // If no location is provided, child window will open in the center of the current window.\n if (location.top === 0 && location.left === 0) {\n location.left =\n window.outerWidth / 2 + window.screenX - location.width / 2;\n location.top =\n window.outerHeight / 2 + window.screenY - location.height / 2;\n }\n }\n\n /\n Open a new child window.\n * @param childWindowId Id to assign to the newly created window.\n * @param title Title to display on the window.\n * @param content ReactNode to be rendered in the window.\n * @param location Position and size information\n * @param useDefaultPopoutUrl use \"/iTwinPopup.html\" as the window Url, \"\" otherwise.\n * @returns true if the window is opened successfully.\n /\n public open(\n childWindowId: string,\n title: string,\n content: React.ReactNode,\n location: ChildWindowLocationProps,\n useDefaultPopoutUrl?: boolean\n ) {\n const childWindow = this.openWindow({\n childWindowId,\n title,\n content,\n location,\n useDefaultPopoutUrl: useDefaultPopoutUrl ?? false,\n });\n return !!childWindow;\n }\n\n /* Used internally to open child windows and popout widgets. */\n public openWindow({\n childWindowId,\n location,\n useDefaultPopoutUrl,\n content,\n title,\n tabId,\n }: OpenWindowArgs) {\n if (this.find(childWindowId)) return undefined;\n\n this.adjustWindowLocation(location);\n const url = useDefaultPopoutUrl ? \"/iTwinPopup.html\" : \"\";\n const childWindow = window.open(\n url,\n \"\",\n `width=${location.width},height=${location.height},left=${location.left},top=${location.top},menubar=no,resizable=yes,scrollbars=no,status=no,location=no`\n );\n if (!childWindow) return undefined;\n\n const onPageHide = () => {\n const frontStageDef = UiFramework.frontstages.activeFrontstageDef;\n if (!frontStageDef) return;\n frontStageDef.saveChildWindowSizeAndPosition(childWindowId, childWindow);\n\n // Trigger first so popout can be converted back to main window widget\n this.close(childWindowId, false);\n };\n childWindow.addEventListener(\"pagehide\", onPageHide);\n\n const onDOMContentLoaded = () => {\n this.renderChildWindowContents(\n childWindow,\n childWindowId,\n content,\n title,\n tabId\n );\n };\n if (url.length === 0) {\n addChildHTML(childWindow);\n onDOMContentLoaded();\n } else {\n childWindow.addEventListener(\"DOMContentLoaded\", onDOMContentLoaded);\n }\n\n const onUnload = () => {\n const frontStageDef = UiFramework.frontstages.activeFrontstageDef;\n if (frontStageDef) {\n this.close(childWindowId, true);\n }\n };\n window.addEventListener(\"unload\", onUnload);\n\n this._childWindowToUnregister.set(childWindowId, () => {\n childWindow.removeEventListener(\"pagehide\", onPageHide);\n childWindow.removeEventListener(\"DOMContentLoaded\", onDOMContentLoaded);\n window.removeEventListener(\"unload\", onUnload);\n });\n\n return childWindow;\n }\n}\n"]}

package/lib/appui-react/layout/widget/NavigationArea.d.ts CHANGED Viewed

@@ -22,8 +22,7 @@ export interface NavigationAreaProps extends CommonProps, NoChildrenProps {
     /** Handler for mouse leave */
     onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
-/** NavigationArea widget is used in NavigationArea (Zone 1) and Navigation (Zone 3???) zones of 9-Zone UI.
- * @note Should be placed in [[Zone]] component.
+/** A component that renders toolbars in the top right corner of standard layout.
  * @internal
  */
 export declare function NavigationArea(props: NavigationAreaProps): React.JSX.Element;

package/lib/appui-react/layout/widget/NavigationArea.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationArea.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/NavigationArea.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEtE;;GAEG;AAEH,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,eAAe;IACvE;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,wCAAwC;IACxC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED~~;;;GAGG~~;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,~~qBA6BxD~~"}
1	+ {"version":3,"file":"NavigationArea.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/NavigationArea.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEtE;;GAEG;AAEH,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,eAAe;IACvE;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,wCAAwC;IACxC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAgCxD"}

package/lib/appui-react/layout/widget/NavigationArea.js CHANGED Viewed

@@ -8,8 +8,7 @@
 import "./NavigationArea.scss";
 import classnames from "classnames";
 import * as React from "react";
-/** NavigationArea widget is used in NavigationArea (Zone 1) and Navigation (Zone 3???) zones of 9-Zone UI.
- * @note Should be placed in [[Zone]] component.
+/** A component that renders toolbars in the top right corner of standard layout.
  * @internal
  */
 export function NavigationArea(props) {
@@ -17,6 +16,6 @@ export function NavigationArea(props) {
     return (React.createElement("div", { className: className, style: props.style },
         React.createElement("div", { className: "nz-horizontal-toolbar-container", onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, props.horizontalToolbar),
         props.navigationAid && (React.createElement("div", { className: "nz-navigation-aid-container", onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, props.navigationAid)),
-        React.createElement("div", { className: "nz-vertical-toolbar-container", onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, props.verticalToolbar)));
+        React.createElement("div", { className: classnames("nz-vertical-toolbar-container", !props.navigationAid && "nz-span"), onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, props.verticalToolbar)));
 }
 //# sourceMappingURL=NavigationArea.js.map

package/lib/appui-react/layout/widget/NavigationArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationArea.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/NavigationArea.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B~~;;;GAGG~~;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,6BACE,SAAS,EAAC,iCAAiC,EAC3C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,iBAAiB,CACpB;QACL,KAAK,CAAC,aAAa,IAAI,CACtB,6BACE,SAAS,EAAC,6BAA6B,EACvC,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,aAAa,CAChB,CACP;QACD,6BACE,SAAS,~~EAAC~~,+BAA+B,~~EACzC~~,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,eAAe,CAClB,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Widget\n /\n\nimport \"./NavigationArea.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\n\n/** Properties of [[NavigationArea]] component.\n * @internal\n /\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface NavigationAreaProps extends CommonProps, NoChildrenProps {\n /\n Button displayed between horizontal and vertical toolbars.\n * I.e. [[AppButton]] in NavigationArea zone or navigation aid control in Navigation zone.\n /\n navigationAid?: React.ReactNode;\n /* Horizontal toolbar. See [[Toolbar]] /\n horizontalToolbar?: React.ReactNode;\n /* Vertical toolbar. See [[Toolbar]] /\n verticalToolbar?: React.ReactNode;\n /* Handler for mouse enter /\n onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Handler for mouse leave /\n onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/* ~~NavigationArea~~ ~~widget~~ is ~~used~~ in ~~NavigationArea~~ ~~(Zone~~ 1) ~~and~~ ~~Navigation (Zone 3???) zones~~ of ~~9-Zone~~ UI.\n * @~~note Should be placed in [[Zone]] component.\n * @~~internal\n */\nexport function NavigationArea(props: NavigationAreaProps) {\n const className = classnames(\"nz-widget-navigationArea\", props.className);\n return (\n <div className={className} style={props.style}>\n <div\n className=\"nz-horizontal-toolbar-container\"\n onMouseEnter={props.onMouseEnter}\n onMouseLeave={props.onMouseLeave}\n >\n {props.horizontalToolbar}\n </div>\n {props.navigationAid && (\n <div\n className=\"nz-navigation-aid-container\"\n onMouseEnter={props.onMouseEnter}\n onMouseLeave={props.onMouseLeave}\n >\n {props.navigationAid}\n </div>\n )}\n <div\n className=\"nz-vertical-toolbar-container\"\n onMouseEnter={props.onMouseEnter}\n onMouseLeave={props.onMouseLeave}\n >\n {props.verticalToolbar}\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"NavigationArea.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/NavigationArea.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,6BACE,SAAS,EAAC,iCAAiC,EAC3C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,iBAAiB,CACpB;QACL,KAAK,CAAC,aAAa,IAAI,CACtB,6BACE,SAAS,EAAC,6BAA6B,EACvC,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,aAAa,CAChB,CACP;QACD,6BACE,SAAS,EAAE,UAAU,CACnB,+BAA+B,EAC/B,CAAC,KAAK,CAAC,aAAa,IAAI,SAAS,CAClC,EACD,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,YAAY,EAAE,KAAK,CAAC,YAAY,IAE/B,KAAK,CAAC,eAAe,CAClB,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Widget\n /\n\nimport \"./NavigationArea.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\n\n/** Properties of [[NavigationArea]] component.\n * @internal\n /\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface NavigationAreaProps extends CommonProps, NoChildrenProps {\n /\n Button displayed between horizontal and vertical toolbars.\n * I.e. [[AppButton]] in NavigationArea zone or navigation aid control in Navigation zone.\n /\n navigationAid?: React.ReactNode;\n /* Horizontal toolbar. See [[Toolbar]] /\n horizontalToolbar?: React.ReactNode;\n /* Vertical toolbar. See [[Toolbar]] /\n verticalToolbar?: React.ReactNode;\n /* Handler for mouse enter /\n onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Handler for mouse leave /\n onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/* A component that renders toolbars in the top right corner of standard layout.\n * @internal\n */\nexport function NavigationArea(props: NavigationAreaProps) {\n const className = classnames(\"nz-widget-navigationArea\", props.className);\n return (\n <div className={className} style={props.style}>\n <div\n className=\"nz-horizontal-toolbar-container\"\n onMouseEnter={props.onMouseEnter}\n onMouseLeave={props.onMouseLeave}\n >\n {props.horizontalToolbar}\n </div>\n {props.navigationAid && (\n <div\n className=\"nz-navigation-aid-container\"\n onMouseEnter={props.onMouseEnter}\n onMouseLeave={props.onMouseLeave}\n >\n {props.navigationAid}\n </div>\n )}\n <div\n className={classnames(\n \"nz-vertical-toolbar-container\",\n !props.navigationAid && \"nz-span\"\n )}\n onMouseEnter={props.onMouseEnter}\n onMouseLeave={props.onMouseLeave}\n >\n {props.verticalToolbar}\n </div>\n </div>\n );\n}\n"]}

package/lib/appui-react/layout/widget/NavigationArea.scss CHANGED Viewed

@@ -12,10 +12,12 @@
   box-sizing: border-box;
   height: 100%;
   grid-gap: 6px;
-  grid-template-columns: 1fr minmax($mls-navigation-aid-width, auto);
-  grid-template-rows: minmax($mls-navigation-aid-width, auto) 1fr;
+  grid-template-areas:
+    "htools button"
+    ". vtools";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
   justify-items: end;
-  grid-template-areas: "htools button" ". vtools";
   &.nz-hidden {
     opacity: 0;
@@ -23,24 +25,34 @@
   }
   > .nz-navigation-aid-container {
+    grid-area: button;
+    min-width: $mls-navigation-aid-width;
+    min-height: $mls-navigation-aid-height;
     margin-bottom: 6px;
     pointer-events: auto;
-    grid-area: button;
     @include nz-widget-opacity;
   }
   > .nz-vertical-toolbar-container {
     grid-area: vtools;
     height: calc(100% - 60px);
     display: inline-flex;
     flex-direction: column;
     align-items: flex-end;
     @include nz-widget-opacity;
+    &.nz-span {
+      grid-row: button / vtools;
+    }
   }
   > .nz-horizontal-toolbar-container {
     grid-area: htools;
     width: 100%;
     display: flex;
     flex-direction: row;

package/lib/appui-react/layout/widget/ToolsArea.d.ts CHANGED Viewed

@@ -22,8 +22,7 @@ export interface ToolsAreaProps extends CommonProps, NoChildrenProps {
     /** Handler for mouse leave */
     onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
-/** ToolsArea widget is used in ToolsArea (top left) and Navigation (top right) zones of 9-Zone UI.
- * @note Should be placed in [[Zone]] component.
+/** A component that renders toolbars in the top left corner of standard layout.
  * @internal
  */
 export declare class ToolsArea extends React.PureComponent<ToolsAreaProps> {

package/lib/appui-react/layout/widget/ToolsArea.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolsArea.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/ToolsArea.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGtE;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW,EAAE,eAAe;IAClE;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,wCAAwC;IACxC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED~~;;;GAGG~~;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;IAChD,MAAM;~~CAgCvB~~"}
1	+ {"version":3,"file":"ToolsArea.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/ToolsArea.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGtE;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW,EAAE,eAAe;IAClE;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,wCAAwC;IACxC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;IAChD,MAAM;CAmCvB"}

package/lib/appui-react/layout/widget/ToolsArea.js CHANGED Viewed

@@ -8,8 +8,7 @@
 import "./ToolsArea.scss";
 import classnames from "classnames";
 import * as React from "react";
-/** ToolsArea widget is used in ToolsArea (top left) and Navigation (top right) zones of 9-Zone UI.
- * @note Should be placed in [[Zone]] component.
+/** A component that renders toolbars in the top left corner of standard layout.
  * @internal
  */
 export class ToolsArea extends React.PureComponent {
@@ -20,7 +19,7 @@ export class ToolsArea extends React.PureComponent {
         const className = classnames("nz-tools-widget", this.props.className);
         return (React.createElement("div", { className: className, style: this.props.style },
             React.createElement("div", { className: "nz-app-button", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, button),
-            React.createElement("div", { className: "nz-vertical-toolbar-container", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, this.props.verticalToolbar),
+            React.createElement("div", { className: classnames("nz-vertical-toolbar-container", !button && "nz-span"), onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, this.props.verticalToolbar),
             React.createElement("div", { className: "nz-horizontal-toolbar-container", onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, this.props.horizontalToolbar)));
     }
 }

package/lib/appui-react/layout/widget/ToolsArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolsArea.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/ToolsArea.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B~~;;;GAGG~~;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAChD,MAAM;QACpB,MAAM,MAAM,GAAG,KAAK,CAAC,cAAc,CAAqB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACxE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YACxD,CAAC,CAAC,IAAI,CAAC,CAAC,yBAAyB;QACnC,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAEtE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAChD,6BACE,SAAS,EAAC,eAAe,EACzB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,MAAM,CACH;YACN,6BACE,SAAS,~~EAAC~~,+BAA+B,~~EACzC~~,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,eAAe,CACvB;YACN,6BACE,SAAS,EAAC,iCAAiC,EAC3C,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CACzB,CACF,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Widget\n /\n\nimport \"./ToolsArea.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { ToolbarButtonProps } from \"./tools/button/Button.js\";\n\n/** Properties of [[ToolsArea]] component.\n * @internal\n /\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ToolsAreaProps extends CommonProps, NoChildrenProps {\n /\n Button displayed between horizontal and vertical toolbars.\n * I.e. [[AppButton]] in ToolsArea zone.\n /\n button?: React.ReactNode;\n /* Horizontal toolbar. See [[Toolbar]] /\n horizontalToolbar?: React.ReactNode;\n /* Vertical toolbar. See [[Toolbar]] /\n verticalToolbar?: React.ReactNode;\n /* Handler for mouse enter /\n onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Handler for mouse leave /\n onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/* ~~ToolsArea~~ ~~widget~~ is ~~used~~ in ~~ToolsArea~~ (top left) ~~and~~ ~~Navigation (top right) zones~~ of ~~9-Zone~~ UI.\n * @~~note Should be placed in [[Zone]] component.\n * @~~internal\n */\nexport class ToolsArea extends React.PureComponent<ToolsAreaProps> {\n public override render() {\n const button = React.isValidElement<ToolbarButtonProps>(this.props.button)\n ? React.cloneElement(this.props.button, { small: true })\n : null; // ensure button is small\n const className = classnames(\"nz-tools-widget\", this.props.className);\n\n return (\n <div className={className} style={this.props.style}>\n <div\n className=\"nz-app-button\"\n onMouseEnter={this.props.onMouseEnter}\n onMouseLeave={this.props.onMouseLeave}\n >\n {button}\n </div>\n <div\n className=\"nz-vertical-toolbar-container\"\n onMouseEnter={this.props.onMouseEnter}\n onMouseLeave={this.props.onMouseLeave}\n >\n {this.props.verticalToolbar}\n </div>\n <div\n className=\"nz-horizontal-toolbar-container\"\n onMouseEnter={this.props.onMouseEnter}\n onMouseLeave={this.props.onMouseLeave}\n >\n {this.props.horizontalToolbar}\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ToolsArea.js","sourceRoot":"","sources":["../../../../src/appui-react/layout/widget/ToolsArea.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK,CAAC,aAA6B;IAChD,MAAM;QACpB,MAAM,MAAM,GAAG,KAAK,CAAC,cAAc,CAAqB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACxE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;YACxD,CAAC,CAAC,IAAI,CAAC,CAAC,yBAAyB;QACnC,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAEtE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAChD,6BACE,SAAS,EAAC,eAAe,EACzB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,MAAM,CACH;YACN,6BACE,SAAS,EAAE,UAAU,CACnB,+BAA+B,EAC/B,CAAC,MAAM,IAAI,SAAS,CACrB,EACD,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,eAAe,CACvB;YACN,6BACE,SAAS,EAAC,iCAAiC,EAC3C,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IAEpC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CACzB,CACF,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Widget\n /\n\nimport \"./ToolsArea.scss\";\nimport classnames from \"classnames\";\nimport as React from \"react\";\nimport type { CommonProps, NoChildrenProps } from \"@itwin/core-react\";\nimport type { ToolbarButtonProps } from \"./tools/button/Button.js\";\n\n/** Properties of [[ToolsArea]] component.\n * @internal\n /\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ToolsAreaProps extends CommonProps, NoChildrenProps {\n /\n Button displayed between horizontal and vertical toolbars.\n * I.e. [[AppButton]] in ToolsArea zone.\n /\n button?: React.ReactNode;\n /* Horizontal toolbar. See [[Toolbar]] /\n horizontalToolbar?: React.ReactNode;\n /* Vertical toolbar. See [[Toolbar]] /\n verticalToolbar?: React.ReactNode;\n /* Handler for mouse enter /\n onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /* Handler for mouse leave /\n onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/* A component that renders toolbars in the top left corner of standard layout.\n * @internal\n */\nexport class ToolsArea extends React.PureComponent<ToolsAreaProps> {\n public override render() {\n const button = React.isValidElement<ToolbarButtonProps>(this.props.button)\n ? React.cloneElement(this.props.button, { small: true })\n : null; // ensure button is small\n const className = classnames(\"nz-tools-widget\", this.props.className);\n\n return (\n <div className={className} style={this.props.style}>\n <div\n className=\"nz-app-button\"\n onMouseEnter={this.props.onMouseEnter}\n onMouseLeave={this.props.onMouseLeave}\n >\n {button}\n </div>\n <div\n className={classnames(\n \"nz-vertical-toolbar-container\",\n !button && \"nz-span\"\n )}\n onMouseEnter={this.props.onMouseEnter}\n onMouseLeave={this.props.onMouseLeave}\n >\n {this.props.verticalToolbar}\n </div>\n <div\n className=\"nz-horizontal-toolbar-container\"\n onMouseEnter={this.props.onMouseEnter}\n onMouseLeave={this.props.onMouseLeave}\n >\n {this.props.horizontalToolbar}\n </div>\n </div>\n );\n }\n}\n"]}

package/lib/appui-react/layout/widget/ToolsArea.scss CHANGED Viewed

@@ -13,9 +13,11 @@
   display: grid;
   grid-gap: 6px;
-  grid-template:
-    "appButton htools" auto
-    "vtools ." 1fr / auto 1fr;
+  grid-template-areas:
+    "button htools"
+    "vtools .";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
   align-items: start;
   justify-items: start;
@@ -25,7 +27,7 @@
   }
   > .nz-app-button {
-    grid-area: appButton;
+    grid-area: button;
     pointer-events: auto;
     @include nz-widget-opacity;
@@ -38,6 +40,10 @@
     display: inline-flex;
     flex-direction: column;
     @include nz-widget-opacity;
+    &.nz-span {
+      grid-row: button / vtools;
+    }
   }
   > .nz-horizontal-toolbar-container {

package/lib/cjs/appui-react/layout/widget/NavigationArea.scss CHANGED Viewed

@@ -12,10 +12,12 @@
   box-sizing: border-box;
   height: 100%;
   grid-gap: 6px;
-  grid-template-columns: 1fr minmax($mls-navigation-aid-width, auto);
-  grid-template-rows: minmax($mls-navigation-aid-width, auto) 1fr;
+  grid-template-areas:
+    "htools button"
+    ". vtools";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
   justify-items: end;
-  grid-template-areas: "htools button" ". vtools";
   &.nz-hidden {
     opacity: 0;
@@ -23,24 +25,34 @@
   }
   > .nz-navigation-aid-container {
+    grid-area: button;
+    min-width: $mls-navigation-aid-width;
+    min-height: $mls-navigation-aid-height;
     margin-bottom: 6px;
     pointer-events: auto;
-    grid-area: button;
     @include nz-widget-opacity;
   }
   > .nz-vertical-toolbar-container {
     grid-area: vtools;
     height: calc(100% - 60px);
     display: inline-flex;
     flex-direction: column;
     align-items: flex-end;
     @include nz-widget-opacity;
+    &.nz-span {
+      grid-row: button / vtools;
+    }
   }
   > .nz-horizontal-toolbar-container {
     grid-area: htools;
     width: 100%;
     display: flex;
     flex-direction: row;

package/lib/cjs/appui-react/layout/widget/ToolsArea.scss CHANGED Viewed

@@ -13,9 +13,11 @@
   display: grid;
   grid-gap: 6px;
-  grid-template:
-    "appButton htools" auto
-    "vtools ." 1fr / auto 1fr;
+  grid-template-areas:
+    "button htools"
+    "vtools .";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
   align-items: start;
   justify-items: start;
@@ -25,7 +27,7 @@
   }
   > .nz-app-button {
-    grid-area: appButton;
+    grid-area: button;
     pointer-events: auto;
     @include nz-widget-opacity;
@@ -38,6 +40,10 @@
     display: inline-flex;
     flex-direction: column;
     @include nz-widget-opacity;
+    &.nz-span {
+      grid-row: button / vtools;
+    }
   }
   > .nz-horizontal-toolbar-container {

package/lib/esm/appui-react/layout/widget/NavigationArea.scss CHANGED Viewed

@@ -12,10 +12,12 @@
   box-sizing: border-box;
   height: 100%;
   grid-gap: 6px;
-  grid-template-columns: 1fr minmax($mls-navigation-aid-width, auto);
-  grid-template-rows: minmax($mls-navigation-aid-width, auto) 1fr;
+  grid-template-areas:
+    "htools button"
+    ". vtools";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
   justify-items: end;
-  grid-template-areas: "htools button" ". vtools";
   &.nz-hidden {
     opacity: 0;
@@ -23,24 +25,34 @@
   }
   > .nz-navigation-aid-container {
+    grid-area: button;
+    min-width: $mls-navigation-aid-width;
+    min-height: $mls-navigation-aid-height;
     margin-bottom: 6px;
     pointer-events: auto;
-    grid-area: button;
     @include nz-widget-opacity;
   }
   > .nz-vertical-toolbar-container {
     grid-area: vtools;
     height: calc(100% - 60px);
     display: inline-flex;
     flex-direction: column;
     align-items: flex-end;
     @include nz-widget-opacity;
+    &.nz-span {
+      grid-row: button / vtools;
+    }
   }
   > .nz-horizontal-toolbar-container {
     grid-area: htools;
     width: 100%;
     display: flex;
     flex-direction: row;

package/lib/esm/appui-react/layout/widget/ToolsArea.scss CHANGED Viewed

@@ -13,9 +13,11 @@
   display: grid;
   grid-gap: 6px;
-  grid-template:
-    "appButton htools" auto
-    "vtools ." 1fr / auto 1fr;
+  grid-template-areas:
+    "button htools"
+    "vtools .";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
   align-items: start;
   justify-items: start;
@@ -25,7 +27,7 @@
   }
   > .nz-app-button {
-    grid-area: appButton;
+    grid-area: button;
     pointer-events: auto;
     @include nz-widget-opacity;
@@ -38,6 +40,10 @@
     display: inline-flex;
     flex-direction: column;
     @include nz-widget-opacity;
+    &.nz-span {
+      grid-row: button / vtools;
+    }
   }
   > .nz-horizontal-toolbar-container {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -35,14 +35,14 @@
   },
   "peerDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/components-react": "^5.3.0",
+    "@itwin/components-react": "^5.3.1",
     "@itwin/core-bentley": "^4.0.0",
     "@itwin/core-common": "^4.0.0",
     "@itwin/core-frontend": "^4.0.0",
     "@itwin/core-geometry": "^4.0.0",
     "@itwin/core-quantity": "^4.0.0",
-    "@itwin/core-react": "^5.3.0",
-    "@itwin/imodel-components-react": "^5.3.0",
+    "@itwin/core-react": "^5.3.1",
+    "@itwin/imodel-components-react": "^5.3.1",
     "@itwin/itwinui-react": "^3.15.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -92,9 +92,9 @@
     "typescript": "~5.6.2",
     "upath": "^2.0.1",
     "vitest": "^3.0.6",
-    "@itwin/components-react": "5.3.0",
-    "@itwin/imodel-components-react": "5.3.0",
-    "@itwin/core-react": "5.3.0"
+    "@itwin/components-react": "5.3.1",
+    "@itwin/core-react": "5.3.1",
+    "@itwin/imodel-components-react": "5.3.1"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",