@itwin/appui-react 5.3.1 → 5.4.0

package/lib/appui-react/cursor/cursormenu/CursorMenu.js

@@ -15,66 +15,45 @@ import { Logger } from "@itwin/core-bentley";
 /** Popup Menu to show at cursor typically used by tools to provide a right-click context menu.
  * @alpha
  */
-export class CursorPopupMenu extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._isMounted = false; // used to ensure _handleSyncUiEvent callback is not processed after componentWillUnmount is called
-        this.state = {
-            menuX: 0,
-            menuY: 0,
-            menuVisible: false,
-            items: undefined,
-        };
-        this._handleSyncUiEvent = (args) => {
-            if (!this._isMounted)
-                return;
-            if (SyncUiEventDispatcher.hasEventOfInterest(args.eventIds, [
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+export function CursorPopupMenu(props) {
+    const windowIdRef = React.useRef();
+    const [opened, setOpened] = React.useState(false);
+    const [x, setX] = React.useState(0);
+    const [y, setY] = React.useState(0);
+    const [items, setItems] = React.useState(undefined);
+    React.useEffect(() => {
+        return SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {
+            if (!SyncUiEventDispatcher.hasEventOfInterest(args.eventIds, [
                 // eslint-disable-next-line @typescript-eslint/no-deprecated
                 SessionStateActionId.UpdateCursorMenu,
-            ])) {
-                const menuData = UiFramework.getCursorMenuData();
-                if (menuData && this._hostChildWindowId === menuData.childWindowId) {
-                    this.setState({
-                        menuVisible: menuData.items && menuData.items.length > 0,
-                        items: menuData.items,
-                        menuX: menuData.position.x,
-                        menuY: menuData.position.y,
-                    });
-                }
-                else {
-                    this.setState({ menuVisible: false, items: undefined });
-                }
+            ]))
+                return;
+            const menuData = UiFramework.getCursorMenuData();
+            const windowId = windowIdRef.current;
+            if (!menuData || windowId !== menuData.childWindowId) {
+                setOpened(false);
+                setItems(undefined);
+                return;
             }
-        };
-        this._handleRefSet = (popupDiv) => {
-            const parentWindow = popupDiv?.ownerDocument.defaultView ?? undefined;
-            // if the window is not a pop out set to undefined
-            this._hostChildWindowId = UiFramework.childWindows.findId(parentWindow);
-            Logger.logInfo(UiFramework.loggerCategory("UiFramework"), `Cursor Menu for ${this._hostChildWindowId ?? "main"} window`);
-        };
-        this._hideContextMenu = () => {
-            this.setState({ menuVisible: false });
-        };
-        this._itemPicked = () => {
-            this._hideContextMenu();
-        };
-    }
-    componentDidMount() {
-        this._isMounted = true;
-        SyncUiEventDispatcher.onSyncUiEvent.addListener(this._handleSyncUiEvent);
-    }
-    componentWillUnmount() {
-        this._isMounted = false;
-        SyncUiEventDispatcher.onSyncUiEvent.removeListener(this._handleSyncUiEvent);
-    }
-    render() {
-        const { menuX, menuY, items, menuVisible } = this.state;
-        const onClose = this._hideContextMenu;
-        return (React.createElement("div", { className: "uifw-cursor-menu-container-div", ref: this._handleRefSet }, items && items.length > 0 && menuVisible && (
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        React.createElement(GlobalContextMenu, { className: this.props.className, style: this.props.style, identifier: "cursor-popup-menu", x: menuX, y: menuY, opened: menuVisible, onEsc: onClose, onOutsideClick: onClose, edgeLimit: false, autoflip: true }, MenuItemHelpers.createMenuItemNodes(
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        MenuItemHelpers.createMenuItems(items, this._itemPicked))))));
-    }
+            setOpened(menuData.items && menuData.items.length > 0);
+            setItems(menuData.items);
+            setX(menuData.position.x);
+            setY(menuData.position.y);
+        });
+    }, []);
+    const onClose = () => {
+        setOpened(false);
+    };
+    return (React.createElement("div", { className: "uifw-cursor-menu-container-div", ref: (el) => {
+            const parentWindow = el?.ownerDocument.defaultView ?? undefined;
+            const windowId = UiFramework.childWindows.findId(parentWindow);
+            windowIdRef.current = windowId;
+            Logger.logInfo(UiFramework.loggerCategory("UiFramework"), `Cursor Menu for ${windowId ?? "main"} window`);
+        } }, items && items.length > 0 && opened && (
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    React.createElement(GlobalContextMenu, { className: props.className, style: props.style, identifier: "cursor-popup-menu", x: x, y: y, opened: opened, onEsc: onClose, onOutsideClick: onClose, edgeLimit: false, autoflip: true }, MenuItemHelpers.createMenuItemNodes(
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    MenuItemHelpers.createMenuItems(items, onClose))))));
 }
 //# sourceMappingURL=CursorMenu.js.map

package/lib/appui-react/cursor/cursormenu/CursorMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CursorMenu.js","sourceRoot":"","sources":["../../../../src/appui-react/cursor/cursormenu/CursorMenu.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC,CAAC,kBAAkB;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAY7C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,aAG1C;IAHD;;QAIU,eAAU,GAAG,KAAK,CAAC,CAAC,mGAAmG;QAGtG,UAAK,GAAyB;YACrD,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,CAAC;YACR,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,SAAS;SACjB,CAAC;QAEM,uBAAkB,GAEtB,CAAC,IAAI,EAAE,EAAE;YACX,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,OAAO;YAE7B,IACE,qBAAqB,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACtD,4DAA4D;gBAC5D,oBAAoB,CAAC,gBAAgB;aACtC,CAAC,EACF,CAAC;gBACD,MAAM,QAAQ,GAAG,WAAW,CAAC,iBAAiB,EAAE,CAAC;gBACjD,IAAI,QAAQ,IAAI,IAAI,CAAC,kBAAkB,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;oBACnE,IAAI,CAAC,QAAQ,CAAC;wBACZ,WAAW,EAAE,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;wBACxD,KAAK,EAAE,QAAQ,CAAC,KAA8B;wBAC9C,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;wBAC1B,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;qBAC3B,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;gBAC1D,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAYM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;YACvD,MAAM,YAAY,GAAG,QAAQ,EAAE,aAAa,CAAC,WAAW,IAAI,SAAS,CAAC;YACtE,kDAAkD;YAClD,IAAI,CAAC,kBAAkB,GAAG,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YACxE,MAAM,CAAC,OAAO,CACZ,WAAW,CAAC,cAAc,CAAC,aAAa,CAAC,EACzC,mBAAmB,IAAI,CAAC,kBAAkB,IAAI,MAAM,SAAS,CAC9D,CAAC;QACJ,CAAC,CAAC;QAiCM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC;IA1DiB,iBAAiB;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,qBAAqB,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC3E,CAAC;IAEe,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,qBAAqB,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9E,CAAC;IAYe,MAAM;QACpB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxD,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAEtC,OAAO,CACL,6BAAK,SAAS,EAAC,gCAAgC,EAAC,GAAG,EAAE,IAAI,CAAC,aAAa,IACpE,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,IAAI;QAC3C,4DAA4D;QAC5D,oBAAC,iBAAiB,IAChB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,UAAU,EAAC,mBAAmB,EAC9B,CAAC,EAAE,KAAK,EACR,CAAC,EAAE,KAAK,EACR,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,OAAO,EACd,cAAc,EAAE,OAAO,EACvB,SAAS,EAAE,KAAK,EAChB,QAAQ,EAAE,IAAI,IAGb,eAAe,CAAC,mBAAmB;QAClC,4DAA4D;QAC5D,eAAe,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CACzD,CACiB,CACrB,CACG,CACP,CAAC;IACJ,CAAC;CASF","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 Cursor\n */\n\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { ListenerType } from \"@itwin/core-react/internal\";\nimport { GlobalContextMenu } from \"@itwin/core-react\"; // ContextSubMenu,\nimport { SessionStateActionId } from \"../../redux/SessionState.js\";\nimport type { CursorMenuItemProps } from \"../../shared/MenuItem.js\";\nimport { MenuItemHelpers } from \"../../shared/MenuItem.js\";\nimport { SyncUiEventDispatcher } from \"../../syncui/SyncUiEventDispatcher.js\";\nimport { UiFramework } from \"../../UiFramework.js\";\nimport { Logger } from \"@itwin/core-bentley\";\n\n/** State for [[CursorPopupMenu]] component\n * @alpha\n */\ninterface CursorPopupMenuState {\n  menuX: number;\n  menuY: number;\n  menuVisible: boolean;\n  items?: CursorMenuItemProps[];\n}\n\n/** Popup Menu to show at cursor typically used by tools to provide a right-click context menu.\n * @alpha\n */\nexport class CursorPopupMenu extends React.PureComponent<\n  CommonProps, // eslint-disable-line @typescript-eslint/no-deprecated\n  CursorPopupMenuState\n> {\n  private _isMounted = false; // used to ensure _handleSyncUiEvent callback is not processed after componentWillUnmount is called\n  private _hostChildWindowId?: string;\n\n  public override readonly state: CursorPopupMenuState = {\n    menuX: 0,\n    menuY: 0,\n    menuVisible: false,\n    items: undefined,\n  };\n\n  private _handleSyncUiEvent: ListenerType<\n    typeof SyncUiEventDispatcher.onSyncUiEvent\n  > = (args) => {\n    if (!this._isMounted) return;\n\n    if (\n      SyncUiEventDispatcher.hasEventOfInterest(args.eventIds, [\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        SessionStateActionId.UpdateCursorMenu,\n      ])\n    ) {\n      const menuData = UiFramework.getCursorMenuData();\n      if (menuData && this._hostChildWindowId === menuData.childWindowId) {\n        this.setState({\n          menuVisible: menuData.items && menuData.items.length > 0,\n          items: menuData.items as CursorMenuItemProps[],\n          menuX: menuData.position.x,\n          menuY: menuData.position.y,\n        });\n      } else {\n        this.setState({ menuVisible: false, items: undefined });\n      }\n    }\n  };\n\n  public override componentDidMount() {\n    this._isMounted = true;\n    SyncUiEventDispatcher.onSyncUiEvent.addListener(this._handleSyncUiEvent);\n  }\n\n  public override componentWillUnmount() {\n    this._isMounted = false;\n    SyncUiEventDispatcher.onSyncUiEvent.removeListener(this._handleSyncUiEvent);\n  }\n\n  private _handleRefSet = (popupDiv: HTMLElement | null) => {\n    const parentWindow = popupDiv?.ownerDocument.defaultView ?? undefined;\n    // if the window is not a pop out set to undefined\n    this._hostChildWindowId = UiFramework.childWindows.findId(parentWindow);\n    Logger.logInfo(\n      UiFramework.loggerCategory(\"UiFramework\"),\n      `Cursor Menu for ${this._hostChildWindowId ?? \"main\"} window`\n    );\n  };\n\n  public override render(): React.ReactNode {\n    const { menuX, menuY, items, menuVisible } = this.state;\n    const onClose = this._hideContextMenu;\n\n    return (\n      <div className=\"uifw-cursor-menu-container-div\" ref={this._handleRefSet}>\n        {items && items.length > 0 && menuVisible && (\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          <GlobalContextMenu\n            className={this.props.className}\n            style={this.props.style}\n            identifier=\"cursor-popup-menu\"\n            x={menuX}\n            y={menuY}\n            opened={menuVisible}\n            onEsc={onClose}\n            onOutsideClick={onClose}\n            edgeLimit={false}\n            autoflip={true}\n          >\n            {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n            {MenuItemHelpers.createMenuItemNodes(\n              // eslint-disable-next-line @typescript-eslint/no-deprecated\n              MenuItemHelpers.createMenuItems(items, this._itemPicked)\n            )}\n          </GlobalContextMenu>\n        )}\n      </div>\n    );\n  }\n\n  private _hideContextMenu = () => {\n    this.setState({ menuVisible: false });\n  };\n\n  private _itemPicked = (): void => {\n    this._hideContextMenu();\n  };\n}\n"]}
+{"version":3,"file":"CursorMenu.js","sourceRoot":"","sources":["../../../../src/appui-react/cursor/cursormenu/CursorMenu.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/** @packageDocumentation\n * @module Cursor\n */\n\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { GlobalContextMenu } from \"@itwin/core-react\"; // ContextSubMenu,\nimport { SessionStateActionId } from \"../../redux/SessionState.js\";\nimport type { CursorMenuItemProps } from \"../../shared/MenuItem.js\";\nimport { MenuItemHelpers } from \"../../shared/MenuItem.js\";\nimport { SyncUiEventDispatcher } from \"../../syncui/SyncUiEventDispatcher.js\";\nimport { UiFramework } from \"../../UiFramework.js\";\nimport { Logger } from \"@itwin/core-bentley\";\n\n/** Popup Menu to show at cursor typically used by tools to provide a right-click context menu.\n * @alpha\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function CursorPopupMenu(props: CommonProps) {\n  const windowIdRef = React.useRef<string | undefined>();\n  const [opened, setOpened] = React.useState(false);\n  const [x, setX] = React.useState(0);\n  const [y, setY] = React.useState(0);\n  const [items, setItems] = React.useState<CursorMenuItemProps[] | undefined>(\n    undefined\n  );\n\n  React.useEffect(() => {\n    return SyncUiEventDispatcher.onSyncUiEvent.addListener((args) => {\n      if (\n        !SyncUiEventDispatcher.hasEventOfInterest(args.eventIds, [\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          SessionStateActionId.UpdateCursorMenu,\n        ])\n      )\n        return;\n\n      const menuData = UiFramework.getCursorMenuData();\n      const windowId = windowIdRef.current;\n      if (!menuData || windowId !== menuData.childWindowId) {\n        setOpened(false);\n        setItems(undefined);\n        return;\n      }\n\n      setOpened(menuData.items && menuData.items.length > 0);\n      setItems(menuData.items);\n      setX(menuData.position.x);\n      setY(menuData.position.y);\n    });\n  }, []);\n\n  const onClose = () => {\n    setOpened(false);\n  };\n\n  return (\n    <div\n      className=\"uifw-cursor-menu-container-div\"\n      ref={(el) => {\n        const parentWindow = el?.ownerDocument.defaultView ?? undefined;\n        const windowId = UiFramework.childWindows.findId(parentWindow);\n        windowIdRef.current = windowId;\n        Logger.logInfo(\n          UiFramework.loggerCategory(\"UiFramework\"),\n          `Cursor Menu for ${windowId ?? \"main\"} window`\n        );\n      }}\n    >\n      {items && items.length > 0 && opened && (\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        <GlobalContextMenu\n          className={props.className}\n          style={props.style}\n          identifier=\"cursor-popup-menu\"\n          x={x}\n          y={y}\n          opened={opened}\n          onEsc={onClose}\n          onOutsideClick={onClose}\n          edgeLimit={false}\n          autoflip={true}\n        >\n          {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n          {MenuItemHelpers.createMenuItemNodes(\n            // eslint-disable-next-line @typescript-eslint/no-deprecated\n            MenuItemHelpers.createMenuItems(items, onClose)\n          )}\n        </GlobalContextMenu>\n      )}\n    </div>\n  );\n}\n"]}

package/lib/appui-react/cursor/cursorpopup/CursorPopup.scss

@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 @use "../../variables" as *;
 
 .uifw-cursorpopup {
@@ -18,6 +19,8 @@
   width: fit-content;
   transition: opacity 500ms;
 
+  @include uicore-z-index(tooltip);
+
   > .uifw-cursorpopup-title {
     min-height: $uifw-popup-title-bar-min-height;
     opacity: $uifw-popup-opacity;

package/lib/appui-react/cursor/cursorpopup/CursorPopupManager.d.ts

@@ -21,7 +21,9 @@ export interface CursorPopupOptions {
     /** Draw shadow */
     shadow?: boolean;
 }
-/** Information maintained by CursorPopupManager about a CursorPopup. */
+/** Information maintained by CursorPopupManager about a CursorPopup.
+ * @public
+ */
 interface CursorPopupInfo {
     id: string;
     content: React.ReactNode;
@@ -29,6 +31,7 @@ interface CursorPopupInfo {
     offset: Point;
     priority: number;
     options?: CursorPopupOptions;
+    targetDocument?: Document;
     renderRelativePosition: RelativePosition;
     popupSize?: SizeProps;
     cancelFadeOut?: () => void;
@@ -53,17 +56,16 @@ export declare class CursorPopupManager {
     static clearPopups(): void;
     static get popups(): CursorPopupInfo[];
     static get popupCount(): number;
-    private static _emitPopupsChangedEvent;
     private static pushPopup;
     /** Called to open popup with a new set of properties
      */
-    static open(id: string, content: React.ReactNode, pt: XAndY, offset: XAndY, relativePosition: RelativePosition, priority?: number, options?: CursorPopupOptions): void;
+    static open(id: string, content: React.ReactNode, pt: XAndY, offset: XAndY, relativePosition: RelativePosition, priority?: number, options?: CursorPopupOptions, targetDocument?: Document): void;
     /** Called to update popup with a new set of properties
      */
-    static update(id: string, content: React.ReactNode, pt: XAndY, offset: XAndY, relativePosition: RelativePosition, priority?: number): void;
+    static update(id: string, content: React.ReactNode, pt: XAndY, offset: XAndY, relativePosition: RelativePosition, priority?: number, targetDocument?: Document): void;
     /** Called to move the open popup to new location
      */
-    static updatePosition(pt: XAndY): void;
+    static updatePosition(pt: XAndY, targetDocument?: Document): void;
     /** Called when tool wants to close the popup
      */
     static close(id: string, apply: boolean, fadeOut?: boolean): void;
@@ -72,25 +74,9 @@ export declare class CursorPopupManager {
     private static validateRenderRelativePosition;
     private static autoFlip;
 }
-/** State for the [[CursorPopupRenderer]] React component */
-interface CursorPopupRendererState {
-    pt: Point;
-}
 /** CursorPopupRenderer React component.
  * @public
  */
-export declare class CursorPopupRenderer extends React.Component<any, CursorPopupRendererState> {
-    constructor(props: any);
-    render(): React.ReactNode;
-    private _handleSizeKnown;
-    private renderPositions;
-    private renderRelativePosition;
-    private getDimension;
-    private adjustOffset;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private _handlePopupChangedEvent;
-    private _handleCursorPopupUpdatePositionEvent;
-}
+export declare function CursorPopupRenderer(): React.JSX.Element | undefined;
 export {};
 //# sourceMappingURL=CursorPopupManager.d.ts.map

package/lib/appui-react/cursor/cursorpopup/CursorPopupManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CursorPopupManager.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/cursor/cursorpopup/CursorPopupManager.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CursorPopupManager.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/cursor/cursorpopup/CursorPopupManager.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAU,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAI1D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,MAAM,EAAE,KAAK,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAE1B,sBAAsB,EAAE,gBAAgB,CAAC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAC,OAAO,CAAmD;IAEzE,gBAAgB;IAChB,gBAAuB,gCAAgC;YACjD,KAAK;OACN;IACL,gBAAgB;IAChB,gBAAuB,yBAAyB;YAC1C,MAAM;eACH,eAAe;OACnB;IACL,gBAAgB;IAChB,gBAAuB,0BAA0B,oBAA2B;IAC5E,gBAAgB;WACF,WAAW;IAKzB,WAAkB,MAAM,sBAEvB;IAED,WAAkB,UAAU,WAE3B;IAED,OAAO,CAAC,MAAM,CAAC,SAAS;IAKxB;OACG;WACW,IAAI,CAChB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,EAAE,EAAE,KAAK,EACT,MAAM,EAAE,KAAK,EACb,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,GAAE,MAAU,EACpB,OAAO,CAAC,EAAE,kBAAkB,EAC5B,cAAc,CAAC,EAAE,QAAQ;IAuC3B;OACG;WACW,MAAM,CAClB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,EAAE,EAAE,KAAK,EACT,MAAM,EAAE,KAAK,EACb,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,GAAE,MAAU,EACpB,cAAc,CAAC,EAAE,QAAQ;IAsB3B;OACG;WACW,cAAc,CAAC,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,EAAE,QAAQ;IAQjE;OACG;WACW,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO;IAqCjE,OAAO,CAAC,MAAM,CAAC,WAAW;IAU1B,OAAO,CAAC,MAAM,CAAC,iCAAiC;IAiChD,OAAO,CAAC,MAAM,CAAC,8BAA8B;IAwB7C,OAAO,CAAC,MAAM,CAAC,QAAQ;CA+ExB;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,kCAuFlC"}

package/lib/appui-react/cursor/cursorpopup/CursorPopupManager.js

@@ -12,6 +12,7 @@ import { Point } from "@itwin/core-react/internal";
 import { UiFramework } from "../../UiFramework.js";
 import { CursorPopupShow } from "./CursorPopup.js";
 import { CursorPopup } from "./CursorPopup.js";
+import { ChildWindowContext } from "../../childwindow/ChildWindowRenderer.js";
 /** CursorPopup component
  * @public
  */
@@ -19,7 +20,7 @@ export class CursorPopupManager {
     /** @internal */
     static clearPopups() {
         this._popups.length = 0;
-        CursorPopupManager._emitPopupsChangedEvent();
+        CursorPopupManager.onCursorPopupsChangedEvent.emit({});
     }
     static get popups() {
         return this._popups;
@@ -27,16 +28,13 @@ export class CursorPopupManager {
     static get popupCount() {
         return this._popups.length;
     }
-    static _emitPopupsChangedEvent() {
-        CursorPopupManager.onCursorPopupsChangedEvent.emit({});
-    }
     static pushPopup(popupInfo) {
         CursorPopupManager._popups.push(popupInfo);
-        CursorPopupManager._emitPopupsChangedEvent();
+        CursorPopupManager.onCursorPopupsChangedEvent.emit({});
     }
     /** Called to open popup with a new set of properties
      */
-    static open(id, content, pt, offset, relativePosition, priority = 0, options) {
+    static open(id, content, pt, offset, relativePosition, priority = 0, options, targetDocument) {
         const popupInfo = CursorPopupManager._popups.find((info) => id === info.id);
         if (popupInfo) {
             CursorPopupManager.onCursorPopupFadeOutEvent.emit({
@@ -49,7 +47,8 @@ export class CursorPopupManager {
             popupInfo.renderRelativePosition = relativePosition;
             popupInfo.priority = priority;
             popupInfo.options = options;
-            CursorPopupManager.updatePosition(pt);
+            popupInfo.targetDocument = targetDocument;
+            CursorPopupManager.updatePosition(pt, targetDocument);
             if (popupInfo.cancelFadeOut) {
                 popupInfo.cancelFadeOut();
                 popupInfo.cancelFadeOut = undefined;
@@ -64,13 +63,14 @@ export class CursorPopupManager {
             options,
             renderRelativePosition: relativePosition,
             priority,
+            targetDocument,
         };
         CursorPopupManager.pushPopup(newPopupInfo);
-        CursorPopupManager.updatePosition(pt);
+        CursorPopupManager.updatePosition(pt, targetDocument);
     }
     /** Called to update popup with a new set of properties
      */
-    static update(id, content, pt, offset, relativePosition, priority = 0) {
+    static update(id, content, pt, offset, relativePosition, priority = 0, targetDocument) {
         const popupInfo = CursorPopupManager._popups.find((info) => id === info.id);
         if (popupInfo) {
             popupInfo.content = content;
@@ -78,6 +78,7 @@ export class CursorPopupManager {
             popupInfo.relativePosition = relativePosition;
             popupInfo.renderRelativePosition = relativePosition;
             popupInfo.priority = priority;
+            popupInfo.targetDocument = targetDocument;
         }
         else {
             Logger.logError(UiFramework.loggerCategory("CursorPopupManager"), `update: Could not find popup with id of '${id}'`);
@@ -86,8 +87,8 @@ export class CursorPopupManager {
     }
     /** Called to move the open popup to new location
      */
-    static updatePosition(pt) {
-        CursorPopupManager.resetPopupsRenderRelativePosition(Point.create(pt));
+    static updatePosition(pt, targetDocument) {
+        CursorPopupManager.resetPopupsRenderRelativePosition(Point.create(pt), targetDocument);
         CursorPopupManager.onCursorPopupUpdatePositionEvent.emit({ pt });
     }
     /** Called when tool wants to close the popup
@@ -125,22 +126,29 @@ export class CursorPopupManager {
         const index = CursorPopupManager._popups.findIndex((popupInfo) => id === popupInfo.id);
         if (index >= 0) {
             CursorPopupManager._popups.splice(index, 1);
-            CursorPopupManager._emitPopupsChangedEvent();
+            CursorPopupManager.onCursorPopupsChangedEvent.emit({});
         }
     }
-    static resetPopupsRenderRelativePosition(pt) {
+    static resetPopupsRenderRelativePosition(pt, targetDocument) {
         CursorPopupManager.popups.forEach((popupInfo) => {
+            if (popupInfo.cancelFadeOut &&
+                popupInfo.targetDocument !== targetDocument) {
+                // Popup if fading out - do not change target document.
+                return;
+            }
             popupInfo.renderRelativePosition = popupInfo.relativePosition;
-            const flipped = CursorPopupManager.validateRenderRelativePosition(pt, popupInfo);
+            popupInfo.targetDocument = targetDocument;
+            const flipped = CursorPopupManager.validateRenderRelativePosition(pt, popupInfo, targetDocument);
             // If flipped, call again to validate again.
             if (flipped) {
-                CursorPopupManager.validateRenderRelativePosition(pt, popupInfo);
+                CursorPopupManager.validateRenderRelativePosition(pt, popupInfo, targetDocument);
             }
         });
     }
-    static validateRenderRelativePosition(pt, popupInfo) {
+    static validateRenderRelativePosition(pt, popupInfo, targetDocument) {
         const popupRect = CursorPopup.getPopupRect(pt, Point.create(popupInfo.offset), popupInfo.popupSize, popupInfo.renderRelativePosition);
-        const { outPos, flipped } = CursorPopupManager.autoFlip(popupInfo.renderRelativePosition, popupRect, window.innerWidth, window.innerHeight);
+        const targetWindow = targetDocument?.defaultView ?? window;
+        const { outPos, flipped } = CursorPopupManager.autoFlip(popupInfo.renderRelativePosition, popupRect, targetWindow.innerWidth, targetWindow.innerHeight);
         if (flipped)
             popupInfo.renderRelativePosition = outPos;
         return flipped;
@@ -222,109 +230,94 @@ CursorPopupManager.onCursorPopupUpdatePositionEvent = new BeUiEvent();
 CursorPopupManager.onCursorPopupFadeOutEvent = new BeUiEvent();
 /** @internal */
 CursorPopupManager.onCursorPopupsChangedEvent = new BeUiEvent();
+const relativePositions = Object.values(RelativePosition).filter((value) => typeof value !== "string");
 /** CursorPopupRenderer React component.
  * @public
  */
-export class CursorPopupRenderer extends React.Component {
-    constructor(props) {
-        super(props);
-        this._handlePopupChangedEvent = () => {
-            this.forceUpdate();
-        };
-        this._handleCursorPopupUpdatePositionEvent = (args) => {
-            this.setState({ pt: Point.create(args.pt) });
-        };
-        this.state = {
-            pt: new Point(),
-        };
-    }
-    render() {
-        if (CursorPopupManager.popupCount <= 0)
-            return null;
-        return React.createElement(React.Fragment, null, this.renderPositions());
-    }
-    _handleSizeKnown(popupInfo, size) {
-        popupInfo.popupSize = size;
-    }
-    renderPositions() {
-        const positions = new Array();
-        let renderedPosition;
-        const begin = RelativePosition.Left;
-        const end = RelativePosition.BottomRight;
-        for (let position = begin; position <= end; position++) {
-            renderedPosition = this.renderRelativePosition(position);
-            if (renderedPosition)
-                positions.push(renderedPosition);
-        }
-        return positions;
-    }
-    renderRelativePosition(relativePosition) {
-        const filteredInfo = CursorPopupManager.popups.filter((popupInfo) => popupInfo.renderRelativePosition === relativePosition);
-        if (filteredInfo.length > 0) {
-            let totalDimension = 0;
-            const ascending = relativePosition === RelativePosition.Right ||
-                relativePosition === RelativePosition.BottomRight ||
-                relativePosition === RelativePosition.Bottom ||
-                relativePosition === RelativePosition.BottomLeft;
-            const positionPopups = filteredInfo
-                .sort((a, b) => ascending ? a.priority - b.priority : b.priority - a.priority)
-                .map((popupInfo, index) => {
-                const title = popupInfo.options !== undefined ? popupInfo.options.title : "";
-                const shadow = popupInfo.options !== undefined ? popupInfo.options.shadow : false;
-                let offset = popupInfo.offset;
-                if (index > 0)
-                    offset = this.adjustOffset(offset, popupInfo.renderRelativePosition, totalDimension);
-                if (popupInfo.popupSize)
-                    totalDimension += this.getDimension(popupInfo.popupSize, relativePosition);
-                return (React.createElement(CursorPopup, { key: popupInfo.id, id: popupInfo.id, content: popupInfo.content, pt: this.state.pt, offset: offset, relativePosition: popupInfo.renderRelativePosition, title: title, shadow: shadow, onSizeKnown: (size) => this._handleSizeKnown(popupInfo, size) }));
-            });
-            return (React.createElement(React.Fragment, { key: relativePosition.toString() }, positionPopups));
-        }
-        return null;
-    }
-    getDimension(popupSize, relativePosition) {
-        let dimension = 0;
-        switch (relativePosition) {
-            case RelativePosition.Top:
-            case RelativePosition.Bottom:
-            case RelativePosition.TopLeft:
-            case RelativePosition.TopRight:
-            case RelativePosition.BottomLeft:
-            case RelativePosition.BottomRight:
-                dimension = popupSize.height;
-                break;
-            case RelativePosition.Left:
-            case RelativePosition.Right:
-                dimension = popupSize.width;
-                break;
-        }
-        return dimension;
-    }
-    adjustOffset(offset, relativePosition, dimension) {
-        let outOffset = Point.create(offset.toProps());
-        switch (relativePosition) {
-            case RelativePosition.Top:
-            case RelativePosition.Bottom:
-            case RelativePosition.TopLeft:
-            case RelativePosition.TopRight:
-            case RelativePosition.BottomLeft:
-            case RelativePosition.BottomRight:
-                outOffset = Point.create({ x: offset.x, y: offset.y + dimension });
-                break;
-            case RelativePosition.Left:
-            case RelativePosition.Right:
-                outOffset = Point.create({ x: offset.x + dimension, y: offset.y });
-                break;
-        }
-        return outOffset;
-    }
-    componentDidMount() {
-        CursorPopupManager.onCursorPopupsChangedEvent.addListener(this._handlePopupChangedEvent);
-        CursorPopupManager.onCursorPopupUpdatePositionEvent.addListener(this._handleCursorPopupUpdatePositionEvent);
+export function CursorPopupRenderer() {
+    const popupWindow = React.useContext(ChildWindowContext) ?? window;
+    const [popups, setPopups] = React.useState(CursorPopupManager.popups);
+    const [point, setPoint] = React.useState(new Point());
+    React.useEffect(() => {
+        return CursorPopupManager.onCursorPopupsChangedEvent.addListener(() => {
+            const allPopups = CursorPopupManager.popups;
+            const newPopups = allPopups.map((p) => ({ ...p }));
+            setPopups(newPopups);
+        });
+    }, []);
+    React.useEffect(() => {
+        return CursorPopupManager.onCursorPopupUpdatePositionEvent.addListener((args) => {
+            const allPopups = CursorPopupManager.popups;
+            const newPopups = allPopups.map((p) => ({ ...p }));
+            setPopups(newPopups);
+            setPoint(Point.create(args.pt));
+        });
+    }, []);
+    if (popups.length === 0)
+        return undefined;
+    return (React.createElement(React.Fragment, null, relativePositions.map((position) => {
+        const filteredInfo = popups.filter((popupInfo) => popupInfo.renderRelativePosition === position);
+        if (filteredInfo.length === 0)
+            return undefined;
+        let totalDimension = 0;
+        const positionPopups = filteredInfo
+            .sort((a, b) => {
+            const ascending = position === RelativePosition.Right ||
+                position === RelativePosition.BottomRight ||
+                position === RelativePosition.Bottom ||
+                position === RelativePosition.BottomLeft;
+            return ascending
+                ? a.priority - b.priority
+                : b.priority - a.priority;
+        })
+            .map((popupInfo, index) => {
+            const targetDocument = popupInfo.targetDocument ?? window.document;
+            if (popupWindow.document !== targetDocument)
+                return undefined;
+            const title = popupInfo.options !== undefined ? popupInfo.options.title : "";
+            const shadow = popupInfo.options !== undefined
+                ? popupInfo.options.shadow
+                : false;
+            let offset = popupInfo.offset;
+            if (index > 0)
+                offset = adjustOffset(offset, popupInfo.renderRelativePosition, totalDimension);
+            if (popupInfo.popupSize)
+                totalDimension += getDimension(popupInfo.popupSize, position);
+            return (React.createElement(CursorPopup, { key: popupInfo.id, id: popupInfo.id, content: popupInfo.content, pt: point, offset: offset, relativePosition: popupInfo.renderRelativePosition, title: title, shadow: shadow, onSizeKnown: (size) => {
+                    popupInfo.popupSize = size;
+                } }));
+        });
+        return React.createElement(React.Fragment, { key: position }, positionPopups);
+    })));
+}
+function adjustOffset(offset, relativePosition, dimension) {
+    switch (relativePosition) {
+        case RelativePosition.Top:
+        case RelativePosition.Bottom:
+        case RelativePosition.TopLeft:
+        case RelativePosition.TopRight:
+        case RelativePosition.BottomLeft:
+        case RelativePosition.BottomRight:
+            return Point.create({ x: offset.x, y: offset.y + dimension });
+        case RelativePosition.Left:
+        case RelativePosition.Right:
+            return Point.create({ x: offset.x + dimension, y: offset.y });
     }
-    componentWillUnmount() {
-        CursorPopupManager.onCursorPopupsChangedEvent.removeListener(this._handlePopupChangedEvent);
-        CursorPopupManager.onCursorPopupUpdatePositionEvent.removeListener(this._handleCursorPopupUpdatePositionEvent);
+    return Point.create(offset.toProps());
+}
+function getDimension(popupSize, relativePosition) {
+    switch (relativePosition) {
+        case RelativePosition.Top:
+        case RelativePosition.Bottom:
+        case RelativePosition.TopLeft:
+        case RelativePosition.TopRight:
+        case RelativePosition.BottomLeft:
+        case RelativePosition.BottomRight:
+            return popupSize.height;
+        case RelativePosition.Left:
+        case RelativePosition.Right:
+            return popupSize.width;
     }
+    return 0;
 }
 //# sourceMappingURL=CursorPopupManager.js.map