@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/appui-react/cursor/cursorpopup/CursorPopup.js

@@ -0,0 +1,151 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Cursor
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CursorPopupContent = exports.CursorPopup = exports.CursorPopupShow = void 0;
+require("./CursorPopup.scss");
+const React = require("react");
+const classnames_1 = require("classnames");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const CursorPopupManager_1 = require("./CursorPopupManager");
+/** Enum for showing CursorPopup
+ * @internal - unit testing
+ */
+var CursorPopupShow;
+(function (CursorPopupShow) {
+    CursorPopupShow[CursorPopupShow["Open"] = 0] = "Open";
+    CursorPopupShow[CursorPopupShow["FadeOut"] = 1] = "FadeOut";
+})(CursorPopupShow = exports.CursorPopupShow || (exports.CursorPopupShow = {}));
+/** CursorPopup React component
+ * @public
+ */
+class CursorPopup extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this._handleCursorPopupFadeOutEvent = (args) => {
+            if (this.props.id === args.id) {
+                // istanbul ignore else
+                if (this._isMounted)
+                    this.setState({ showPopup: CursorPopupShow.FadeOut });
+            }
+        };
+        this.state = {
+            showPopup: CursorPopupShow.Open,
+            size: new core_react_1.Size(-1, -1),
+        };
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        CursorPopupManager_1.CursorPopupManager.onCursorPopupFadeOutEvent.addListener(this._handleCursorPopupFadeOutEvent);
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+        CursorPopupManager_1.CursorPopupManager.onCursorPopupFadeOutEvent.removeListener(this._handleCursorPopupFadeOutEvent);
+    }
+    /** @internal */
+    static getPopupRect(pt, offset, popupSize, relativePosition) {
+        const popupRect = { top: 0, left: 0, right: 0, bottom: 0 };
+        if (popupSize === undefined)
+            return popupRect;
+        switch (relativePosition) {
+            case appui_abstract_1.RelativePosition.Top:
+                popupRect.bottom = pt.y - offset.y;
+                popupRect.left = pt.x - (popupSize.width / 2);
+                popupRect.top = popupRect.bottom - popupSize.height;
+                popupRect.right = popupRect.left + popupSize.width;
+                break;
+            case appui_abstract_1.RelativePosition.Left:
+                popupRect.right = pt.x - offset.x;
+                popupRect.top = pt.y - (popupSize.height / 2);
+                popupRect.left = popupRect.right - popupSize.width;
+                popupRect.bottom = popupRect.top + popupSize.height;
+                break;
+            case appui_abstract_1.RelativePosition.Right:
+                popupRect.left = pt.x + offset.x;
+                popupRect.top = pt.y - (popupSize.height / 2);
+                popupRect.right = popupRect.left + popupSize.width;
+                popupRect.bottom = popupRect.top + popupSize.height;
+                break;
+            case appui_abstract_1.RelativePosition.Bottom:
+                popupRect.top = pt.y + offset.y;
+                popupRect.left = pt.x - (popupSize.width / 2);
+                popupRect.bottom = popupRect.top + popupSize.height;
+                popupRect.right = popupRect.left + popupSize.width;
+                break;
+            case appui_abstract_1.RelativePosition.TopLeft:
+                popupRect.bottom = pt.y - offset.y;
+                popupRect.right = pt.x - offset.x;
+                popupRect.top = popupRect.bottom - popupSize.height;
+                popupRect.left = popupRect.right - popupSize.width;
+                break;
+            case appui_abstract_1.RelativePosition.TopRight:
+                popupRect.bottom = pt.y - offset.y;
+                popupRect.left = pt.x + offset.x;
+                popupRect.top = popupRect.bottom - popupSize.height;
+                popupRect.right = popupRect.left + popupSize.width;
+                break;
+            case appui_abstract_1.RelativePosition.BottomLeft:
+                popupRect.top = pt.y + offset.y;
+                popupRect.right = pt.x - offset.x;
+                popupRect.bottom = popupRect.top + popupSize.height;
+                popupRect.left = popupRect.right - popupSize.width;
+                break;
+            case appui_abstract_1.RelativePosition.BottomRight:
+                popupRect.top = pt.y + offset.y;
+                popupRect.left = pt.x + offset.x;
+                popupRect.bottom = popupRect.top + popupSize.height;
+                popupRect.right = popupRect.left + popupSize.width;
+                break;
+        }
+        return popupRect;
+    }
+    setDivRef(div) {
+        // istanbul ignore else
+        if (div) {
+            const rect = div.getBoundingClientRect();
+            const newSize = new core_react_1.Size(rect.width, rect.height);
+            // istanbul ignore else
+            if (!this.state.size.equals(newSize)) {
+                // istanbul ignore else
+                if (this.props.onSizeKnown)
+                    this.props.onSizeKnown(newSize);
+                // istanbul ignore else
+                if (this._isMounted)
+                    this.setState({ size: newSize });
+            }
+        }
+    }
+    /** @internal */
+    render() {
+        const popupRect = CursorPopup.getPopupRect(this.props.pt, this.props.offset, this.state.size, this.props.relativePosition);
+        const positioningStyle = {
+            left: popupRect.left,
+            top: popupRect.top,
+        };
+        const classNames = (0, classnames_1.default)("uifw-cursorpopup", this.props.shadow && "core-popup-shadow", this.state.showPopup === CursorPopupShow.FadeOut && "uifw-cursorpopup-fadeOut");
+        return (React.createElement("div", { className: classNames, ref: (e) => this.setDivRef(e), style: positioningStyle },
+            this.props.title &&
+                React.createElement(appui_layout_react_1.TitleBar, { title: this.props.title, className: "uifw-cursorpopup-title" }),
+            this.props.content));
+    }
+}
+exports.CursorPopup = CursorPopup;
+/** @internal */
+CursorPopup.fadeOutTime = 500;
+/** CursorPopup content with padding
+ * @public
+ */
+function CursorPopupContent(props) {
+    return React.createElement(core_react_1.Div, { ...props, mainClassName: "uifw-cursorpopup-content" });
+}
+exports.CursorPopupContent = CursorPopupContent;
+//# sourceMappingURL=CursorPopup.js.map

package/lib/cjs/appui-react/cursor/cursorpopup/CursorPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CursorPopup.js","sourceRoot":"","sources":["../../../../../src/appui-react/cursor/cursorpopup/CursorPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Cursor\r\n */\r\n\r\nimport \"./CursorPopup.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { PointProps, RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonDivProps, CommonProps, Div, RectangleProps, Size, SizeProps } from \"@itwin/core-react\";\r\nimport { TitleBar } from \"@itwin/appui-layout-react\";\r\nimport { CursorPopupFadeOutEventArgs, CursorPopupManager } from \"./CursorPopupManager\";\r\n\r\n/** Properties for the [[CursorPopup]] React component\r\n * @public\r\n */\r\nexport interface CursorPopupProps extends CommonProps {\r\n  id: string;\r\n  content: React.ReactNode;\r\n  pt: PointProps;\r\n  offset: PointProps;\r\n  relativePosition: RelativePosition;\r\n  title?: string;\r\n  shadow?: boolean;\r\n  /** Function called when size is known. */\r\n  onSizeKnown?: (size: SizeProps) => void;\r\n}\r\n\r\n/** Enum for showing CursorPopup\r\n * @internal - unit testing\r\n */\r\nexport enum CursorPopupShow {\r\n  Open,\r\n  FadeOut,\r\n}\r\n\r\n/** State for the [[CursorPopup]] React component\r\n * @internal\r\n */\r\ninterface CursorPopupState {\r\n  showPopup: CursorPopupShow;\r\n  size: Size;\r\n}\r\n\r\n/** CursorPopup React component\r\n * @public\r\n */\r\nexport class CursorPopup extends React.Component<CursorPopupProps, CursorPopupState> {\r\n\r\n  private _isMounted: boolean = false;\r\n\r\n  /** @internal */\r\n  public static fadeOutTime = 500;\r\n\r\n  /** @internal */\r\n  constructor(props: CursorPopupProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      showPopup: CursorPopupShow.Open,\r\n      size: new Size(-1, -1),\r\n    };\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    CursorPopupManager.onCursorPopupFadeOutEvent.addListener(this._handleCursorPopupFadeOutEvent);\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n    CursorPopupManager.onCursorPopupFadeOutEvent.removeListener(this._handleCursorPopupFadeOutEvent);\r\n  }\r\n\r\n  private _handleCursorPopupFadeOutEvent = (args: CursorPopupFadeOutEventArgs) => {\r\n    if (this.props.id === args.id) {\r\n      // istanbul ignore else\r\n      if (this._isMounted)\r\n        this.setState({ showPopup: CursorPopupShow.FadeOut });\r\n    }\r\n  };\r\n\r\n  /** @internal */\r\n  public static getPopupRect(pt: PointProps, offset: PointProps, popupSize: SizeProps | undefined, relativePosition: RelativePosition): RectangleProps {\r\n    const popupRect = { top: 0, left: 0, right: 0, bottom: 0 };\r\n\r\n    if (popupSize === undefined)\r\n      return popupRect;\r\n\r\n    switch (relativePosition) {\r\n      case RelativePosition.Top:\r\n        popupRect.bottom = pt.y - offset.y;\r\n        popupRect.left = pt.x - (popupSize.width / 2);\r\n        popupRect.top = popupRect.bottom - popupSize.height;\r\n        popupRect.right = popupRect.left + popupSize.width;\r\n        break;\r\n      case RelativePosition.Left:\r\n        popupRect.right = pt.x - offset.x;\r\n        popupRect.top = pt.y - (popupSize.height / 2);\r\n        popupRect.left = popupRect.right - popupSize.width;\r\n        popupRect.bottom = popupRect.top + popupSize.height;\r\n        break;\r\n      case RelativePosition.Right:\r\n        popupRect.left = pt.x + offset.x;\r\n        popupRect.top = pt.y - (popupSize.height / 2);\r\n        popupRect.right = popupRect.left + popupSize.width;\r\n        popupRect.bottom = popupRect.top + popupSize.height;\r\n        break;\r\n      case RelativePosition.Bottom:\r\n        popupRect.top = pt.y + offset.y;\r\n        popupRect.left = pt.x - (popupSize.width / 2);\r\n        popupRect.bottom = popupRect.top + popupSize.height;\r\n        popupRect.right = popupRect.left + popupSize.width;\r\n        break;\r\n      case RelativePosition.TopLeft:\r\n        popupRect.bottom = pt.y - offset.y;\r\n        popupRect.right = pt.x - offset.x;\r\n        popupRect.top = popupRect.bottom - popupSize.height;\r\n        popupRect.left = popupRect.right - popupSize.width;\r\n        break;\r\n      case RelativePosition.TopRight:\r\n        popupRect.bottom = pt.y - offset.y;\r\n        popupRect.left = pt.x + offset.x;\r\n        popupRect.top = popupRect.bottom - popupSize.height;\r\n        popupRect.right = popupRect.left + popupSize.width;\r\n        break;\r\n      case RelativePosition.BottomLeft:\r\n        popupRect.top = pt.y + offset.y;\r\n        popupRect.right = pt.x - offset.x;\r\n        popupRect.bottom = popupRect.top + popupSize.height;\r\n        popupRect.left = popupRect.right - popupSize.width;\r\n        break;\r\n      case RelativePosition.BottomRight:\r\n        popupRect.top = pt.y + offset.y;\r\n        popupRect.left = pt.x + offset.x;\r\n        popupRect.bottom = popupRect.top + popupSize.height;\r\n        popupRect.right = popupRect.left + popupSize.width;\r\n        break;\r\n    }\r\n\r\n    return popupRect;\r\n  }\r\n\r\n  private setDivRef(div: HTMLDivElement | null) {\r\n    // istanbul ignore else\r\n    if (div) {\r\n      const rect = div.getBoundingClientRect();\r\n      const newSize = new Size(rect.width, rect.height);\r\n\r\n      // istanbul ignore else\r\n      if (!this.state.size.equals(newSize)) {\r\n        // istanbul ignore else\r\n        if (this.props.onSizeKnown)\r\n          this.props.onSizeKnown(newSize);\r\n\r\n        // istanbul ignore else\r\n        if (this._isMounted)\r\n          this.setState({ size: newSize });\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const popupRect = CursorPopup.getPopupRect(this.props.pt, this.props.offset, this.state.size, this.props.relativePosition);\r\n\r\n    const positioningStyle: React.CSSProperties = {\r\n      left: popupRect.left,\r\n      top: popupRect.top,\r\n    };\r\n\r\n    const classNames = classnames(\r\n      \"uifw-cursorpopup\",\r\n      this.props.shadow && \"core-popup-shadow\",\r\n      this.state.showPopup === CursorPopupShow.FadeOut && \"uifw-cursorpopup-fadeOut\",\r\n    );\r\n\r\n    return (\r\n      <div className={classNames} ref={(e) => this.setDivRef(e)} style={positioningStyle}>\r\n        {this.props.title &&\r\n          <TitleBar\r\n            title={this.props.title}\r\n            className=\"uifw-cursorpopup-title\" />\r\n        }\r\n        {this.props.content}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** CursorPopup content with padding\r\n * @public\r\n */\r\nexport function CursorPopupContent(props: CommonDivProps) {\r\n  return <Div {...props} mainClassName=\"uifw-cursorpopup-content\" />;\r\n}\r\n"]}

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

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../../variables";
+
+.uifw-cursorpopup {
+  border: {
+    color: $uifw-popup-border-color;
+    radius: $uifw-popup-border-radius;
+    style: solid;
+    width: $uifw-popup-border-width;
+  }
+
+  background-color: rgba($buic-background-2-rgb, $uifw-popup-opacity);
+  position: fixed;
+  height: fit-content;
+  width: fit-content;
+  transition: opacity 500ms;
+
+  >.uifw-cursorpopup-title {
+    min-height: $uifw-popup-title-bar-min-height;
+    opacity: $uifw-popup-opacity;
+  }
+
+  >.uifw-cursorpopup-content {
+    padding: $uifw-popup-content-padding;
+  }
+
+  &.uifw-cursorpopup-fadeOut {
+    opacity: 0;
+  }
+
+}

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

@@ -0,0 +1,115 @@
+/** @packageDocumentation
+ * @module Cursor
+ */
+import * as React from "react";
+import { PointProps, RelativePosition } from "@itwin/appui-abstract";
+import { Point, Size, UiEvent } from "@itwin/core-react";
+/** Options for the [[CursorPopupManager]] open method
+ * @public
+ */
+export interface CursorPopupOptions {
+    /** Title of the popup */
+    title?: string;
+    /** Called on popup close */
+    onClose?: () => void;
+    /** Callback to apply changes */
+    onApply?: () => void;
+    /** Draw shadow */
+    shadow?: boolean;
+}
+/** CursorPopup Update Position Event Args interface.
+ * @internal
+ */
+export interface CursorPopupUpdatePositionEventArgs {
+    pt: PointProps;
+}
+/** CursorPopup Update Position Event class.
+ * @internal
+ */
+export declare class CursorPopupUpdatePositionEvent extends UiEvent<CursorPopupUpdatePositionEventArgs> {
+}
+/** CursorPopup FadeOut Event Args interface.
+ * @internal
+ */
+export interface CursorPopupFadeOutEventArgs {
+    id: string;
+}
+/** CursorPopup FadeOut Event class.
+ * @internal
+ */
+export declare class CursorPopupFadeOutEvent extends UiEvent<CursorPopupFadeOutEventArgs> {
+}
+/** Information maintained by CursorPopupManager about a CursorPopup
+ * @internal
+ */
+interface CursorPopupInfo {
+    id: string;
+    content: React.ReactNode;
+    relativePosition: RelativePosition;
+    offset: Point;
+    priority: number;
+    options?: CursorPopupOptions;
+    renderRelativePosition: RelativePosition;
+    popupSize?: Size;
+}
+/** Cursor Popups Changed Event class.
+ * @internal
+ */
+declare class CursorPopupsChangedEvent extends UiEvent<{}> {
+}
+/** CursorPopup component
+ * @public
+ */
+export declare class CursorPopupManager {
+    private static _popups;
+    /** @internal */
+    static readonly onCursorPopupUpdatePositionEvent: CursorPopupUpdatePositionEvent;
+    /** @internal */
+    static readonly onCursorPopupFadeOutEvent: CursorPopupFadeOutEvent;
+    /** @internal */
+    static readonly onCursorPopupsChangedEvent: CursorPopupsChangedEvent;
+    /** @internal */
+    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: PointProps, offset: PointProps, relativePosition: RelativePosition, priority?: number, options?: CursorPopupOptions): void;
+    /** Called to update popup with a new set of properties
+     */
+    static update(id: string, content: React.ReactNode, pt: PointProps, offset: PointProps, relativePosition: RelativePosition, priority?: number): void;
+    /** Called to move the open popup to new location
+     */
+    static updatePosition(pt: PointProps): void;
+    /** Called when tool wants to close the popup
+     */
+    static close(id: string, apply: boolean, fadeOut?: boolean): void;
+    private static removePopup;
+    private static resetPopupsRenderRelativePosition;
+    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 {};
+//# sourceMappingURL=CursorPopupManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CursorPopupManager.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/cursor/cursorpopup/CursorPopupManager.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,326 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Cursor
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CursorPopupRenderer = exports.CursorPopupManager = exports.CursorPopupFadeOutEvent = exports.CursorPopupUpdatePositionEvent = void 0;
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const UiFramework_1 = require("../../UiFramework");
+const CursorPopup_1 = require("./CursorPopup");
+/** CursorPopup Update Position Event class.
+ * @internal
+ */
+class CursorPopupUpdatePositionEvent extends core_react_1.UiEvent {
+}
+exports.CursorPopupUpdatePositionEvent = CursorPopupUpdatePositionEvent;
+/** CursorPopup FadeOut Event class.
+ * @internal
+ */
+class CursorPopupFadeOutEvent extends core_react_1.UiEvent {
+}
+exports.CursorPopupFadeOutEvent = CursorPopupFadeOutEvent;
+/** Cursor Popups Changed Event class.
+ * @internal
+ */
+class CursorPopupsChangedEvent extends core_react_1.UiEvent {
+}
+/** CursorPopup component
+ * @public
+ */
+class CursorPopupManager {
+    /** @internal */
+    static clearPopups() {
+        this._popups.length = 0;
+        CursorPopupManager._emitPopupsChangedEvent();
+    }
+    static get popups() { return this._popups; }
+    static get popupCount() { return this._popups.length; }
+    static _emitPopupsChangedEvent() {
+        CursorPopupManager.onCursorPopupsChangedEvent.emit({});
+    }
+    static pushPopup(popupInfo) {
+        CursorPopupManager._popups.push(popupInfo);
+        CursorPopupManager._emitPopupsChangedEvent();
+    }
+    /** Called to open popup with a new set of properties
+     */
+    static open(id, content, pt, offset, relativePosition, priority = 0, options) {
+        const popupInfo = CursorPopupManager._popups.find((info) => id === info.id);
+        if (popupInfo) {
+            popupInfo.content = content;
+            popupInfo.offset = core_react_1.Point.create(offset);
+            popupInfo.relativePosition = relativePosition;
+            popupInfo.renderRelativePosition = relativePosition;
+            popupInfo.priority = priority;
+            popupInfo.options = options;
+        }
+        else {
+            const newPopupInfo = { id, content, offset: core_react_1.Point.create(offset), relativePosition, options, renderRelativePosition: relativePosition, priority };
+            CursorPopupManager.pushPopup(newPopupInfo);
+        }
+        CursorPopupManager.updatePosition(pt);
+    }
+    /** Called to update popup with a new set of properties
+     */
+    static update(id, content, pt, offset, relativePosition, priority = 0) {
+        const popupInfo = CursorPopupManager._popups.find((info) => id === info.id);
+        if (popupInfo) {
+            popupInfo.content = content;
+            popupInfo.offset = core_react_1.Point.create(offset);
+            popupInfo.relativePosition = relativePosition;
+            popupInfo.renderRelativePosition = relativePosition;
+            popupInfo.priority = priority;
+        }
+        else {
+            core_bentley_1.Logger.logError(UiFramework_1.UiFramework.loggerCategory(this), `update: Could not find popup with id of '${id}'`);
+        }
+        CursorPopupManager.updatePosition(pt);
+    }
+    /** Called to move the open popup to new location
+     */
+    static updatePosition(pt) {
+        CursorPopupManager.resetPopupsRenderRelativePosition(core_react_1.Point.create(pt));
+        CursorPopupManager.onCursorPopupUpdatePositionEvent.emit({ pt });
+    }
+    /** Called when tool wants to close the popup
+     */
+    static close(id, apply, fadeOut) {
+        const popupInfo = CursorPopupManager._popups.find((info) => id === info.id);
+        if (popupInfo) {
+            if (popupInfo.options) {
+                if (apply && popupInfo.options.onApply)
+                    popupInfo.options.onApply();
+                if (popupInfo.options.onClose)
+                    popupInfo.options.onClose();
+            }
+            if (fadeOut) {
+                CursorPopupManager.onCursorPopupFadeOutEvent.emit({ id });
+                setTimeout(() => {
+                    CursorPopupManager.removePopup(id);
+                }, CursorPopup_1.CursorPopup.fadeOutTime);
+            }
+            else {
+                CursorPopupManager.removePopup(id);
+            }
+        }
+        else {
+            core_bentley_1.Logger.logError(UiFramework_1.UiFramework.loggerCategory(this), `close: Could not find popup with id of '${id}'`);
+        }
+    }
+    static removePopup(id) {
+        const index = CursorPopupManager._popups.findIndex((popupInfo) => id === popupInfo.id);
+        // istanbul ignore else
+        if (index >= 0) {
+            CursorPopupManager._popups.splice(index, 1);
+            CursorPopupManager._emitPopupsChangedEvent();
+        }
+    }
+    static resetPopupsRenderRelativePosition(pt) {
+        CursorPopupManager.popups.forEach((popupInfo) => {
+            popupInfo.renderRelativePosition = popupInfo.relativePosition;
+            const flipped = CursorPopupManager.validateRenderRelativePosition(pt, popupInfo);
+            // If flipped, call again to validate again.
+            if (flipped) {
+                CursorPopupManager.validateRenderRelativePosition(pt, popupInfo);
+            }
+        });
+    }
+    static validateRenderRelativePosition(pt, popupInfo) {
+        const popupRect = CursorPopup_1.CursorPopup.getPopupRect(pt, core_react_1.Point.create(popupInfo.offset), popupInfo.popupSize, popupInfo.renderRelativePosition);
+        const { outPos, flipped } = CursorPopupManager.autoFlip(popupInfo.renderRelativePosition, popupRect, window.innerWidth, window.innerHeight);
+        if (flipped)
+            popupInfo.renderRelativePosition = outPos;
+        return flipped;
+    }
+    static autoFlip(inPos, rect, windowWidth, windowHeight) {
+        let flipped = false;
+        let outPos = inPos;
+        if (rect.right > windowWidth) {
+            flipped = true;
+            switch (inPos) {
+                case appui_abstract_1.RelativePosition.Top:
+                case appui_abstract_1.RelativePosition.TopRight:
+                    outPos = appui_abstract_1.RelativePosition.TopLeft;
+                    break;
+                case appui_abstract_1.RelativePosition.Right:
+                    outPos = appui_abstract_1.RelativePosition.Left;
+                    break;
+                case appui_abstract_1.RelativePosition.Bottom:
+                case appui_abstract_1.RelativePosition.BottomRight:
+                    outPos = appui_abstract_1.RelativePosition.BottomLeft;
+                    break;
+            }
+        }
+        if (rect.left < 0) {
+            flipped = true;
+            switch (inPos) {
+                case appui_abstract_1.RelativePosition.Top:
+                case appui_abstract_1.RelativePosition.TopLeft:
+                    outPos = appui_abstract_1.RelativePosition.TopRight;
+                    break;
+                case appui_abstract_1.RelativePosition.Left:
+                    outPos = appui_abstract_1.RelativePosition.Right;
+                    break;
+                case appui_abstract_1.RelativePosition.Bottom:
+                case appui_abstract_1.RelativePosition.BottomLeft:
+                    outPos = appui_abstract_1.RelativePosition.BottomRight;
+                    break;
+            }
+        }
+        if (rect.bottom > windowHeight) {
+            flipped = true;
+            switch (inPos) {
+                case appui_abstract_1.RelativePosition.Left:
+                case appui_abstract_1.RelativePosition.BottomLeft:
+                    outPos = appui_abstract_1.RelativePosition.TopLeft;
+                    break;
+                case appui_abstract_1.RelativePosition.Bottom:
+                    outPos = appui_abstract_1.RelativePosition.Top;
+                    break;
+                case appui_abstract_1.RelativePosition.Right:
+                case appui_abstract_1.RelativePosition.BottomRight:
+                    outPos = appui_abstract_1.RelativePosition.TopRight;
+                    break;
+            }
+        }
+        if (rect.top < 0) {
+            flipped = true;
+            switch (inPos) {
+                case appui_abstract_1.RelativePosition.Left:
+                case appui_abstract_1.RelativePosition.TopLeft:
+                    outPos = appui_abstract_1.RelativePosition.BottomLeft;
+                    break;
+                case appui_abstract_1.RelativePosition.Top:
+                    outPos = appui_abstract_1.RelativePosition.Bottom;
+                    break;
+                case appui_abstract_1.RelativePosition.Right:
+                case appui_abstract_1.RelativePosition.TopRight:
+                    outPos = appui_abstract_1.RelativePosition.BottomRight;
+                    break;
+            }
+        }
+        return { outPos, flipped };
+    }
+}
+exports.CursorPopupManager = CursorPopupManager;
+CursorPopupManager._popups = new Array();
+/** @internal */
+CursorPopupManager.onCursorPopupUpdatePositionEvent = new CursorPopupUpdatePositionEvent();
+/** @internal */
+CursorPopupManager.onCursorPopupFadeOutEvent = new CursorPopupFadeOutEvent();
+/** @internal */
+CursorPopupManager.onCursorPopupsChangedEvent = new CursorPopupsChangedEvent();
+/** CursorPopupRenderer React component.
+ * @public
+ */
+class CursorPopupRenderer extends React.Component {
+    constructor(props) {
+        super(props);
+        this._handlePopupChangedEvent = (_args) => {
+            this.forceUpdate();
+        };
+        this._handleCursorPopupUpdatePositionEvent = (args) => {
+            this.setState({ pt: core_react_1.Point.create(args.pt) });
+        };
+        this.state = {
+            pt: new core_react_1.Point(),
+        };
+    }
+    render() {
+        if (CursorPopupManager.popupCount <= 0)
+            return null;
+        return (React.createElement(React.Fragment, null, this.renderPositions()));
+    }
+    _handleSizeKnown(popupInfo, size) {
+        popupInfo.popupSize = core_react_1.Size.create(size);
+    }
+    renderPositions() {
+        const positions = new Array();
+        let renderedPosition;
+        const begin = appui_abstract_1.RelativePosition.Left;
+        const end = appui_abstract_1.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 === appui_abstract_1.RelativePosition.Right ||
+                relativePosition === appui_abstract_1.RelativePosition.BottomRight ||
+                relativePosition === appui_abstract_1.RelativePosition.Bottom ||
+                relativePosition === appui_abstract_1.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_1.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 appui_abstract_1.RelativePosition.Top:
+            case appui_abstract_1.RelativePosition.Bottom:
+            case appui_abstract_1.RelativePosition.TopLeft:
+            case appui_abstract_1.RelativePosition.TopRight:
+            case appui_abstract_1.RelativePosition.BottomLeft:
+            case appui_abstract_1.RelativePosition.BottomRight:
+                dimension = popupSize.height;
+                break;
+            case appui_abstract_1.RelativePosition.Left:
+            case appui_abstract_1.RelativePosition.Right:
+                dimension = popupSize.width;
+                break;
+        }
+        return dimension;
+    }
+    adjustOffset(offset, relativePosition, dimension) {
+        let outOffset = core_react_1.Point.create(offset.toProps());
+        switch (relativePosition) {
+            case appui_abstract_1.RelativePosition.Top:
+            case appui_abstract_1.RelativePosition.Bottom:
+            case appui_abstract_1.RelativePosition.TopLeft:
+            case appui_abstract_1.RelativePosition.TopRight:
+            case appui_abstract_1.RelativePosition.BottomLeft:
+            case appui_abstract_1.RelativePosition.BottomRight:
+                outOffset = core_react_1.Point.create({ x: offset.x, y: offset.y + dimension });
+                break;
+            case appui_abstract_1.RelativePosition.Left:
+            case appui_abstract_1.RelativePosition.Right:
+                outOffset = core_react_1.Point.create({ x: offset.x + dimension, y: offset.y });
+                break;
+        }
+        return outOffset;
+    }
+    componentDidMount() {
+        CursorPopupManager.onCursorPopupsChangedEvent.addListener(this._handlePopupChangedEvent);
+        CursorPopupManager.onCursorPopupUpdatePositionEvent.addListener(this._handleCursorPopupUpdatePositionEvent);
+    }
+    componentWillUnmount() {
+        CursorPopupManager.onCursorPopupsChangedEvent.removeListener(this._handlePopupChangedEvent);
+        CursorPopupManager.onCursorPopupUpdatePositionEvent.removeListener(this._handleCursorPopupUpdatePositionEvent);
+    }
+}
+exports.CursorPopupRenderer = CursorPopupRenderer;
+//# sourceMappingURL=CursorPopupManager.js.map