@itwin/core-react 4.0.0-dev.9 → 4.0.0

package/lib/cjs/core-react/popup/Popup.js

@@ -1,420 +1,423 @@
-"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.Popup = void 0;
-require("./Popup.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const ReactDOM = require("react-dom");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const FocusTrap_1 = require("../focustrap/FocusTrap");
-/** Popup React component displays a popup relative to an optional target element.
- * @public
- */
-class Popup extends React.Component {
-    constructor(props) {
-        var _a, _b;
-        super(props);
-        this._popup = null;
-        this._bindWindowEvents = () => {
-            const activeWindow = this.getParentWindow();
-            activeWindow.addEventListener("pointerdown", this._handleOutsideClick);
-            activeWindow.addEventListener("resize", this._resize);
-            activeWindow.addEventListener("contextmenu", this._handleContextMenu);
-            activeWindow.addEventListener("scroll", this._hide);
-            activeWindow.addEventListener("wheel", this._handleWheel);
-            activeWindow.addEventListener("keydown", this._handleKeyboard);
-        };
-        this._unBindWindowEvents = () => {
-            const activeWindow = this.getParentWindow();
-            activeWindow.removeEventListener("pointerdown", this._handleOutsideClick);
-            activeWindow.removeEventListener("resize", this._resize);
-            activeWindow.removeEventListener("contextmenu", this._handleContextMenu);
-            activeWindow.removeEventListener("scroll", this._hide);
-            activeWindow.removeEventListener("wheel", this._handleWheel);
-            activeWindow.removeEventListener("keydown", this._handleKeyboard);
-        };
-        this._handleWheel = (event) => {
-            if (this._popup && this._popup.contains(event.target))
-                return;
-            if (this.props.onWheel)
-                return this.props.onWheel(event);
-            const closeOnWheel = this.props.closeOnWheel !== undefined ? this.props.closeOnWheel : true;
-            if (closeOnWheel)
-                this._hide();
-        };
-        this._handleOutsideClick = (event) => {
-            if (this._popup && this._popup.contains(event.target))
-                return;
-            if (this.props.isPinned)
-                return;
-            if (!this.props.closeOnNestedPopupOutsideClick && this.isInCorePopup(event.target))
-                return;
-            if (this.props.onOutsideClick)
-                return this.props.onOutsideClick(event);
-            if (this.props.target && this.props.target.contains(event.target))
-                return;
-            this._onClose();
-        };
-        this._handleContextMenu = (event) => {
-            if (this._popup && this._popup.contains(event.target))
-                return;
-            if (this.props.onContextMenu)
-                return this.props.onContextMenu(event);
-            const closeOnContextMenu = this.props.closeOnContextMenu !== undefined ? this.props.closeOnContextMenu : true;
-            if (closeOnContextMenu)
-                this._hide();
-        };
-        this._handleKeyboard = (event) => {
-            if (this.props.isPinned)
-                return;
-            if (event.key === appui_abstract_1.SpecialKey.Escape || event.key === appui_abstract_1.SpecialKey.Enter) {
-                const closeOnEnter = this.props.closeOnEnter !== undefined ? this.props.closeOnEnter : true;
-                if (event.key === appui_abstract_1.SpecialKey.Enter) {
-                    if (closeOnEnter)
-                        this._onClose(true);
-                    else
-                        this.props.onEnter && this.props.onEnter();
-                }
-                else {
-                    this._onClose(false);
-                }
-            }
-        };
-        this._resize = () => {
-            if (this.props.repositionOnResize) {
-                const position = this._toggleRelativePosition();
-                const point = this._fitPopup(this._getPosition(position));
-                this.setState({ left: point.x, top: point.y, position });
-            }
-            else {
-                this._hide(); // legacy behavior
-            }
-        };
-        this._hide = () => {
-            if (this.props.isPinned)
-                return;
-            this._onClose();
-        };
-        this._getPosition = (position) => {
-            const activeWindow = this.getParentWindow();
-            const { target, offset, top, left } = this.props;
-            const offsetArrow = (this.props.showArrow) ? 6 : 0;
-            // absolute position
-            if (this._isPositionAbsolute())
-                return { x: left, y: top };
-            // sanity check
-            const point = { x: 0, y: 0 };
-            if (!this._popup || !target)
-                return point;
-            // relative position
-            const scrollY = activeWindow.scrollY;
-            const scrollX = activeWindow.scrollX;
-            const targetRect = target.getBoundingClientRect();
-            const { popupWidth, popupHeight } = this._getPopupDimensions();
-            switch (position) {
-                case appui_abstract_1.RelativePosition.Top:
-                    point.y = scrollY + targetRect.top - popupHeight - offset - offsetArrow;
-                    point.x = scrollX + targetRect.left + (targetRect.width / 2) - (popupWidth / 2);
-                    break;
-                case appui_abstract_1.RelativePosition.TopLeft:
-                    point.y = scrollY + targetRect.top - popupHeight - offset - offsetArrow;
-                    point.x = scrollX + targetRect.left;
-                    break;
-                case appui_abstract_1.RelativePosition.TopRight:
-                    point.y = scrollY + targetRect.top - popupHeight - offset - offsetArrow;
-                    point.x = scrollX + targetRect.right - popupWidth;
-                    break;
-                case appui_abstract_1.RelativePosition.Bottom:
-                    point.y = scrollY + targetRect.bottom + offset + offsetArrow;
-                    point.x = scrollX + targetRect.left + (targetRect.width / 2) - (popupWidth / 2);
-                    break;
-                case appui_abstract_1.RelativePosition.BottomLeft:
-                    point.y = scrollY + targetRect.bottom + offset + offsetArrow;
-                    point.x = scrollX + targetRect.left;
-                    break;
-                case appui_abstract_1.RelativePosition.BottomRight:
-                    point.y = scrollY + targetRect.bottom + offset + offsetArrow;
-                    point.x = scrollX + targetRect.right - popupWidth;
-                    break;
-                case appui_abstract_1.RelativePosition.Left:
-                    point.y = scrollY + targetRect.top + (targetRect.height / 2) - (popupHeight / 2);
-                    point.x = scrollX + targetRect.left - popupWidth - offset - offsetArrow;
-                    break;
-                case appui_abstract_1.RelativePosition.LeftTop:
-                    point.y = scrollY + targetRect.top;
-                    point.x = scrollX + targetRect.left - popupWidth - offset - offsetArrow;
-                    break;
-                case appui_abstract_1.RelativePosition.Right:
-                    point.y = scrollY + targetRect.top + (targetRect.height / 2) - (popupHeight / 2);
-                    point.x = scrollX + targetRect.right + offset + offsetArrow;
-                    break;
-                case appui_abstract_1.RelativePosition.RightTop:
-                    point.y = scrollY + targetRect.top;
-                    point.x = scrollX + targetRect.right + offset + offsetArrow;
-                    break;
-            }
-            return point;
-        };
-        // fit the popup within the extents of the view port
-        this._fitPopup = (point) => {
-            const fittedPoint = point;
-            // istanbul ignore if
-            if (!this._popup) {
-                return fittedPoint;
-            }
-            // const popupRect = this._popup.getBoundingClientRect();
-            const { popupWidth, popupHeight } = this._getPopupDimensions();
-            const { innerWidth, innerHeight } = window;
-            // istanbul ignore if
-            if (fittedPoint.y + popupHeight > innerHeight) {
-                fittedPoint.y = innerHeight - popupHeight;
-            }
-            // istanbul ignore if
-            if (fittedPoint.x + popupWidth > innerWidth) {
-                fittedPoint.x = innerWidth - popupWidth;
-            }
-            // istanbul ignore if
-            if (fittedPoint.y < 0) {
-                fittedPoint.y = 0;
-            }
-            if (fittedPoint.x < 0) {
-                fittedPoint.x = 0;
-            }
-            return fittedPoint;
-        };
-        this._handleAnimationEnd = (event) => {
-            if (event.target === this._popup) {
-                this.setState({ animationEnded: true });
-            }
-        };
-        const parentDocument = (_b = (_a = this.props.target) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
-        this.state = {
-            animationEnded: false,
-            isOpen: this.props.isOpen,
-            top: 0,
-            left: 0,
-            position: this.props.position,
-            parentDocument,
-        };
-    }
-    componentDidMount() {
-        if (this.props.isOpen) {
-            this._onShow();
-        }
-    }
-    getParentWindow() {
-        var _a;
-        // istanbul ignore next
-        return (_a = this.state.parentDocument.defaultView) !== null && _a !== void 0 ? _a : window;
-    }
-    componentDidUpdate(previousProps, prevState) {
-        var _a, _b;
-        if (this.state.position !== prevState.position) {
-            this.setState({ animationEnded: false });
-        }
-        if (this.props.target !== previousProps.target) {
-            // istanbul ignore next
-            {
-                const parentDocument = (_b = (_a = this.props.target) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
-                if (parentDocument !== this.state.parentDocument) {
-                    this._unBindWindowEvents();
-                    this.setState({ parentDocument });
-                }
-            }
-        }
-        if (this.props.isOpen === previousProps.isOpen) {
-            if (this.props.isOpen) {
-                const position = this._toggleRelativePosition();
-                const point = this._fitPopup(this._getPosition(position));
-                if ((Math.abs(this.state.left - point.x) < 3) &&
-                    (Math.abs(this.state.top - point.y) < 3) &&
-                    this.state.position === position)
-                    return;
-                this.setState({
-                    left: point.x,
-                    top: point.y,
-                    position,
-                });
-            }
-            return;
-        }
-        if (this.props.isOpen) {
-            this._onShow();
-        }
-        else {
-            this._onClose();
-        }
-    }
-    componentWillUnmount() {
-        this._unBindWindowEvents();
-    }
-    isInCorePopup(element) {
-        if (element.nodeName === "DIV") {
-            if (element.classList && element.classList.contains("core-popup"))
-                return true;
-            if (element.parentElement && this.isInCorePopup(element.parentElement))
-                return true;
-        }
-        else {
-            // istanbul ignore else
-            if (element.parentElement && this.isInCorePopup(element.parentElement))
-                return true;
-        }
-        return false;
-    }
-    _onShow() {
-        this._bindWindowEvents();
-        const position = this._toggleRelativePosition();
-        const point = this._fitPopup(this._getPosition(position));
-        this.setState({ left: point.x, top: point.y, isOpen: true, position }, () => {
-            if (this.props.onOpen)
-                this.props.onOpen();
-        });
-    }
-    _onClose(enterKey) {
-        if (!this.state.isOpen)
-            return;
-        this._unBindWindowEvents();
-        this.setState({ isOpen: false }, () => {
-            if (enterKey && this.props.onEnter)
-                this.props.onEnter();
-            if (this.props.onClose)
-                this.props.onClose();
-        });
-    }
-    _isPositionAbsolute() {
-        return (this.props.top !== -1 && this.props.left !== -1);
-    }
-    _getClassNameByPosition(position) {
-        if (!this._isPositionAbsolute()) {
-            switch (position) {
-                case appui_abstract_1.RelativePosition.TopLeft:
-                    return "core-popup-top-left";
-                case appui_abstract_1.RelativePosition.TopRight:
-                    return "core-popup-top-right";
-                case appui_abstract_1.RelativePosition.BottomLeft:
-                    return "core-popup-bottom-left";
-                case appui_abstract_1.RelativePosition.BottomRight:
-                    return "core-popup-bottom-right";
-                case appui_abstract_1.RelativePosition.Top:
-                    return "core-popup-top";
-                case appui_abstract_1.RelativePosition.Left:
-                    return "core-popup-left";
-                case appui_abstract_1.RelativePosition.Right:
-                    return "core-popup-right";
-                case appui_abstract_1.RelativePosition.Bottom:
-                    return "core-popup-bottom";
-                case appui_abstract_1.RelativePosition.LeftTop:
-                    return "core-popup-left-top";
-                case appui_abstract_1.RelativePosition.RightTop:
-                    return "core-popup-right-top";
-            }
-        }
-        return "";
-    }
-    _getPopupDimensions() {
-        let popupWidth = 0;
-        let popupHeight = 0;
-        // istanbul ignore else
-        if (this._popup) {
-            const activeWindow = this.getParentWindow();
-            const style = activeWindow.getComputedStyle(this._popup);
-            const borderLeftWidth = parsePxString(style.borderLeftWidth);
-            const borderRightWidth = parsePxString(style.borderRightWidth);
-            const borderTopWidth = parsePxString(style.borderTopWidth);
-            const borderBottomWidth = parsePxString(style.borderBottomWidth);
-            popupWidth = this._popup.clientWidth + borderLeftWidth + borderRightWidth;
-            popupHeight = this._popup.clientHeight + borderTopWidth + borderBottomWidth;
-        }
-        return { popupWidth, popupHeight };
-    }
-    _toggleRelativePosition() {
-        const { target, position, offset } = this.props;
-        if (!this._popup || !target)
-            return position;
-        // istanbul ignore if
-        if (this._isPositionAbsolute())
-            return position;
-        let newPosition = position;
-        const activeWindow = this.getParentWindow();
-        // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)
-        const viewportRect = { left: activeWindow.scrollX, top: activeWindow.scrollY, right: activeWindow.scrollX + activeWindow.innerWidth, bottom: activeWindow.scrollY + activeWindow.innerHeight };
-        const targetRect = target.getBoundingClientRect();
-        const { popupWidth, popupHeight } = this._getPopupDimensions();
-        const containerStyle = activeWindow.getComputedStyle(target);
-        const offsetArrow = this.props.showArrow ? /* istanbul ignore next */ 10 : 2;
-        const bottomMargin = parseMargin(containerStyle.marginBottom);
-        if ((targetRect.bottom + popupHeight + bottomMargin + offsetArrow + offset) > viewportRect.bottom) {
-            if (newPosition === appui_abstract_1.RelativePosition.Bottom)
-                newPosition = appui_abstract_1.RelativePosition.Top;
-            else if (newPosition === appui_abstract_1.RelativePosition.BottomLeft)
-                newPosition = appui_abstract_1.RelativePosition.TopLeft;
-            else if (newPosition === appui_abstract_1.RelativePosition.BottomRight)
-                newPosition = appui_abstract_1.RelativePosition.TopRight;
-        }
-        const topMargin = parseMargin(containerStyle.marginTop);
-        if ((targetRect.top - popupHeight - topMargin - offsetArrow - offset) < viewportRect.top) {
-            if (newPosition === appui_abstract_1.RelativePosition.Top)
-                newPosition = appui_abstract_1.RelativePosition.Bottom;
-            else if (newPosition === appui_abstract_1.RelativePosition.TopLeft)
-                newPosition = appui_abstract_1.RelativePosition.BottomLeft;
-            else if (newPosition === appui_abstract_1.RelativePosition.TopRight)
-                newPosition = appui_abstract_1.RelativePosition.BottomRight;
-        }
-        const leftMargin = parseMargin(containerStyle.marginLeft);
-        if ((targetRect.left - popupWidth - leftMargin - offsetArrow - offset) < viewportRect.left) {
-            if (newPosition === appui_abstract_1.RelativePosition.Left)
-                newPosition = appui_abstract_1.RelativePosition.Right;
-            else if (newPosition === appui_abstract_1.RelativePosition.LeftTop)
-                newPosition = appui_abstract_1.RelativePosition.RightTop;
-        }
-        const rightMargin = parseMargin(containerStyle.marginRight);
-        if ((targetRect.right + popupWidth + rightMargin + offsetArrow + offset) > viewportRect.right) {
-            if (newPosition === appui_abstract_1.RelativePosition.Right)
-                newPosition = appui_abstract_1.RelativePosition.Left;
-            else if (newPosition === appui_abstract_1.RelativePosition.RightTop)
-                newPosition = appui_abstract_1.RelativePosition.LeftTop;
-        }
-        return newPosition;
-    }
-    render() {
-        const animate = this.props.animate !== undefined ? this.props.animate : true;
-        const className = (0, classnames_1.default)("core-popup", this._getClassNameByPosition(this.state.position), this.props.showShadow && "core-popup-shadow", this.props.showArrow && "arrow", !animate && "core-popup-animation-none", this.props.className, this.state.animationEnded && "core-animation-ended", (!this.props.isOpen && this.props.keepContentsMounted) && "core-popup-hidden");
-        const style = {
-            top: this.state.top,
-            left: this.state.left,
-            ...this.props.style,
-        };
-        const role = this.props.role ? this.props.role : "dialog"; // accessibility property
-        if (!this.props.isOpen && !this.props.keepContentsMounted) {
-            return null;
-        }
-        return ReactDOM.createPortal((React.createElement("div", { className: className, "data-testid": "core-popup", ref: (element) => { this._popup = element; }, style: style, role: role, "aria-modal": true, tabIndex: -1, "aria-label": this.props.ariaLabel, onAnimationEnd: this._handleAnimationEnd },
-            React.createElement(FocusTrap_1.FocusTrap, { active: !!this.props.moveFocus, initialFocusElement: this.props.focusTarget, returnFocusOnDeactivate: true }, this.props.children))), this.state.parentDocument.body);
-    }
-}
-exports.Popup = Popup;
-Popup.defaultProps = {
-    position: appui_abstract_1.RelativePosition.Bottom,
-    showShadow: true,
-    showArrow: false,
-    isOpen: false,
-    offset: 4,
-    top: -1,
-    left: -1,
-};
-function parsePxString(pxStr) {
-    const parsed = parseInt(pxStr, 10);
-    return parsed || 0;
-}
-function parseMargin(value) {
-    return value ? /* istanbul ignore next */ parseFloat(value) : 0;
-}
+"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.Popup = void 0;
+require("./Popup.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const ReactDOM = require("react-dom");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const FocusTrap_1 = require("../focustrap/FocusTrap");
+/** Popup React component displays a popup relative to an optional target element.
+ * @public
+ */
+class Popup extends React.Component {
+    constructor(props) {
+        var _a, _b;
+        super(props);
+        this._popup = null;
+        this._bindWindowEvents = () => {
+            const activeWindow = this.getParentWindow();
+            activeWindow.addEventListener("pointerdown", this._handleOutsideClick);
+            activeWindow.addEventListener("resize", this._resize);
+            activeWindow.addEventListener("contextmenu", this._handleContextMenu);
+            activeWindow.addEventListener("scroll", this._hide);
+            activeWindow.addEventListener("wheel", this._handleWheel);
+            activeWindow.addEventListener("keydown", this._handleKeyboard);
+        };
+        this._unBindWindowEvents = () => {
+            const activeWindow = this.getParentWindow();
+            activeWindow.removeEventListener("pointerdown", this._handleOutsideClick);
+            activeWindow.removeEventListener("resize", this._resize);
+            activeWindow.removeEventListener("contextmenu", this._handleContextMenu);
+            activeWindow.removeEventListener("scroll", this._hide);
+            activeWindow.removeEventListener("wheel", this._handleWheel);
+            activeWindow.removeEventListener("keydown", this._handleKeyboard);
+        };
+        this._handleWheel = (event) => {
+            if (this._popup && this._popup.contains(event.target))
+                return;
+            if (this.props.onWheel)
+                return this.props.onWheel(event);
+            const closeOnWheel = this.props.closeOnWheel !== undefined ? this.props.closeOnWheel : true;
+            if (closeOnWheel)
+                this._hide();
+        };
+        this._handleOutsideClick = (event) => {
+            if (this._popup && this._popup.contains(event.target))
+                return;
+            if (this.props.isPinned)
+                return;
+            if (!this.props.closeOnNestedPopupOutsideClick && this.isInCorePopup(event.target))
+                return;
+            if (this.props.onOutsideClick)
+                return this.props.onOutsideClick(event);
+            if (this.props.target && this.props.target.contains(event.target))
+                return;
+            this._onClose();
+        };
+        this._handleContextMenu = (event) => {
+            if (this._popup && this._popup.contains(event.target))
+                return;
+            if (this.props.onContextMenu)
+                return this.props.onContextMenu(event);
+            const closeOnContextMenu = this.props.closeOnContextMenu !== undefined ? this.props.closeOnContextMenu : true;
+            if (closeOnContextMenu)
+                this._hide();
+        };
+        this._handleKeyboard = (event) => {
+            if (this.props.isPinned)
+                return;
+            if (event.key === appui_abstract_1.SpecialKey.Escape || event.key === appui_abstract_1.SpecialKey.Enter) {
+                const closeOnEnter = this.props.closeOnEnter !== undefined ? this.props.closeOnEnter : true;
+                if (event.key === appui_abstract_1.SpecialKey.Enter) {
+                    if (closeOnEnter)
+                        this._onClose(true);
+                    else
+                        this.props.onEnter && this.props.onEnter();
+                }
+                else {
+                    this._onClose(false);
+                }
+            }
+        };
+        this._resize = () => {
+            if (this.props.repositionOnResize) {
+                const position = this._toggleRelativePosition();
+                const point = this._fitPopup(this._getPosition(position));
+                this.setState({ left: point.x, top: point.y, position });
+            }
+            else {
+                this._hide(); // legacy behavior
+            }
+        };
+        this._hide = () => {
+            if (this.props.isPinned)
+                return;
+            this._onClose();
+        };
+        this._getPosition = (position) => {
+            const activeWindow = this.getParentWindow();
+            const { target, offset, top, left } = this.props;
+            const offsetArrow = (this.props.showArrow) ? 6 : 0;
+            // absolute position
+            if (this._isPositionAbsolute())
+                return { x: left, y: top };
+            // sanity check
+            const point = { x: 0, y: 0 };
+            if (!this._popup || !target)
+                return point;
+            // relative position
+            const scrollY = activeWindow.scrollY;
+            const scrollX = activeWindow.scrollX;
+            const targetRect = target.getBoundingClientRect();
+            const { popupWidth, popupHeight } = this._getPopupDimensions();
+            switch (position) {
+                case appui_abstract_1.RelativePosition.Top:
+                    point.y = scrollY + targetRect.top - popupHeight - offset - offsetArrow;
+                    point.x = scrollX + targetRect.left + (targetRect.width / 2) - (popupWidth / 2);
+                    break;
+                case appui_abstract_1.RelativePosition.TopLeft:
+                    point.y = scrollY + targetRect.top - popupHeight - offset - offsetArrow;
+                    point.x = scrollX + targetRect.left;
+                    break;
+                case appui_abstract_1.RelativePosition.TopRight:
+                    point.y = scrollY + targetRect.top - popupHeight - offset - offsetArrow;
+                    point.x = scrollX + targetRect.right - popupWidth;
+                    break;
+                case appui_abstract_1.RelativePosition.Bottom:
+                    point.y = scrollY + targetRect.bottom + offset + offsetArrow;
+                    point.x = scrollX + targetRect.left + (targetRect.width / 2) - (popupWidth / 2);
+                    break;
+                case appui_abstract_1.RelativePosition.BottomLeft:
+                    point.y = scrollY + targetRect.bottom + offset + offsetArrow;
+                    point.x = scrollX + targetRect.left;
+                    break;
+                case appui_abstract_1.RelativePosition.BottomRight:
+                    point.y = scrollY + targetRect.bottom + offset + offsetArrow;
+                    point.x = scrollX + targetRect.right - popupWidth;
+                    break;
+                case appui_abstract_1.RelativePosition.Left:
+                    point.y = scrollY + targetRect.top + (targetRect.height / 2) - (popupHeight / 2);
+                    point.x = scrollX + targetRect.left - popupWidth - offset - offsetArrow;
+                    break;
+                case appui_abstract_1.RelativePosition.LeftTop:
+                    point.y = scrollY + targetRect.top;
+                    point.x = scrollX + targetRect.left - popupWidth - offset - offsetArrow;
+                    break;
+                case appui_abstract_1.RelativePosition.Right:
+                    point.y = scrollY + targetRect.top + (targetRect.height / 2) - (popupHeight / 2);
+                    point.x = scrollX + targetRect.right + offset + offsetArrow;
+                    break;
+                case appui_abstract_1.RelativePosition.RightTop:
+                    point.y = scrollY + targetRect.top;
+                    point.x = scrollX + targetRect.right + offset + offsetArrow;
+                    break;
+            }
+            return point;
+        };
+        // fit the popup within the extents of the view port
+        this._fitPopup = (point) => {
+            const fittedPoint = point;
+            // istanbul ignore if
+            if (!this._popup) {
+                return fittedPoint;
+            }
+            // const popupRect = this._popup.getBoundingClientRect();
+            const { popupWidth, popupHeight } = this._getPopupDimensions();
+            const { innerWidth, innerHeight } = window;
+            // istanbul ignore if
+            if (fittedPoint.y + popupHeight > innerHeight) {
+                fittedPoint.y = innerHeight - popupHeight;
+            }
+            // istanbul ignore if
+            if (fittedPoint.x + popupWidth > innerWidth) {
+                fittedPoint.x = innerWidth - popupWidth;
+            }
+            // istanbul ignore if
+            if (fittedPoint.y < 0) {
+                fittedPoint.y = 0;
+            }
+            if (fittedPoint.x < 0) {
+                fittedPoint.x = 0;
+            }
+            return fittedPoint;
+        };
+        this._handleAnimationEnd = (event) => {
+            if (event.target === this._popup) {
+                this.setState({ animationEnded: true });
+            }
+        };
+        const parentDocument = (_b = (_a = this.props.target) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
+        this.state = {
+            animationEnded: false,
+            isOpen: this.props.isOpen,
+            top: 0,
+            left: 0,
+            position: this.props.position,
+            parentDocument,
+        };
+    }
+    componentDidMount() {
+        if (this.props.isOpen) {
+            this._onShow();
+        }
+    }
+    getParentWindow() {
+        var _a;
+        // istanbul ignore next
+        return (_a = this.state.parentDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+    }
+    componentDidUpdate(previousProps, prevState) {
+        var _a, _b;
+        if (this.state.position !== prevState.position) {
+            this.setState({ animationEnded: false });
+        }
+        if (this.props.target !== previousProps.target) {
+            // istanbul ignore next
+            {
+                const parentDocument = (_b = (_a = this.props.target) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
+                if (parentDocument !== this.state.parentDocument) {
+                    this._unBindWindowEvents();
+                    this.setState({ parentDocument });
+                }
+            }
+        }
+        if (this.props.isOpen === previousProps.isOpen) {
+            if (this.props.isOpen) {
+                const position = this._toggleRelativePosition();
+                const point = this._fitPopup(this._getPosition(position));
+                if ((Math.abs(this.state.left - point.x) < 3) &&
+                    (Math.abs(this.state.top - point.y) < 3) &&
+                    this.state.position === position)
+                    return;
+                this.setState({
+                    left: point.x,
+                    top: point.y,
+                    position,
+                });
+            }
+            return;
+        }
+        if (this.props.isOpen) {
+            this._onShow();
+        }
+        else {
+            this._onClose();
+        }
+    }
+    componentWillUnmount() {
+        this._unBindWindowEvents();
+    }
+    isInCorePopup(element) {
+        if (element.nodeName === "DIV") {
+            if (element.classList && element.classList.contains("core-popup"))
+                return true;
+            if (element.parentElement && this.isInCorePopup(element.parentElement))
+                return true;
+        }
+        else {
+            // istanbul ignore else
+            if (element.parentElement && this.isInCorePopup(element.parentElement))
+                return true;
+        }
+        return false;
+    }
+    _onShow() {
+        this._bindWindowEvents();
+        const position = this._toggleRelativePosition();
+        const point = this._fitPopup(this._getPosition(position));
+        this.setState({ left: point.x, top: point.y, isOpen: true, position }, () => {
+            if (this.props.onOpen)
+                this.props.onOpen();
+        });
+    }
+    _onClose(enterKey) {
+        if (!this.state.isOpen)
+            return;
+        this._unBindWindowEvents();
+        this.setState({ isOpen: false }, () => {
+            if (enterKey && this.props.onEnter)
+                this.props.onEnter();
+            if (this.props.onClose)
+                this.props.onClose();
+        });
+    }
+    _isPositionAbsolute() {
+        return (this.props.top !== -1 && this.props.left !== -1);
+    }
+    _getClassNameByPosition(position) {
+        if (!this._isPositionAbsolute()) {
+            switch (position) {
+                case appui_abstract_1.RelativePosition.TopLeft:
+                    return "core-popup-top-left";
+                case appui_abstract_1.RelativePosition.TopRight:
+                    return "core-popup-top-right";
+                case appui_abstract_1.RelativePosition.BottomLeft:
+                    return "core-popup-bottom-left";
+                case appui_abstract_1.RelativePosition.BottomRight:
+                    return "core-popup-bottom-right";
+                case appui_abstract_1.RelativePosition.Top:
+                    return "core-popup-top";
+                case appui_abstract_1.RelativePosition.Left:
+                    return "core-popup-left";
+                case appui_abstract_1.RelativePosition.Right:
+                    return "core-popup-right";
+                case appui_abstract_1.RelativePosition.Bottom:
+                    return "core-popup-bottom";
+                case appui_abstract_1.RelativePosition.LeftTop:
+                    return "core-popup-left-top";
+                case appui_abstract_1.RelativePosition.RightTop:
+                    return "core-popup-right-top";
+            }
+        }
+        return "";
+    }
+    _getPopupDimensions() {
+        let popupWidth = 0;
+        let popupHeight = 0;
+        // istanbul ignore else
+        if (this._popup) {
+            const activeWindow = this.getParentWindow();
+            const style = activeWindow.getComputedStyle(this._popup);
+            const borderLeftWidth = parsePxString(style.borderLeftWidth);
+            const borderRightWidth = parsePxString(style.borderRightWidth);
+            const borderTopWidth = parsePxString(style.borderTopWidth);
+            const borderBottomWidth = parsePxString(style.borderBottomWidth);
+            popupWidth = this._popup.clientWidth + borderLeftWidth + borderRightWidth;
+            popupHeight = this._popup.clientHeight + borderTopWidth + borderBottomWidth;
+        }
+        return { popupWidth, popupHeight };
+    }
+    _toggleRelativePosition() {
+        const { target, position, offset } = this.props;
+        if (!this._popup || !target)
+            return position;
+        // istanbul ignore if
+        if (this._isPositionAbsolute())
+            return position;
+        let newPosition = position;
+        const activeWindow = this.getParentWindow();
+        // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)
+        const viewportRect = { left: activeWindow.scrollX, top: activeWindow.scrollY, right: activeWindow.scrollX + activeWindow.innerWidth, bottom: activeWindow.scrollY + activeWindow.innerHeight };
+        const targetRect = target.getBoundingClientRect();
+        const { popupWidth, popupHeight } = this._getPopupDimensions();
+        const containerStyle = activeWindow.getComputedStyle(target);
+        const offsetArrow = this.props.showArrow ? /* istanbul ignore next */ 10 : 2;
+        const bottomMargin = parseMargin(containerStyle.marginBottom);
+        if ((targetRect.bottom + popupHeight + bottomMargin + offsetArrow + offset) > viewportRect.bottom) {
+            if (newPosition === appui_abstract_1.RelativePosition.Bottom)
+                newPosition = appui_abstract_1.RelativePosition.Top;
+            else if (newPosition === appui_abstract_1.RelativePosition.BottomLeft)
+                newPosition = appui_abstract_1.RelativePosition.TopLeft;
+            else if (newPosition === appui_abstract_1.RelativePosition.BottomRight)
+                newPosition = appui_abstract_1.RelativePosition.TopRight;
+        }
+        const topMargin = parseMargin(containerStyle.marginTop);
+        if ((targetRect.top - popupHeight - topMargin - offsetArrow - offset) < viewportRect.top) {
+            if (newPosition === appui_abstract_1.RelativePosition.Top)
+                newPosition = appui_abstract_1.RelativePosition.Bottom;
+            else if (newPosition === appui_abstract_1.RelativePosition.TopLeft)
+                newPosition = appui_abstract_1.RelativePosition.BottomLeft;
+            else if (newPosition === appui_abstract_1.RelativePosition.TopRight)
+                newPosition = appui_abstract_1.RelativePosition.BottomRight;
+        }
+        const leftMargin = parseMargin(containerStyle.marginLeft);
+        if ((targetRect.left - popupWidth - leftMargin - offsetArrow - offset) < viewportRect.left) {
+            if (newPosition === appui_abstract_1.RelativePosition.Left)
+                newPosition = appui_abstract_1.RelativePosition.Right;
+            else if (newPosition === appui_abstract_1.RelativePosition.LeftTop)
+                newPosition = appui_abstract_1.RelativePosition.RightTop;
+        }
+        const rightMargin = parseMargin(containerStyle.marginRight);
+        if ((targetRect.right + popupWidth + rightMargin + offsetArrow + offset) > viewportRect.right) {
+            if (newPosition === appui_abstract_1.RelativePosition.Right)
+                newPosition = appui_abstract_1.RelativePosition.Left;
+            else if (newPosition === appui_abstract_1.RelativePosition.RightTop)
+                newPosition = appui_abstract_1.RelativePosition.LeftTop;
+        }
+        return newPosition;
+    }
+    render() {
+        var _a;
+        const animate = this.props.animate !== undefined ? this.props.animate : true;
+        const className = (0, classnames_1.default)("core-popup", this._getClassNameByPosition(this.state.position), this.props.showShadow && "core-popup-shadow", this.props.showArrow && "arrow", !animate && "core-popup-animation-none", this.props.className, this.state.animationEnded && "core-animation-ended", (!this.props.isOpen && this.props.keepContentsMounted) && "core-popup-hidden");
+        const style = {
+            top: this.state.top,
+            left: this.state.left,
+            ...this.props.style,
+        };
+        const role = this.props.role ? this.props.role : "dialog"; // accessibility property
+        if (!this.props.isOpen && !this.props.keepContentsMounted) {
+            return null;
+        }
+        return ReactDOM.createPortal((React.createElement("div", { className: className, "data-testid": "core-popup", ref: (element) => { this._popup = element; }, style: style, role: role, "aria-modal": true, tabIndex: -1, "aria-label": this.props.ariaLabel, onAnimationEnd: this._handleAnimationEnd },
+            React.createElement(FocusTrap_1.FocusTrap, { active: !!this.props.moveFocus, initialFocusElement: this.props.focusTarget, returnFocusOnDeactivate: true }, this.props.children))), 
+        // istanbul ignore next
+        (_a = this.state.parentDocument.body.querySelector('[data-root-container="iui-root-id"]')) !== null && _a !== void 0 ? _a : this.state.parentDocument.body);
+    }
+}
+Popup.defaultProps = {
+    position: appui_abstract_1.RelativePosition.Bottom,
+    showShadow: true,
+    showArrow: false,
+    isOpen: false,
+    offset: 4,
+    top: -1,
+    left: -1,
+};
+exports.Popup = Popup;
+function parsePxString(pxStr) {
+    const parsed = parseInt(pxStr, 10);
+    return parsed || 0;
+}
+function parseMargin(value) {
+    return value ? /* istanbul ignore next */ parseFloat(value) : 0;
+}
 //# sourceMappingURL=Popup.js.map