@itwin/core-react 4.17.1 → 5.0.0-dev.2

package/lib/cjs/core-react/popup/Popup.d.ts

@@ -1,128 +0,0 @@
-/** @packageDocumentation
- * @module Popup
- */
-import "./Popup.scss";
-import * as React from "react";
-import { RelativePosition } from "@itwin/appui-abstract";
-import type { CommonProps } from "../utils/Props";
-/** @internal */
-export declare const PopupContext: React.Context<HTMLElement | undefined>;
-/** Properties for the [[Popup]] component
- * @public
- * @deprecated in 4.15.0. Props of deprecated {@link Popup} component.
- */
-export interface PopupProps extends CommonProps {
-    /** Show or hide the box shadow (defaults to true) */
-    showShadow: boolean;
-    /** Show or hide the arrow (defaults to false) */
-    showArrow: boolean;
-    /** Indicates whether the popup is shown or not (defaults to false) */
-    isOpen: boolean;
-    /** Direction (relative to the target) to which the popup is expanded (defaults to Bottom) */
-    position: RelativePosition;
-    /** Top position (absolute positioning - defaults to 0) */
-    top: number;
-    /** Left position (absolute positioning - defaults to 0) */
-    left: number;
-    /** Function called when the popup is opened */
-    onOpen?: () => void;
-    /** Function called when user clicks outside the popup  */
-    onOutsideClick?: (e: MouseEvent) => void;
-    /** Function called when the popup is closed */
-    onClose?: () => void;
-    /** Function called when the popup is closed on Enter */
-    onEnter?: () => void;
-    /** Function called when the wheel is used */
-    onWheel?: (e: WheelEvent) => void;
-    /** Function called when the right mouse button is pressed */
-    onContextMenu?: (e: MouseEvent) => void;
-    /** Offset from the parent (defaults to 4) */
-    offset: number;
-    /** Target element to position popup */
-    target?: HTMLElement | null;
-    /** Role - if not specified "dialog" is used */
-    role?: "dialog" | "alert" | "alertdialog";
-    /** accessibility label */
-    ariaLabel?: string;
-    /** set focus to popup - default to not set focus */
-    moveFocus?: boolean;
-    /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */
-    focusTarget?: React.RefObject<HTMLElement> | string;
-    /** Indicates whether the popup is pinned. */
-    isPinned?: boolean;
-    /** Indicates whether to use animation for open/close (defaults to true) */
-    animate?: boolean;
-    /** Indicates whether to close the popup when Enter is pressed (defaults to true) */
-    closeOnEnter?: boolean;
-    /** Indicates whether to close the popup when the wheel is used (defaults to true) */
-    closeOnWheel?: boolean;
-    /** Indicates whether to close the popup when the right mouse button is pressed (defaults to true) */
-    closeOnContextMenu?: boolean;
-    /** If false outside click processing and closing are skipped if click occurs in another Popup component, default to false. */
-    closeOnNestedPopupOutsideClick?: boolean;
-    /** If true the children are mounted once and unmounted when this component is unmounted. If false the
-     * children are unmounted each time the popup is closed. */
-    keepContentsMounted?: boolean;
-    /**
-     * If true the popup will remain open and will be repositioned when window resize events occur, default to false.
-     * @beta
-     * */
-    repositionOnResize?: boolean;
-    /** Content */
-    children?: React.ReactNode;
-    /** Target that should be used when portaling popup.
-     * @note This is needed in rare cases when {@link Popup} is nested inside the {@link https://itwinui.bentley.com/docs/popover iTwinUI Popover}.
-     */
-    portalTarget?: HTMLElement;
-}
-interface PopupState {
-    isOpen: boolean;
-    top: number;
-    left: number;
-    position: RelativePosition;
-    parentDocument: Document;
-    animationEnded: boolean;
-    portalContainer?: HTMLElement;
-}
-/** Popup React component displays a popup relative to an optional target element.
- * @note Avoid nesting {@link Popup} and {@link https://itwinui.bentley.com/docs/popover iTwinUI Popover} components.
- * @public
- * @deprecated in 4.15.0. Use {@link https://itwinui.bentley.com/docs/popover iTwinUI Popover} instead.
- */
-export declare class Popup extends React.Component<PopupProps, PopupState> {
-    private _popup;
-    /** @internal */
-    static contextType: React.Context<HTMLElement | undefined>;
-    /** @internal */
-    context: React.ContextType<typeof PopupContext>;
-    constructor(props: PopupProps);
-    static defaultProps: Partial<PopupProps>;
-    componentDidMount(): void;
-    private getParentWindow;
-    componentDidUpdate(previousProps: PopupProps, // eslint-disable-line deprecation/deprecation
-    prevState: PopupState): void;
-    componentWillUnmount(): void;
-    private _bindWindowEvents;
-    private _unBindWindowEvents;
-    private _handleWheel;
-    private isInCorePopup;
-    private _handleOutsideClick;
-    private _handleContextMenu;
-    private _handleKeyboard;
-    private _resize;
-    private _hide;
-    private _onShow;
-    private _onClose;
-    private _isPositionAbsolute;
-    private _getClassNameByPosition;
-    private _getPopupDimensions;
-    private _getPosition;
-    private _toggleRelativePosition;
-    private _fitPopup;
-    private _handleAnimationEnd;
-    private _handleThemeProviderRef;
-    render(): React.ReactPortal | null;
-    private getContainer;
-}
-export {};
-//# sourceMappingURL=Popup.d.ts.map

package/lib/cjs/core-react/popup/Popup.d.ts.map

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

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

@@ -1,470 +0,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 = exports.PopupContext = void 0;
-require("./Popup.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const ReactDOM = require("react-dom");
-const ts_key_enum_1 = require("ts-key-enum");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const FocusTrap_1 = require("../focustrap/FocusTrap");
-const Rectangle_1 = require("../utils/Rectangle");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/** @internal */
-exports.PopupContext = React.createContext(undefined);
-/** Popup React component displays a popup relative to an optional target element.
- * @note Avoid nesting {@link Popup} and {@link https://itwinui.bentley.com/docs/popover iTwinUI Popover} components.
- * @public
- * @deprecated in 4.15.0. Use {@link https://itwinui.bentley.com/docs/popover iTwinUI Popover} instead.
- */
-// eslint-disable-next-line deprecation/deprecation
-class Popup extends React.Component {
-    // eslint-disable-next-line deprecation/deprecation
-    constructor(props) {
-        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 === ts_key_enum_1.Key.Escape.valueOf() ||
-                event.key === ts_key_enum_1.Key.Enter.valueOf()) {
-                const closeOnEnter = this.props.closeOnEnter !== undefined ? this.props.closeOnEnter : true;
-                if (event.key === ts_key_enum_1.Key.Enter.valueOf()) {
-                    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 container = this.getContainer();
-            const containerBounds = container.getBoundingClientRect();
-            const targetRect = Rectangle_1.Rectangle.create(target.getBoundingClientRect()).offset({
-                x: -containerBounds.left,
-                y: -containerBounds.top,
-            });
-            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.getWidth() / 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.getWidth() / 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.getHeight() / 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.getHeight() / 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;
-            if (!this._popup) {
-                return fittedPoint;
-            }
-            // const popupRect = this._popup.getBoundingClientRect();
-            const { popupWidth, popupHeight } = this._getPopupDimensions();
-            const { innerWidth, innerHeight } = window;
-            if (fittedPoint.y + popupHeight > innerHeight) {
-                fittedPoint.y = innerHeight - popupHeight;
-            }
-            if (fittedPoint.x + popupWidth > innerWidth) {
-                fittedPoint.x = innerWidth - popupWidth;
-            }
-            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 });
-            }
-        };
-        this._handleThemeProviderRef = (el) => {
-            this.setState({ portalContainer: el ?? undefined });
-        };
-        const parentDocument = this.props.target?.ownerDocument ?? 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() {
-        return this.state.parentDocument.defaultView ?? window;
-    }
-    componentDidUpdate(previousProps, // eslint-disable-line deprecation/deprecation
-    prevState) {
-        if (this.state.position !== prevState.position) {
-            this.setState({ animationEnded: false });
-        }
-        if (this.props.target !== previousProps.target) {
-            {
-                const parentDocument = this.props.target?.ownerDocument ?? 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 {
-            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;
-        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;
-        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 ? 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(itwinui_react_1.ThemeProvider, { ref: this._handleThemeProviderRef, portalContainer: this.state.portalContainer },
-                React.createElement(FocusTrap_1.FocusTrap, { active: !!this.props.moveFocus, initialFocusElement: this.props.focusTarget, returnFocusOnDeactivate: true }, this.props.children))), this.getContainer());
-    }
-    getContainer() {
-        return (this.props.portalTarget ??
-            this.context ??
-            this.state.parentDocument.body.querySelector('[data-root-container="appui-root-id"]') ??
-            this.state.parentDocument.body);
-    }
-}
-exports.Popup = Popup;
-/** @internal */
-Popup.contextType = exports.PopupContext;
-// eslint-disable-next-line deprecation/deprecation
-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 ? parseFloat(value) : 0;
-}
-//# sourceMappingURL=Popup.js.map