@itwin/appui-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/appui-react/accudraw/AccuDrawInputField.js

@@ -1,121 +1,121 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module AccuDraw
- */
-import "./AccuDrawInputField.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Icon, useRefs } from "@itwin/core-react";
-import { isLetter, SpecialKey } from "@itwin/appui-abstract";
-import { Input } from "@itwin/itwinui-react";
-import { FrameworkAccuDraw } from "./FrameworkAccuDraw";
-import { UiFramework } from "../UiFramework";
-import { SvgLock } from "@itwin/itwinui-icons-react";
-const ForwardRefAccuDrawInput = React.forwardRef(function ForwardRefAccuDrawInputField(props, ref) {
-    const { className, style, id, label, iconSpec, labelClassName, labelStyle, labelCentered, field, isLocked, onValueChanged, valueChangedDelay, onEnterPressed, onEscPressed, ...inputProps } = props;
-    const [stringValue, setStringValue] = React.useState("");
-    const timeoutId = React.useRef(0);
-    const [needValueChanged, setNeedValueChanged] = React.useState(false);
-    const [needSelection, setNeedSelection] = React.useState(false);
-    const [isFocusField, setIsFocusField] = React.useState(false);
-    const inputElementRef = React.useRef(null);
-    const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
-    React.useEffect(() => {
-        const formattedValue = FrameworkAccuDraw.getFieldDisplayValue(field);
-        setStringValue(formattedValue);
-    }, [field]);
-    const handleChange = React.useCallback((event) => {
-        const value = event.currentTarget.value;
-        // istanbul ignore next
-        if (value === undefined)
-            return;
-        // istanbul ignore else
-        if (stringValue !== value) {
-            setStringValue(value);
-            setNeedValueChanged(true);
-        }
-    }, [stringValue]);
-    const unsetTimeout = () => {
-        // istanbul ignore else
-        if (timeoutId) {
-            window.clearTimeout(timeoutId.current);
-            timeoutId.current = 0;
-        }
-    };
-    React.useEffect(() => {
-        // After setStringValue & re-render
-        // istanbul ignore else
-        if (needValueChanged) {
-            if (valueChangedDelay) {
-                unsetTimeout();
-                timeoutId.current = window.setTimeout(() => {
-                    onValueChanged(stringValue);
-                }, valueChangedDelay);
-            }
-            else {
-                onValueChanged(stringValue);
-            }
-            setNeedValueChanged(false);
-        }
-    }, [onValueChanged, valueChangedDelay, stringValue, needValueChanged]);
-    React.useEffect(() => {
-        // On unmount
-        return () => unsetTimeout();
-    }, []);
-    const handleKeyDown = React.useCallback((e) => {
-        switch (e.key) {
-            case SpecialKey.Escape:
-                onEscPressed && onEscPressed();
-                return;
-            case SpecialKey.Enter:
-                onEnterPressed && onEnterPressed();
-                return;
-        }
-        if (isLetter(e.key)) {
-            e.preventDefault();
-            UiFramework.keyboardShortcuts.processKey(e.key);
-            return;
-        }
-    }, [onEscPressed, onEnterPressed]);
-    React.useEffect(() => {
-        const handleSetFieldValueToUi = (args) => {
-            if (args.field === field && stringValue !== args.formattedValue) {
-                setStringValue(args.formattedValue);
-                // istanbul ignore else
-                if (isFocusField)
-                    setNeedSelection(true);
-            }
-        };
-        return FrameworkAccuDraw.onAccuDrawSetFieldValueToUiEvent.addListener(handleSetFieldValueToUi);
-    }, [field, isFocusField, stringValue]);
-    React.useEffect(() => {
-        if (needSelection) {
-            // istanbul ignore else
-            if (inputElementRef.current)
-                inputElementRef.current.select();
-            setNeedSelection(false);
-        }
-    }, [needSelection]);
-    React.useEffect(() => {
-        const handleSetFieldFocus = (args) => {
-            setIsFocusField(args.field === field);
-        };
-        return FrameworkAccuDraw.onAccuDrawSetFieldFocusEvent.addListener(handleSetFieldFocus);
-    }, [field]);
-    const inputClassNames = classnames("uifw-accudraw-input-field", className);
-    const labelClassNames = classnames("uifw-accudraw-input-label", labelCentered && "uifw-label-centered", labelClassName);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("label", { htmlFor: id, className: labelClassNames, style: labelStyle },
-            label,
-            iconSpec && React.createElement(Icon, { iconSpec: iconSpec })),
-        React.createElement(Input, { ...inputProps, ref: refs, id: id, value: stringValue, className: inputClassNames, style: style, autoComplete: "off", onChange: handleChange, onKeyDown: handleKeyDown, size: "small" }),
-        React.createElement("span", { className: "uifw-accudraw-lock" }, isLocked && React.createElement(Icon, { iconSpec: React.createElement(SvgLock, null) }))));
-});
-/** Input field for AccuDraw Ui
- * @beta
- */
-export const AccuDrawInputField = ForwardRefAccuDrawInput;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import "./AccuDrawInputField.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Icon, useRefs } from "@itwin/core-react";
+import { isLetter, SpecialKey } from "@itwin/appui-abstract";
+import { Input } from "@itwin/itwinui-react";
+import { FrameworkAccuDraw } from "./FrameworkAccuDraw";
+import { UiFramework } from "../UiFramework";
+import { SvgLock } from "@itwin/itwinui-icons-react";
+const ForwardRefAccuDrawInput = React.forwardRef(function ForwardRefAccuDrawInputField(props, ref) {
+    const { className, style, id, label, iconSpec, labelClassName, labelStyle, labelCentered, field, isLocked, onValueChanged, valueChangedDelay, onEnterPressed, onEscPressed, ...inputProps } = props;
+    const [stringValue, setStringValue] = React.useState("");
+    const timeoutId = React.useRef(0);
+    const [needValueChanged, setNeedValueChanged] = React.useState(false);
+    const [needSelection, setNeedSelection] = React.useState(false);
+    const [isFocusField, setIsFocusField] = React.useState(false);
+    const inputElementRef = React.useRef(null);
+    const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+    React.useEffect(() => {
+        const formattedValue = FrameworkAccuDraw.getFieldDisplayValue(field);
+        setStringValue(formattedValue);
+    }, [field]);
+    const handleChange = React.useCallback((event) => {
+        const value = event.currentTarget.value;
+        // istanbul ignore next
+        if (value === undefined)
+            return;
+        // istanbul ignore else
+        if (stringValue !== value) {
+            setStringValue(value);
+            setNeedValueChanged(true);
+        }
+    }, [stringValue]);
+    const unsetTimeout = () => {
+        // istanbul ignore else
+        if (timeoutId) {
+            window.clearTimeout(timeoutId.current);
+            timeoutId.current = 0;
+        }
+    };
+    React.useEffect(() => {
+        // After setStringValue & re-render
+        // istanbul ignore else
+        if (needValueChanged) {
+            if (valueChangedDelay) {
+                unsetTimeout();
+                timeoutId.current = window.setTimeout(() => {
+                    onValueChanged(stringValue);
+                }, valueChangedDelay);
+            }
+            else {
+                onValueChanged(stringValue);
+            }
+            setNeedValueChanged(false);
+        }
+    }, [onValueChanged, valueChangedDelay, stringValue, needValueChanged]);
+    React.useEffect(() => {
+        // On unmount
+        return () => unsetTimeout();
+    }, []);
+    const handleKeyDown = React.useCallback((e) => {
+        switch (e.key) {
+            case SpecialKey.Escape:
+                onEscPressed && onEscPressed();
+                return;
+            case SpecialKey.Enter:
+                onEnterPressed && onEnterPressed();
+                return;
+        }
+        if (isLetter(e.key)) {
+            e.preventDefault();
+            UiFramework.keyboardShortcuts.processKey(e.key);
+            return;
+        }
+    }, [onEscPressed, onEnterPressed]);
+    React.useEffect(() => {
+        const handleSetFieldValueToUi = (args) => {
+            if (args.field === field && stringValue !== args.formattedValue) {
+                setStringValue(args.formattedValue);
+                // istanbul ignore else
+                if (isFocusField)
+                    setNeedSelection(true);
+            }
+        };
+        return FrameworkAccuDraw.onAccuDrawSetFieldValueToUiEvent.addListener(handleSetFieldValueToUi);
+    }, [field, isFocusField, stringValue]);
+    React.useEffect(() => {
+        if (needSelection) {
+            // istanbul ignore else
+            if (inputElementRef.current)
+                inputElementRef.current.select();
+            setNeedSelection(false);
+        }
+    }, [needSelection]);
+    React.useEffect(() => {
+        const handleSetFieldFocus = (args) => {
+            setIsFocusField(args.field === field);
+        };
+        return FrameworkAccuDraw.onAccuDrawSetFieldFocusEvent.addListener(handleSetFieldFocus);
+    }, [field]);
+    const inputClassNames = classnames("uifw-accudraw-input-field", className);
+    const labelClassNames = classnames("uifw-accudraw-input-label", labelCentered && "uifw-label-centered", labelClassName);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { htmlFor: id, className: labelClassNames, style: labelStyle },
+            label,
+            iconSpec && React.createElement(Icon, { iconSpec: iconSpec })),
+        React.createElement(Input, { ...inputProps, ref: refs, id: id, value: stringValue, className: inputClassNames, style: style, autoComplete: "off", onChange: handleChange, onKeyDown: handleKeyDown, size: "small" }),
+        React.createElement("span", { className: "uifw-accudraw-lock" }, isLocked && React.createElement(Icon, { iconSpec: React.createElement(SvgLock, null) }))));
+});
+/** Input field for AccuDraw Ui
+ * @beta
+ */
+export const AccuDrawInputField = ForwardRefAccuDrawInput;
 //# sourceMappingURL=AccuDrawInputField.js.map

package/lib/esm/appui-react/accudraw/AccuDrawKeyboardShortcuts.d.ts

@@ -1,13 +1,13 @@
-/** @packageDocumentation
- * @module AccuDraw
- */
-import { KeyboardShortcutProps } from "../framework/FrameworkKeyboardShortcuts";
-/** Default AccuDraw Keyboard Shortcuts
- * @beta
- */
-export declare class AccuDrawKeyboardShortcuts {
-    /** Get default AccuDraw Keyboard Shortcuts list.
-     */
-    static getDefaultShortcuts(): KeyboardShortcutProps[];
-}
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import { KeyboardShortcutProps } from "../framework/FrameworkKeyboardShortcuts";
+/** Default AccuDraw Keyboard Shortcuts
+ * @beta
+ */
+export declare class AccuDrawKeyboardShortcuts {
+    /** Get default AccuDraw Keyboard Shortcuts list.
+     */
+    static getDefaultShortcuts(): KeyboardShortcutProps[];
+}
 //# sourceMappingURL=AccuDrawKeyboardShortcuts.d.ts.map

package/lib/esm/appui-react/accudraw/AccuDrawKeyboardShortcuts.js

@@ -1,107 +1,107 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module AccuDraw
- */
-import { AccuDrawCommandItems } from "./AccuDrawCommandItems";
-import { FrameworkAccuDraw } from "./FrameworkAccuDraw";
-/** Default AccuDraw Keyboard Shortcuts
- * @beta
- */
-export class AccuDrawKeyboardShortcuts {
-    /** Get default AccuDraw Keyboard Shortcuts list.
-     */
-    static getDefaultShortcuts() {
-        const keyboardShortcutList = [
-            {
-                key: "a",
-                labelKey: "UiFramework:accuDraw.subMenu",
-                shortcuts: [
-                    {
-                        key: "s",
-                        item: AccuDrawCommandItems.lockSmart,
-                    },
-                    {
-                        key: "r",
-                        item: AccuDrawCommandItems.setOrigin,
-                    },
-                    {
-                        key: "t",
-                        item: AccuDrawCommandItems.changeCompassMode,
-                    },
-                    {
-                        key: "x",
-                        item: AccuDrawCommandItems.lockX,
-                        isHidden: FrameworkAccuDraw.isPolarModeConditional,
-                    },
-                    {
-                        key: "y",
-                        item: AccuDrawCommandItems.lockY,
-                        isHidden: FrameworkAccuDraw.isPolarModeConditional,
-                    },
-                    {
-                        key: "z",
-                        item: AccuDrawCommandItems.lockZ,
-                        isHidden: FrameworkAccuDraw.isPolarModeConditional,
-                    },
-                    {
-                        key: "a",
-                        item: AccuDrawCommandItems.lockAngle,
-                        isHidden: FrameworkAccuDraw.isRectangularModeConditional,
-                    },
-                    {
-                        key: "d",
-                        item: AccuDrawCommandItems.lockDistance,
-                        isHidden: FrameworkAccuDraw.isRectangularModeConditional,
-                    },
-                    {
-                        key: "b",
-                        item: AccuDrawCommandItems.bumpToolSetting,
-                    },
-                ],
-            },
-            {
-                key: "r",
-                labelKey: "UiFramework:accuDraw.rotateSubMenu",
-                shortcuts: [
-                    {
-                        key: "t",
-                        item: AccuDrawCommandItems.rotateTop,
-                        isDisabled: FrameworkAccuDraw.isTopRotationConditional,
-                    },
-                    {
-                        key: "s",
-                        item: AccuDrawCommandItems.rotateSide,
-                        isDisabled: FrameworkAccuDraw.isSideRotationConditional,
-                    },
-                    {
-                        key: "f",
-                        item: AccuDrawCommandItems.rotateFront,
-                        isDisabled: FrameworkAccuDraw.isFrontRotationConditional,
-                    },
-                    {
-                        key: "v",
-                        item: AccuDrawCommandItems.rotateView,
-                        isDisabled: FrameworkAccuDraw.isViewRotationConditional,
-                    },
-                    {
-                        key: "c",
-                        item: AccuDrawCommandItems.rotateCycle,
-                    },
-                    {
-                        key: "a",
-                        item: AccuDrawCommandItems.rotateAxes,
-                    },
-                    {
-                        key: "e",
-                        item: AccuDrawCommandItems.rotateToElement,
-                    },
-                ],
-            },
-        ];
-        return keyboardShortcutList;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import { AccuDrawCommandItems } from "./AccuDrawCommandItems";
+import { FrameworkAccuDraw } from "./FrameworkAccuDraw";
+/** Default AccuDraw Keyboard Shortcuts
+ * @beta
+ */
+export class AccuDrawKeyboardShortcuts {
+    /** Get default AccuDraw Keyboard Shortcuts list.
+     */
+    static getDefaultShortcuts() {
+        const keyboardShortcutList = [
+            {
+                key: "a",
+                labelKey: "UiFramework:accuDraw.subMenu",
+                shortcuts: [
+                    {
+                        key: "s",
+                        item: AccuDrawCommandItems.lockSmart,
+                    },
+                    {
+                        key: "r",
+                        item: AccuDrawCommandItems.setOrigin,
+                    },
+                    {
+                        key: "t",
+                        item: AccuDrawCommandItems.changeCompassMode,
+                    },
+                    {
+                        key: "x",
+                        item: AccuDrawCommandItems.lockX,
+                        isHidden: FrameworkAccuDraw.isPolarModeConditional,
+                    },
+                    {
+                        key: "y",
+                        item: AccuDrawCommandItems.lockY,
+                        isHidden: FrameworkAccuDraw.isPolarModeConditional,
+                    },
+                    {
+                        key: "z",
+                        item: AccuDrawCommandItems.lockZ,
+                        isHidden: FrameworkAccuDraw.isPolarModeConditional,
+                    },
+                    {
+                        key: "a",
+                        item: AccuDrawCommandItems.lockAngle,
+                        isHidden: FrameworkAccuDraw.isRectangularModeConditional,
+                    },
+                    {
+                        key: "d",
+                        item: AccuDrawCommandItems.lockDistance,
+                        isHidden: FrameworkAccuDraw.isRectangularModeConditional,
+                    },
+                    {
+                        key: "b",
+                        item: AccuDrawCommandItems.bumpToolSetting,
+                    },
+                ],
+            },
+            {
+                key: "r",
+                labelKey: "UiFramework:accuDraw.rotateSubMenu",
+                shortcuts: [
+                    {
+                        key: "t",
+                        item: AccuDrawCommandItems.rotateTop,
+                        isDisabled: FrameworkAccuDraw.isTopRotationConditional,
+                    },
+                    {
+                        key: "s",
+                        item: AccuDrawCommandItems.rotateSide,
+                        isDisabled: FrameworkAccuDraw.isSideRotationConditional,
+                    },
+                    {
+                        key: "f",
+                        item: AccuDrawCommandItems.rotateFront,
+                        isDisabled: FrameworkAccuDraw.isFrontRotationConditional,
+                    },
+                    {
+                        key: "v",
+                        item: AccuDrawCommandItems.rotateView,
+                        isDisabled: FrameworkAccuDraw.isViewRotationConditional,
+                    },
+                    {
+                        key: "c",
+                        item: AccuDrawCommandItems.rotateCycle,
+                    },
+                    {
+                        key: "a",
+                        item: AccuDrawCommandItems.rotateAxes,
+                    },
+                    {
+                        key: "e",
+                        item: AccuDrawCommandItems.rotateToElement,
+                    },
+                ],
+            },
+        ];
+        return keyboardShortcutList;
+    }
+}
 //# sourceMappingURL=AccuDrawKeyboardShortcuts.js.map

package/lib/esm/appui-react/accudraw/AccuDrawPopupManager.d.ts

@@ -1,19 +1,19 @@
-/** @packageDocumentation
- * @module AccuDraw
- */
-import { XAndY } from "@itwin/core-geometry";
-import { AbstractMenuItemProps, OnCancelFunc, OnNumberCommitFunc } from "@itwin/appui-abstract";
-/** AccuDraw Popup Manager class
- * @alpha
- */
-export declare class AccuDrawPopupManager {
-    private static _calculatorId;
-    static showMenuButton(id: string, el: HTMLElement, pt: XAndY, menuItemsProps: AbstractMenuItemProps[]): boolean;
-    static hideMenuButton(id: string): boolean;
-    static showCalculator(el: HTMLElement, pt: XAndY, initialValue: number, resultIcon: string, onOk: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
-    static hideCalculator(): boolean;
-    static showAngleEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
-    static showLengthEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
-    static showHeightEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
-}
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import { XAndY } from "@itwin/core-geometry";
+import { AbstractMenuItemProps, OnCancelFunc, OnNumberCommitFunc } from "@itwin/appui-abstract";
+/** AccuDraw Popup Manager class
+ * @alpha
+ */
+export declare class AccuDrawPopupManager {
+    private static _calculatorId;
+    static showMenuButton(id: string, el: HTMLElement, pt: XAndY, menuItemsProps: AbstractMenuItemProps[]): boolean;
+    static hideMenuButton(id: string): boolean;
+    static showCalculator(el: HTMLElement, pt: XAndY, initialValue: number, resultIcon: string, onOk: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
+    static hideCalculator(): boolean;
+    static showAngleEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
+    static showLengthEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
+    static showHeightEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
+}
 //# sourceMappingURL=AccuDrawPopupManager.d.ts.map

package/lib/esm/appui-react/accudraw/AccuDrawPopupManager.js

@@ -1,61 +1,62 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module AccuDraw
- */
-import * as React from "react";
-import { AngleDescription, LengthDescription } from "@itwin/core-frontend";
-import { IconSpecUtilities } from "@itwin/appui-abstract";
-import { PopupManager } from "../popup/PopupManager";
-import { MenuItemHelpers } from "../shared/MenuItem";
-import { CalculatorPopup } from "./CalculatorPopup";
-import { MenuButtonPopup } from "./MenuButtonPopup";
-import angleIcon from "./angle.svg";
-import lengthIcon from "./distance.svg";
-import heightIcon from "./height-2.svg";
-/** AccuDraw Popup Manager class
- * @alpha
- */
-export class AccuDrawPopupManager {
-    static showMenuButton(id, el, pt, menuItemsProps) {
-        const menuItems = MenuItemHelpers.createMenuItems(menuItemsProps);
-        const menuContent = MenuItemHelpers.createMenuItemNodes(menuItems);
-        const component = (React.createElement(MenuButtonPopup, { id: id, el: el, pt: pt, offset: PopupManager.defaultOffset, content: menuContent }));
-        const popupInfo = {
-            id, pt, component, parentDocument: el.ownerDocument,
-        };
-        PopupManager.addOrUpdatePopup(popupInfo);
-        return true;
-    }
-    static hideMenuButton(id) {
-        return PopupManager.removePopup(id);
-    }
-    static showCalculator(el, pt, initialValue, resultIcon, onOk, onCancel) {
-        const id = AccuDrawPopupManager._calculatorId;
-        const component = (React.createElement(CalculatorPopup, { id: id, el: el, pt: pt, offset: PopupManager.defaultOffset, initialValue: initialValue, resultIcon: resultIcon, onOk: onOk, onCancel: onCancel }));
-        const popupInfo = {
-            id, pt, component, parentDocument: el.ownerDocument,
-        };
-        PopupManager.addOrUpdatePopup(popupInfo);
-        return true;
-    }
-    static hideCalculator() {
-        return PopupManager.removePopup(AccuDrawPopupManager._calculatorId);
-    }
-    static showAngleEditor(el, pt, value, onCommit, onCancel) {
-        const propertyDescription = new AngleDescription(undefined, undefined, IconSpecUtilities.createWebComponentIconSpec(angleIcon));
-        return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
-    }
-    static showLengthEditor(el, pt, value, onCommit, onCancel) {
-        const propertyDescription = new LengthDescription(undefined, undefined, IconSpecUtilities.createWebComponentIconSpec(lengthIcon));
-        return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
-    }
-    static showHeightEditor(el, pt, value, onCommit, onCancel) {
-        const propertyDescription = new LengthDescription(undefined, undefined, IconSpecUtilities.createWebComponentIconSpec(heightIcon));
-        return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
-    }
-}
-AccuDrawPopupManager._calculatorId = "Calculator";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import * as React from "react";
+import { AngleDescription, LengthDescription } from "@itwin/core-frontend";
+import { IconSpecUtilities } from "@itwin/appui-abstract";
+import { PopupManager } from "../popup/PopupManager";
+import { MenuItemHelpers } from "../shared/MenuItem";
+import { CalculatorPopup } from "./CalculatorPopup";
+import { MenuButtonPopup } from "./MenuButtonPopup";
+import angleIcon from "./angle.svg";
+import lengthIcon from "./distance.svg";
+import heightIcon from "./height-2.svg";
+/** AccuDraw Popup Manager class
+ * @alpha
+ */
+class AccuDrawPopupManager {
+    static showMenuButton(id, el, pt, menuItemsProps) {
+        const menuItems = MenuItemHelpers.createMenuItems(menuItemsProps);
+        const menuContent = MenuItemHelpers.createMenuItemNodes(menuItems);
+        const component = (React.createElement(MenuButtonPopup, { id: id, el: el, pt: pt, offset: PopupManager.defaultOffset, content: menuContent }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideMenuButton(id) {
+        return PopupManager.removePopup(id);
+    }
+    static showCalculator(el, pt, initialValue, resultIcon, onOk, onCancel) {
+        const id = AccuDrawPopupManager._calculatorId;
+        const component = (React.createElement(CalculatorPopup, { id: id, el: el, pt: pt, offset: PopupManager.defaultOffset, initialValue: initialValue, resultIcon: resultIcon, onOk: onOk, onCancel: onCancel }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideCalculator() {
+        return PopupManager.removePopup(AccuDrawPopupManager._calculatorId);
+    }
+    static showAngleEditor(el, pt, value, onCommit, onCancel) {
+        const propertyDescription = new AngleDescription(undefined, undefined, IconSpecUtilities.createWebComponentIconSpec(angleIcon));
+        return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
+    }
+    static showLengthEditor(el, pt, value, onCommit, onCancel) {
+        const propertyDescription = new LengthDescription(undefined, undefined, IconSpecUtilities.createWebComponentIconSpec(lengthIcon));
+        return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
+    }
+    static showHeightEditor(el, pt, value, onCommit, onCancel) {
+        const propertyDescription = new LengthDescription(undefined, undefined, IconSpecUtilities.createWebComponentIconSpec(heightIcon));
+        return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
+    }
+}
+AccuDrawPopupManager._calculatorId = "Calculator";
+export { AccuDrawPopupManager };
 //# sourceMappingURL=AccuDrawPopupManager.js.map