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

package/lib/esm/core-react/dialog/Dialog.js

@@ -1,363 +1,372 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Dialog
- */
-import "./Dialog.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { DialogButtonType, SpecialKey } from "@itwin/appui-abstract";
-import { DivWithOutsideClick } from "../base/DivWithOutsideClick";
-import { UiCore } from "../UiCore";
-import { FocusTrap } from "../focustrap/FocusTrap";
-import { Button } from "@itwin/itwinui-react";
-// cspell:ignore focustrap
-/** Enum for dialog alignment
- * @public
- */
-export var DialogAlignment;
-(function (DialogAlignment) {
-    DialogAlignment["TopLeft"] = "top-left";
-    DialogAlignment["Top"] = "top";
-    DialogAlignment["TopRight"] = "top-right";
-    DialogAlignment["Left"] = "left";
-    DialogAlignment["Center"] = "center";
-    DialogAlignment["Right"] = "right";
-    DialogAlignment["BottomLeft"] = "bottom-left";
-    DialogAlignment["Bottom"] = "bottom";
-    DialogAlignment["BottomRight"] = "bottom-right";
-})(DialogAlignment || (DialogAlignment = {}));
-/**
- * Dialog React component with optional resizing and dragging functionality
- * @public
- */
-export class Dialog extends React.Component {
-    constructor(props) {
-        super(props);
-        this._parentDocument = document;
-        this._containerRef = React.createRef();
-        /** Keep title bar of movable Dialog at least partially visible */
-        // istanbul ignore next
-        this._handleAppWindowResize = () => {
-            if (!this._containerRef.current || !this.props.movable)
-                return;
-            const parentWindow = this.getParentWindow();
-            const { x, y } = this.state;
-            let newX;
-            let newY;
-            if (undefined !== y && undefined !== x) {
-                if (y > parentWindow.innerHeight - 32)
-                    newY = parentWindow.innerHeight - 32;
-                if (x > parentWindow.innerWidth - 32)
-                    newX = parentWindow.innerWidth - 32;
-            }
-            if (newX !== undefined || newY !== undefined)
-                this.setState({ x: newX !== undefined ? newX : x, y: newY !== undefined ? newY : y, positionSet: true });
-        };
-        this.handleRefSet = (containerDiv) => {
-            if (containerDiv)
-                this._parentDocument = containerDiv.ownerDocument;
-        };
-        this._handleKeyUp = (event) => {
-            if (event.key === SpecialKey.Escape && this.props.opened && this.props.onEscape) {
-                this.props.onEscape();
-            }
-        };
-        this._handleContainerPointerDown = (event) => {
-            if (!this.props.modal) {
-                if (this.props.onModelessPointerDown && this.props.modelessId)
-                    this.props.onModelessPointerDown(event, this.props.modelessId);
-            }
-        };
-        this._handleStartResizeRight = (event) => {
-            event.preventDefault();
-            this.setState({ rightResizing: true });
-            const parentWindow = this.getParentWindow();
-            parentWindow.addEventListener("pointermove", this._handlePointerMove, true);
-        };
-        this._handleStartResizeDown = (event) => {
-            event.preventDefault();
-            this.setState({ downResizing: true });
-            const parentWindow = this.getParentWindow();
-            parentWindow.addEventListener("pointermove", this._handlePointerMove, true);
-        };
-        this._handleStartResizeDownRight = (event) => {
-            event.preventDefault();
-            this.setState({ downResizing: true, rightResizing: true });
-            const parentWindow = this.getParentWindow();
-            parentWindow.addEventListener("pointermove", this._handlePointerMove, true);
-        };
-        this._handleStartMove = (event) => {
-            if (!this.props.movable)
-                return;
-            event.preventDefault();
-            // istanbul ignore else
-            if (this._containerRef.current) {
-                const rect = this._containerRef.current.getBoundingClientRect();
-                const grabOffsetX = event.clientX - rect.left;
-                const grabOffsetY = event.clientY - rect.top;
-                this.setState({
-                    grabOffsetX,
-                    grabOffsetY,
-                    moving: true,
-                });
-                const parentWindow = this.getParentWindow();
-                parentWindow.addEventListener("pointermove", this._handlePointerMove, true);
-            }
-        };
-        this._handlePointerMove = (event) => {
-            if ((!this.props.resizable && !this.props.movable) || !this._containerRef.current)
-                return;
-            const { minWidth, maxWidth, minHeight, maxHeight, movable } = this.props;
-            let { x, y, width, height } = this.state;
-            // istanbul ignore else
-            if (x === undefined) { // if x is undefined, so is y, width, and height
-                const rect = this._containerRef.current.getBoundingClientRect();
-                width = rect.width, height = rect.height, x = rect.left, y = rect.top;
-            }
-            if (this.props.resizable) {
-                if (this.state.rightResizing) {
-                    const pointerX = event.clientX;
-                    width = pointerX - x;
-                    // istanbul ignore else
-                    if (typeof minWidth === "number")
-                        width = Math.max(width, minWidth);
-                    if (maxWidth !== undefined && typeof maxWidth === "number")
-                        width = Math.min(width, maxWidth);
-                }
-                if (this.state.downResizing) {
-                    const pointerY = event.clientY;
-                    height = pointerY - y;
-                    // istanbul ignore else
-                    if (typeof minHeight === "number")
-                        height = Math.max(height, minHeight);
-                    if (maxHeight !== undefined && typeof maxHeight === "number")
-                        height = Math.min(height, maxHeight);
-                }
-                this.setState({ width, height });
-            }
-            // istanbul ignore next
-            if (movable && this.state.moving) {
-                x = event.clientX - this.state.grabOffsetX;
-                y = event.clientY - this.state.grabOffsetY;
-                if (y < 0)
-                    y = 0;
-                if (event.view) {
-                    if (y > event.view.innerHeight - 32)
-                        y = event.view.innerHeight - 32;
-                    if (x > event.view.innerWidth - 32)
-                        x = event.view.innerWidth - 32;
-                    if (width) {
-                        if (x < (0 - width + 32))
-                            x = 0 - width + 32;
-                    }
-                }
-                this.setState({ x, y, positionSet: true });
-            }
-        };
-        this._handlePointerUp = (_event) => {
-            if (!this.props.movable && !this.props.resizable)
-                return;
-            // istanbul ignore else
-            if (this._containerRef.current) {
-                this.setState({
-                    rightResizing: false,
-                    downResizing: false,
-                    moving: false,
-                    grabOffsetX: 0,
-                    grabOffsetY: 0,
-                });
-            }
-            const parentWindow = this.getParentWindow();
-            parentWindow.removeEventListener("pointermove", this._handlePointerMove, true);
-        };
-        this.state = {
-            rightResizing: false,
-            downResizing: false,
-            moving: false,
-            grabOffsetX: 0,
-            grabOffsetY: 0,
-            positionSet: props.x !== undefined || props.y !== undefined,
-        };
-    }
-    getParentWindow() {
-        var _a;
-        // istanbul ignore next
-        return (_a = this._parentDocument.defaultView) !== null && _a !== void 0 ? _a : window;
-    }
-    componentWillUnmount() {
-        const parentWindow = this.getParentWindow();
-        parentWindow.removeEventListener("pointerup", this._handlePointerUp, true);
-        parentWindow.removeEventListener("pointermove", this._handlePointerMove, true);
-        this._parentDocument.removeEventListener("keyup", this._handleKeyUp, true);
-        parentWindow.addEventListener("resize", this._handleAppWindowResize);
-    }
-    componentDidMount() {
-        const parentWindow = this.getParentWindow();
-        parentWindow.addEventListener("pointerup", this._handlePointerUp, true);
-        this._parentDocument.addEventListener("keyup", this._handleKeyUp, true);
-        parentWindow.addEventListener("resize", this._handleAppWindowResize);
-    }
-    render() {
-        const { opened, title, footer, buttonCluster, onClose, onEscape, onOutsideClick, // eslint-disable-line @typescript-eslint/no-unused-vars
-        minWidth, minHeight, x, y, width, height, maxHeight, maxWidth, backgroundStyle, titleStyle, footerStyle, style, contentStyle, contentClassName, modal, resizable, movable, className, alignment, inset, trapFocus, modelessId, onModelessPointerDown, // eslint-disable-line @typescript-eslint/no-unused-vars
-        hideHeader, header, ...props } = this.props;
-        const containerStyle = {
-            margin: "",
-            left: x, top: y,
-            width, height,
-        };
-        if (this.state.x !== undefined || this.state.y !== undefined) {
-            // istanbul ignore else
-            if (this.state.x !== undefined) {
-                containerStyle.marginLeft = "0";
-                containerStyle.marginRight = "0";
-                containerStyle.left = this.state.x;
-            }
-            // istanbul ignore else
-            if (this.state.y !== undefined) {
-                containerStyle.marginTop = "0";
-                containerStyle.marginBottom = "0";
-                containerStyle.top = this.state.y;
-            }
-        }
-        if (this.state.width !== undefined || this.state.height !== undefined) {
-            // istanbul ignore else
-            if (this.state.width !== undefined)
-                containerStyle.width = this.state.width;
-            // istanbul ignore else
-            if (this.state.height !== undefined)
-                containerStyle.height = this.state.height;
-        }
-        const minMaxStyle = {};
-        minMaxStyle.minWidth = (typeof minWidth === "number") ? `${minWidth}px` : minWidth;
-        minMaxStyle.minHeight = (typeof minHeight === "number") ? `${minHeight}px` : minHeight;
-        if (maxWidth !== undefined)
-            minMaxStyle.maxWidth = (typeof maxWidth === "number") ? `${maxWidth}px` : maxWidth;
-        if (maxHeight !== undefined)
-            minMaxStyle.maxHeight = (typeof maxHeight === "number") ? `${maxHeight}px` : maxHeight;
-        const buttons = this.getFooterButtons(this.props);
-        const footerElement = footer || (buttons.length > 0 && React.createElement("div", { className: "core-dialog-buttons" }, buttons));
-        const divStyle = {
-            ...backgroundStyle,
-            ...style,
-        };
-        const headerElement = header || (React.createElement("div", { className: classnames("core-dialog-head", { "core-dialog-movable": movable }, { "core-dialog-modal": modal }), "data-testid": "core-dialog-head", onPointerDown: this._handleStartMove },
-            React.createElement("div", { className: "core-dialog-title", "data-testid": "core-dialog-title", style: titleStyle }, title),
-            React.createElement("button", { className: "core-focus-trap-ignore-initial core-dialog-close icon icon-close", "data-testid": "core-dialog-close", onClick: onClose })));
-        return (React.createElement("div", { ref: this.handleRefSet, className: classnames("core-dialog", !modal && "core-dialog-hidden", opened && "core-dialog-opened", className), style: divStyle, "data-testid": "core-dialog-root", ...props }, opened &&
-            React.createElement(DivWithOutsideClick, { onOutsideClick: onOutsideClick },
-                React.createElement(FocusTrap, { active: trapFocus && modal, returnFocusOnDeactivate: true },
-                    React.createElement("div", { className: classnames("core-dialog-container", this.getCSSClassNameFromAlignment(alignment)), style: { ...containerStyle, ...minMaxStyle }, "data-testid": "core-dialog-container", onPointerDown: this._handleContainerPointerDown },
-                        React.createElement("div", { className: "core-dialog-area", ref: this._containerRef, style: minMaxStyle },
-                            !hideHeader &&
-                                headerElement,
-                            React.createElement("div", { className: classnames("core-dialog-content", { "core-dialog-content-no-inset": !inset }, contentClassName), style: contentStyle }, this.props.children),
-                            footerElement &&
-                                React.createElement("div", { className: "core-dialog-footer", style: footerStyle }, footerElement),
-                            React.createElement("div", { className: classnames("core-dialog-drag", "core-dialog-drag-right", { "core-dialog-drag-enabled": resizable }), "data-testid": "core-dialog-drag-right", onPointerDown: this._handleStartResizeRight }),
-                            React.createElement("div", { className: classnames("core-dialog-drag", "core-dialog-drag-bottom-mid", { "core-dialog-drag-enabled": resizable }), "data-testid": "core-dialog-drag-bottom", onPointerDown: this._handleStartResizeDown }),
-                            React.createElement("div", { className: classnames("core-dialog-drag", "core-dialog-drag-bottom-right", { "core-dialog-drag-enabled": resizable }), "data-testid": "core-dialog-drag-bottom-right", onPointerDown: this._handleStartResizeDownRight })))))));
-    }
-    getCSSClassNameFromAlignment(alignment) {
-        let className = "";
-        // Drop the alignment CSS class if the Dialog has been sized or moved.
-        if (this.state.positionSet)
-            return "";
-        // istanbul ignore next
-        if (!alignment)
-            alignment = DialogAlignment.Center;
-        switch (alignment) {
-            case DialogAlignment.TopLeft:
-                className = "core-dialog-top-left";
-                break;
-            case DialogAlignment.Top:
-                className = "core-dialog-top";
-                break;
-            case DialogAlignment.TopRight:
-                className = "core-dialog-top-right";
-                break;
-            case DialogAlignment.Left:
-                className = "core-dialog-left";
-                break;
-            case DialogAlignment.Center:
-                className = "core-dialog-center";
-                break;
-            case DialogAlignment.Right:
-                className = "core-dialog-right";
-                break;
-            case DialogAlignment.BottomLeft:
-                className = "core-dialog-bottom-left";
-                break;
-            case DialogAlignment.Bottom:
-                className = "core-dialog-bottom";
-                break;
-            case DialogAlignment.BottomRight:
-                className = "core-dialog-bottom-right";
-                break;
-        }
-        return className;
-    }
-    getFooterButtons(props) {
-        const buttons = [];
-        if (props.buttonCluster) {
-            props.buttonCluster.forEach((button, index) => {
-                let buttonText = "";
-                let buttonClass = classnames("core-dialog-button", `dialog-button-${button.type}`, button.className);
-                switch (button.type) {
-                    case DialogButtonType.OK:
-                        buttonText = UiCore.translate("dialog.ok");
-                        buttonClass = classnames(buttonClass, button.buttonStyle || "iui-cta");
-                        break;
-                    case DialogButtonType.Retry:
-                        buttonText = UiCore.translate("dialog.retry");
-                        buttonClass = classnames(buttonClass, button.buttonStyle || "iui-cta");
-                        break;
-                    case DialogButtonType.Yes:
-                        buttonText = UiCore.translate("dialog.yes");
-                        buttonClass = classnames(buttonClass, button.buttonStyle || "iui-cta");
-                        break;
-                    case DialogButtonType.No:
-                        buttonText = UiCore.translate("dialog.no");
-                        buttonClass = classnames(buttonClass, button.buttonStyle);
-                        break;
-                    case DialogButtonType.Cancel:
-                        buttonText = UiCore.translate("dialog.cancel");
-                        buttonClass = classnames(buttonClass, button.buttonStyle);
-                        break;
-                    case DialogButtonType.Close:
-                        buttonText = UiCore.translate("dialog.close");
-                        buttonClass = classnames(buttonClass, button.buttonStyle);
-                        break;
-                    case DialogButtonType.Next:
-                        buttonText = UiCore.translate("dialog.next");
-                        buttonClass = classnames(buttonClass, button.buttonStyle || "iui-cta");
-                        break;
-                    case DialogButtonType.Previous:
-                        buttonText = UiCore.translate("dialog.previous");
-                        buttonClass = classnames(buttonClass, button.buttonStyle || "iui-cta");
-                        break;
-                }
-                if (button.label)
-                    buttonText = button.label;
-                buttons.push(React.createElement(Button, { className: buttonClass, disabled: button.disabled, key: index.toString(), onClick: button.onClick }, buttonText));
-            });
-        }
-        return buttons;
-    }
-}
-Dialog.defaultProps = {
-    alignment: DialogAlignment.Center,
-    minWidth: 300,
-    minHeight: 100,
-    width: "50%",
-    hideHeader: false,
-    resizable: false,
-    movable: false,
-    modal: true,
-    inset: true,
-    trapFocus: false,
-};
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Dialog
+ */
+import "./Dialog.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { DialogButtonType, SpecialKey } from "@itwin/appui-abstract";
+import { DivWithOutsideClick } from "../base/DivWithOutsideClick";
+import { UiCore } from "../UiCore";
+import { FocusTrap } from "../focustrap/FocusTrap";
+import { Button } from "@itwin/itwinui-react";
+import { Icon } from "../icons/IconComponent";
+import { SvgClose } from "@itwin/itwinui-icons-react";
+// cspell:ignore focustrap
+/** Enum for dialog alignment
+ * @public
+ */
+export var DialogAlignment;
+(function (DialogAlignment) {
+    DialogAlignment["TopLeft"] = "top-left";
+    DialogAlignment["Top"] = "top";
+    DialogAlignment["TopRight"] = "top-right";
+    DialogAlignment["Left"] = "left";
+    DialogAlignment["Center"] = "center";
+    DialogAlignment["Right"] = "right";
+    DialogAlignment["BottomLeft"] = "bottom-left";
+    DialogAlignment["Bottom"] = "bottom";
+    DialogAlignment["BottomRight"] = "bottom-right";
+})(DialogAlignment || (DialogAlignment = {}));
+/**
+ * Dialog React component with optional resizing and dragging functionality
+ * @public
+ */
+class Dialog extends React.Component {
+    constructor(props) {
+        super(props);
+        this._parentDocument = document;
+        this._containerRef = React.createRef();
+        /** Keep title bar of movable Dialog at least partially visible */
+        // istanbul ignore next
+        this._handleAppWindowResize = () => {
+            if (!this._containerRef.current || !this.props.movable)
+                return;
+            const parentWindow = this.getParentWindow();
+            const { x, y } = this.state;
+            let newX;
+            let newY;
+            if (undefined !== y && undefined !== x) {
+                if (y > parentWindow.innerHeight - 32)
+                    newY = parentWindow.innerHeight - 32;
+                if (x > parentWindow.innerWidth - 32)
+                    newX = parentWindow.innerWidth - 32;
+            }
+            if (newX !== undefined || newY !== undefined)
+                this.setState({ x: newX !== undefined ? newX : x, y: newY !== undefined ? newY : y, positionSet: true });
+        };
+        this.handleRefSet = (containerDiv) => {
+            if (containerDiv)
+                this._parentDocument = containerDiv.ownerDocument;
+        };
+        this._handleKeyUp = (event) => {
+            if (event.key === SpecialKey.Escape && this.props.opened && this.props.onEscape) {
+                this.props.onEscape();
+            }
+        };
+        this._handleContainerPointerDown = (event) => {
+            if (!this.props.modal) {
+                if (this.props.onModelessPointerDown && this.props.modelessId)
+                    this.props.onModelessPointerDown(event, this.props.modelessId);
+            }
+        };
+        this._handleStartResizeRight = (event) => {
+            event.preventDefault();
+            this.setState({ rightResizing: true });
+            const parentWindow = this.getParentWindow();
+            parentWindow.addEventListener("pointermove", this._handlePointerMove, true);
+        };
+        this._handleStartResizeDown = (event) => {
+            event.preventDefault();
+            this.setState({ downResizing: true });
+            const parentWindow = this.getParentWindow();
+            parentWindow.addEventListener("pointermove", this._handlePointerMove, true);
+        };
+        this._handleStartResizeDownRight = (event) => {
+            event.preventDefault();
+            this.setState({ downResizing: true, rightResizing: true });
+            const parentWindow = this.getParentWindow();
+            parentWindow.addEventListener("pointermove", this._handlePointerMove, true);
+        };
+        this._handleStartMove = (event) => {
+            if (!this.props.movable)
+                return;
+            event.preventDefault();
+            // istanbul ignore else
+            if (this._containerRef.current) {
+                const rect = this._containerRef.current.getBoundingClientRect();
+                const grabOffsetX = event.clientX - rect.left;
+                const grabOffsetY = event.clientY - rect.top;
+                this.setState({
+                    grabOffsetX,
+                    grabOffsetY,
+                    moving: true,
+                });
+                const parentWindow = this.getParentWindow();
+                parentWindow.addEventListener("pointermove", this._handlePointerMove, true);
+            }
+        };
+        this._handlePointerMove = (event) => {
+            if ((!this.props.resizable && !this.props.movable) || !this._containerRef.current)
+                return;
+            const { minWidth, maxWidth, minHeight, maxHeight, movable } = this.props;
+            let { x, y, width, height } = this.state;
+            // istanbul ignore else
+            if (x === undefined) { // if x is undefined, so is y, width, and height
+                const rect = this._containerRef.current.getBoundingClientRect();
+                width = rect.width, height = rect.height, x = rect.left, y = rect.top;
+            }
+            if (this.props.resizable) {
+                if (this.state.rightResizing) {
+                    const pointerX = event.clientX;
+                    width = pointerX - x;
+                    // istanbul ignore else
+                    if (typeof minWidth === "number")
+                        width = Math.max(width, minWidth);
+                    if (maxWidth !== undefined && typeof maxWidth === "number")
+                        width = Math.min(width, maxWidth);
+                }
+                if (this.state.downResizing) {
+                    const pointerY = event.clientY;
+                    height = pointerY - y;
+                    // istanbul ignore else
+                    if (typeof minHeight === "number")
+                        height = Math.max(height, minHeight);
+                    if (maxHeight !== undefined && typeof maxHeight === "number")
+                        height = Math.min(height, maxHeight);
+                }
+                this.setState({ width, height });
+            }
+            // istanbul ignore next
+            if (movable && this.state.moving) {
+                x = event.clientX - this.state.grabOffsetX;
+                y = event.clientY - this.state.grabOffsetY;
+                if (y < 0)
+                    y = 0;
+                if (event.view) {
+                    if (y > event.view.innerHeight - 32)
+                        y = event.view.innerHeight - 32;
+                    if (x > event.view.innerWidth - 32)
+                        x = event.view.innerWidth - 32;
+                    if (width) {
+                        if (x < (0 - width + 32))
+                            x = 0 - width + 32;
+                    }
+                }
+                this.setState({ x, y, positionSet: true });
+            }
+        };
+        this._handlePointerUp = (_event) => {
+            if (!this.props.movable && !this.props.resizable)
+                return;
+            // istanbul ignore else
+            if (this._containerRef.current) {
+                this.setState({
+                    rightResizing: false,
+                    downResizing: false,
+                    moving: false,
+                    grabOffsetX: 0,
+                    grabOffsetY: 0,
+                });
+            }
+            const parentWindow = this.getParentWindow();
+            parentWindow.removeEventListener("pointermove", this._handlePointerMove, true);
+        };
+        this.state = {
+            rightResizing: false,
+            downResizing: false,
+            moving: false,
+            grabOffsetX: 0,
+            grabOffsetY: 0,
+            positionSet: props.x !== undefined || props.y !== undefined,
+        };
+    }
+    getParentWindow() {
+        // istanbul ignore next
+        return this._parentDocument.defaultView ?? window;
+    }
+    componentWillUnmount() {
+        const parentWindow = this.getParentWindow();
+        parentWindow.removeEventListener("pointerup", this._handlePointerUp, true);
+        parentWindow.removeEventListener("pointermove", this._handlePointerMove, true);
+        this._parentDocument.removeEventListener("keyup", this._handleKeyUp, true);
+        parentWindow.addEventListener("resize", this._handleAppWindowResize);
+    }
+    componentDidMount() {
+        const parentWindow = this.getParentWindow();
+        parentWindow.addEventListener("pointerup", this._handlePointerUp, true);
+        this._parentDocument.addEventListener("keyup", this._handleKeyUp, true);
+        parentWindow.addEventListener("resize", this._handleAppWindowResize);
+    }
+    render() {
+        const { opened, title, footer, buttonCluster, onClose, onEscape, onOutsideClick, // eslint-disable-line @typescript-eslint/no-unused-vars
+        minWidth, minHeight, x, y, width, height, maxHeight, maxWidth, backgroundStyle, titleStyle, footerStyle, style, contentStyle, contentClassName, modal, resizable, movable, className, alignment, inset, trapFocus, modelessId, onModelessPointerDown, // eslint-disable-line @typescript-eslint/no-unused-vars
+        hideHeader, header, ...props } = this.props;
+        const containerStyle = {
+            margin: "",
+            left: x, top: y,
+            width, height,
+        };
+        if (this.state.x !== undefined || this.state.y !== undefined) {
+            // istanbul ignore else
+            if (this.state.x !== undefined) {
+                containerStyle.marginLeft = "0";
+                containerStyle.marginRight = "0";
+                containerStyle.left = this.state.x;
+            }
+            // istanbul ignore else
+            if (this.state.y !== undefined) {
+                containerStyle.marginTop = "0";
+                containerStyle.marginBottom = "0";
+                containerStyle.top = this.state.y;
+            }
+        }
+        if (this.state.width !== undefined || this.state.height !== undefined) {
+            // istanbul ignore else
+            if (this.state.width !== undefined)
+                containerStyle.width = this.state.width;
+            // istanbul ignore else
+            if (this.state.height !== undefined)
+                containerStyle.height = this.state.height;
+        }
+        const minMaxStyle = {};
+        minMaxStyle.minWidth = (typeof minWidth === "number") ? `${minWidth}px` : minWidth;
+        minMaxStyle.minHeight = (typeof minHeight === "number") ? `${minHeight}px` : minHeight;
+        if (maxWidth !== undefined)
+            minMaxStyle.maxWidth = (typeof maxWidth === "number") ? `${maxWidth}px` : maxWidth;
+        if (maxHeight !== undefined)
+            minMaxStyle.maxHeight = (typeof maxHeight === "number") ? `${maxHeight}px` : maxHeight;
+        const buttons = this.getFooterButtons(this.props);
+        const footerElement = footer || (buttons.length > 0 && React.createElement("div", { className: "core-dialog-buttons" }, buttons));
+        const divStyle = {
+            ...backgroundStyle,
+            ...style,
+        };
+        const headerElement = header || (React.createElement("div", { className: classnames("core-dialog-head", { "core-dialog-movable": movable }, { "core-dialog-modal": modal }), "data-testid": "core-dialog-head", onPointerDown: this._handleStartMove },
+            React.createElement("div", { className: "core-dialog-title", "data-testid": "core-dialog-title", style: titleStyle }, title),
+            React.createElement("button", { className: "core-focus-trap-ignore-initial core-dialog-close icon", "data-testid": "core-dialog-close", onClick: onClose },
+                React.createElement(Icon, { iconSpec: React.createElement(SvgClose, null) }))));
+        return (React.createElement("div", { ref: this.handleRefSet, className: classnames("core-dialog", !modal && "core-dialog-hidden", opened && "core-dialog-opened", className), style: divStyle, "data-testid": "core-dialog-root", ...props }, opened &&
+            React.createElement(DivWithOutsideClick, { onOutsideClick: onOutsideClick },
+                React.createElement(FocusTrap, { active: trapFocus && modal, returnFocusOnDeactivate: true },
+                    React.createElement("div", { className: classnames("core-dialog-container", this.getCSSClassNameFromAlignment(alignment)), style: { ...containerStyle, ...minMaxStyle }, "data-testid": "core-dialog-container", onPointerDown: this._handleContainerPointerDown },
+                        React.createElement("div", { className: "core-dialog-area", ref: this._containerRef, style: minMaxStyle },
+                            !hideHeader &&
+                                headerElement,
+                            React.createElement("div", { className: classnames("core-dialog-content", { "core-dialog-content-no-inset": !inset }, contentClassName), style: contentStyle }, this.props.children),
+                            footerElement &&
+                                React.createElement("div", { className: "core-dialog-footer", style: footerStyle }, footerElement),
+                            React.createElement("div", { className: classnames("core-dialog-drag", "core-dialog-drag-right", { "core-dialog-drag-enabled": resizable }), "data-testid": "core-dialog-drag-right", onPointerDown: this._handleStartResizeRight }),
+                            React.createElement("div", { className: classnames("core-dialog-drag", "core-dialog-drag-bottom-mid", { "core-dialog-drag-enabled": resizable }), "data-testid": "core-dialog-drag-bottom", onPointerDown: this._handleStartResizeDown }),
+                            React.createElement("div", { className: classnames("core-dialog-drag", "core-dialog-drag-bottom-right", { "core-dialog-drag-enabled": resizable }), "data-testid": "core-dialog-drag-bottom-right", onPointerDown: this._handleStartResizeDownRight })))))));
+    }
+    getCSSClassNameFromAlignment(alignment) {
+        let className = "";
+        // Drop the alignment CSS class if the Dialog has been sized or moved.
+        if (this.state.positionSet)
+            return "";
+        // istanbul ignore next
+        if (!alignment)
+            alignment = DialogAlignment.Center;
+        switch (alignment) {
+            case DialogAlignment.TopLeft:
+                className = "core-dialog-top-left";
+                break;
+            case DialogAlignment.Top:
+                className = "core-dialog-top";
+                break;
+            case DialogAlignment.TopRight:
+                className = "core-dialog-top-right";
+                break;
+            case DialogAlignment.Left:
+                className = "core-dialog-left";
+                break;
+            case DialogAlignment.Center:
+                className = "core-dialog-center";
+                break;
+            case DialogAlignment.Right:
+                className = "core-dialog-right";
+                break;
+            case DialogAlignment.BottomLeft:
+                className = "core-dialog-bottom-left";
+                break;
+            case DialogAlignment.Bottom:
+                className = "core-dialog-bottom";
+                break;
+            case DialogAlignment.BottomRight:
+                className = "core-dialog-bottom-right";
+                break;
+        }
+        return className;
+    }
+    getFooterButtons(props) {
+        const buttons = [];
+        if (props.buttonCluster) {
+            props.buttonCluster.forEach((button, index) => {
+                let buttonText = "";
+                let buttonClass = classnames("core-dialog-button", `dialog-button-${button.type}`, button.className);
+                let styleType;
+                switch (button.type) {
+                    case DialogButtonType.OK:
+                        buttonText = UiCore.translate("dialog.ok");
+                        buttonClass = classnames(buttonClass, button.buttonStyle);
+                        styleType = "cta";
+                        break;
+                    case DialogButtonType.Retry:
+                        buttonText = UiCore.translate("dialog.retry");
+                        buttonClass = classnames(buttonClass, button.buttonStyle);
+                        styleType = "cta";
+                        break;
+                    case DialogButtonType.Yes:
+                        buttonText = UiCore.translate("dialog.yes");
+                        buttonClass = classnames(buttonClass, button.buttonStyle);
+                        styleType = "cta";
+                        break;
+                    case DialogButtonType.No:
+                        buttonText = UiCore.translate("dialog.no");
+                        buttonClass = classnames(buttonClass, button.buttonStyle);
+                        break;
+                    case DialogButtonType.Cancel:
+                        buttonText = UiCore.translate("dialog.cancel");
+                        buttonClass = classnames(buttonClass, button.buttonStyle);
+                        break;
+                    case DialogButtonType.Close:
+                        buttonText = UiCore.translate("dialog.close");
+                        buttonClass = classnames(buttonClass, button.buttonStyle);
+                        break;
+                    case DialogButtonType.Next:
+                        buttonText = UiCore.translate("dialog.next");
+                        buttonClass = classnames(buttonClass, button.buttonStyle);
+                        styleType = "cta";
+                        break;
+                    case DialogButtonType.Previous:
+                        buttonText = UiCore.translate("dialog.previous");
+                        buttonClass = classnames(buttonClass, button.buttonStyle);
+                        styleType = "cta";
+                        break;
+                }
+                if (button.label)
+                    buttonText = button.label;
+                buttons.push(React.createElement(Button, { className: buttonClass, disabled: button.disabled, styleType: styleType, key: index.toString(), onClick: button.onClick }, buttonText));
+            });
+        }
+        return buttons;
+    }
+}
+Dialog.defaultProps = {
+    alignment: DialogAlignment.Center,
+    minWidth: 300,
+    minHeight: 100,
+    width: "50%",
+    hideHeader: false,
+    resizable: false,
+    movable: false,
+    modal: true,
+    inset: true,
+    trapFocus: false,
+};
+export { Dialog };
 //# sourceMappingURL=Dialog.js.map