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

package/lib/esm/appui-react/messages/AppNotificationManager.js

@@ -1,122 +1,122 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Notification
- */
-import { ActivityMessageEndReason, NotificationManager, ToolAssistance, } from "@itwin/core-frontend";
-import { ElementTooltip } from "../feedback/ElementTooltip";
-import { UiFramework } from "../UiFramework";
-import { MessageManager } from "./MessageManager";
-import { PointerMessage } from "./Pointer";
-/**
- * The AppNotificationManager class is a subclass of NotificationManager in @itwin/core-frontend.
- * This implementation uses the iTwin.js UI library to display alerts, messages, prompts and tooltips.
- * @public
- */
-export class AppNotificationManager extends NotificationManager {
-    /** Output a prompt, given an i18n key.
-     */
-    outputPromptByKey(key) {
-        this.outputPrompt(UiFramework.localization.getLocalizedString(key));
-    }
-    /** Output a prompt to the user. A 'prompt' indicates an action the user should take to proceed.
-     */
-    outputPrompt(prompt) {
-        MessageManager.outputPrompt(prompt);
-        const mainInstruction = ToolAssistance.createInstruction("", prompt);
-        const instructions = ToolAssistance.createInstructions(mainInstruction);
-        MessageManager.setToolAssistance(instructions);
-    }
-    /** Output a message and/or alert to the user. */
-    outputMessage(message) {
-        MessageManager.outputMessage(message);
-    }
-    /** Output a MessageBox and wait for response from the user.
-     * @param mbType       The MessageBox type.
-     * @param message      The message to display.
-     * @param icon         The MessageBox icon type.
-     * @return the response from the user.
-     */
-    async openMessageBox(mbType, message, icon) {
-        return MessageManager.openMessageBox(mbType, message, icon);
-    }
-    /**
-     * Set up for activity messages.
-     * @param details  The activity message details.
-     * @return true if the message was displayed, false if an invalid priority is specified.
-     */
-    setupActivityMessage(details) {
-        return MessageManager.setupActivityMessageDetails(details);
-    }
-    /**
-     * Output an activity message to the user.
-     * @param messageText      The message text.
-     * @param percentComplete  The percentage of completion.
-     * @return true if the message was displayed, false if the message could not be displayed.
-     */
-    outputActivityMessage(messageText, percentComplete) {
-        return MessageManager.setupActivityMessageValues(messageText, percentComplete);
-    }
-    /**
-     * End an activity message.
-     * @param reason       Reason for the end of the Activity Message.
-     * @return true if the message was ended successfully, false if the activityMessage could not be ended.
-     */
-    endActivityMessage(reason) {
-        let result = false;
-        switch (reason) {
-            case ActivityMessageEndReason.Completed:
-                result = MessageManager.endActivityMessage(true);
-                break;
-            case ActivityMessageEndReason.Cancelled:
-                result = MessageManager.endActivityMessage(false);
-                break;
-        }
-        return result;
-    }
-    /** Update message position created with [[OutputMessageType.Pointer]].
-     * @param displayPoint        Point at which to display the Pointer type message.
-     * @param relativePosition    Position relative to displayPoint at which to display the Pointer type message.
-     */
-    updatePointerMessage(displayPoint, relativePosition) {
-        PointerMessage.updateMessage(displayPoint, relativePosition);
-    }
-    /** Hides the Pointer message. */
-    closePointerMessage() {
-        PointerMessage.hideMessage();
-    }
-    /** Return true if _showTooltip has an implementation and will display a tooltip. */
-    get isToolTipSupported() { return true; }
-    /** Return true if the tooltip is currently open. */
-    get isToolTipOpen() { return ElementTooltip.isTooltipVisible; }
-    /** Clear the ToolTip if it is currently open. If not open, does nothing. */
-    clearToolTip() {
-        // istanbul ignore else
-        if (this.isToolTipOpen)
-            ElementTooltip.hideTooltip();
-    }
-    /** Show a ToolTip window.
-     * @param el       The HTMLElement that anchors the toolTip.
-     * @param message  The message to display inside the ToolTip
-     * @param pt       An optional location, relative to the origin of el, for the ToolTip. If undefined, center of el.
-     * @param options  Options that supply additional information about how the ToolTip should function.
-     */
-    _showToolTip(el, message, pt, options) {
-        ElementTooltip.showTooltip(el, message, pt, options);
-    }
-    /** Hide a InputField message. */
-    closeInputFieldMessage() {
-        MessageManager.hideInputFieldMessage();
-    }
-    /** Setup tool assistance instructions for a tool. The instructions include the main instruction, which includes the current prompt.
-     * @param instructions The tool assistance instructions.
-     * @public
-     */
-    setToolAssistance(instructions) {
-        MessageManager.outputPrompt(instructions ? instructions.mainInstruction.text : /* istanbul ignore next */ "");
-        MessageManager.setToolAssistance(instructions);
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Notification
+ */
+import { ActivityMessageEndReason, NotificationManager, ToolAssistance, } from "@itwin/core-frontend";
+import { ElementTooltip } from "../feedback/ElementTooltip";
+import { UiFramework } from "../UiFramework";
+import { MessageManager } from "./MessageManager";
+import { PointerMessage } from "./Pointer";
+/**
+ * The AppNotificationManager class is a subclass of NotificationManager in @itwin/core-frontend.
+ * This implementation uses the iTwin.js UI library to display alerts, messages, prompts and tooltips.
+ * @public
+ */
+export class AppNotificationManager extends NotificationManager {
+    /** Output a prompt, given an i18n key.
+     */
+    outputPromptByKey(key) {
+        this.outputPrompt(UiFramework.localization.getLocalizedString(key));
+    }
+    /** Output a prompt to the user. A 'prompt' indicates an action the user should take to proceed.
+     */
+    outputPrompt(prompt) {
+        MessageManager.outputPrompt(prompt);
+        const mainInstruction = ToolAssistance.createInstruction("", prompt);
+        const instructions = ToolAssistance.createInstructions(mainInstruction);
+        MessageManager.setToolAssistance(instructions);
+    }
+    /** Output a message and/or alert to the user. */
+    outputMessage(message) {
+        MessageManager.outputMessage(message);
+    }
+    /** Output a MessageBox and wait for response from the user.
+     * @param mbType       The MessageBox type.
+     * @param message      The message to display.
+     * @param icon         The MessageBox icon type.
+     * @return the response from the user.
+     */
+    async openMessageBox(mbType, message, icon) {
+        return MessageManager.openMessageBox(mbType, message, icon);
+    }
+    /**
+     * Set up for activity messages.
+     * @param details  The activity message details.
+     * @return true if the message was displayed, false if an invalid priority is specified.
+     */
+    setupActivityMessage(details) {
+        return MessageManager.setupActivityMessageDetails(details);
+    }
+    /**
+     * Output an activity message to the user.
+     * @param messageText      The message text.
+     * @param percentComplete  The percentage of completion.
+     * @return true if the message was displayed, false if the message could not be displayed.
+     */
+    outputActivityMessage(messageText, percentComplete) {
+        return MessageManager.setupActivityMessageValues(messageText, percentComplete);
+    }
+    /**
+     * End an activity message.
+     * @param reason       Reason for the end of the Activity Message.
+     * @return true if the message was ended successfully, false if the activityMessage could not be ended.
+     */
+    endActivityMessage(reason) {
+        let result = false;
+        switch (reason) {
+            case ActivityMessageEndReason.Completed:
+                result = MessageManager.endActivityMessage(true);
+                break;
+            case ActivityMessageEndReason.Cancelled:
+                result = MessageManager.endActivityMessage(false);
+                break;
+        }
+        return result;
+    }
+    /** Update message position created with [[OutputMessageType.Pointer]].
+     * @param displayPoint        Point at which to display the Pointer type message.
+     * @param relativePosition    Position relative to displayPoint at which to display the Pointer type message.
+     */
+    updatePointerMessage(displayPoint, relativePosition) {
+        PointerMessage.updateMessage(displayPoint, relativePosition);
+    }
+    /** Hides the Pointer message. */
+    closePointerMessage() {
+        PointerMessage.hideMessage();
+    }
+    /** Return true if _showTooltip has an implementation and will display a tooltip. */
+    get isToolTipSupported() { return true; }
+    /** Return true if the tooltip is currently open. */
+    get isToolTipOpen() { return ElementTooltip.isTooltipVisible; }
+    /** Clear the ToolTip if it is currently open. If not open, does nothing. */
+    clearToolTip() {
+        // istanbul ignore else
+        if (this.isToolTipOpen)
+            ElementTooltip.hideTooltip();
+    }
+    /** Show a ToolTip window.
+     * @param el       The HTMLElement that anchors the toolTip.
+     * @param message  The message to display inside the ToolTip
+     * @param pt       An optional location, relative to the origin of el, for the ToolTip. If undefined, center of el.
+     * @param options  Options that supply additional information about how the ToolTip should function.
+     */
+    _showToolTip(el, message, pt, options) {
+        ElementTooltip.showTooltip(el, message, pt, options);
+    }
+    /** Hide a InputField message. */
+    closeInputFieldMessage() {
+        MessageManager.hideInputFieldMessage();
+    }
+    /** Setup tool assistance instructions for a tool. The instructions include the main instruction, which includes the current prompt.
+     * @param instructions The tool assistance instructions.
+     * @public
+     */
+    setToolAssistance(instructions) {
+        MessageManager.outputPrompt(instructions ? instructions.mainInstruction.text : /* istanbul ignore next */ "");
+        MessageManager.setToolAssistance(instructions);
+    }
+}
 //# sourceMappingURL=AppNotificationManager.js.map

package/lib/esm/appui-react/messages/HollowIcon.d.ts

@@ -1,10 +1,10 @@
-/** @packageDocumentation
- * @module Notification
- */
-/// <reference types="react" />
-import { IconProps } from "@itwin/core-react";
-/** Icon for Message
- * @internal
- */
-export declare function HollowIcon(props: IconProps): JSX.Element;
+/** @packageDocumentation
+ * @module Notification
+ */
+/// <reference types="react" />
+import { IconProps } from "@itwin/core-react";
+/** Icon for Message
+ * @internal
+ */
+export declare function HollowIcon(props: IconProps): JSX.Element;
 //# sourceMappingURL=HollowIcon.d.ts.map

package/lib/esm/appui-react/messages/HollowIcon.js

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Notification
- */
-import * as React from "react";
-import { Icon } from "@itwin/core-react";
-/** Icon for Message
- * @internal
- */
-export function HollowIcon(props) {
-    return (React.createElement("span", { className: "uifw-statusbar-hollow-icon" },
-        React.createElement(Icon, { ...props })));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Notification
+ */
+import * as React from "react";
+import { Icon } from "@itwin/core-react";
+/** Icon for Message
+ * @internal
+ */
+export function HollowIcon(props) {
+    return (React.createElement("span", { className: "uifw-statusbar-hollow-icon" },
+        React.createElement(Icon, { ...props })));
+}
 //# sourceMappingURL=HollowIcon.js.map

package/lib/esm/appui-react/messages/InputField.d.ts

@@ -1,38 +1,38 @@
-/** @packageDocumentation
- * @module Notification
- */
-import "./InputField.scss";
-import * as React from "react";
-import { OutputMessagePriority } from "@itwin/core-frontend";
-import { NotifyMessageType } from "./ReactNotifyMessageDetails";
-/** Properties of [[InputFieldMessage]] component.
- * @public
- */
-interface InputFieldMessageProps {
-    showCloseButton?: boolean;
-}
-/** [[InputFieldMessage]] state.
- * @internal
- */
-interface InputFieldMessageState {
-    isVisible: boolean;
-    priority: OutputMessagePriority;
-    message: NotifyMessageType;
-    detailedMessage?: NotifyMessageType;
-    inputFieldElement?: HTMLElement;
-    showCloseButton?: boolean;
-}
-/** InputField message pops up near pointer when attempting an invalid interaction.
- * @public
- */
-export declare class InputFieldMessage extends React.PureComponent<InputFieldMessageProps, InputFieldMessageState> {
-    readonly state: Readonly<InputFieldMessageState>;
-    render(): React.ReactNode;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private _onInputMessageClose;
-    private _handleInputFieldMessageAddedEvent;
-    private _handleInputFieldMessageRemovedEvent;
-}
-export {};
+/** @packageDocumentation
+ * @module Notification
+ */
+import "./InputField.scss";
+import * as React from "react";
+import { OutputMessagePriority } from "@itwin/core-frontend";
+import { NotifyMessageType } from "./ReactNotifyMessageDetails";
+/** Properties of [[InputFieldMessage]] component.
+ * @public
+ */
+interface InputFieldMessageProps {
+    showCloseButton?: boolean;
+}
+/** [[InputFieldMessage]] state.
+ * @internal
+ */
+interface InputFieldMessageState {
+    isVisible: boolean;
+    priority: OutputMessagePriority;
+    message: NotifyMessageType;
+    detailedMessage?: NotifyMessageType;
+    inputFieldElement?: HTMLElement;
+    showCloseButton?: boolean;
+}
+/** InputField message pops up near pointer when attempting an invalid interaction.
+ * @public
+ */
+export declare class InputFieldMessage extends React.PureComponent<InputFieldMessageProps, InputFieldMessageState> {
+    readonly state: Readonly<InputFieldMessageState>;
+    render(): React.ReactNode;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private _onInputMessageClose;
+    private _handleInputFieldMessageAddedEvent;
+    private _handleInputFieldMessageRemovedEvent;
+}
+export {};
 //# sourceMappingURL=InputField.d.ts.map

package/lib/esm/appui-react/messages/InputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE;;GAEG;AACH,UAAU,sBAAsB;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;IACxG,SAAyB,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAK9D;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAkDzB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,kCAAkC,CAQxC;IAEF,OAAO,CAAC,oCAAoC,CAE1C;CACH"}
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAGhE;;GAEG;AACH,UAAU,sBAAsB;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;IACxG,SAAyB,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAK9D;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAkDzB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB,CAE1B;IAEF,OAAO,CAAC,kCAAkC,CAQxC;IAEF,OAAO,CAAC,oCAAoC,CAE1C;CACH"}

package/lib/esm/appui-react/messages/InputField.js

@@ -1,88 +1,89 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Notification
- */
-import "./InputField.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { OutputMessagePriority } from "@itwin/core-frontend";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { Popup } from "@itwin/core-react";
-import { MessageManager } from "../messages/MessageManager";
-import { MessageDiv } from "./MessageSpan";
-/** InputField message pops up near pointer when attempting an invalid interaction.
- * @public
- */
-export class InputFieldMessage extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            message: "",
-            isVisible: false,
-            priority: OutputMessagePriority.None,
-            showCloseButton: !!this.props.showCloseButton,
-        };
-        this._onInputMessageClose = () => {
-            this.setState({ isVisible: false });
-        };
-        this._handleInputFieldMessageAddedEvent = (args) => {
-            this.setState({
-                inputFieldElement: args.target,
-                message: args.messageText,
-                isVisible: true,
-                priority: args.priority,
-                detailedMessage: args.detailedMessage,
-            });
-        };
-        this._handleInputFieldMessageRemovedEvent = () => {
-            this.setState({ isVisible: false });
-        };
-    }
-    render() {
-        const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;
-        if (!inputFieldElement || !message) {
-            return null;
-        }
-        let iconClassName = "";
-        switch (priority) {
-            case OutputMessagePriority.Warning:
-                iconClassName = "icon-status-warning";
-                break;
-            case OutputMessagePriority.Error:
-                iconClassName = "icon-status-error";
-                break;
-            case OutputMessagePriority.Info:
-                iconClassName = "icon-info";
-                break;
-        }
-        return (React.createElement(Popup, { isOpen: isVisible, position: RelativePosition.BottomLeft, onClose: this._onInputMessageClose, target: inputFieldElement },
-            React.createElement("div", { className: "uifw-popup-message-inputField" },
-                React.createElement("div", { className: "uifw-popup-message-inputField-content" },
-                    React.createElement("div", { className: "uifw-popup-message-inputField-primary" },
-                        iconClassName &&
-                            React.createElement("span", { className: "uifw-popup-message-icon" },
-                                " ",
-                                React.createElement("i", { className: classnames("icon", iconClassName) }),
-                                " "),
-                        React.createElement("span", { className: "uifw-popup-message-text" },
-                            React.createElement(MessageDiv, { className: "uifw-popup-message-brief", message: message }),
-                            detailedMessage &&
-                                React.createElement(MessageDiv, { className: "uifw-popup-message-detailed", message: detailedMessage })))),
-                showCloseButton &&
-                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                    React.createElement("div", { className: "uifw-popup-message-close", onClick: this._onInputMessageClose, role: "button", tabIndex: -1 },
-                        React.createElement("i", { className: "icon icon-close" })))));
-    }
-    componentDidMount() {
-        MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);
-        MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);
-    }
-    componentWillUnmount() {
-        MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);
-        MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Notification
+ */
+import "./InputField.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { OutputMessagePriority } from "@itwin/core-frontend";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { Icon, Popup } from "@itwin/core-react";
+import { MessageManager } from "../messages/MessageManager";
+import { MessageDiv } from "./MessageSpan";
+import { SvgClose, SvgInfoCircularHollow, SvgStatusError, SvgStatusWarning } from "@itwin/itwinui-icons-react";
+/** InputField message pops up near pointer when attempting an invalid interaction.
+ * @public
+ */
+export class InputFieldMessage extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            message: "",
+            isVisible: false,
+            priority: OutputMessagePriority.None,
+            showCloseButton: !!this.props.showCloseButton,
+        };
+        this._onInputMessageClose = () => {
+            this.setState({ isVisible: false });
+        };
+        this._handleInputFieldMessageAddedEvent = (args) => {
+            this.setState({
+                inputFieldElement: args.target,
+                message: args.messageText,
+                isVisible: true,
+                priority: args.priority,
+                detailedMessage: args.detailedMessage,
+            });
+        };
+        this._handleInputFieldMessageRemovedEvent = () => {
+            this.setState({ isVisible: false });
+        };
+    }
+    render() {
+        const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;
+        if (!inputFieldElement || !message) {
+            return null;
+        }
+        let iconComponent = React.createElement(SvgInfoCircularHollow, null);
+        switch (priority) {
+            case OutputMessagePriority.Warning:
+                iconComponent = React.createElement(SvgStatusWarning, null);
+                break;
+            case OutputMessagePriority.Error:
+                iconComponent = React.createElement(SvgStatusError, null);
+                break;
+            case OutputMessagePriority.Info:
+                iconComponent = React.createElement(SvgInfoCircularHollow, null);
+                break;
+        }
+        return (React.createElement(Popup, { isOpen: isVisible, position: RelativePosition.BottomLeft, onClose: this._onInputMessageClose, target: inputFieldElement },
+            React.createElement("div", { className: "uifw-popup-message-inputField" },
+                React.createElement("div", { className: "uifw-popup-message-inputField-content" },
+                    React.createElement("div", { className: "uifw-popup-message-inputField-primary" },
+                        iconComponent &&
+                            React.createElement("span", { className: "uifw-popup-message-icon" },
+                                " ",
+                                React.createElement("i", { className: classnames("icon", "core-svg-icon") }, iconComponent),
+                                " "),
+                        React.createElement("span", { className: "uifw-popup-message-text" },
+                            React.createElement(MessageDiv, { className: "uifw-popup-message-brief", message: message }),
+                            detailedMessage &&
+                                React.createElement(MessageDiv, { className: "uifw-popup-message-detailed", message: detailedMessage })))),
+                showCloseButton &&
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                    React.createElement("div", { className: "uifw-popup-message-close", onClick: this._onInputMessageClose, role: "button", tabIndex: -1 },
+                        React.createElement(Icon, { iconSpec: React.createElement(SvgClose, null) })))));
+    }
+    componentDidMount() {
+        MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);
+        MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);
+    }
+    componentWillUnmount() {
+        MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);
+        MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);
+    }
+}
 //# sourceMappingURL=InputField.js.map

package/lib/esm/appui-react/messages/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Notification\r\n */\r\n\r\nimport \"./InputField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Popup } from \"@itwin/core-react\";\r\nimport { InputFieldMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\r\nimport { MessageDiv } from \"./MessageSpan\";\r\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\n\r\n/** Properties of [[InputFieldMessage]] component.\r\n * @public\r\n */\r\ninterface InputFieldMessageProps {\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** [[InputFieldMessage]] state.\r\n * @internal\r\n */\r\ninterface InputFieldMessageState {\r\n  isVisible: boolean;\r\n  priority: OutputMessagePriority;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  inputFieldElement?: HTMLElement;\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** InputField message pops up near pointer when attempting an invalid interaction.\r\n * @public\r\n */\r\nexport class InputFieldMessage extends React.PureComponent<InputFieldMessageProps, InputFieldMessageState> {\r\n  public override readonly state: Readonly<InputFieldMessageState> = {\r\n    message: \"\",\r\n    isVisible: false,\r\n    priority: OutputMessagePriority.None,\r\n    showCloseButton: !!this.props.showCloseButton,\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;\r\n\r\n    if (!inputFieldElement || !message) {\r\n      return null;\r\n    }\r\n\r\n    let iconClassName = \"\";\r\n    switch (priority) {\r\n      case OutputMessagePriority.Warning:\r\n        iconClassName = \"icon-status-warning\";\r\n        break;\r\n      case OutputMessagePriority.Error:\r\n        iconClassName = \"icon-status-error\";\r\n        break;\r\n      case OutputMessagePriority.Info:\r\n        iconClassName = \"icon-info\";\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <Popup\r\n        isOpen={isVisible}\r\n        position={RelativePosition.BottomLeft}\r\n        onClose={this._onInputMessageClose}\r\n        target={inputFieldElement}>\r\n        <div className=\"uifw-popup-message-inputField\">\r\n          <div className=\"uifw-popup-message-inputField-content\">\r\n            <div className=\"uifw-popup-message-inputField-primary\">\r\n              {iconClassName &&\r\n                <span className=\"uifw-popup-message-icon\"> <i className={classnames(\"icon\", iconClassName)} /> </span>\r\n              }\r\n              <span className=\"uifw-popup-message-text\">\r\n                <MessageDiv className=\"uifw-popup-message-brief\" message={message} />\r\n                {detailedMessage &&\r\n                  <MessageDiv className=\"uifw-popup-message-detailed\" message={detailedMessage} />\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n          {showCloseButton &&\r\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n            <div className=\"uifw-popup-message-close\" onClick={this._onInputMessageClose} role=\"button\" tabIndex={-1}>\r\n              <i className=\"icon icon-close\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      </Popup>);\r\n  }\r\n\r\n  public override componentDidMount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  private _onInputMessageClose = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n\r\n  private _handleInputFieldMessageAddedEvent = (args: InputFieldMessageEventArgs) => {\r\n    this.setState({\r\n      inputFieldElement: args.target as HTMLElement,\r\n      message: args.messageText,\r\n      isVisible: true,\r\n      priority: args.priority,\r\n      detailedMessage: args.detailedMessage,\r\n    });\r\n  };\r\n\r\n  private _handleInputFieldMessageRemovedEvent = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Notification\r\n */\r\n\r\nimport \"./InputField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Icon, Popup } from \"@itwin/core-react\";\r\nimport { InputFieldMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\r\nimport { MessageDiv } from \"./MessageSpan\";\r\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\nimport { SvgClose, SvgInfoCircularHollow, SvgStatusError, SvgStatusWarning} from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Properties of [[InputFieldMessage]] component.\r\n * @public\r\n */\r\ninterface InputFieldMessageProps {\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** [[InputFieldMessage]] state.\r\n * @internal\r\n */\r\ninterface InputFieldMessageState {\r\n  isVisible: boolean;\r\n  priority: OutputMessagePriority;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  inputFieldElement?: HTMLElement;\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** InputField message pops up near pointer when attempting an invalid interaction.\r\n * @public\r\n */\r\nexport class InputFieldMessage extends React.PureComponent<InputFieldMessageProps, InputFieldMessageState> {\r\n  public override readonly state: Readonly<InputFieldMessageState> = {\r\n    message: \"\",\r\n    isVisible: false,\r\n    priority: OutputMessagePriority.None,\r\n    showCloseButton: !!this.props.showCloseButton,\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;\r\n\r\n    if (!inputFieldElement || !message) {\r\n      return null;\r\n    }\r\n\r\n    let iconComponent = <SvgInfoCircularHollow />;\r\n    switch (priority) {\r\n      case OutputMessagePriority.Warning:\r\n        iconComponent = <SvgStatusWarning />;\r\n        break;\r\n      case OutputMessagePriority.Error:\r\n        iconComponent = <SvgStatusError />;\r\n        break;\r\n      case OutputMessagePriority.Info:\r\n        iconComponent = <SvgInfoCircularHollow />;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <Popup\r\n        isOpen={isVisible}\r\n        position={RelativePosition.BottomLeft}\r\n        onClose={this._onInputMessageClose}\r\n        target={inputFieldElement}>\r\n        <div className=\"uifw-popup-message-inputField\">\r\n          <div className=\"uifw-popup-message-inputField-content\">\r\n            <div className=\"uifw-popup-message-inputField-primary\">\r\n              {iconComponent &&\r\n                <span className=\"uifw-popup-message-icon\"> <i className={classnames(\"icon\", \"core-svg-icon\")}>{iconComponent}</i> </span>\r\n              }\r\n              <span className=\"uifw-popup-message-text\">\r\n                <MessageDiv className=\"uifw-popup-message-brief\" message={message} />\r\n                {detailedMessage &&\r\n                  <MessageDiv className=\"uifw-popup-message-detailed\" message={detailedMessage} />\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n          {showCloseButton &&\r\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n            <div className=\"uifw-popup-message-close\" onClick={this._onInputMessageClose} role=\"button\" tabIndex={-1}>\r\n              <Icon iconSpec={<SvgClose />} />\r\n            </div>\r\n          }\r\n        </div>\r\n      </Popup>);\r\n  }\r\n\r\n  public override componentDidMount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  private _onInputMessageClose = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n\r\n  private _handleInputFieldMessageAddedEvent = (args: InputFieldMessageEventArgs) => {\r\n    this.setState({\r\n      inputFieldElement: args.target as HTMLElement,\r\n      message: args.messageText,\r\n      isVisible: true,\r\n      priority: args.priority,\r\n      detailedMessage: args.detailedMessage,\r\n    });\r\n  };\r\n\r\n  private _handleInputFieldMessageRemovedEvent = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n}\r\n"]}