@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/appui-react/popup/PopupManager.js

@@ -0,0 +1,233 @@
+"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 Popup
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupRenderer = exports.PopupManager = exports.isReactContent = exports.PopupsChangedEvent = 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 appui_layout_react_1 = require("@itwin/appui-layout-react");
+const UiFramework_1 = require("../UiFramework");
+const CardPopup_1 = require("./CardPopup");
+const HTMLElementPopup_1 = require("./HTMLElementPopup");
+const InputEditorPopup_1 = require("./InputEditorPopup");
+const KeyinPalettePopup_1 = require("./KeyinPalettePopup");
+const ToolbarPopup_1 = require("./ToolbarPopup");
+const ToolSettingsPopup_1 = require("./ToolSettingsPopup");
+/** Popups Changed Event class.
+ * @alpha
+ */
+class PopupsChangedEvent extends core_react_1.UiEvent {
+}
+exports.PopupsChangedEvent = PopupsChangedEvent;
+/** ReactContent type guard.
+ * @internal
+ */
+const isReactContent = (content) => {
+    return content.reactNode !== undefined;
+};
+exports.isReactContent = isReactContent;
+/** Popup Manager class
+ * @alpha
+ */
+class PopupManager {
+    static get popupCount() { return this._popups.length; }
+    static get popups() { return this._popups; }
+    static set popups(popups) {
+        // istanbul ignore if
+        if (this._popups === popups)
+            return;
+        this._popups = popups;
+        this.onPopupsChangedEvent.emit({ popups });
+    }
+    /** @internal */
+    static clearPopups() {
+        this.popups = [];
+    }
+    static addPopup(popupInfo) {
+        const popups = [
+            ...PopupManager._popups,
+            popupInfo,
+        ];
+        this.popups = popups;
+    }
+    static updatePopup(popupInfo, itemIndex) {
+        // istanbul ignore if
+        if (itemIndex < 0)
+            return;
+        const popups = [
+            ...PopupManager._popups.slice(0, itemIndex),
+            popupInfo,
+            ...PopupManager._popups.slice(itemIndex + 1),
+        ];
+        this.popups = popups;
+    }
+    static addOrUpdatePopup(popupInfo) {
+        const itemIndex = PopupManager._popups.findIndex((info) => info.id === popupInfo.id);
+        if (itemIndex >= 0)
+            PopupManager.updatePopup(popupInfo, itemIndex);
+        else
+            PopupManager.addPopup(popupInfo);
+    }
+    static removePopup(id) {
+        const index = PopupManager._popups.findIndex((info) => id === info.id);
+        let result = true;
+        if (index >= 0) {
+            const popups = PopupManager._popups.filter((info) => {
+                return info.id !== id;
+            });
+            this.popups = popups;
+        }
+        else {
+            core_bentley_1.Logger.logError(UiFramework_1.UiFramework.loggerCategory(this), `removePopup: Could not find popup with id of '${id}'`);
+            result = false;
+        }
+        return result;
+    }
+    static get defaultOffset() { return PopupManager._defaultOffset; }
+    static set defaultOffset(offset) { PopupManager._defaultOffset = offset; }
+    static showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel) {
+        const primitiveValue = {
+            value,
+            valueFormat: appui_abstract_1.PropertyValueFormat.Primitive,
+        };
+        const record = new appui_abstract_1.PropertyRecord(primitiveValue, propertyDescription);
+        const commitHandler = new InputEditorPopup_1.InputEditorCommitHandler(onCommit);
+        const id = PopupManager._editorId;
+        const component = (React.createElement(InputEditorPopup_1.InputEditorPopup, { id: id, el: el, pt: pt, offset: PopupManager.defaultOffset, record: record, onCancel: onCancel, commitHandler: commitHandler }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideInputEditor() {
+        return PopupManager.removePopup(PopupManager._editorId);
+    }
+    static showKeyinPalette(keyins, el, onItemExecuted, onCancel) {
+        const id = PopupManager._keyPalettePopupId;
+        const component = (React.createElement(KeyinPalettePopup_1.KeyinPalettePopup, { keyins: keyins, id: id, el: el, onCancel: onCancel, onItemExecuted: onItemExecuted }));
+        // since the command palette popup is always at top center of specified HTML element and it does not need to move like
+        // cursor popups just set pt to 0,0.
+        const pt = { x: 0, y: 0 };
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideKeyinPalette() {
+        return PopupManager.removePopup(PopupManager._keyPalettePopupId);
+    }
+    static showToolbar(toolbarProps, el, pt, offset, onItemExecuted, onCancel, relativePosition) {
+        const id = PopupManager._toolbarId;
+        const component = (React.createElement(ToolbarPopup_1.ToolbarPopup, { id: id, el: el, pt: pt, offset: offset, items: toolbarProps.items, relativePosition: relativePosition, orientation: core_react_1.Orientation.Horizontal, onCancel: onCancel, onItemExecuted: onItemExecuted }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideToolbar() {
+        return PopupManager.removePopup(PopupManager._toolbarId);
+    }
+    static showHTMLElement(displayElement, el, pt, offset, onCancel, relativePosition) {
+        const id = PopupManager._htmlElementId;
+        const component = (React.createElement(HTMLElementPopup_1.HTMLElementPopup, { id: id, el: el, pt: pt, offset: offset, element: displayElement, relativePosition: relativePosition, orientation: core_react_1.Orientation.Horizontal, onCancel: onCancel }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideHTMLElement() {
+        return PopupManager.removePopup(PopupManager._htmlElementId);
+    }
+    static showCard(content, title, toolbarProps, el, pt, offset, onItemExecuted, onCancel, relativePosition) {
+        const id = PopupManager._cardId;
+        const component = (React.createElement(CardPopup_1.CardPopup, { id: id, el: el, pt: pt, offset: offset, content: content, title: title, items: toolbarProps ? toolbarProps.items : /* istanbul ignore next */ undefined, relativePosition: relativePosition, orientation: core_react_1.Orientation.Horizontal, onCancel: onCancel, onItemExecuted: onItemExecuted }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideCard() {
+        const index = PopupManager._popups.findIndex((info) => PopupManager._cardId === info.id);
+        if (index >= 0)
+            return PopupManager.removePopup(PopupManager._cardId);
+        return false;
+    }
+    static openToolSettings(dataProvider, el, pt, offset, onCancel, relativePosition) {
+        const id = PopupManager._toolSettingsId;
+        const component = (React.createElement(ToolSettingsPopup_1.ToolSettingsPopup, { id: id, el: el, pt: pt, offset: offset, dataProvider: dataProvider, relativePosition: relativePosition, orientation: core_react_1.Orientation.Horizontal, onCancel: onCancel }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static closeToolSettings() {
+        return PopupManager.removePopup(PopupManager._toolSettingsId);
+    }
+    static getPopupPosition(el, pt, offset, size) {
+        const containerBounds = core_react_1.Rectangle.create(el.getBoundingClientRect());
+        const relativeBounds = core_react_1.Rectangle.createFromSize(size).offset(pt);
+        const adjustedPosition = (0, appui_layout_react_1.offsetAndContainInContainer)(relativeBounds, containerBounds.getSize(), offset);
+        const position = adjustedPosition.offset(containerBounds.topLeft());
+        return position;
+    }
+}
+exports.PopupManager = PopupManager;
+PopupManager._popups = [];
+PopupManager._editorId = "InputEditor";
+PopupManager._toolbarId = "Toolbar";
+PopupManager._htmlElementId = "HTMLElement";
+PopupManager._cardId = "Card";
+PopupManager._toolSettingsId = "ToolSettings";
+PopupManager._keyPalettePopupId = "KeyinPalette";
+PopupManager._defaultOffset = { x: 8, y: 8 };
+PopupManager.onPopupsChangedEvent = new PopupsChangedEvent();
+/**  Popup Renderer
+ * @alpha
+ */
+class PopupRenderer extends React.Component {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.state = {
+            parentDocument: null,
+            popups: PopupManager.popups,
+        };
+        this._handleRefSet = (popupDiv) => {
+            var _a;
+            this.setState({ parentDocument: (_a = popupDiv === null || popupDiv === void 0 ? void 0 : popupDiv.ownerDocument) !== null && _a !== void 0 ? _a : null });
+        };
+        this._handlePopupsChangedEvent = (args) => {
+            this.setState({ popups: args.popups });
+        };
+    }
+    componentDidMount() {
+        PopupManager.onPopupsChangedEvent.addListener(this._handlePopupsChangedEvent);
+    }
+    componentWillUnmount() {
+        PopupManager.onPopupsChangedEvent.removeListener(this._handlePopupsChangedEvent);
+    }
+    render() {
+        if (PopupManager.popupCount <= 0)
+            return null;
+        return (React.createElement("div", { className: "appui-react-popup-render-container", ref: this._handleRefSet }, this.state.parentDocument &&
+            this.state.popups.filter((info) => info.parentDocument === this.state.parentDocument)
+                .map((popupInfo) => {
+                return (React.createElement(React.Fragment, { key: popupInfo.id }, popupInfo.component));
+            })));
+    }
+}
+exports.PopupRenderer = PopupRenderer;
+//# sourceMappingURL=PopupManager.js.map

package/lib/cjs/appui-react/popup/PopupManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupManager.js","sourceRoot":"","sources":["../../../../src/appui-react/popup/PopupManager.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 Popup\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { XAndY } from \"@itwin/core-geometry\";\r\nimport {\r\n  AbstractToolbarProps, DialogLayoutDataProvider, OnCancelFunc, OnItemExecutedFunc, OnValueCommitFunc, Primitives, PrimitiveValue,\r\n  PropertyDescription, PropertyRecord, PropertyValueFormat, RelativePosition,\r\n} from \"@itwin/appui-abstract\";\r\nimport { Orientation, Point, Rectangle, SizeProps, UiEvent } from \"@itwin/core-react\";\r\nimport { offsetAndContainInContainer } from \"@itwin/appui-layout-react\";\r\nimport { KeyinEntry } from \"../uiadmin/FrameworkUiAdmin\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { CardPopup } from \"./CardPopup\";\r\nimport { HTMLElementPopup } from \"./HTMLElementPopup\";\r\nimport { InputEditorCommitHandler, InputEditorPopup } from \"./InputEditorPopup\";\r\nimport { KeyinPalettePopup } from \"./KeyinPalettePopup\";\r\nimport { ToolbarPopup } from \"./ToolbarPopup\";\r\nimport { ToolSettingsPopup } from \"./ToolSettingsPopup\";\r\n\r\n// cSpell:ignore uiadmin\r\n\r\n/** Information maintained by PopupManager about a Popup\r\n * @alpha\r\n */\r\nexport interface PopupInfo {\r\n  id: string;\r\n  pt: XAndY;\r\n  component: React.ReactNode;\r\n  parentDocument: Document;\r\n}\r\n\r\n/** @alpha */\r\nexport interface PopupsChangedEventArgs {\r\n  popups: ReadonlyArray<PopupInfo>;\r\n}\r\n\r\n/** Popups Changed Event class.\r\n * @alpha\r\n */\r\nexport class PopupsChangedEvent extends UiEvent<PopupsChangedEventArgs> { }\r\n\r\n/** Props for each popup managed by the PopupManager\r\n * @alpha\r\n */\r\nexport interface PopupPropsBase {\r\n  id: string;\r\n  el: HTMLElement;\r\n  pt: XAndY;\r\n  offset: XAndY;\r\n}\r\n\r\n/** Describes React based content\r\n * @alpha\r\n */\r\nexport interface ReactContent {\r\n  reactNode: React.ReactNode;\r\n}\r\n\r\n/** Type for Popup Content\r\n * @alpha\r\n */\r\nexport type PopupContentType = HTMLElement | ReactContent;\r\n\r\n/** ReactContent type guard.\r\n * @internal\r\n */\r\nexport const isReactContent = (content: PopupContentType): content is ReactContent => {\r\n  return (content as ReactContent).reactNode !== undefined;\r\n};\r\n\r\n/** Popup Manager class\r\n * @alpha\r\n */\r\nexport class PopupManager {\r\n  private static _popups: ReadonlyArray<PopupInfo> = [];\r\n  private static _editorId = \"InputEditor\";\r\n  private static _toolbarId = \"Toolbar\";\r\n  private static _htmlElementId = \"HTMLElement\";\r\n  private static _cardId = \"Card\";\r\n  private static _toolSettingsId = \"ToolSettings\";\r\n  private static _keyPalettePopupId = \"KeyinPalette\";\r\n\r\n  private static _defaultOffset = { x: 8, y: 8 };\r\n\r\n  public static readonly onPopupsChangedEvent = new PopupsChangedEvent();\r\n\r\n  public static get popupCount() { return this._popups.length; }\r\n  public static get popups() { return this._popups; }\r\n\r\n  public static set popups(popups: ReadonlyArray<PopupInfo>) {\r\n    // istanbul ignore if\r\n    if (this._popups === popups)\r\n      return;\r\n    this._popups = popups;\r\n    this.onPopupsChangedEvent.emit({ popups });\r\n  }\r\n\r\n  /** @internal */\r\n  public static clearPopups() {\r\n    this.popups = [];\r\n  }\r\n\r\n  private static addPopup(popupInfo: PopupInfo): void {\r\n    const popups = [\r\n      ...PopupManager._popups,\r\n      popupInfo,\r\n    ];\r\n    this.popups = popups;\r\n  }\r\n\r\n  private static updatePopup(popupInfo: PopupInfo, itemIndex: number): void {\r\n    // istanbul ignore if\r\n    if (itemIndex < 0)\r\n      return;\r\n\r\n    const popups = [\r\n      ...PopupManager._popups.slice(0, itemIndex),\r\n      popupInfo,\r\n      ...PopupManager._popups.slice(itemIndex + 1),\r\n    ];\r\n    this.popups = popups;\r\n  }\r\n\r\n  public static addOrUpdatePopup(popupInfo: PopupInfo): void {\r\n    const itemIndex = PopupManager._popups.findIndex((info: PopupInfo) => info.id === popupInfo.id);\r\n    if (itemIndex >= 0)\r\n      PopupManager.updatePopup(popupInfo, itemIndex);\r\n    else\r\n      PopupManager.addPopup(popupInfo);\r\n  }\r\n\r\n  public static removePopup(id: string): boolean {\r\n    const index = PopupManager._popups.findIndex((info: PopupInfo) => id === info.id);\r\n    let result = true;\r\n\r\n    if (index >= 0) {\r\n      const popups = PopupManager._popups.filter((info: PopupInfo) => {\r\n        return info.id !== id;\r\n      });\r\n      this.popups = popups;\r\n    } else {\r\n      Logger.logError(UiFramework.loggerCategory(this), `removePopup: Could not find popup with id of '${id}'`);\r\n      result = false;\r\n    }\r\n\r\n    return result;\r\n  }\r\n\r\n  public static get defaultOffset(): XAndY { return PopupManager._defaultOffset; }\r\n  public static set defaultOffset(offset: XAndY) { PopupManager._defaultOffset = offset; }\r\n\r\n  public static showInputEditor(el: HTMLElement, pt: XAndY, value: Primitives.Value, propertyDescription: PropertyDescription, onCommit: OnValueCommitFunc, onCancel: OnCancelFunc): boolean {\r\n    const primitiveValue: PrimitiveValue = {\r\n      value,\r\n      valueFormat: PropertyValueFormat.Primitive,\r\n    };\r\n    const record = new PropertyRecord(primitiveValue, propertyDescription);\r\n    const commitHandler = new InputEditorCommitHandler(onCommit);\r\n    const id = PopupManager._editorId;\r\n    const component = (\r\n      <InputEditorPopup id={id} el={el} pt={pt} offset={PopupManager.defaultOffset}\r\n        record={record} onCancel={onCancel} commitHandler={commitHandler} />\r\n    );\r\n\r\n    const popupInfo: PopupInfo = {\r\n      id, pt, component, parentDocument: el.ownerDocument,\r\n    };\r\n    PopupManager.addOrUpdatePopup(popupInfo);\r\n\r\n    return true;\r\n  }\r\n\r\n  public static hideInputEditor(): boolean {\r\n    return PopupManager.removePopup(PopupManager._editorId);\r\n  }\r\n\r\n  public static showKeyinPalette(\r\n    keyins: KeyinEntry[], el: HTMLElement, onItemExecuted?: OnItemExecutedFunc, onCancel?: OnCancelFunc,\r\n  ): boolean {\r\n\r\n    const id = PopupManager._keyPalettePopupId;\r\n    const component = (\r\n      <KeyinPalettePopup keyins={keyins}\r\n        id={id} el={el} onCancel={onCancel} onItemExecuted={onItemExecuted} />\r\n    );\r\n\r\n    // since the command palette popup is always at top center of specified HTML element and it does not need to move like\r\n    // cursor popups just set pt to 0,0.\r\n    const pt = { x: 0, y: 0 };\r\n    const popupInfo: PopupInfo = {\r\n      id, pt, component, parentDocument: el.ownerDocument,\r\n    };\r\n    PopupManager.addOrUpdatePopup(popupInfo);\r\n\r\n    return true;\r\n  }\r\n\r\n  public static hideKeyinPalette(): boolean {\r\n    return PopupManager.removePopup(PopupManager._keyPalettePopupId);\r\n  }\r\n\r\n  public static showToolbar(\r\n    toolbarProps: AbstractToolbarProps, el: HTMLElement, pt: XAndY, offset: XAndY,\r\n    onItemExecuted: OnItemExecutedFunc, onCancel: OnCancelFunc, relativePosition: RelativePosition,\r\n  ): boolean {\r\n\r\n    const id = PopupManager._toolbarId;\r\n    const component = (\r\n      <ToolbarPopup id={id} el={el} pt={pt} offset={offset}\r\n        items={toolbarProps.items} relativePosition={relativePosition} orientation={Orientation.Horizontal} onCancel={onCancel} onItemExecuted={onItemExecuted} />\r\n    );\r\n\r\n    const popupInfo: PopupInfo = {\r\n      id, pt, component, parentDocument: el.ownerDocument,\r\n    };\r\n    PopupManager.addOrUpdatePopup(popupInfo);\r\n\r\n    return true;\r\n  }\r\n\r\n  public static hideToolbar(): boolean {\r\n    return PopupManager.removePopup(PopupManager._toolbarId);\r\n  }\r\n\r\n  public static showHTMLElement(\r\n    displayElement: HTMLElement, el: HTMLElement, pt: XAndY, offset: XAndY,\r\n    onCancel: OnCancelFunc, relativePosition: RelativePosition,\r\n  ): boolean {\r\n\r\n    const id = PopupManager._htmlElementId;\r\n    const component = (\r\n      <HTMLElementPopup id={id} el={el} pt={pt} offset={offset}\r\n        element={displayElement} relativePosition={relativePosition} orientation={Orientation.Horizontal} onCancel={onCancel} />\r\n    );\r\n\r\n    const popupInfo: PopupInfo = {\r\n      id, pt, component, parentDocument: el.ownerDocument,\r\n    };\r\n    PopupManager.addOrUpdatePopup(popupInfo);\r\n\r\n    return true;\r\n  }\r\n\r\n  public static hideHTMLElement(): boolean {\r\n    return PopupManager.removePopup(PopupManager._htmlElementId);\r\n  }\r\n\r\n  public static showCard(\r\n    content: PopupContentType, title: string | PropertyRecord | undefined, toolbarProps: AbstractToolbarProps | undefined,\r\n    el: HTMLElement, pt: XAndY, offset: XAndY,\r\n    onItemExecuted: OnItemExecutedFunc, onCancel: OnCancelFunc, relativePosition: RelativePosition,\r\n  ): boolean {\r\n\r\n    const id = PopupManager._cardId;\r\n    const component = (\r\n      <CardPopup id={id} el={el} pt={pt} offset={offset}\r\n        content={content} title={title} items={toolbarProps ? toolbarProps.items : /* istanbul ignore next */ undefined}\r\n        relativePosition={relativePosition} orientation={Orientation.Horizontal} onCancel={onCancel} onItemExecuted={onItemExecuted} />\r\n    );\r\n\r\n    const popupInfo: PopupInfo = {\r\n      id, pt, component, parentDocument: el.ownerDocument,\r\n    };\r\n    PopupManager.addOrUpdatePopup(popupInfo);\r\n\r\n    return true;\r\n  }\r\n\r\n  public static hideCard(): boolean {\r\n    const index = PopupManager._popups.findIndex((info: PopupInfo) => PopupManager._cardId === info.id);\r\n    if (index >= 0)\r\n      return PopupManager.removePopup(PopupManager._cardId);\r\n    return false;\r\n  }\r\n\r\n  public static openToolSettings(\r\n    dataProvider: DialogLayoutDataProvider, el: HTMLElement, pt: XAndY, offset: XAndY, onCancel: OnCancelFunc, relativePosition: RelativePosition,\r\n  ): boolean {\r\n\r\n    const id = PopupManager._toolSettingsId;\r\n    const component = (\r\n      <ToolSettingsPopup id={id} el={el} pt={pt} offset={offset}\r\n        dataProvider={dataProvider} relativePosition={relativePosition} orientation={Orientation.Horizontal} onCancel={onCancel} />\r\n    );\r\n\r\n    const popupInfo: PopupInfo = {\r\n      id, pt, component, parentDocument: el.ownerDocument,\r\n    };\r\n    PopupManager.addOrUpdatePopup(popupInfo);\r\n\r\n    return true;\r\n  }\r\n\r\n  public static closeToolSettings(): boolean {\r\n    return PopupManager.removePopup(PopupManager._toolSettingsId);\r\n  }\r\n\r\n  public static getPopupPosition(el: HTMLElement, pt: XAndY, offset: XAndY, size: SizeProps): Point {\r\n    const containerBounds = Rectangle.create(el.getBoundingClientRect());\r\n    const relativeBounds = Rectangle.createFromSize(size).offset(pt);\r\n    const adjustedPosition: Point = offsetAndContainInContainer(relativeBounds, containerBounds.getSize(), offset);\r\n    const position = adjustedPosition.offset(containerBounds.topLeft());\r\n\r\n    return position;\r\n  }\r\n\r\n}\r\n\r\n/** @internal */\r\ninterface PopupRendererState {\r\n  parentDocument: Document | null;\r\n  popups: ReadonlyArray<PopupInfo>;\r\n}\r\n\r\n/**  Popup Renderer\r\n * @alpha\r\n */\r\nexport class PopupRenderer extends React.Component<{}, PopupRendererState> {\r\n  /** @internal */\r\n  public override readonly state: PopupRendererState = {\r\n    parentDocument: null,\r\n    popups: PopupManager.popups,\r\n  };\r\n\r\n  public override componentDidMount(): void {\r\n    PopupManager.onPopupsChangedEvent.addListener(this._handlePopupsChangedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount(): void {\r\n    PopupManager.onPopupsChangedEvent.removeListener(this._handlePopupsChangedEvent);\r\n  }\r\n\r\n  private _handleRefSet = (popupDiv: HTMLElement | null) => {\r\n    this.setState({ parentDocument: popupDiv?.ownerDocument ?? null });\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    if (PopupManager.popupCount <= 0)\r\n      return null;\r\n\r\n    return (\r\n      <div className=\"appui-react-popup-render-container\" ref={this._handleRefSet}>\r\n        {this.state.parentDocument &&\r\n          this.state.popups.filter((info) => info.parentDocument === this.state.parentDocument)\r\n            .map((popupInfo: PopupInfo) => {\r\n              return (\r\n                <React.Fragment key={popupInfo.id}>\r\n                  {popupInfo.component}\r\n                </React.Fragment>\r\n              );\r\n            })\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private _handlePopupsChangedEvent = (args: PopupsChangedEventArgs) => {\r\n    this.setState({ popups: args.popups });\r\n  };\r\n\r\n}\r\n"]}

package/lib/cjs/appui-react/popup/PositionPopup.d.ts

@@ -0,0 +1,25 @@
+/** @packageDocumentation
+ * @module Popup
+ */
+import "./PositionPopup.scss";
+import * as React from "react";
+import { PointProps } from "@itwin/appui-abstract";
+import { CommonDivProps, CommonProps, SizeProps } from "@itwin/core-react";
+/** @alpha */
+export interface PositionPopupProps extends CommonProps {
+    /** Center point */
+    point: PointProps;
+    /** Function called when size is known. */
+    onSizeKnown?: (size: SizeProps) => void;
+}
+/** @alpha */
+export declare class PositionPopup extends React.PureComponent<PositionPopupProps> {
+    constructor(props: PositionPopupProps);
+    render(): JSX.Element;
+    private setDivRef;
+}
+/** PositionPopup content with padding
+ * @alpha
+ */
+export declare function PositionPopupContent(props: CommonDivProps): JSX.Element;
+//# sourceMappingURL=PositionPopup.d.ts.map

package/lib/cjs/appui-react/popup/PositionPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PositionPopup.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/popup/PositionPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,WAAW,EAAa,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEtF,aAAa;AACb,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,mBAAmB;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAED,aAAa;AACb,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;gBAE5D,KAAK,EAAE,kBAAkB;IAIrB,MAAM;IAgBtB,OAAO,CAAC,SAAS;CAYlB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,eAEzD"}

package/lib/cjs/appui-react/popup/PositionPopup.js

@@ -0,0 +1,48 @@
+"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 Popup
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PositionPopupContent = exports.PositionPopup = void 0;
+require("./PositionPopup.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+/** @alpha */
+class PositionPopup extends React.PureComponent {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { point, className, style, onSizeKnown, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const divStyle = {
+            ...style,
+            top: point.y,
+            left: point.x,
+        };
+        return (React.createElement("div", { ...props, className: (0, classnames_1.default)("uifw-position-popup", className), style: divStyle, ref: (e) => this.setDivRef(e) }, this.props.children));
+    }
+    setDivRef(div) {
+        // istanbul ignore else
+        if (div) {
+            const rect = div.getBoundingClientRect();
+            const size = new core_react_1.Size(rect.width, rect.height);
+            // istanbul ignore else
+            if (this.props.onSizeKnown)
+                this.props.onSizeKnown(size);
+        }
+    }
+}
+exports.PositionPopup = PositionPopup;
+/** PositionPopup content with padding
+ * @alpha
+ */
+function PositionPopupContent(props) {
+    return React.createElement(core_react_1.Div, { ...props, mainClassName: "uifw-position-popup-content" });
+}
+exports.PositionPopupContent = PositionPopupContent;
+//# sourceMappingURL=PositionPopup.js.map

package/lib/cjs/appui-react/popup/PositionPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PositionPopup.js","sourceRoot":"","sources":["../../../../src/appui-react/popup/PositionPopup.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAE/B,kDAAsF;AAUtF,aAAa;AACb,MAAa,aAAc,SAAQ,KAAK,CAAC,aAAiC;IAExE,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QAE/H,MAAM,QAAQ,GAAwB;YACpC,GAAG,KAAK;YACR,GAAG,EAAE,KAAK,CAAC,CAAC;YACZ,IAAI,EAAE,KAAK,CAAC,CAAC;SACd,CAAC;QAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IACpH,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;IAEO,SAAS,CAAC,GAA0B;QAC1C,uBAAuB;QACvB,IAAI,GAAG,EAAE;YACP,MAAM,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;YACzC,MAAM,IAAI,GAAG,IAAI,iBAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAE/C,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW;gBACxB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SAChC;IACH,CAAC;CAEF;AAlCD,sCAkCC;AAED;;GAEG;AACH,SAAgB,oBAAoB,CAAC,KAAqB;IACxD,OAAO,oBAAC,gBAAG,OAAK,KAAK,EAAE,aAAa,EAAC,6BAA6B,GAAG,CAAC;AACxE,CAAC;AAFD,oDAEC","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 Popup\r\n */\r\n\r\nimport \"./PositionPopup.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PointProps } from \"@itwin/appui-abstract\";\r\nimport { CommonDivProps, CommonProps, Div, Size, SizeProps } from \"@itwin/core-react\";\r\n\r\n/** @alpha */\r\nexport interface PositionPopupProps extends CommonProps {\r\n  /** Center point */\r\n  point: PointProps;\r\n  /** Function called when size is known. */\r\n  onSizeKnown?: (size: SizeProps) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport class PositionPopup extends React.PureComponent<PositionPopupProps> {\r\n\r\n  constructor(props: PositionPopupProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render() {\r\n    const { point, className, style, onSizeKnown, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n\r\n    const divStyle: React.CSSProperties = {\r\n      ...style,\r\n      top: point.y,\r\n      left: point.x,\r\n    };\r\n\r\n    return (\r\n      <div {...props} className={classnames(\"uifw-position-popup\", className)} style={divStyle} ref={(e) => this.setDivRef(e)}>\r\n        {this.props.children}\r\n      </div>\r\n    );\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 size = new Size(rect.width, rect.height);\r\n\r\n      // istanbul ignore else\r\n      if (this.props.onSizeKnown)\r\n        this.props.onSizeKnown(size);\r\n    }\r\n  }\r\n\r\n}\r\n\r\n/** PositionPopup content with padding\r\n * @alpha\r\n */\r\nexport function PositionPopupContent(props: CommonDivProps) {\r\n  return <Div {...props} mainClassName=\"uifw-position-popup-content\" />;\r\n}\r\n"]}

package/lib/cjs/appui-react/popup/PositionPopup.scss

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+* 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-position-popup {
+  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;
+
+  .uifw-position-popup-content {
+    padding: $uifw-popup-content-padding;
+  }
+
+  &.uifw-no-border {
+    border-width: 0;
+  }
+
+}

package/lib/cjs/appui-react/popup/ToolSettingsPopup.d.ts

@@ -0,0 +1,33 @@
+/** @packageDocumentation
+ * @module Popup
+ */
+import * as React from "react";
+import { DialogLayoutDataProvider, OnCancelFunc, RelativePosition } from "@itwin/appui-abstract";
+import { Orientation, Size } from "@itwin/core-react";
+import { PopupPropsBase } from "./PopupManager";
+/** @alpha */
+export interface ToolSettingsPopupProps extends PopupPropsBase {
+    dataProvider: DialogLayoutDataProvider;
+    relativePosition: RelativePosition;
+    orientation: Orientation;
+    onCancel: OnCancelFunc;
+}
+/** @internal */
+interface ToolSettingsPopupState {
+    size: Size;
+}
+/** Popup component for Tool Settings
+ * @alpha
+ */
+export declare class ToolSettingsPopup extends React.PureComponent<ToolSettingsPopupProps, ToolSettingsPopupState> {
+    /** @internal */
+    readonly state: {
+        size: Size;
+    };
+    constructor(props: ToolSettingsPopupProps);
+    private _onSizeKnown;
+    private _handleKeyDown;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=ToolSettingsPopup.d.ts.map

package/lib/cjs/appui-react/popup/ToolSettingsPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolSettingsPopup.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/popup/ToolSettingsPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,wBAAwB,EAAE,YAAY,EAAE,gBAAgB,EAAc,MAAM,uBAAuB,CAAC;AAC7G,OAAO,EAAkC,WAAW,EAAS,IAAI,EAAa,MAAM,mBAAmB,CAAC;AAExG,OAAO,EAAgB,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAK9D,aAAa;AACb,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,YAAY,EAAE,wBAAwB,CAAC;IACvC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,gBAAgB;AAChB,UAAU,sBAAsB;IAC9B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;IAExG,gBAAgB;IAChB,SAAyB,KAAK;;MAE5B;gBAEU,KAAK,EAAE,sBAAsB;IAIzC,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,cAAc,CAQpB;IAEc,MAAM;CAuBvB"}

package/lib/cjs/appui-react/popup/ToolSettingsPopup.js

@@ -0,0 +1,57 @@
+"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 Popup
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolSettingsPopup = void 0;
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const CursorPopup_1 = require("../cursor/cursorpopup/CursorPopup");
+const PopupManager_1 = require("./PopupManager");
+const PositionPopup_1 = require("./PositionPopup");
+const ComponentGenerator_1 = require("../uiprovider/ComponentGenerator");
+const DefaultDialogGridContainer_1 = require("../uiprovider/DefaultDialogGridContainer");
+/** Popup component for Tool Settings
+ * @alpha
+ */
+class ToolSettingsPopup extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        /** @internal */
+        this.state = {
+            size: new core_react_1.Size(-1, -1),
+        };
+        this._onSizeKnown = (newSize) => {
+            // istanbul ignore else
+            if (!this.state.size.equals(newSize))
+                this.setState({ size: core_react_1.Size.create(newSize) });
+        };
+        this._handleKeyDown = (e) => {
+            switch (e.key) {
+                case appui_abstract_1.SpecialKey.Escape:
+                    // istanbul ignore else
+                    if (this.props.onCancel)
+                        this.props.onCancel();
+                    break;
+            }
+        };
+    }
+    render() {
+        const componentGenerator = new ComponentGenerator_1.ComponentGenerator(this.props.dataProvider);
+        let point = PopupManager_1.PopupManager.getPopupPosition(this.props.el, this.props.pt, new core_react_1.Point(), this.state.size);
+        const popupRect = CursorPopup_1.CursorPopup.getPopupRect(point, this.props.offset, this.state.size, this.props.relativePosition);
+        point = new core_react_1.Point(popupRect.left, popupRect.top);
+        return (React.createElement(PositionPopup_1.PositionPopup, { key: this.props.id, point: point, onSizeKnown: this._onSizeKnown },
+            React.createElement(core_react_1.DivWithOutsideClick, { onOutsideClick: this.props.onCancel, onKeyDown: this._handleKeyDown },
+                React.createElement(PositionPopup_1.PositionPopupContent, null,
+                    React.createElement(core_react_1.FocusTrap, { active: true, returnFocusOnDeactivate: true }, componentGenerator &&
+                        React.createElement(DefaultDialogGridContainer_1.DialogGridContainer, { componentGenerator: componentGenerator }))))));
+    }
+}
+exports.ToolSettingsPopup = ToolSettingsPopup;
+//# sourceMappingURL=ToolSettingsPopup.js.map

package/lib/cjs/appui-react/popup/ToolSettingsPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolSettingsPopup.js","sourceRoot":"","sources":["../../../../src/appui-react/popup/ToolSettingsPopup.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,0DAA6G;AAC7G,kDAAwG;AACxG,mEAAgE;AAChE,iDAA8D;AAC9D,mDAAsE;AACtE,yEAAsE;AACtE,yFAA+E;AAe/E;;GAEG;AACH,MAAa,iBAAkB,SAAQ,KAAK,CAAC,aAA6D;IAOxG,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;QANf,gBAAgB;QACS,UAAK,GAAG;YAC/B,IAAI,EAAE,IAAI,iBAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACvB,CAAC;QAMM,iBAAY,GAAG,CAAC,OAAkB,EAAE,EAAE;YAC5C,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;gBAClC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,iBAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,CAAsB,EAAE,EAAE;YAClD,QAAQ,CAAC,CAAC,GAAG,EAAE;gBACb,KAAK,2BAAU,CAAC,MAAM;oBACpB,uBAAuB;oBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;wBACrB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACxB,MAAM;aACT;QACH,CAAC,CAAC;IAhBF,CAAC;IAkBe,MAAM;QACpB,MAAM,kBAAkB,GAAG,IAAI,uCAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC3E,IAAI,KAAK,GAAG,2BAAY,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,kBAAK,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACtG,MAAM,SAAS,GAAG,yBAAW,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QACnH,KAAK,GAAG,IAAI,kBAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QAEjD,OAAO,CACL,oBAAC,6BAAa,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EAC/B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,IAAI,CAAC,YAAY;YAE9B,oBAAC,gCAAmB,IAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc;gBACtF,oBAAC,oCAAoB;oBACnB,oBAAC,sBAAS,IAAC,MAAM,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,IACnD,kBAAkB;wBACjB,oBAAC,gDAAmB,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,CAEvD,CACS,CACH,CACR,CACjB,CAAC;IACJ,CAAC;CACF;AAlDD,8CAkDC","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 Popup\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { DialogLayoutDataProvider, OnCancelFunc, RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { DivWithOutsideClick, FocusTrap, Orientation, Point, Size, SizeProps } from \"@itwin/core-react\";\r\nimport { CursorPopup } from \"../cursor/cursorpopup/CursorPopup\";\r\nimport { PopupManager, PopupPropsBase } from \"./PopupManager\";\r\nimport { PositionPopup, PositionPopupContent } from \"./PositionPopup\";\r\nimport { ComponentGenerator } from \"../uiprovider/ComponentGenerator\";\r\nimport { DialogGridContainer } from \"../uiprovider/DefaultDialogGridContainer\";\r\n\r\n/** @alpha */\r\nexport interface ToolSettingsPopupProps extends PopupPropsBase {\r\n  dataProvider: DialogLayoutDataProvider;\r\n  relativePosition: RelativePosition;\r\n  orientation: Orientation;\r\n  onCancel: OnCancelFunc;\r\n}\r\n\r\n/** @internal */\r\ninterface ToolSettingsPopupState {\r\n  size: Size;\r\n}\r\n\r\n/** Popup component for Tool Settings\r\n * @alpha\r\n */\r\nexport class ToolSettingsPopup extends React.PureComponent<ToolSettingsPopupProps, ToolSettingsPopupState> {\r\n\r\n  /** @internal */\r\n  public override readonly state = {\r\n    size: new Size(-1, -1),\r\n  };\r\n\r\n  constructor(props: ToolSettingsPopupProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _onSizeKnown = (newSize: SizeProps) => {\r\n    // istanbul ignore else\r\n    if (!this.state.size.equals(newSize))\r\n      this.setState({ size: Size.create(newSize) });\r\n  };\r\n\r\n  private _handleKeyDown = (e: React.KeyboardEvent) => {\r\n    switch (e.key) {\r\n      case SpecialKey.Escape:\r\n        // istanbul ignore else\r\n        if (this.props.onCancel)\r\n          this.props.onCancel();\r\n        break;\r\n    }\r\n  };\r\n\r\n  public override render() {\r\n    const componentGenerator = new ComponentGenerator(this.props.dataProvider);\r\n    let point = PopupManager.getPopupPosition(this.props.el, this.props.pt, new Point(), this.state.size);\r\n    const popupRect = CursorPopup.getPopupRect(point, this.props.offset, this.state.size, this.props.relativePosition);\r\n    point = new Point(popupRect.left, popupRect.top);\r\n\r\n    return (\r\n      <PositionPopup key={this.props.id}\r\n        point={point}\r\n        onSizeKnown={this._onSizeKnown}\r\n      >\r\n        <DivWithOutsideClick onOutsideClick={this.props.onCancel} onKeyDown={this._handleKeyDown}>\r\n          <PositionPopupContent>\r\n            <FocusTrap active={true} returnFocusOnDeactivate={true}>\r\n              {componentGenerator &&\r\n                <DialogGridContainer componentGenerator={componentGenerator} />\r\n              }\r\n            </FocusTrap>\r\n          </PositionPopupContent>\r\n        </DivWithOutsideClick>\r\n      </PositionPopup>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/appui-react/popup/ToolbarPopup.d.ts

@@ -0,0 +1,34 @@
+/** @packageDocumentation
+ * @module Popup
+ */
+import * as React from "react";
+import { CommonToolbarItem, OnCancelFunc, OnItemExecutedFunc, RelativePosition } from "@itwin/appui-abstract";
+import { Orientation, Size } from "@itwin/core-react";
+import { PopupPropsBase } from "./PopupManager";
+/** @alpha */
+export interface ToolbarPopupProps extends PopupPropsBase {
+    items: CommonToolbarItem[];
+    relativePosition: RelativePosition;
+    orientation: Orientation;
+    onCancel: OnCancelFunc;
+    onItemExecuted: OnItemExecutedFunc;
+}
+/** @internal */
+interface ToolbarPopupState {
+    size: Size;
+}
+/** Popup component for Input Editor
+ * @alpha
+ */
+export declare class ToolbarPopup extends React.PureComponent<ToolbarPopupProps, ToolbarPopupState> {
+    /** @internal */
+    readonly state: {
+        size: Size;
+    };
+    private _onSizeKnown;
+    private _handleKeyDown;
+    private _cancel;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=ToolbarPopup.d.ts.map

package/lib/cjs/appui-react/popup/ToolbarPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPopup.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/popup/ToolbarPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAc,MAAM,uBAAuB,CAAC;AAC1H,OAAO,EAAkC,WAAW,EAAS,IAAI,EAAa,MAAM,mBAAmB,CAAC;AAGxG,OAAO,EAAgB,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAG9D,aAAa;AACb,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,YAAY,CAAC;IACvB,cAAc,EAAE,kBAAkB,CAAC;CACpC;AAED,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IACzF,gBAAgB;IAChB,SAAyB,KAAK;;MAE5B;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,OAAO,CAAC,OAAO;IAOC,MAAM;CA0BvB"}

package/lib/cjs/appui-react/popup/ToolbarPopup.js

@@ -0,0 +1,58 @@
+"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 Popup
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarPopup = void 0;
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const components_react_1 = require("@itwin/components-react");
+const CursorPopup_1 = require("../cursor/cursorpopup/CursorPopup");
+const PopupManager_1 = require("./PopupManager");
+const PositionPopup_1 = require("./PositionPopup");
+/** Popup component for Input Editor
+ * @alpha
+ */
+class ToolbarPopup extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.state = {
+            size: new core_react_1.Size(-1, -1),
+        };
+        this._onSizeKnown = (newSize) => {
+            // istanbul ignore else
+            if (!this.state.size.equals(newSize))
+                this.setState({ size: core_react_1.Size.create(newSize) });
+        };
+        this._handleKeyDown = (event) => {
+            switch (event.key) {
+                case appui_abstract_1.SpecialKey.Escape:
+                    this._cancel();
+                    break;
+            }
+        };
+    }
+    _cancel() {
+        // istanbul ignore else
+        if (this.props.onCancel) {
+            this.props.onCancel();
+        }
+    }
+    render() {
+        let point = PopupManager_1.PopupManager.getPopupPosition(this.props.el, this.props.pt, new core_react_1.Point(), this.state.size);
+        const popupRect = CursorPopup_1.CursorPopup.getPopupRect(point, this.props.offset, this.state.size, this.props.relativePosition);
+        point = new core_react_1.Point(popupRect.left, popupRect.top);
+        return (React.createElement(PositionPopup_1.PositionPopup, { key: this.props.id, className: "uifw-no-border", point: point, onSizeKnown: this._onSizeKnown },
+            React.createElement(core_react_1.DivWithOutsideClick, { onOutsideClick: this.props.onCancel, onKeyDown: this._handleKeyDown },
+                React.createElement(core_react_1.FocusTrap, { active: true, returnFocusOnDeactivate: true },
+                    React.createElement(components_react_1.Toolbar, { expandsTo: components_react_1.Direction.Bottom, panelAlignment: components_react_1.ToolbarPanelAlignment.Start, items: this.props.items, useDragInteraction: true, toolbarOpacitySetting: components_react_1.ToolbarOpacitySetting.Defaults, onItemExecuted: this.props.onItemExecuted })))));
+    }
+}
+exports.ToolbarPopup = ToolbarPopup;
+//# sourceMappingURL=ToolbarPopup.js.map

package/lib/cjs/appui-react/popup/ToolbarPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPopup.js","sourceRoot":"","sources":["../../../../src/appui-react/popup/ToolbarPopup.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,0DAA0H;AAC1H,kDAAwG;AACxG,8DAA2G;AAC3G,mEAAgE;AAChE,iDAA8D;AAC9D,mDAAgD;AAgBhD;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,aAAmD;IAA3F;;QACE,gBAAgB;QACS,UAAK,GAAG;YAC/B,IAAI,EAAE,IAAI,iBAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACvB,CAAC;QAEM,iBAAY,GAAG,CAAC,OAAkB,EAAE,EAAE;YAC5C,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;gBAClC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,iBAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAA0C,EAAQ,EAAE;YAC5E,QAAQ,KAAK,CAAC,GAAG,EAAE;gBACjB,KAAK,2BAAU,CAAC,MAAM;oBACpB,IAAI,CAAC,OAAO,EAAE,CAAC;oBACf,MAAM;aACT;QACH,CAAC,CAAC;IAmCJ,CAAC;IAjCS,OAAO;QACb,uBAAuB;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;SACvB;IACH,CAAC;IAEe,MAAM;QACpB,IAAI,KAAK,GAAG,2BAAY,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,kBAAK,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACtG,MAAM,SAAS,GAAG,yBAAW,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QACnH,KAAK,GAAG,IAAI,kBAAK,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QAEjD,OAAO,CACL,oBAAC,6BAAa,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EAC/B,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,IAAI,CAAC,YAAY;YAE9B,oBAAC,gCAAmB,IAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc;gBACtF,oBAAC,sBAAS,IAAC,MAAM,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI;oBACpD,oBAAC,0BAAO,IACN,SAAS,EAAE,4BAAS,CAAC,MAAM,EAC3B,cAAc,EAAE,wCAAqB,CAAC,KAAK,EAC3C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,kBAAkB,EAAE,IAAI,EACxB,qBAAqB,EAAE,wCAAqB,CAAC,QAAQ,EACrD,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,GACzC,CACQ,CACQ,CACR,CACjB,CAAC;IACJ,CAAC;CACF;AArDD,oCAqDC","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 Popup\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { CommonToolbarItem, OnCancelFunc, OnItemExecutedFunc, RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { DivWithOutsideClick, FocusTrap, Orientation, Point, Size, SizeProps } from \"@itwin/core-react\";\r\nimport { Direction, Toolbar, ToolbarOpacitySetting, ToolbarPanelAlignment } from \"@itwin/components-react\";\r\nimport { CursorPopup } from \"../cursor/cursorpopup/CursorPopup\";\r\nimport { PopupManager, PopupPropsBase } from \"./PopupManager\";\r\nimport { PositionPopup } from \"./PositionPopup\";\r\n\r\n/** @alpha */\r\nexport interface ToolbarPopupProps extends PopupPropsBase {\r\n  items: CommonToolbarItem[];\r\n  relativePosition: RelativePosition;\r\n  orientation: Orientation;\r\n  onCancel: OnCancelFunc;\r\n  onItemExecuted: OnItemExecutedFunc;\r\n}\r\n\r\n/** @internal */\r\ninterface ToolbarPopupState {\r\n  size: Size;\r\n}\r\n\r\n/** Popup component for Input Editor\r\n * @alpha\r\n */\r\nexport class ToolbarPopup extends React.PureComponent<ToolbarPopupProps, ToolbarPopupState> {\r\n  /** @internal */\r\n  public override readonly state = {\r\n    size: new Size(-1, -1),\r\n  };\r\n\r\n  private _onSizeKnown = (newSize: SizeProps) => {\r\n    // istanbul ignore else\r\n    if (!this.state.size.equals(newSize))\r\n      this.setState({ size: Size.create(newSize) });\r\n  };\r\n\r\n  private _handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\r\n    switch (event.key) {\r\n      case SpecialKey.Escape:\r\n        this._cancel();\r\n        break;\r\n    }\r\n  };\r\n\r\n  private _cancel() {\r\n    // istanbul ignore else\r\n    if (this.props.onCancel) {\r\n      this.props.onCancel();\r\n    }\r\n  }\r\n\r\n  public override render() {\r\n    let point = PopupManager.getPopupPosition(this.props.el, this.props.pt, new Point(), this.state.size);\r\n    const popupRect = CursorPopup.getPopupRect(point, this.props.offset, this.state.size, this.props.relativePosition);\r\n    point = new Point(popupRect.left, popupRect.top);\r\n\r\n    return (\r\n      <PositionPopup key={this.props.id}\r\n        className=\"uifw-no-border\"\r\n        point={point}\r\n        onSizeKnown={this._onSizeKnown}\r\n      >\r\n        <DivWithOutsideClick onOutsideClick={this.props.onCancel} onKeyDown={this._handleKeyDown}>\r\n          <FocusTrap active={true} returnFocusOnDeactivate={true}>\r\n            <Toolbar\r\n              expandsTo={Direction.Bottom}\r\n              panelAlignment={ToolbarPanelAlignment.Start}\r\n              items={this.props.items}\r\n              useDragInteraction={true}\r\n              toolbarOpacitySetting={ToolbarOpacitySetting.Defaults}\r\n              onItemExecuted={this.props.onItemExecuted}\r\n            />\r\n          </FocusTrap>\r\n        </DivWithOutsideClick>\r\n      </PositionPopup>\r\n    );\r\n  }\r\n}\r\n"]}