@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/appui-react/messages/ActivityMessagePopup.js

@@ -0,0 +1,51 @@
+"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 Notification
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActivityMessagePopup = void 0;
+require("./ActivityMessagePopup.scss");
+const React = require("react");
+const classnames_1 = require("classnames");
+const MessageManager_1 = require("../messages/MessageManager");
+const ActivityMessage_1 = require("./ActivityMessage");
+/** Activity Message Popup React component
+ * @public
+ */
+function ActivityMessagePopup(props) {
+    const [activityMessageInfo, setActivityMessageInfo] = React.useState(undefined);
+    const [isActivityMessageVisible, setIsActivityMessageVisible] = React.useState(false);
+    React.useEffect(() => {
+        const handleActivityMessageUpdatedEvent = (args) => {
+            setActivityMessageInfo(args);
+            if (args.restored)
+                setIsActivityMessageVisible(true);
+        };
+        return MessageManager_1.MessageManager.onActivityMessageUpdatedEvent.addListener(handleActivityMessageUpdatedEvent);
+    }, [isActivityMessageVisible]);
+    React.useEffect(() => {
+        const handleActivityMessageCancelledEvent = () => {
+            setActivityMessageInfo(undefined);
+            setIsActivityMessageVisible(false);
+        };
+        return MessageManager_1.MessageManager.onActivityMessageCancelledEvent.addListener(handleActivityMessageCancelledEvent);
+    }, []);
+    const cancelActivityMessage = React.useCallback(() => {
+        MessageManager_1.MessageManager.endActivityMessage(false);
+        props.cancelActivityMessage && props.cancelActivityMessage();
+    }, [props]);
+    const dismissActivityMessage = React.useCallback(() => {
+        setIsActivityMessageVisible(false);
+        props.dismissActivityMessage && props.dismissActivityMessage();
+    }, [props]);
+    if (!activityMessageInfo || !isActivityMessageVisible)
+        return null;
+    return (React.createElement("div", { className: (0, classnames_1.default)("uifw-centered-popup", props.className), style: props.style },
+        React.createElement(ActivityMessage_1.ActivityMessage, { activityMessageInfo: activityMessageInfo, cancelActivityMessage: cancelActivityMessage, dismissActivityMessage: dismissActivityMessage })));
+}
+exports.ActivityMessagePopup = ActivityMessagePopup;
+//# sourceMappingURL=ActivityMessagePopup.js.map

package/lib/cjs/appui-react/messages/ActivityMessagePopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityMessagePopup.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/ActivityMessagePopup.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,uCAAqC;AACrC,+BAA+B;AAC/B,2CAAoC;AACpC,+DAAsF;AAEtF,uDAAoD;AAUpD;;GAEG;AACH,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAuC,SAAS,CAAC,CAAC;IACtH,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,iCAAiC,GAAG,CAAC,IAA8B,EAAE,EAAE;YAC3E,sBAAsB,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,IAAI,CAAC,QAAQ;gBACf,2BAA2B,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC;QAEF,OAAO,+BAAc,CAAC,6BAA6B,CAAC,WAAW,CAAC,iCAAiC,CAAC,CAAC;IACrG,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAE/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,mCAAmC,GAAG,GAAG,EAAE;YAC/C,sBAAsB,CAAC,SAAS,CAAC,CAAC;YAClC,2BAA2B,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,OAAO,+BAAc,CAAC,+BAA+B,CAAC,WAAW,CAAC,mCAAmC,CAAC,CAAC;IACzG,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnD,+BAAc,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACzC,KAAK,CAAC,qBAAqB,IAAI,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAC/D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpD,2BAA2B,CAAC,KAAK,CAAC,CAAC;QACnC,KAAK,CAAC,sBAAsB,IAAI,KAAK,CAAC,sBAAsB,EAAE,CAAC;IACjE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,CAAC,mBAAmB,IAAI,CAAC,wBAAwB;QACnD,OAAO,IAAI,CAAC;IAEd,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QACpF,oBAAC,iCAAe,IACd,mBAAmB,EAAE,mBAAmB,EACxC,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,GAC9C,CACE,CACP,CAAC;AACJ,CAAC;AA7CD,oDA6CC","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 \"./ActivityMessagePopup.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ActivityMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { ActivityMessage } from \"./ActivityMessage\";\r\n\r\n/** Properties for [[ActivityMessagePopup]] component\r\n * @public\r\n */\r\nexport interface ActivityMessagePopupProps extends CommonProps {\r\n  cancelActivityMessage?: () => void;\r\n  dismissActivityMessage?: () => void;\r\n}\r\n\r\n/** Activity Message Popup React component\r\n * @public\r\n */\r\nexport function ActivityMessagePopup(props: ActivityMessagePopupProps) {\r\n  const [activityMessageInfo, setActivityMessageInfo] = React.useState<ActivityMessageEventArgs | undefined>(undefined);\r\n  const [isActivityMessageVisible, setIsActivityMessageVisible] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleActivityMessageUpdatedEvent = (args: ActivityMessageEventArgs) => {\r\n      setActivityMessageInfo(args);\r\n      if (args.restored)\r\n        setIsActivityMessageVisible(true);\r\n    };\r\n\r\n    return MessageManager.onActivityMessageUpdatedEvent.addListener(handleActivityMessageUpdatedEvent);\r\n  }, [isActivityMessageVisible]);\r\n\r\n  React.useEffect(() => {\r\n    const handleActivityMessageCancelledEvent = () => {\r\n      setActivityMessageInfo(undefined);\r\n      setIsActivityMessageVisible(false);\r\n    };\r\n\r\n    return MessageManager.onActivityMessageCancelledEvent.addListener(handleActivityMessageCancelledEvent);\r\n  }, []);\r\n\r\n  const cancelActivityMessage = React.useCallback(() => {\r\n    MessageManager.endActivityMessage(false);\r\n    props.cancelActivityMessage && props.cancelActivityMessage();\r\n  }, [props]);\r\n\r\n  const dismissActivityMessage = React.useCallback(() => {\r\n    setIsActivityMessageVisible(false);\r\n    props.dismissActivityMessage && props.dismissActivityMessage();\r\n  }, [props]);\r\n\r\n  if (!activityMessageInfo || !isActivityMessageVisible)\r\n    return null;\r\n\r\n  return (\r\n    <div className={classnames(\"uifw-centered-popup\", props.className)} style={props.style}>\r\n      <ActivityMessage\r\n        activityMessageInfo={activityMessageInfo}\r\n        cancelActivityMessage={cancelActivityMessage}\r\n        dismissActivityMessage={dismissActivityMessage}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/messages/ActivityMessagePopup.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/base/base";
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+
+.uifw-centered-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  @include uicore-z-index(dialog-popup);
+  @include uicore-full-height;
+  @include uicore-full-width;
+}

package/lib/cjs/appui-react/messages/AppNotificationManager.d.ts

@@ -0,0 +1,75 @@
+/** @packageDocumentation
+ * @module Notification
+ */
+import { XAndY } from "@itwin/core-geometry";
+import { ActivityMessageDetails, ActivityMessageEndReason, MessageBoxIconType, MessageBoxType, MessageBoxValue, NotificationManager, NotifyMessageDetails, ToolAssistanceInstructions, ToolTipOptions } from "@itwin/core-frontend";
+import { RelativePosition } from "@itwin/appui-abstract";
+/**
+ * The AppNotificationManager class is a subclass of NotificationManager in @itwin/core-frontend.
+ * This implementation uses the iModel.js UI library to display alerts, messages, prompts and tooltips.
+ * @public
+ */
+export declare class AppNotificationManager extends NotificationManager {
+    /** Output a prompt, given an i18n key.
+     */
+    outputPromptByKey(key: string): void;
+    /** Output a prompt to the user. A 'prompt' indicates an action the user should take to proceed.
+     */
+    outputPrompt(prompt: string): void;
+    /** Output a message and/or alert to the user. */
+    outputMessage(message: NotifyMessageDetails): void;
+    /** 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.
+     */
+    openMessageBox(mbType: MessageBoxType, message: HTMLElement | string, icon: MessageBoxIconType): Promise<MessageBoxValue>;
+    /**
+     * 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: ActivityMessageDetails): boolean;
+    /**
+     * 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: HTMLElement | string, percentComplete: number): boolean;
+    /**
+     * 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: ActivityMessageEndReason): boolean;
+    /** 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: XAndY, relativePosition: RelativePosition): void;
+    /** Hides the Pointer message. */
+    closePointerMessage(): void;
+    /** Return true if _showTooltip has an implementation and will display a tooltip. */
+    get isToolTipSupported(): boolean;
+    /** Return true if the tooltip is currently open. */
+    get isToolTipOpen(): boolean;
+    /** Clear the ToolTip if it is currently open. If not open, does nothing. */
+    clearToolTip(): void;
+    /** 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.
+     */
+    protected _showToolTip(el: HTMLElement, message: HTMLElement | string, pt?: XAndY, options?: ToolTipOptions): void;
+    /** Hide a InputField message. */
+    closeInputFieldMessage(): void;
+    /** 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: ToolAssistanceInstructions | undefined): void;
+}
+//# sourceMappingURL=AppNotificationManager.d.ts.map

package/lib/cjs/appui-react/messages/AppNotificationManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppNotificationManager.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/AppNotificationManager.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EACL,sBAAsB,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,cAAc,EAAE,eAAe,EAAE,mBAAmB,EAAE,oBAAoB,EAChI,0BAA0B,EAAE,cAAc,EAC3D,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAMzD;;;;GAIG;AACH,qBAAa,sBAAuB,SAAQ,mBAAmB;IAE7D;OACG;IACa,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAIpD;OACG;IACa,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAQlD,iDAAiD;IACjC,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI;IAIlE;;;;;OAKG;IACmB,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAAC,eAAe,CAAC;IAI/I;;;;OAIG;IACa,oBAAoB,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO;IAI9E;;;;;OAKG;IACa,qBAAqB,CAAC,WAAW,EAAE,WAAW,GAAG,MAAM,EAAE,eAAe,EAAE,MAAM,GAAG,OAAO;IAI1G;;;;OAIG;IACa,kBAAkB,CAAC,MAAM,EAAE,wBAAwB,GAAG,OAAO;IAe7E;;;OAGG;IACa,oBAAoB,CAAC,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,GAAG,IAAI;IAInG,iCAAiC;IACjB,mBAAmB,IAAI,IAAI;IAI3C,oFAAoF;IACpF,IAAoB,kBAAkB,IAAI,OAAO,CAAiB;IAElE,oDAAoD;IACpD,IAAoB,aAAa,IAAI,OAAO,CAA4C;IAExF,4EAA4E;IAC5D,YAAY,IAAI,IAAI;IAMpC;;;;;OAKG;cACgB,YAAY,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,GAAG,MAAM,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI;IAI3H,iCAAiC;IACjB,sBAAsB,IAAI,IAAI;IAI9C;;;OAGG;IACa,iBAAiB,CAAC,YAAY,EAAE,0BAA0B,GAAG,SAAS;CAKvF"}

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

@@ -0,0 +1,126 @@
+"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 Notification
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppNotificationManager = void 0;
+const core_frontend_1 = require("@itwin/core-frontend");
+const ElementTooltip_1 = require("../feedback/ElementTooltip");
+const UiFramework_1 = require("../UiFramework");
+const MessageManager_1 = require("./MessageManager");
+const Pointer_1 = require("./Pointer");
+/**
+ * The AppNotificationManager class is a subclass of NotificationManager in @itwin/core-frontend.
+ * This implementation uses the iModel.js UI library to display alerts, messages, prompts and tooltips.
+ * @public
+ */
+class AppNotificationManager extends core_frontend_1.NotificationManager {
+    /** Output a prompt, given an i18n key.
+     */
+    outputPromptByKey(key) {
+        this.outputPrompt(UiFramework_1.UiFramework.localization.getLocalizedString(key));
+    }
+    /** Output a prompt to the user. A 'prompt' indicates an action the user should take to proceed.
+     */
+    outputPrompt(prompt) {
+        MessageManager_1.MessageManager.outputPrompt(prompt);
+        const mainInstruction = core_frontend_1.ToolAssistance.createInstruction("", prompt);
+        const instructions = core_frontend_1.ToolAssistance.createInstructions(mainInstruction);
+        MessageManager_1.MessageManager.setToolAssistance(instructions);
+    }
+    /** Output a message and/or alert to the user. */
+    outputMessage(message) {
+        MessageManager_1.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_1.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_1.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_1.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 core_frontend_1.ActivityMessageEndReason.Completed:
+                result = MessageManager_1.MessageManager.endActivityMessage(true);
+                break;
+            case core_frontend_1.ActivityMessageEndReason.Cancelled:
+                result = MessageManager_1.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) {
+        Pointer_1.PointerMessage.updateMessage(displayPoint, relativePosition);
+    }
+    /** Hides the Pointer message. */
+    closePointerMessage() {
+        Pointer_1.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_1.ElementTooltip.isTooltipVisible; }
+    /** Clear the ToolTip if it is currently open. If not open, does nothing. */
+    clearToolTip() {
+        // istanbul ignore else
+        if (this.isToolTipOpen)
+            ElementTooltip_1.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_1.ElementTooltip.showTooltip(el, message, pt, options);
+    }
+    /** Hide a InputField message. */
+    closeInputFieldMessage() {
+        MessageManager_1.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_1.MessageManager.outputPrompt(instructions ? instructions.mainInstruction.text : /* istanbul ignore next */ "");
+        MessageManager_1.MessageManager.setToolAssistance(instructions);
+    }
+}
+exports.AppNotificationManager = AppNotificationManager;
+//# sourceMappingURL=AppNotificationManager.js.map

package/lib/cjs/appui-react/messages/AppNotificationManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppNotificationManager.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/AppNotificationManager.ts"],"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 { XAndY } from \"@itwin/core-geometry\";\r\nimport {\r\n  ActivityMessageDetails, ActivityMessageEndReason, MessageBoxIconType, MessageBoxType, MessageBoxValue, NotificationManager, NotifyMessageDetails,\r\n  ToolAssistance, ToolAssistanceInstructions, ToolTipOptions,\r\n} from \"@itwin/core-frontend\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { ElementTooltip } from \"../feedback/ElementTooltip\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { MessageManager } from \"./MessageManager\";\r\nimport { PointerMessage } from \"./Pointer\";\r\n\r\n/**\r\n * The AppNotificationManager class is a subclass of NotificationManager in @itwin/core-frontend.\r\n * This implementation uses the iModel.js UI library to display alerts, messages, prompts and tooltips.\r\n * @public\r\n */\r\nexport class AppNotificationManager extends NotificationManager {\r\n\r\n  /** Output a prompt, given an i18n key.\r\n   */\r\n  public override outputPromptByKey(key: string): void {\r\n    this.outputPrompt(UiFramework.localization.getLocalizedString(key));\r\n  }\r\n\r\n  /** Output a prompt to the user. A 'prompt' indicates an action the user should take to proceed.\r\n   */\r\n  public override outputPrompt(prompt: string): void {\r\n    MessageManager.outputPrompt(prompt);\r\n\r\n    const mainInstruction = ToolAssistance.createInstruction(\"\", prompt);\r\n    const instructions = ToolAssistance.createInstructions(mainInstruction);\r\n    MessageManager.setToolAssistance(instructions);\r\n  }\r\n\r\n  /** Output a message and/or alert to the user. */\r\n  public override outputMessage(message: NotifyMessageDetails): void {\r\n    MessageManager.outputMessage(message);\r\n  }\r\n\r\n  /** Output a MessageBox and wait for response from the user.\r\n   * @param mbType       The MessageBox type.\r\n   * @param message      The message to display.\r\n   * @param icon         The MessageBox icon type.\r\n   * @return the response from the user.\r\n   */\r\n  public override async openMessageBox(mbType: MessageBoxType, message: HTMLElement | string, icon: MessageBoxIconType): Promise<MessageBoxValue> {\r\n    return MessageManager.openMessageBox(mbType, message, icon);\r\n  }\r\n\r\n  /**\r\n   * Set up for activity messages.\r\n   * @param details  The activity message details.\r\n   * @return true if the message was displayed, false if an invalid priority is specified.\r\n   */\r\n  public override setupActivityMessage(details: ActivityMessageDetails): boolean {\r\n    return MessageManager.setupActivityMessageDetails(details);\r\n  }\r\n\r\n  /**\r\n   * Output an activity message to the user.\r\n   * @param messageText      The message text.\r\n   * @param percentComplete  The percentage of completion.\r\n   * @return true if the message was displayed, false if the message could not be displayed.\r\n   */\r\n  public override outputActivityMessage(messageText: HTMLElement | string, percentComplete: number): boolean {\r\n    return MessageManager.setupActivityMessageValues(messageText, percentComplete);\r\n  }\r\n\r\n  /**\r\n   * End an activity message.\r\n   * @param reason       Reason for the end of the Activity Message.\r\n   * @return true if the message was ended successfully, false if the activityMessage could not be ended.\r\n   */\r\n  public override endActivityMessage(reason: ActivityMessageEndReason): boolean {\r\n    let result = false;\r\n\r\n    switch (reason) {\r\n      case ActivityMessageEndReason.Completed:\r\n        result = MessageManager.endActivityMessage(true);\r\n        break;\r\n      case ActivityMessageEndReason.Cancelled:\r\n        result = MessageManager.endActivityMessage(false);\r\n        break;\r\n    }\r\n\r\n    return result;\r\n  }\r\n\r\n  /** Update message position created with [[OutputMessageType.Pointer]].\r\n   * @param displayPoint        Point at which to display the Pointer type message.\r\n   * @param relativePosition    Position relative to displayPoint at which to display the Pointer type message.\r\n   */\r\n  public override updatePointerMessage(displayPoint: XAndY, relativePosition: RelativePosition): void {\r\n    PointerMessage.updateMessage(displayPoint, relativePosition);\r\n  }\r\n\r\n  /** Hides the Pointer message. */\r\n  public override closePointerMessage(): void {\r\n    PointerMessage.hideMessage();\r\n  }\r\n\r\n  /** Return true if _showTooltip has an implementation and will display a tooltip. */\r\n  public override get isToolTipSupported(): boolean { return true; }\r\n\r\n  /** Return true if the tooltip is currently open. */\r\n  public override get isToolTipOpen(): boolean { return ElementTooltip.isTooltipVisible; }\r\n\r\n  /** Clear the ToolTip if it is currently open. If not open, does nothing. */\r\n  public override clearToolTip(): void {\r\n    // istanbul ignore else\r\n    if (this.isToolTipOpen)\r\n      ElementTooltip.hideTooltip();\r\n  }\r\n\r\n  /** Show a ToolTip window.\r\n   * @param el       The HTMLElement that anchors the toolTip.\r\n   * @param message  The message to display inside the ToolTip\r\n   * @param pt       An optional location, relative to the origin of el, for the ToolTip. If undefined, center of el.\r\n   * @param options  Options that supply additional information about how the ToolTip should function.\r\n   */\r\n  protected override _showToolTip(el: HTMLElement, message: HTMLElement | string, pt?: XAndY, options?: ToolTipOptions): void {\r\n    ElementTooltip.showTooltip(el, message, pt, options);\r\n  }\r\n\r\n  /** Hide a InputField message. */\r\n  public override closeInputFieldMessage(): void {\r\n    MessageManager.hideInputFieldMessage();\r\n  }\r\n\r\n  /** Setup tool assistance instructions for a tool. The instructions include the main instruction, which includes the current prompt.\r\n   * @param instructions The tool assistance instructions.\r\n   * @public\r\n   */\r\n  public override setToolAssistance(instructions: ToolAssistanceInstructions | undefined) {\r\n    MessageManager.outputPrompt(instructions ? instructions.mainInstruction.text : /* istanbul ignore next */ \"\");\r\n    MessageManager.setToolAssistance(instructions);\r\n  }\r\n\r\n}\r\n"]}

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

@@ -0,0 +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;
+//# sourceMappingURL=HollowIcon.d.ts.map

package/lib/cjs/appui-react/messages/HollowIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HollowIcon.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/HollowIcon.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAGH,OAAO,EAAQ,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,eAM1C"}

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

@@ -0,0 +1,21 @@
+"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 Notification
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HollowIcon = void 0;
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+/** Icon for Message
+ * @internal
+ */
+function HollowIcon(props) {
+    return (React.createElement("span", { className: "uifw-statusbar-hollow-icon" },
+        React.createElement(core_react_1.Icon, { ...props })));
+}
+exports.HollowIcon = HollowIcon;
+//# sourceMappingURL=HollowIcon.js.map

package/lib/cjs/appui-react/messages/HollowIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HollowIcon.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/HollowIcon.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,kDAAoD;AAEpD;;GAEG;AACH,SAAgB,UAAU,CAAC,KAAgB;IACzC,OAAO,CACL,8BAAM,SAAS,EAAC,4BAA4B;QAC1C,oBAAC,iBAAI,OAAK,KAAK,GAAI,CACd,CACR,CAAC;AACJ,CAAC;AAND,gCAMC","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 * as React from \"react\";\r\nimport { Icon, IconProps } from \"@itwin/core-react\";\r\n\r\n/** Icon for Message\r\n * @internal\r\n */\r\nexport function HollowIcon(props: IconProps) {\r\n  return (\r\n    <span className=\"uifw-statusbar-hollow-icon\">\r\n      <Icon {...props} />\r\n    </span>\r\n  );\r\n}\r\n"]}

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

@@ -0,0 +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 {};
+//# sourceMappingURL=InputField.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,92 @@
+"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 Notification
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputFieldMessage = void 0;
+require("./InputField.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const MessageManager_1 = require("../messages/MessageManager");
+const MessageSpan_1 = require("./MessageSpan");
+/** InputField message pops up near pointer when attempting an invalid interaction.
+ * @public
+ */
+class InputFieldMessage extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            message: "",
+            isVisible: false,
+            priority: core_frontend_1.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 core_frontend_1.OutputMessagePriority.Warning:
+                iconClassName = "icon-status-warning";
+                break;
+            case core_frontend_1.OutputMessagePriority.Error:
+                iconClassName = "icon-status-error";
+                break;
+            case core_frontend_1.OutputMessagePriority.Info:
+                iconClassName = "icon-info";
+                break;
+        }
+        return (React.createElement(core_react_1.Popup, { isOpen: isVisible, position: appui_abstract_1.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: (0, classnames_1.default)("icon", iconClassName) }),
+                                " "),
+                        React.createElement("span", { className: "uifw-popup-message-text" },
+                            React.createElement(MessageSpan_1.MessageDiv, { className: "uifw-popup-message-brief", message: message }),
+                            detailedMessage &&
+                                React.createElement(MessageSpan_1.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_1.MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);
+        MessageManager_1.MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);
+    }
+    componentWillUnmount() {
+        MessageManager_1.MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);
+        MessageManager_1.MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);
+    }
+}
+exports.InputFieldMessage = InputFieldMessage;
+//# sourceMappingURL=InputField.js.map

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

@@ -0,0 +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"]}

package/lib/cjs/appui-react/messages/InputField.scss

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/text/mixins";
+
+.uifw-popup-message-inputField {
+  background-color: $buic-background-control;
+  padding: 3px 3px 3px 6px;
+  border-radius: 5px;
+  color: $buic-text-color;
+  margin: 0px;
+  transition: all 3s ease;
+  display: flex;
+  align-items: center;
+
+  .uifw-popup-message-inputField-content {
+    min-width: 180px;
+    max-width: 360px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    .uifw-popup-message-inputField-primary {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+
+      >.uifw-popup-message-icon {
+        padding-left: 3px;
+        padding-right: 3px;
+
+        .icon-status-warning {
+          color: $buic-foreground-warning;
+        }
+
+        .icon-status-warning {
+          color: $buic-foreground-warning;
+        }
+
+        .icon-status-error {
+          color: $buic-foreground-alert;
+        }
+      }
+
+      .uifw-popup-message-text {
+        color: $buic-foreground-body;
+        padding-left: 3px;
+        padding-right: 3px;
+
+        .uifw-popup-message-brief {
+          @include uicore-text(body);
+        }
+
+        .uifw-popup-message-detailed {
+          @include uicore-text(small);
+        }
+      }
+    }
+  }
+
+  .uifw-popup-message-close {
+    display: flex;
+    align-items: center;
+    color: $buic-foreground-muted;
+    cursor: pointer;
+
+    &:active,
+    &:hover {
+      color: $buic-foreground-activehover;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .icon {
+      margin: 0 3px 0 10px;
+    }
+  }
+
+}

package/lib/cjs/appui-react/messages/MessageLabel.d.ts

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module Notification
+ */
+/// <reference types="react" />
+import { NotifyMessageType } from "./ReactNotifyMessageDetails";
+/** Message String/Label
+ * @internal
+ */
+export declare function MessageLabel(props: {
+    message: NotifyMessageType;
+    className: string;
+}): JSX.Element;
+//# sourceMappingURL=MessageLabel.d.ts.map

package/lib/cjs/appui-react/messages/MessageLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLabel.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/MessageLabel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,iBAAiB,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,eAGpF"}

package/lib/cjs/appui-react/messages/MessageLabel.js

@@ -0,0 +1,22 @@
+"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 Notification
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageLabel = void 0;
+const React = require("react");
+const classnames_1 = require("classnames");
+const MessageSpan_1 = require("./MessageSpan");
+/** Message String/Label
+ * @internal
+ */
+function MessageLabel(props) {
+    const classNames = (0, classnames_1.default)("uifw-statusbar-message-label", props.className);
+    return React.createElement(MessageSpan_1.MessageDiv, { className: classNames, message: props.message });
+}
+exports.MessageLabel = MessageLabel;
+//# sourceMappingURL=MessageLabel.js.map

package/lib/cjs/appui-react/messages/MessageLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLabel.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/MessageLabel.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,2CAAoC;AACpC,+CAA2C;AAG3C;;GAEG;AACH,SAAgB,YAAY,CAAC,KAAwD;IACnF,MAAM,UAAU,GAAG,IAAA,oBAAU,EAAC,8BAA8B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC/E,OAAO,oBAAC,wBAAU,IAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC;AACvE,CAAC;AAHD,oCAGC","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 * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { MessageDiv } from \"./MessageSpan\";\r\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\n\r\n/** Message String/Label\r\n * @internal\r\n */\r\nexport function MessageLabel(props: { message: NotifyMessageType, className: string }) {\r\n  const classNames = classnames(\"uifw-statusbar-message-label\", props.className);\r\n  return <MessageDiv className={classNames} message={props.message} />;\r\n}\r\n"]}