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

package/lib/cjs/core-react/contextmenu/ContextMenu.js

@@ -1,365 +1,364 @@
-"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 ContextMenu
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextMenu = void 0;
-require("./ContextMenu.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const DivWithOutsideClick_1 = require("../base/DivWithOutsideClick");
-const ContextMenuDirection_1 = require("./ContextMenuDirection");
-const ContextMenuItem_1 = require("./ContextMenuItem");
-const ContextSubMenu_1 = require("./ContextSubMenu");
-/**
-  * A context menu populated with [[ContextMenuItem]] components.
-  * Can be nested using [[ContextSubMenu]] component.
-  * @public
-  */
-class ContextMenu extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this._rootElement = null;
-        this._menuElement = null;
-        this._selectedElement = null;
-        this._length = 0;
-        this._hotKeyMap = new Map();
-        this._lastDirection = ContextMenuDirection_1.ContextMenuDirection.BottomRight;
-        this._lastSelectedIndex = 0;
-        this._parentWindowHeight = 0;
-        this._parentWindowWidth = 0;
-        this._handleHotKeyParsed = (index, hotKey) => {
-            this._hotKeyMap.set(index, hotKey);
-        };
-        // istanbul ignore next
-        this._handleOnOutsideClick = (event) => {
-            if (this.props.opened && this.props.onOutsideClick)
-                this.props.onOutsideClick(event);
-        };
-        this._injectMenuItemProps = (children, direction, selectedIndex) => {
-            let index = 0;
-            // add inheritance data to submenu children
-            const ch = React.Children.map(children, (child) => {
-                // Capture only ContextSubMenus and ContextMenuItems.
-                if (child && typeof child === "object" && "props" in child && (child.type === ContextSubMenu_1.ContextSubMenu || child.type === ContextMenuItem_1.ContextMenuItem) &&
-                    !appui_abstract_1.ConditionalBooleanValue.getValue(child.props.disabled) && !appui_abstract_1.ConditionalBooleanValue.getValue(child.props.hidden)) {
-                    const id = index; // get separate id variable so value stays the same when onHover is called later.
-                    const onHover = () => {
-                        this.setState({ selectedIndex: id });
-                        this.focus();
-                    };
-                    const ref = (el) => {
-                        if (selectedIndex === id) // only save to this._selectedElement if previously captured bool is true
-                            this._selectedElement = el;
-                    };
-                    const boundHandleHotKeyParse = this._handleHotKeyParsed.bind(this, id); // bind local callback for specific index
-                    const childProps = {
-                        parentMenu: this,
-                        ref,
-                        onHover,
-                        isSelected: selectedIndex === id,
-                        onHotKeyParsed: boundHandleHotKeyParse,
-                    };
-                    if (child.type === ContextSubMenu_1.ContextSubMenu) { // add direction only to sub-menus
-                        childProps.direction = child.props.direction || /* istanbul ignore next */ direction;
-                    }
-                    index++;
-                    return React.cloneElement(child, childProps);
-                }
-                else
-                    return child; // Else, pass through unmodified
-            });
-            this._length = index;
-            return ch;
-        };
-        this._rootRef = (el) => {
-            this._rootElement = el;
-        };
-        this._menuRef = (el) => {
-            this._menuElement = el;
-        };
-        this.focus = () => {
-            // istanbul ignore else
-            if (this._menuElement)
-                this._menuElement.focus();
-        };
-        this.blur = () => {
-            // istanbul ignore else
-            if (this._menuElement)
-                this._menuElement.blur();
-        };
-        this.getRect = () => {
-            let clientRect = DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 });
-            // istanbul ignore else
-            if (this._menuElement) {
-                clientRect = this._menuElement.getBoundingClientRect();
-            }
-            return clientRect;
-        };
-        this._handleFocusChange = (event) => {
-            // istanbul ignore else
-            if (this._rootElement && this.props.opened && event.target instanceof Node && this.props.onOutsideClick && !this._rootElement.contains(event.target))
-                this.props.onOutsideClick(event);
-        };
-        this._handleClick = (event) => {
-            if (this.props.onSelect)
-                this.props.onSelect(event);
-        };
-        this._handleKeyUp = (event) => {
-            if (this.state.ignoreNextKeyUp) {
-                this.setState({ ignoreNextKeyUp: false });
-                return;
-            }
-            // istanbul ignore else
-            if (event.key) {
-                for (const [key, value] of this._hotKeyMap) {
-                    if (!this.props.hotkeySelect && key > this.state.selectedIndex) { // Start search at current index.
-                        if (event.key.toUpperCase() === value) {
-                            this.setState({ selectedIndex: key });
-                            return;
-                        }
-                    }
-                }
-                for (const [key, value] of this._hotKeyMap) {
-                    if (event.key.toUpperCase() === value) {
-                        this.setState({ selectedIndex: key }, () => {
-                            if (this.props.hotkeySelect && this._selectedElement) {
-                                this._selectedElement.select();
-                            }
-                        });
-                        event.stopPropagation();
-                        return;
-                    }
-                }
-            }
-            if (event.key === appui_abstract_1.SpecialKey.ArrowLeft) {
-                event.stopPropagation();
-                if (this.props.parentMenu && this.props.parentSubmenu) {
-                    this.props.parentSubmenu.close();
-                    this.props.parentMenu.focus();
-                }
-                if (this.props.onEsc)
-                    this.props.onEsc(event);
-            }
-            if (event.key === appui_abstract_1.SpecialKey.Escape) {
-                // istanbul ignore else
-                if (this.props.onEsc)
-                    this.props.onEsc(event);
-            }
-            if ((event.key === appui_abstract_1.SpecialKey.Enter || event.key === appui_abstract_1.SpecialKey.ArrowRight) && this._selectedElement) {
-                event.stopPropagation();
-                // istanbul ignore else
-                if (event.key === appui_abstract_1.SpecialKey.Enter || /* istanbul ignore next */ this._selectedElement instanceof ContextSubMenu_1.ContextSubMenu) {
-                    // istanbul ignore else
-                    if (this._selectedElement.select)
-                        this._selectedElement.select();
-                }
-            }
-            let { selectedIndex } = this.state;
-            if (event.key === appui_abstract_1.SpecialKey.ArrowUp || event.key === appui_abstract_1.SpecialKey.ArrowDown) {
-                event.stopPropagation();
-                if (selectedIndex === -1) {
-                    selectedIndex = 0;
-                }
-                else {
-                    if (event.key === appui_abstract_1.SpecialKey.ArrowUp) {
-                        if (this.state.selectedIndex === 0)
-                            selectedIndex = this._length - 1;
-                        else
-                            selectedIndex--;
-                    }
-                    if (event.key === appui_abstract_1.SpecialKey.ArrowDown) {
-                        if (this.state.selectedIndex === this._length - 1)
-                            selectedIndex = 0;
-                        else
-                            selectedIndex++;
-                    }
-                }
-            }
-            this.setState({ selectedIndex });
-        };
-        this.state = {
-            selectedIndex: this.props.selectedIndex,
-            direction: props.direction,
-            ignoreNextKeyUp: props.ignoreNextKeyUp,
-        };
-    }
-    render() {
-        const { opened, direction, onOutsideClick, onSelect, onEsc, autoflip, edgeLimit, hotkeySelect, // eslint-disable-line @typescript-eslint/no-unused-vars
-        selectedIndex, floating, parentMenu, parentSubmenu, children, className, ignoreNextKeyUp, // eslint-disable-line @typescript-eslint/no-unused-vars
-        ...props } = this.props;
-        const renderDirection = parentMenu === undefined ? this.state.direction : direction;
-        if (this._lastChildren !== children || this._lastDirection !== renderDirection || this._lastSelectedIndex !== this.state.selectedIndex) {
-            this._injectedChildren = this._injectMenuItemProps(children, renderDirection, this.state.selectedIndex);
-            this._lastChildren = children;
-            this._lastDirection = renderDirection;
-            this._lastSelectedIndex = this.state.selectedIndex;
-        }
-        const classNames = (0, classnames_1.default)("core-context-menu", className);
-        return (React.createElement("div", { role: "presentation", className: classNames, onKeyUp: this._handleKeyUp, onClick: this._handleClick, "data-testid": "core-context-menu-root", ...props, ref: this._rootRef },
-            React.createElement(DivWithOutsideClick_1.DivWithOutsideClick, { onOutsideClick: this._handleOnOutsideClick },
-                React.createElement("div", { ref: this._menuRef, role: "menu", tabIndex: 0, "data-testid": "core-context-menu-container", className: (0, classnames_1.default)("core-context-menu-container", opened && "core-context-menu-opened", floating && "core-context-menu-floating", ContextMenu.getCSSClassNameFromDirection(renderDirection)) }, this._injectedChildren))));
-    }
-    getWindow() {
-        var _a;
-        const el = this._rootElement ? this._rootElement : /* istanbul ignore next */ this._menuElement;
-        const parentDocument = el.ownerDocument;
-        // istanbul ignore next
-        return (_a = parentDocument.defaultView) !== null && _a !== void 0 ? _a : window;
-    }
-    /** @internal */
-    componentDidMount() {
-        const parentWindow = this.getWindow();
-        parentWindow.addEventListener("focus", this._handleFocusChange);
-        parentWindow.addEventListener("mouseup", this._handleFocusChange);
-        this.checkRenderDirection();
-        if (this.props.opened)
-            this.focus();
-    }
-    /** @internal */
-    componentWillUnmount() {
-        const parentWindow = this.getWindow();
-        parentWindow.removeEventListener("focus", this._handleFocusChange);
-        parentWindow.removeEventListener("mouseup", this._handleFocusChange);
-    }
-    checkRenderDirection() {
-        const { direction, autoflip, parentMenu } = this.props;
-        const parentWindow = this.getWindow();
-        let renderDirection = parentMenu === undefined ? this.state.direction : direction;
-        if (parentWindow.innerHeight === this._parentWindowHeight && parentWindow.innerWidth === this._parentWindowWidth)
-            return;
-        this._parentWindowHeight = parentWindow.innerHeight;
-        this._parentWindowWidth = parentWindow.innerWidth;
-        // check if menu should flip
-        if (parentWindow && autoflip && parentMenu === undefined) {
-            const menuRect = this.getRect();
-            renderDirection = ContextMenu.autoFlip(renderDirection, menuRect, parentWindow.innerWidth, parentWindow.innerHeight);
-            // istanbul ignore next
-            if (renderDirection !== this.state.direction)
-                this.setState({ direction: renderDirection });
-        }
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.selectedIndex !== this.props.selectedIndex) {
-            this.setState((_, props) => ({ selectedIndex: props.selectedIndex }));
-        }
-        if (!prevProps.opened && this.props.opened) {
-            this.setState((_, props) => ({ selectedIndex: props.selectedIndex }));
-        }
-        if (!this.props.parentMenu) {
-            // const direction = this.props.direction!;
-            // if ((!this.props.opened && prevProps.opened && direction !== this.state.direction) || prevProps.direction !== direction)
-            this.checkRenderDirection();
-        }
-    }
-}
-exports.ContextMenu = ContextMenu;
-ContextMenu.defaultProps = {
-    direction: ContextMenuDirection_1.ContextMenuDirection.BottomRight,
-    autoflip: true,
-    edgeLimit: true,
-    hotkeySelect: true,
-    selectedIndex: -1,
-    floating: true,
-};
-/** @internal */
-ContextMenu.autoFlip = (dir, rect, windowWidth, windowHeight) => {
-    if (rect.right > windowWidth) {
-        switch (dir) {
-            case ContextMenuDirection_1.ContextMenuDirection.TopRight:
-                dir = ContextMenuDirection_1.ContextMenuDirection.TopLeft;
-                break;
-            case ContextMenuDirection_1.ContextMenuDirection.Right:
-                dir = ContextMenuDirection_1.ContextMenuDirection.Left;
-                break;
-            case ContextMenuDirection_1.ContextMenuDirection.BottomRight:
-                dir = ContextMenuDirection_1.ContextMenuDirection.BottomLeft;
-                break;
-        }
-    }
-    if (rect.left < 0) {
-        switch (dir) {
-            case ContextMenuDirection_1.ContextMenuDirection.TopLeft:
-                dir = ContextMenuDirection_1.ContextMenuDirection.TopRight;
-                break;
-            case ContextMenuDirection_1.ContextMenuDirection.Left:
-                dir = ContextMenuDirection_1.ContextMenuDirection.Right;
-                break;
-            case ContextMenuDirection_1.ContextMenuDirection.BottomLeft:
-                dir = ContextMenuDirection_1.ContextMenuDirection.BottomRight;
-                break;
-        }
-    }
-    if (rect.bottom > windowHeight) {
-        switch (dir) {
-            case ContextMenuDirection_1.ContextMenuDirection.BottomLeft:
-                dir = ContextMenuDirection_1.ContextMenuDirection.TopLeft;
-                break;
-            case ContextMenuDirection_1.ContextMenuDirection.Bottom:
-                dir = ContextMenuDirection_1.ContextMenuDirection.Top;
-                break;
-            case ContextMenuDirection_1.ContextMenuDirection.BottomRight:
-                dir = ContextMenuDirection_1.ContextMenuDirection.TopRight;
-                break;
-        }
-    }
-    if (rect.top < 0) {
-        switch (dir) {
-            case ContextMenuDirection_1.ContextMenuDirection.TopLeft:
-                dir = ContextMenuDirection_1.ContextMenuDirection.BottomLeft;
-                break;
-            case ContextMenuDirection_1.ContextMenuDirection.Top:
-                dir = ContextMenuDirection_1.ContextMenuDirection.Bottom;
-                break;
-            case ContextMenuDirection_1.ContextMenuDirection.TopRight:
-                dir = ContextMenuDirection_1.ContextMenuDirection.BottomRight;
-                break;
-        }
-    }
-    return dir;
-};
-/** @internal */
-ContextMenu.getCSSClassNameFromDirection = (direction) => {
-    let className = "";
-    // istanbul ignore next
-    if (direction === undefined)
-        direction = ContextMenuDirection_1.ContextMenuDirection.BottomRight;
-    if (direction === ContextMenuDirection_1.ContextMenuDirection.None)
-        return "";
-    switch (direction) {
-        case ContextMenuDirection_1.ContextMenuDirection.TopLeft:
-            className = "core-context-menu-top core-context-menu-left";
-            break;
-        case ContextMenuDirection_1.ContextMenuDirection.Top:
-            className = "core-context-menu-top";
-            break;
-        case ContextMenuDirection_1.ContextMenuDirection.TopRight:
-            className = "core-context-menu-top core-context-menu-right";
-            break;
-        case ContextMenuDirection_1.ContextMenuDirection.Left:
-            className = "core-context-menu-left";
-            break;
-        case ContextMenuDirection_1.ContextMenuDirection.Center:
-            className = "core-context-menu-center";
-            break;
-        case ContextMenuDirection_1.ContextMenuDirection.Right:
-            className = "core-context-menu-right";
-            break;
-        case ContextMenuDirection_1.ContextMenuDirection.BottomLeft:
-            className = "core-context-menu-bottom core-context-menu-left";
-            break;
-        case ContextMenuDirection_1.ContextMenuDirection.Bottom:
-            className = "core-context-menu-bottom";
-            break;
-        case ContextMenuDirection_1.ContextMenuDirection.BottomRight:
-            className = "core-context-menu-bottom core-context-menu-right";
-            break;
-    }
-    return className;
-};
+"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 ContextMenu
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+require("./ContextMenu.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const DivWithOutsideClick_1 = require("../base/DivWithOutsideClick");
+const ContextMenuDirection_1 = require("./ContextMenuDirection");
+const ContextMenuItem_1 = require("./ContextMenuItem");
+const ContextSubMenu_1 = require("./ContextSubMenu");
+/**
+  * A context menu populated with [[ContextMenuItem]] components.
+  * Can be nested using [[ContextSubMenu]] component.
+  * @public
+  */
+class ContextMenu extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._rootElement = null;
+        this._menuElement = null;
+        this._selectedElement = null;
+        this._length = 0;
+        this._hotKeyMap = new Map();
+        this._lastDirection = ContextMenuDirection_1.ContextMenuDirection.BottomRight;
+        this._lastSelectedIndex = 0;
+        this._parentWindowHeight = 0;
+        this._parentWindowWidth = 0;
+        this._handleHotKeyParsed = (index, hotKey) => {
+            this._hotKeyMap.set(index, hotKey);
+        };
+        // istanbul ignore next
+        this._handleOnOutsideClick = (event) => {
+            if (this.props.opened && this.props.onOutsideClick)
+                this.props.onOutsideClick(event);
+        };
+        this._injectMenuItemProps = (children, direction, selectedIndex) => {
+            let index = 0;
+            // add inheritance data to submenu children
+            const ch = React.Children.map(children, (child) => {
+                // Capture only ContextSubMenus and ContextMenuItems.
+                if (child && typeof child === "object" && "props" in child && (child.type === ContextSubMenu_1.ContextSubMenu || child.type === ContextMenuItem_1.ContextMenuItem) &&
+                    !appui_abstract_1.ConditionalBooleanValue.getValue(child.props.disabled) && !appui_abstract_1.ConditionalBooleanValue.getValue(child.props.hidden)) {
+                    const id = index; // get separate id variable so value stays the same when onHover is called later.
+                    const onHover = () => {
+                        this.setState({ selectedIndex: id });
+                        this.focus();
+                    };
+                    const ref = (el) => {
+                        if (selectedIndex === id) // only save to this._selectedElement if previously captured bool is true
+                            this._selectedElement = el;
+                    };
+                    const boundHandleHotKeyParse = this._handleHotKeyParsed.bind(this, id); // bind local callback for specific index
+                    const childProps = {
+                        parentMenu: this,
+                        ref,
+                        onHover,
+                        isSelected: selectedIndex === id,
+                        onHotKeyParsed: boundHandleHotKeyParse,
+                    };
+                    if (child.type === ContextSubMenu_1.ContextSubMenu) { // add direction only to sub-menus
+                        childProps.direction = child.props.direction || /* istanbul ignore next */ direction;
+                    }
+                    index++;
+                    return React.cloneElement(child, childProps);
+                }
+                else
+                    return child; // Else, pass through unmodified
+            });
+            this._length = index;
+            return ch;
+        };
+        this._rootRef = (el) => {
+            this._rootElement = el;
+        };
+        this._menuRef = (el) => {
+            this._menuElement = el;
+        };
+        this.focus = () => {
+            // istanbul ignore else
+            if (this._menuElement)
+                this._menuElement.focus();
+        };
+        this.blur = () => {
+            // istanbul ignore else
+            if (this._menuElement)
+                this._menuElement.blur();
+        };
+        this.getRect = () => {
+            let clientRect = DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 });
+            // istanbul ignore else
+            if (this._menuElement) {
+                clientRect = this._menuElement.getBoundingClientRect();
+            }
+            return clientRect;
+        };
+        this._handleFocusChange = (event) => {
+            // istanbul ignore else
+            if (this._rootElement && this.props.opened && event.target instanceof Node && this.props.onOutsideClick && !this._rootElement.contains(event.target))
+                this.props.onOutsideClick(event);
+        };
+        this._handleClick = (event) => {
+            if (this.props.onSelect)
+                this.props.onSelect(event);
+        };
+        this._handleKeyUp = (event) => {
+            if (this.state.ignoreNextKeyUp) {
+                this.setState({ ignoreNextKeyUp: false });
+                return;
+            }
+            // istanbul ignore else
+            if (event.key) {
+                for (const [key, value] of this._hotKeyMap) {
+                    if (!this.props.hotkeySelect && key > this.state.selectedIndex) { // Start search at current index.
+                        if (event.key.toUpperCase() === value) {
+                            this.setState({ selectedIndex: key });
+                            return;
+                        }
+                    }
+                }
+                for (const [key, value] of this._hotKeyMap) {
+                    if (event.key.toUpperCase() === value) {
+                        this.setState({ selectedIndex: key }, () => {
+                            if (this.props.hotkeySelect && this._selectedElement) {
+                                this._selectedElement.select();
+                            }
+                        });
+                        event.stopPropagation();
+                        return;
+                    }
+                }
+            }
+            if (event.key === appui_abstract_1.SpecialKey.ArrowLeft) {
+                event.stopPropagation();
+                if (this.props.parentMenu && this.props.parentSubmenu) {
+                    this.props.parentSubmenu.close();
+                    this.props.parentMenu.focus();
+                }
+                if (this.props.onEsc)
+                    this.props.onEsc(event);
+            }
+            if (event.key === appui_abstract_1.SpecialKey.Escape) {
+                // istanbul ignore else
+                if (this.props.onEsc)
+                    this.props.onEsc(event);
+            }
+            if ((event.key === appui_abstract_1.SpecialKey.Enter || event.key === appui_abstract_1.SpecialKey.ArrowRight) && this._selectedElement) {
+                event.stopPropagation();
+                // istanbul ignore else
+                if (event.key === appui_abstract_1.SpecialKey.Enter || /* istanbul ignore next */ this._selectedElement instanceof ContextSubMenu_1.ContextSubMenu) {
+                    // istanbul ignore else
+                    if (this._selectedElement.select)
+                        this._selectedElement.select();
+                }
+            }
+            let { selectedIndex } = this.state;
+            if (event.key === appui_abstract_1.SpecialKey.ArrowUp || event.key === appui_abstract_1.SpecialKey.ArrowDown) {
+                event.stopPropagation();
+                if (selectedIndex === -1) {
+                    selectedIndex = 0;
+                }
+                else {
+                    if (event.key === appui_abstract_1.SpecialKey.ArrowUp) {
+                        if (this.state.selectedIndex === 0)
+                            selectedIndex = this._length - 1;
+                        else
+                            selectedIndex--;
+                    }
+                    if (event.key === appui_abstract_1.SpecialKey.ArrowDown) {
+                        if (this.state.selectedIndex === this._length - 1)
+                            selectedIndex = 0;
+                        else
+                            selectedIndex++;
+                    }
+                }
+            }
+            this.setState({ selectedIndex });
+        };
+        this.state = {
+            selectedIndex: this.props.selectedIndex,
+            direction: props.direction,
+            ignoreNextKeyUp: props.ignoreNextKeyUp,
+        };
+    }
+    render() {
+        const { opened, direction, onOutsideClick, onSelect, onEsc, autoflip, edgeLimit, hotkeySelect, // eslint-disable-line @typescript-eslint/no-unused-vars
+        selectedIndex, floating, parentMenu, parentSubmenu, children, className, ignoreNextKeyUp, // eslint-disable-line @typescript-eslint/no-unused-vars
+        ...props } = this.props;
+        const renderDirection = parentMenu === undefined ? this.state.direction : direction;
+        if (this._lastChildren !== children || this._lastDirection !== renderDirection || this._lastSelectedIndex !== this.state.selectedIndex) {
+            this._injectedChildren = this._injectMenuItemProps(children, renderDirection, this.state.selectedIndex);
+            this._lastChildren = children;
+            this._lastDirection = renderDirection;
+            this._lastSelectedIndex = this.state.selectedIndex;
+        }
+        const classNames = (0, classnames_1.default)("core-context-menu", className);
+        return (React.createElement("div", { role: "presentation", className: classNames, onKeyUp: this._handleKeyUp, onClick: this._handleClick, "data-testid": "core-context-menu-root", ...props, ref: this._rootRef },
+            React.createElement(DivWithOutsideClick_1.DivWithOutsideClick, { onOutsideClick: this._handleOnOutsideClick },
+                React.createElement("div", { ref: this._menuRef, role: "menu", tabIndex: 0, "data-testid": "core-context-menu-container", className: (0, classnames_1.default)("core-context-menu-container", opened && "core-context-menu-opened", floating && "core-context-menu-floating", ContextMenu.getCSSClassNameFromDirection(renderDirection)) }, this._injectedChildren))));
+    }
+    getWindow() {
+        const el = this._rootElement ? this._rootElement : /* istanbul ignore next */ this._menuElement;
+        const parentDocument = el.ownerDocument;
+        // istanbul ignore next
+        return parentDocument.defaultView ?? window;
+    }
+    /** @internal */
+    componentDidMount() {
+        const parentWindow = this.getWindow();
+        parentWindow.addEventListener("focus", this._handleFocusChange);
+        parentWindow.addEventListener("mouseup", this._handleFocusChange);
+        this.checkRenderDirection();
+        if (this.props.opened)
+            this.focus();
+    }
+    /** @internal */
+    componentWillUnmount() {
+        const parentWindow = this.getWindow();
+        parentWindow.removeEventListener("focus", this._handleFocusChange);
+        parentWindow.removeEventListener("mouseup", this._handleFocusChange);
+    }
+    checkRenderDirection() {
+        const { direction, autoflip, parentMenu } = this.props;
+        const parentWindow = this.getWindow();
+        let renderDirection = parentMenu === undefined ? this.state.direction : direction;
+        if (parentWindow.innerHeight === this._parentWindowHeight && parentWindow.innerWidth === this._parentWindowWidth)
+            return;
+        this._parentWindowHeight = parentWindow.innerHeight;
+        this._parentWindowWidth = parentWindow.innerWidth;
+        // check if menu should flip
+        if (parentWindow && autoflip && parentMenu === undefined) {
+            const menuRect = this.getRect();
+            renderDirection = ContextMenu.autoFlip(renderDirection, menuRect, parentWindow.innerWidth, parentWindow.innerHeight);
+            // istanbul ignore next
+            if (renderDirection !== this.state.direction)
+                this.setState({ direction: renderDirection });
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.selectedIndex !== this.props.selectedIndex) {
+            this.setState((_, props) => ({ selectedIndex: props.selectedIndex }));
+        }
+        if (!prevProps.opened && this.props.opened) {
+            this.setState((_, props) => ({ selectedIndex: props.selectedIndex }));
+        }
+        if (!this.props.parentMenu) {
+            // const direction = this.props.direction!;
+            // if ((!this.props.opened && prevProps.opened && direction !== this.state.direction) || prevProps.direction !== direction)
+            this.checkRenderDirection();
+        }
+    }
+}
+ContextMenu.defaultProps = {
+    direction: ContextMenuDirection_1.ContextMenuDirection.BottomRight,
+    autoflip: true,
+    edgeLimit: true,
+    hotkeySelect: true,
+    selectedIndex: -1,
+    floating: true,
+};
+/** @internal */
+ContextMenu.autoFlip = (dir, rect, windowWidth, windowHeight) => {
+    if (rect.right > windowWidth) {
+        switch (dir) {
+            case ContextMenuDirection_1.ContextMenuDirection.TopRight:
+                dir = ContextMenuDirection_1.ContextMenuDirection.TopLeft;
+                break;
+            case ContextMenuDirection_1.ContextMenuDirection.Right:
+                dir = ContextMenuDirection_1.ContextMenuDirection.Left;
+                break;
+            case ContextMenuDirection_1.ContextMenuDirection.BottomRight:
+                dir = ContextMenuDirection_1.ContextMenuDirection.BottomLeft;
+                break;
+        }
+    }
+    if (rect.left < 0) {
+        switch (dir) {
+            case ContextMenuDirection_1.ContextMenuDirection.TopLeft:
+                dir = ContextMenuDirection_1.ContextMenuDirection.TopRight;
+                break;
+            case ContextMenuDirection_1.ContextMenuDirection.Left:
+                dir = ContextMenuDirection_1.ContextMenuDirection.Right;
+                break;
+            case ContextMenuDirection_1.ContextMenuDirection.BottomLeft:
+                dir = ContextMenuDirection_1.ContextMenuDirection.BottomRight;
+                break;
+        }
+    }
+    if (rect.bottom > windowHeight) {
+        switch (dir) {
+            case ContextMenuDirection_1.ContextMenuDirection.BottomLeft:
+                dir = ContextMenuDirection_1.ContextMenuDirection.TopLeft;
+                break;
+            case ContextMenuDirection_1.ContextMenuDirection.Bottom:
+                dir = ContextMenuDirection_1.ContextMenuDirection.Top;
+                break;
+            case ContextMenuDirection_1.ContextMenuDirection.BottomRight:
+                dir = ContextMenuDirection_1.ContextMenuDirection.TopRight;
+                break;
+        }
+    }
+    if (rect.top < 0) {
+        switch (dir) {
+            case ContextMenuDirection_1.ContextMenuDirection.TopLeft:
+                dir = ContextMenuDirection_1.ContextMenuDirection.BottomLeft;
+                break;
+            case ContextMenuDirection_1.ContextMenuDirection.Top:
+                dir = ContextMenuDirection_1.ContextMenuDirection.Bottom;
+                break;
+            case ContextMenuDirection_1.ContextMenuDirection.TopRight:
+                dir = ContextMenuDirection_1.ContextMenuDirection.BottomRight;
+                break;
+        }
+    }
+    return dir;
+};
+/** @internal */
+ContextMenu.getCSSClassNameFromDirection = (direction) => {
+    let className = "";
+    // istanbul ignore next
+    if (direction === undefined)
+        direction = ContextMenuDirection_1.ContextMenuDirection.BottomRight;
+    if (direction === ContextMenuDirection_1.ContextMenuDirection.None)
+        return "";
+    switch (direction) {
+        case ContextMenuDirection_1.ContextMenuDirection.TopLeft:
+            className = "core-context-menu-top core-context-menu-left";
+            break;
+        case ContextMenuDirection_1.ContextMenuDirection.Top:
+            className = "core-context-menu-top";
+            break;
+        case ContextMenuDirection_1.ContextMenuDirection.TopRight:
+            className = "core-context-menu-top core-context-menu-right";
+            break;
+        case ContextMenuDirection_1.ContextMenuDirection.Left:
+            className = "core-context-menu-left";
+            break;
+        case ContextMenuDirection_1.ContextMenuDirection.Center:
+            className = "core-context-menu-center";
+            break;
+        case ContextMenuDirection_1.ContextMenuDirection.Right:
+            className = "core-context-menu-right";
+            break;
+        case ContextMenuDirection_1.ContextMenuDirection.BottomLeft:
+            className = "core-context-menu-bottom core-context-menu-left";
+            break;
+        case ContextMenuDirection_1.ContextMenuDirection.Bottom:
+            className = "core-context-menu-bottom";
+            break;
+        case ContextMenuDirection_1.ContextMenuDirection.BottomRight:
+            className = "core-context-menu-bottom core-context-menu-right";
+            break;
+    }
+    return className;
+};
+exports.ContextMenu = ContextMenu;
 //# sourceMappingURL=ContextMenu.js.map