@itwin/core-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/cjs/core-react/radialmenu/RadialMenu.d.ts

@@ -1,98 +1,94 @@
-/** @packageDocumentation
- * @module RadialMenu
- */
-import "./RadialMenu.scss";
-import * as React from "react";
-import { IconSpec } from "../icons/IconComponent";
-import { CommonProps } from "../utils/Props";
-import { AnnularSector } from "./Annulus";
-/** Properties for [[RadialMenu]]
- * @public
- */
-export interface RadialMenuProps extends CommonProps {
-    /** Whether to show RadialMenu */
-    opened: boolean;
-    /** Radius of inner portion of RadialMenu */
-    innerRadius: number;
-    /** Radius of outer portion of RadialMenu */
-    outerRadius: number;
-    /** Optional parameter to specify left position in viewport. */
-    left?: number | string;
-    /** Optional parameter to specify top position in viewport. */
-    top?: number | string;
-    /** Whether to rotate labels according to location on the RadialMenu, or to keep labels upright.
-     * Default: false
-     */
-    labelRotate?: boolean;
-    /** Which child RadialButton to highlight */
-    selected?: number;
-    /** triggered in case of onClick events anywhere other than radial menu */
-    onBlur?: (event: any) => any;
-    /** triggered onKeyUp for <Esc> key */
-    onEsc?: (event: any) => any;
-    /** Content */
-    children?: React.ReactNode;
-}
-/** @internal */
-interface RadialMenuState {
-    sectors: AnnularSector[];
-}
-/**
- * A context menu arranged in a radial layout.
- * @public
- */
-export declare class RadialMenu extends React.Component<RadialMenuProps, RadialMenuState> {
-    private _root;
-    private _selectedButton;
-    static defaultProps: Partial<RadialMenuProps>;
-    /** @internal */
-    readonly state: Readonly<RadialMenuState>;
-    constructor(props: RadialMenuProps);
-    render(): JSX.Element;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: RadialMenuProps): void;
-    private _handleKeyUp;
-    private _handleClick;
-    /** Manually call onSelect of highlighted button. */
-    select: () => void;
-    private _generateAnnularSectors;
-}
-/** Properties for [[RadialButton]] component
- * @public
- */
-export interface RadialButtonProps extends CommonProps {
-    /** Whether label is rotated to radial menu. Default: Inherit */
-    labelRotate?: boolean;
-    /** which icon to display in on the menu button */
-    icon?: IconSpec;
-    /** @internal */
-    annularSector?: AnnularSector;
-    /** listens to any onClick event, or any select event, which can be triggered by the select() method. */
-    onSelect?: (e: any) => any;
-    /** Whether item is highlighted */
-    selected?: boolean;
-    /** Content */
-    children?: React.ReactNode;
-}
-/** @internal */
-interface RadialButtonState {
-    hover: boolean;
-}
-/**
- * Button for use within a [[RadialMenu]]
- * @public
- */
-export declare class RadialButton extends React.Component<RadialButtonProps, RadialButtonState> {
-    /** @internal */
-    readonly state: Readonly<RadialButtonState>;
-    constructor(props: RadialButtonProps);
-    render(): JSX.Element;
-    /** Manually call this.props.onSelect */
-    select: () => void;
-    private _handleClick;
-    private _handleMouseOver;
-    private _handleMouseOut;
-}
-export {};
+/** @packageDocumentation
+ * @module RadialMenu
+ */
+import "./RadialMenu.scss";
+import * as React from "react";
+import { IconSpec } from "../icons/IconComponent";
+import { CommonProps } from "../utils/Props";
+import { AnnularSector } from "./Annulus";
+/** Properties for [[RadialMenu]]
+ * @public
+ */
+export interface RadialMenuProps extends CommonProps {
+    /** Whether to show RadialMenu */
+    opened: boolean;
+    /** Radius of inner portion of RadialMenu */
+    innerRadius: number;
+    /** Radius of outer portion of RadialMenu */
+    outerRadius: number;
+    /** Optional parameter to specify left position in viewport. */
+    left?: number | string;
+    /** Optional parameter to specify top position in viewport. */
+    top?: number | string;
+    /** Whether to rotate labels according to location on the RadialMenu, or to keep labels upright.
+     * Default: false
+     */
+    labelRotate?: boolean;
+    /** Which child RadialButton to highlight */
+    selected?: number;
+    /** triggered in case of onClick events anywhere other than radial menu */
+    onBlur?: (event: any) => any;
+    /** triggered onKeyUp for <Esc> key */
+    onEsc?: (event: any) => any;
+}
+/** @internal */
+interface RadialMenuState {
+    sectors: AnnularSector[];
+}
+/**
+ * A context menu arranged in a radial layout.
+ * @public
+ */
+export declare class RadialMenu extends React.Component<RadialMenuProps, RadialMenuState> {
+    private _root;
+    private _selectedButton;
+    static defaultProps: Partial<RadialMenuProps>;
+    /** @internal */
+    readonly state: Readonly<RadialMenuState>;
+    constructor(props: RadialMenuProps);
+    render(): JSX.Element;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: RadialMenuProps): void;
+    private _handleKeyUp;
+    private _handleClick;
+    /** Manually call onSelect of highlighted button. */
+    select: () => void;
+    private _generateAnnularSectors;
+}
+/** Properties for [[RadialButton]] component
+ * @public
+ */
+export interface RadialButtonProps extends CommonProps {
+    /** Whether label is rotated to radial menu. Default: Inherit */
+    labelRotate?: boolean;
+    /** which icon to display in on the menu button */
+    icon?: IconSpec;
+    /** @internal */
+    annularSector?: AnnularSector;
+    /** listens to any onClick event, or any select event, which can be triggered by the select() method. */
+    onSelect?: (e: any) => any;
+    /** Whether item is highlighted */
+    selected?: boolean;
+}
+/** @internal */
+interface RadialButtonState {
+    hover: boolean;
+}
+/**
+ * Button for use within a [[RadialMenu]]
+ * @public
+ */
+export declare class RadialButton extends React.Component<RadialButtonProps, RadialButtonState> {
+    /** @internal */
+    readonly state: Readonly<RadialButtonState>;
+    constructor(props: RadialButtonProps);
+    render(): JSX.Element;
+    /** Manually call this.props.onSelect */
+    select: () => void;
+    private _handleClick;
+    private _handleMouseOver;
+    private _handleMouseOut;
+}
+export {};
 //# sourceMappingURL=RadialMenu.d.ts.map

package/lib/cjs/core-react/radialmenu/RadialMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadialMenu.d.ts","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAW,MAAM,WAAW,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,sCAAsC;IACtC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC5B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,eAAe;IACvB,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAGlD;IAEF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAEvD;gBAEU,KAAK,EAAE,eAAe;IAIlB,MAAM,IAAI,GAAG,CAAC,OAAO;IAqDrB,iBAAiB;IASjB,oBAAoB;IAKpB,kBAAkB,CAAC,SAAS,EAAE,eAAe;IAM7D,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,oDAAoD;IAC7C,MAAM,aAIX;IAEF,OAAO,CAAC,uBAAuB,CAa7B;CACH;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gBAAgB;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wGAAwG;IACxG,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED;;;GAGG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAErF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAA2C;gBAE1F,KAAK,EAAE,iBAAiB;IAIpB,MAAM,IAAI,GAAG,CAAC,OAAO;IAwDrC,wCAAwC;IACjC,MAAM,aAIX;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,eAAe,CAErB;CACH"}
+{"version":3,"file":"RadialMenu.d.ts","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAW,MAAM,WAAW,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC7B,sCAAsC;IACtC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,gBAAgB;AAChB,UAAU,eAAe;IACvB,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,eAAe,CAA6B;IACpD,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAGlD;IAEF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAEvD;gBAEU,KAAK,EAAE,eAAe;IAIlB,MAAM,IAAI,GAAG,CAAC,OAAO;IAqDrB,iBAAiB;IASjB,oBAAoB;IAKpB,kBAAkB,CAAC,SAAS,EAAE,eAAe;IAM7D,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,oDAAoD;IAC7C,MAAM,aAIX;IAEF,OAAO,CAAC,uBAAuB,CAa7B;CACH;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gBAAgB;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wGAAwG;IACxG,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED;;;GAGG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAErF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAA2C;gBAE1F,KAAK,EAAE,iBAAiB;IAIpB,MAAM,IAAI,GAAG,CAAC,OAAO;IAwDrC,wCAAwC;IACjC,MAAM,aAIX;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,eAAe,CAErB;CACH"}

package/lib/cjs/core-react/radialmenu/RadialMenu.js

@@ -1,180 +1,180 @@
-"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 RadialMenu
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadialButton = exports.RadialMenu = void 0;
-require("./RadialMenu.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const IconComponent_1 = require("../icons/IconComponent");
-const Point_1 = require("../utils/Point");
-const Annulus_1 = require("./Annulus");
-/**
- * A context menu arranged in a radial layout.
- * @public
- */
-class RadialMenu extends React.Component {
-    constructor(props) {
-        super(props);
-        this._root = null;
-        this._selectedButton = null;
-        /** @internal */
-        this.state = {
-            sectors: [],
-        };
-        this._handleKeyUp = (event) => {
-            if (event.key === appui_abstract_1.SpecialKey.Escape && this.props.onEsc)
-                this.props.onEsc(event);
-        };
-        this._handleClick = (event) => {
-            if (event.target instanceof HTMLElement && this._root && !event.target.contains(this._root) && this.props.onBlur)
-                this.props.onBlur(event);
-        };
-        /** Manually call onSelect of highlighted button. */
-        this.select = () => {
-            // istanbul ignore else
-            if (this._selectedButton)
-                this._selectedButton.select();
-        };
-        this._generateAnnularSectors = () => {
-            const n = React.Children.count(this.props.children);
-            const angle = 2 * Math.PI / n;
-            const outer = this.props.outerRadius;
-            const inner = this.props.innerRadius;
-            const offset = -Math.PI / 8;
-            const annulus = new Annulus_1.Annulus(new Point_1.Point(outer + 1, outer + 1), inner + 1, outer - 1);
-            const sectors = [];
-            for (let i = 0; i < n; i++) {
-                sectors.push(new Annulus_1.AnnularSector(annulus, angle * i + offset, angle * (i + 1) + offset));
-            }
-            this.setState({ sectors });
-        };
-    }
-    render() {
-        const width = 2 * (this.props.outerRadius + 1);
-        let x = this.props.left, y = this.props.top;
-        if (this.props.left && this.props.top && typeof this.props.left === "number" && typeof this.props.top === "number") {
-            x = this.props.left;
-            y = this.props.top;
-            if (x < 0)
-                x = 0;
-            if (x > window.innerWidth - width)
-                x = window.innerWidth - width;
-            if (y < 0)
-                y = 0;
-            if (y > window.innerHeight - width)
-                y = window.innerHeight - width;
-        }
-        const divStyle = { left: x, top: y, ...this.props.style };
-        return (React.createElement("div", { ref: (el) => { this._root = el; }, className: (0, classnames_1.default)("core-radial-menu", { opened: this.props.opened }, this.props.className), style: divStyle, "data-testid": "core-radial-menu" },
-            React.createElement("svg", { xmlns: "http://w3.org/2000/svg", version: "1.1", width: width, height: width, className: "core-radial-menu-container" }, React.Children.map(this.props.children, (child, index) => {
-                // istanbul ignore next
-                if (!child || typeof child !== "object" || !("props" in child))
-                    return child;
-                const childElement = child;
-                return React.cloneElement(childElement, {
-                    key: index,
-                    ref: (el) => {
-                        if (this.props.selected === index)
-                            this._selectedButton = el;
-                    },
-                    selected: index === this.props.selected,
-                    labelRotate: childElement.props.labelRotate || this.props.labelRotate,
-                    annularSector: this.state.sectors[index],
-                });
-            }))));
-    }
-    componentDidMount() {
-        this._generateAnnularSectors();
-        setTimeout(() => {
-            window.addEventListener("keyup", this._handleKeyUp);
-            window.addEventListener("mouseup", this._handleClick);
-        });
-    }
-    componentWillUnmount() {
-        window.removeEventListener("keyup", this._handleKeyUp);
-        window.removeEventListener("mouseup", this._handleClick);
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.innerRadius !== this.props.innerRadius || prevProps.outerRadius !== this.props.outerRadius) {
-            this._generateAnnularSectors();
-        }
-    }
-}
-exports.RadialMenu = RadialMenu;
-RadialMenu.defaultProps = {
-    labelRotate: false,
-    selected: -1,
-};
-/**
- * Button for use within a [[RadialMenu]]
- * @public
- */
-class RadialButton extends React.Component {
-    constructor(props) {
-        super(props);
-        /** @internal */
-        this.state = { hover: this.props.selected || false };
-        /** Manually call this.props.onSelect */
-        this.select = () => {
-            // istanbul ignore else
-            if (this.props.onSelect)
-                this.props.onSelect(undefined);
-        };
-        this._handleClick = (event) => {
-            // istanbul ignore else
-            if (this.props.onSelect)
-                this.props.onSelect(event);
-        };
-        this._handleMouseOver = (_event) => {
-            this.setState({ hover: true });
-        };
-        this._handleMouseOut = (_event) => {
-            this.setState({ hover: false });
-        };
-    }
-    render() {
-        const sector = this.props.annularSector;
-        let p = new Point_1.Point();
-        let size = 0;
-        let t = "";
-        let path = "";
-        if (sector) {
-            size = sector.start.p1.getDistanceTo(sector.end.p2) * 2;
-            path = sector.path;
-            const parent = sector.parent;
-            const { x: cx, y: cy } = parent.center;
-            const r = (parent.inner.radius + parent.outer.radius) / 2;
-            const angle = (sector.startAngle + sector.endAngle) / 2;
-            p = new Point_1.Point(cx + r * Math.cos(angle), cy + r * Math.sin(angle));
-            if (this.props.labelRotate) {
-                let a = angle * 180 / Math.PI + 90;
-                while (a > 180)
-                    a -= 360;
-                while (a < -180)
-                    /* istanbul ignore next */
-                    a += 360;
-                if (a > 90)
-                    a -= 180;
-                if (a < -90)
-                    a += 180;
-                t = `rotate(${a} ${p.x}, ${p.y})`;
-            }
-        }
-        return (React.createElement("g", { onMouseOver: this._handleMouseOver, onMouseOut: this._handleMouseOut, onClick: this._handleClick },
-            React.createElement("path", { className: (0, classnames_1.default)("core-radial-menu-sector", { selected: this.state.hover }, this.props.className), style: this.props.style, d: path }),
-            React.createElement("foreignObject", { transform: t, x: p.x - size / 2, y: p.y - 16, width: size, height: size, className: "core-radial-menu-button-svg" },
-                React.createElement("div", { ...{ xmlns: "http://www.w3.org/1999/xhtml" }, className: "core-radial-menu-button-container" },
-                    React.createElement("div", { className: "core-radial-menu-button-icon" },
-                        React.createElement(IconComponent_1.Icon, { iconSpec: this.props.icon })),
-                    React.createElement("div", { className: "core-radial-menu-button-content" }, this.props.children)))));
-    }
-}
-exports.RadialButton = RadialButton;
+"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 RadialMenu
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadialButton = exports.RadialMenu = void 0;
+require("./RadialMenu.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const IconComponent_1 = require("../icons/IconComponent");
+const Point_1 = require("../utils/Point");
+const Annulus_1 = require("./Annulus");
+/**
+ * A context menu arranged in a radial layout.
+ * @public
+ */
+class RadialMenu extends React.Component {
+    constructor(props) {
+        super(props);
+        this._root = null;
+        this._selectedButton = null;
+        /** @internal */
+        this.state = {
+            sectors: [],
+        };
+        this._handleKeyUp = (event) => {
+            if (event.key === appui_abstract_1.SpecialKey.Escape && this.props.onEsc)
+                this.props.onEsc(event);
+        };
+        this._handleClick = (event) => {
+            if (event.target instanceof HTMLElement && this._root && !event.target.contains(this._root) && this.props.onBlur)
+                this.props.onBlur(event);
+        };
+        /** Manually call onSelect of highlighted button. */
+        this.select = () => {
+            // istanbul ignore else
+            if (this._selectedButton)
+                this._selectedButton.select();
+        };
+        this._generateAnnularSectors = () => {
+            const n = React.Children.count(this.props.children);
+            const angle = 2 * Math.PI / n;
+            const outer = this.props.outerRadius;
+            const inner = this.props.innerRadius;
+            const offset = -Math.PI / 8;
+            const annulus = new Annulus_1.Annulus(new Point_1.Point(outer + 1, outer + 1), inner + 1, outer - 1);
+            const sectors = [];
+            for (let i = 0; i < n; i++) {
+                sectors.push(new Annulus_1.AnnularSector(annulus, angle * i + offset, angle * (i + 1) + offset));
+            }
+            this.setState({ sectors });
+        };
+    }
+    render() {
+        const width = 2 * (this.props.outerRadius + 1);
+        let x = this.props.left, y = this.props.top;
+        if (this.props.left && this.props.top && typeof this.props.left === "number" && typeof this.props.top === "number") {
+            x = this.props.left;
+            y = this.props.top;
+            if (x < 0)
+                x = 0;
+            if (x > window.innerWidth - width)
+                x = window.innerWidth - width;
+            if (y < 0)
+                y = 0;
+            if (y > window.innerHeight - width)
+                y = window.innerHeight - width;
+        }
+        const divStyle = { left: x, top: y, ...this.props.style };
+        return (React.createElement("div", { ref: (el) => { this._root = el; }, className: (0, classnames_1.default)("core-radial-menu", { opened: this.props.opened }, this.props.className), style: divStyle, "data-testid": "core-radial-menu" },
+            React.createElement("svg", { xmlns: "http://w3.org/2000/svg", version: "1.1", width: width, height: width, className: "core-radial-menu-container" }, React.Children.map(this.props.children, (child, index) => {
+                // istanbul ignore next
+                if (!child || typeof child !== "object" || !("props" in child))
+                    return child;
+                const childElement = child;
+                return React.cloneElement(childElement, {
+                    key: index,
+                    ref: (el) => {
+                        if (this.props.selected === index)
+                            this._selectedButton = el;
+                    },
+                    selected: index === this.props.selected,
+                    labelRotate: childElement.props.labelRotate || this.props.labelRotate,
+                    annularSector: this.state.sectors[index],
+                });
+            }))));
+    }
+    componentDidMount() {
+        this._generateAnnularSectors();
+        setTimeout(() => {
+            window.addEventListener("keyup", this._handleKeyUp);
+            window.addEventListener("mouseup", this._handleClick);
+        });
+    }
+    componentWillUnmount() {
+        window.removeEventListener("keyup", this._handleKeyUp);
+        window.removeEventListener("mouseup", this._handleClick);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.innerRadius !== this.props.innerRadius || prevProps.outerRadius !== this.props.outerRadius) {
+            this._generateAnnularSectors();
+        }
+    }
+}
+exports.RadialMenu = RadialMenu;
+RadialMenu.defaultProps = {
+    labelRotate: false,
+    selected: -1,
+};
+/**
+ * Button for use within a [[RadialMenu]]
+ * @public
+ */
+class RadialButton extends React.Component {
+    constructor(props) {
+        super(props);
+        /** @internal */
+        this.state = { hover: this.props.selected || false };
+        /** Manually call this.props.onSelect */
+        this.select = () => {
+            // istanbul ignore else
+            if (this.props.onSelect)
+                this.props.onSelect(undefined);
+        };
+        this._handleClick = (event) => {
+            // istanbul ignore else
+            if (this.props.onSelect)
+                this.props.onSelect(event);
+        };
+        this._handleMouseOver = (_event) => {
+            this.setState({ hover: true });
+        };
+        this._handleMouseOut = (_event) => {
+            this.setState({ hover: false });
+        };
+    }
+    render() {
+        const sector = this.props.annularSector;
+        let p = new Point_1.Point();
+        let size = 0;
+        let t = "";
+        let path = "";
+        if (sector) {
+            size = sector.start.p1.getDistanceTo(sector.end.p2) * 2;
+            path = sector.path;
+            const parent = sector.parent;
+            const { x: cx, y: cy } = parent.center;
+            const r = (parent.inner.radius + parent.outer.radius) / 2;
+            const angle = (sector.startAngle + sector.endAngle) / 2;
+            p = new Point_1.Point(cx + r * Math.cos(angle), cy + r * Math.sin(angle));
+            if (this.props.labelRotate) {
+                let a = angle * 180 / Math.PI + 90;
+                while (a > 180)
+                    a -= 360;
+                while (a < -180)
+                    /* istanbul ignore next */
+                    a += 360;
+                if (a > 90)
+                    a -= 180;
+                if (a < -90)
+                    a += 180;
+                t = `rotate(${a} ${p.x}, ${p.y})`;
+            }
+        }
+        return (React.createElement("g", { onMouseOver: this._handleMouseOver, onMouseOut: this._handleMouseOut, onClick: this._handleClick },
+            React.createElement("path", { className: (0, classnames_1.default)("core-radial-menu-sector", { selected: this.state.hover }, this.props.className), style: this.props.style, d: path }),
+            React.createElement("foreignObject", { transform: t, x: p.x - size / 2, y: p.y - 16, width: size, height: size, className: "core-radial-menu-button-svg" },
+                React.createElement("div", { ...{ xmlns: "http://www.w3.org/1999/xhtml" }, className: "core-radial-menu-button-container" },
+                    React.createElement("div", { className: "core-radial-menu-button-icon" },
+                        React.createElement(IconComponent_1.Icon, { iconSpec: this.props.icon })),
+                    React.createElement("div", { className: "core-radial-menu-button-content" }, this.props.children)))));
+    }
+}
+exports.RadialButton = RadialButton;
 //# sourceMappingURL=RadialMenu.js.map