@itwin/appui-react 4.0.0-dev.11 → 4.0.0-dev.13

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

@@ -1,93 +1,93 @@
-"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");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-/** 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 iconComponent = React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null);
-        switch (priority) {
-            case core_frontend_1.OutputMessagePriority.Warning:
-                iconComponent = React.createElement(itwinui_icons_react_1.SvgStatusWarning, null);
-                break;
-            case core_frontend_1.OutputMessagePriority.Error:
-                iconComponent = React.createElement(itwinui_icons_react_1.SvgStatusError, null);
-                break;
-            case core_frontend_1.OutputMessagePriority.Info:
-                iconComponent = React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null);
-                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" },
-                        iconComponent &&
-                            React.createElement("span", { className: "uifw-popup-message-icon" },
-                                " ",
-                                React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon") }, iconComponent),
-                                " "),
-                        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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) })))));
-    }
-    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;
+"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");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/** 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 iconComponent = React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null);
+        switch (priority) {
+            case core_frontend_1.OutputMessagePriority.Warning:
+                iconComponent = React.createElement(itwinui_icons_react_1.SvgStatusWarning, null);
+                break;
+            case core_frontend_1.OutputMessagePriority.Error:
+                iconComponent = React.createElement(itwinui_icons_react_1.SvgStatusError, null);
+                break;
+            case core_frontend_1.OutputMessagePriority.Info:
+                iconComponent = React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null);
+                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" },
+                        iconComponent &&
+                            React.createElement("span", { className: "uifw-popup-message-icon" },
+                                " ",
+                                React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon") }, iconComponent),
+                                " "),
+                        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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) })))));
+    }
+    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

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

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

@@ -1,83 +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: var(--iui-border-radius-1);
-  color: var(--iui-color-text);
-  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: var(--iui-color-text-warning);
-        }
-
-        .icon-status-warning {
-          color: var(--iui-color-text-warning);
-        }
-
-        .icon-status-error {
-          color: var(--iui-color-text-negative);
-        }
-      }
-
-      .uifw-popup-message-text {
-        color: var(--iui-color-text);
-        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: var(--iui-color-text-muted);
-    cursor: pointer;
-
-    &:active,
-    &:hover {
-      color: var(--iui-color-text-hover);
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    .icon {
-      margin: 0 3px 0 10px;
-    }
-  }
-
+/*---------------------------------------------------------------------------------------------
+* 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: var(--iui-border-radius-1);
+  color: var(--iui-color-text);
+  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: var(--iui-color-text-warning);
+        }
+
+        .icon-status-warning {
+          color: var(--iui-color-text-warning);
+        }
+
+        .icon-status-error {
+          color: var(--iui-color-text-negative);
+        }
+      }
+
+      .uifw-popup-message-text {
+        color: var(--iui-color-text);
+        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: var(--iui-color-text-muted);
+    cursor: pointer;
+
+    &:active,
+    &:hover {
+      color: var(--iui-color-text-hover);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .icon {
+      margin: 0 3px 0 10px;
+    }
+  }
+
 }

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

@@ -1,13 +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;
+/** @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.js

@@ -1,22 +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;
+"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

@@ -1 +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"]}
+{"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":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Notification\n */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { MessageDiv } from \"./MessageSpan\";\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\n\n/** Message String/Label\n * @internal\n */\nexport function MessageLabel(props: { message: NotifyMessageType, className: string }) {\n  const classNames = classnames(\"uifw-statusbar-message-label\", props.className);\n  return <MessageDiv className={classNames} message={props.message} />;\n}\n"]}