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

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

@@ -1,169 +1,170 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "./Pointer.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { OutputMessagePriority } from "@itwin/core-frontend";
-import { MessageSeverity, RelativePosition, UiEvent } from "@itwin/appui-abstract";
-import { MessageContainer, Point, Rectangle } from "@itwin/core-react";
-import { offsetAndContainInContainer, Tooltip } from "@itwin/appui-layout-react";
-import { MessageManager } from "./MessageManager";
-import { MessageDiv, MessageSpan } from "./MessageSpan";
-/** Pointer Message Changed Event emitted by the [[PointerMessage]] component
- * @public
- */
-export class PointerMessageChangedEvent extends UiEvent {
-}
-/** Pointer Message Position Changed Event emitted by the [[PointerMessage]] component
- * @internal
- */
-class PointerMessagePositionChangedEvent extends UiEvent {
-}
-/** Pointer message pops up near pointer when attempting an invalid interaction.
- * @public
- */
-export class PointerMessage extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            message: "",
-            isVisible: false,
-            position: {
-                x: 0,
-                y: 0,
-            },
-        };
-        this._size = {
-            height: 0,
-            width: 0,
-        };
-        // istanbul ignore next
-        this._handleSizeChanged = (size) => {
-            this._size = size;
-            this.updatePosition();
-        };
-        this._handlePointerMessageChangedEvent = (args) => {
-            this._relativePosition = args.relativePosition;
-            this._viewport = args.viewport;
-            this._position = args.pt;
-            this.setState(() => ({
-                isVisible: args.isVisible,
-                message: args.message,
-                detailedMessage: args.detailedMessage,
-                messageDetails: args.messageDetails,
-            }));
-            this.updatePosition();
-        };
-        this._handlePointerMessagePositionChangedEvent = (args) => {
-            this._relativePosition = args.relativePosition;
-            this._position = args.pt;
-            this.updatePosition();
-        };
-    }
-    static get onPointerMessageChangedEvent() { return PointerMessage._pointerMessageChangedEvent; }
-    static showMessage(message) {
-        PointerMessage.onPointerMessageChangedEvent.emit({
-            isVisible: true,
-            priority: message.priority,
-            message: message.briefMessage,
-            detailedMessage: message.detailedMessage,
-            relativePosition: message.relativePosition,
-            viewport: message.viewport,
-            pt: message.displayPoint,
-            messageDetails: message,
-        });
-    }
-    static updateMessage(displayPoint, relativePosition) {
-        PointerMessage._onPointerMessagePositionChangedEvent.emit({
-            pt: displayPoint,
-            relativePosition,
-        });
-    }
-    static hideMessage() {
-        PointerMessage.onPointerMessageChangedEvent.emit({
-            isVisible: false,
-            priority: OutputMessagePriority.None,
-            message: "",
-        });
-    }
-    render() {
-        if (!this.state.isVisible)
-            return null;
-        const className = classnames("uifw-pointer-message", this.props.className);
-        const severity = MessageManager.getSeverity(this.state.messageDetails);
-        return (React.createElement(Tooltip, { className: className, onSizeChanged: this._handleSizeChanged, position: this.state.position, style: this.props.style },
-            React.createElement("div", { className: "uifw-pointer-message-content" },
-                (severity !== MessageSeverity.None) &&
-                    React.createElement("span", { className: "uifw-pointer-message-icon" },
-                        React.createElement("i", { className: `icon ${MessageContainer.getIconClassName(severity, false)}` })),
-                React.createElement("span", { className: "uifw-pointer-message-text" },
-                    React.createElement(MessageSpan, { className: "uifw-pointer-message-brief", message: this.state.message }),
-                    this.state.detailedMessage &&
-                        React.createElement(MessageDiv, { className: "uifw-pointer-message-detailed", message: this.state.detailedMessage })))));
-    }
-    componentDidMount() {
-        PointerMessage.onPointerMessageChangedEvent.addListener(this._handlePointerMessageChangedEvent);
-        PointerMessage._onPointerMessagePositionChangedEvent.addListener(this._handlePointerMessagePositionChangedEvent);
-    }
-    componentWillUnmount() {
-        PointerMessage.onPointerMessageChangedEvent.removeListener(this._handlePointerMessageChangedEvent);
-        PointerMessage._onPointerMessagePositionChangedEvent.removeListener(this._handlePointerMessagePositionChangedEvent);
-    }
-    updatePosition() {
-        const adjustmentOffset = 20;
-        let offset;
-        switch (this._relativePosition) {
-            case RelativePosition.Top:
-                offset = { x: 0, y: -adjustmentOffset };
-                break;
-            case RelativePosition.TopRight:
-                offset = { x: adjustmentOffset, y: -adjustmentOffset };
-                break;
-            case RelativePosition.Right:
-                offset = { x: adjustmentOffset, y: 0 };
-                break;
-            case RelativePosition.BottomRight:
-                offset = { x: adjustmentOffset, y: adjustmentOffset };
-                break;
-            case RelativePosition.Bottom:
-                offset = { x: 0, y: adjustmentOffset };
-                break;
-            case RelativePosition.BottomLeft:
-                offset = { x: -adjustmentOffset, y: adjustmentOffset };
-                break;
-            case RelativePosition.Left:
-                offset = { x: -adjustmentOffset, y: 0 };
-                break;
-            case RelativePosition.TopLeft:
-                offset = { x: -adjustmentOffset, y: -adjustmentOffset };
-                break;
-        }
-        this.setState((prevState) => {
-            if (!this._viewport)
-                return null;
-            // istanbul ignore if
-            if (!this._position)
-                return null;
-            const containerBounds = Rectangle.create(this._viewport.getBoundingClientRect());
-            const relativeBounds = Rectangle.createFromSize(this._size).offset(this._position);
-            const viewportOffset = new Point().getOffsetTo(containerBounds.topLeft());
-            const adjustedPosition = offsetAndContainInContainer(relativeBounds, containerBounds.getSize(), offset);
-            const position = adjustedPosition.offset(viewportOffset);
-            // istanbul ignore else
-            if (position.equals(prevState.position))
-                return null;
-            // istanbul ignore next
-            return {
-                position,
-            };
-        });
-    }
-}
-PointerMessage._pointerMessageChangedEvent = new PointerMessageChangedEvent();
-PointerMessage._onPointerMessagePositionChangedEvent = new PointerMessagePositionChangedEvent();
+/*---------------------------------------------------------------------------------------------
+* 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 "./Pointer.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { OutputMessagePriority } from "@itwin/core-frontend";
+import { MessageSeverity, RelativePosition, UiEvent } from "@itwin/appui-abstract";
+import { Icon, MessageContainer, Point, Rectangle } from "@itwin/core-react";
+import { offsetAndContainInContainer, Tooltip } from "@itwin/appui-layout-react";
+import { MessageManager } from "./MessageManager";
+import { MessageDiv, MessageSpan } from "./MessageSpan";
+/** Pointer Message Changed Event emitted by the [[PointerMessage]] component
+ * @public
+ */
+export class PointerMessageChangedEvent extends UiEvent {
+}
+/** Pointer Message Position Changed Event emitted by the [[PointerMessage]] component
+ * @internal
+ */
+class PointerMessagePositionChangedEvent extends UiEvent {
+}
+/** Pointer message pops up near pointer when attempting an invalid interaction.
+ * @public
+ */
+class PointerMessage extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            message: "",
+            isVisible: false,
+            position: {
+                x: 0,
+                y: 0,
+            },
+        };
+        this._size = {
+            height: 0,
+            width: 0,
+        };
+        // istanbul ignore next
+        this._handleSizeChanged = (size) => {
+            this._size = size;
+            this.updatePosition();
+        };
+        this._handlePointerMessageChangedEvent = (args) => {
+            this._relativePosition = args.relativePosition;
+            this._viewport = args.viewport;
+            this._position = args.pt;
+            this.setState(() => ({
+                isVisible: args.isVisible,
+                message: args.message,
+                detailedMessage: args.detailedMessage,
+                messageDetails: args.messageDetails,
+            }));
+            this.updatePosition();
+        };
+        this._handlePointerMessagePositionChangedEvent = (args) => {
+            this._relativePosition = args.relativePosition;
+            this._position = args.pt;
+            this.updatePosition();
+        };
+    }
+    static get onPointerMessageChangedEvent() { return PointerMessage._pointerMessageChangedEvent; }
+    static showMessage(message) {
+        PointerMessage.onPointerMessageChangedEvent.emit({
+            isVisible: true,
+            priority: message.priority,
+            message: message.briefMessage,
+            detailedMessage: message.detailedMessage,
+            relativePosition: message.relativePosition,
+            viewport: message.viewport,
+            pt: message.displayPoint,
+            messageDetails: message,
+        });
+    }
+    static updateMessage(displayPoint, relativePosition) {
+        PointerMessage._onPointerMessagePositionChangedEvent.emit({
+            pt: displayPoint,
+            relativePosition,
+        });
+    }
+    static hideMessage() {
+        PointerMessage.onPointerMessageChangedEvent.emit({
+            isVisible: false,
+            priority: OutputMessagePriority.None,
+            message: "",
+        });
+    }
+    render() {
+        if (!this.state.isVisible)
+            return null;
+        const className = classnames("uifw-pointer-message", this.props.className);
+        const severity = MessageManager.getSeverity(this.state.messageDetails);
+        return (React.createElement(Tooltip, { className: className, onSizeChanged: this._handleSizeChanged, position: this.state.position, style: this.props.style },
+            React.createElement("div", { className: "uifw-pointer-message-content" },
+                (severity !== MessageSeverity.None) &&
+                    React.createElement("span", { className: "uifw-pointer-message-icon" },
+                        React.createElement(Icon, { className: "icon", iconSpec: `${MessageContainer.getIcon(severity, false)}` })),
+                React.createElement("span", { className: "uifw-pointer-message-text" },
+                    React.createElement(MessageSpan, { className: "uifw-pointer-message-brief", message: this.state.message }),
+                    this.state.detailedMessage &&
+                        React.createElement(MessageDiv, { className: "uifw-pointer-message-detailed", message: this.state.detailedMessage })))));
+    }
+    componentDidMount() {
+        PointerMessage.onPointerMessageChangedEvent.addListener(this._handlePointerMessageChangedEvent);
+        PointerMessage._onPointerMessagePositionChangedEvent.addListener(this._handlePointerMessagePositionChangedEvent);
+    }
+    componentWillUnmount() {
+        PointerMessage.onPointerMessageChangedEvent.removeListener(this._handlePointerMessageChangedEvent);
+        PointerMessage._onPointerMessagePositionChangedEvent.removeListener(this._handlePointerMessagePositionChangedEvent);
+    }
+    updatePosition() {
+        const adjustmentOffset = 20;
+        let offset;
+        switch (this._relativePosition) {
+            case RelativePosition.Top:
+                offset = { x: 0, y: -adjustmentOffset };
+                break;
+            case RelativePosition.TopRight:
+                offset = { x: adjustmentOffset, y: -adjustmentOffset };
+                break;
+            case RelativePosition.Right:
+                offset = { x: adjustmentOffset, y: 0 };
+                break;
+            case RelativePosition.BottomRight:
+                offset = { x: adjustmentOffset, y: adjustmentOffset };
+                break;
+            case RelativePosition.Bottom:
+                offset = { x: 0, y: adjustmentOffset };
+                break;
+            case RelativePosition.BottomLeft:
+                offset = { x: -adjustmentOffset, y: adjustmentOffset };
+                break;
+            case RelativePosition.Left:
+                offset = { x: -adjustmentOffset, y: 0 };
+                break;
+            case RelativePosition.TopLeft:
+                offset = { x: -adjustmentOffset, y: -adjustmentOffset };
+                break;
+        }
+        this.setState((prevState) => {
+            if (!this._viewport)
+                return null;
+            // istanbul ignore if
+            if (!this._position)
+                return null;
+            const containerBounds = Rectangle.create(this._viewport.getBoundingClientRect());
+            const relativeBounds = Rectangle.createFromSize(this._size).offset(this._position);
+            const viewportOffset = new Point().getOffsetTo(containerBounds.topLeft());
+            const adjustedPosition = offsetAndContainInContainer(relativeBounds, containerBounds.getSize(), offset);
+            const position = adjustedPosition.offset(viewportOffset);
+            // istanbul ignore else
+            if (position.equals(prevState.position))
+                return null;
+            // istanbul ignore next
+            return {
+                position,
+            };
+        });
+    }
+}
+PointerMessage._pointerMessageChangedEvent = new PointerMessageChangedEvent();
+PointerMessage._onPointerMessagePositionChangedEvent = new PointerMessagePositionChangedEvent();
+export { PointerMessage };
 //# sourceMappingURL=Pointer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pointer.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/Pointer.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 \"./Pointer.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { XAndY } from \"@itwin/core-geometry\";\r\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\r\nimport { MessageSeverity, PointProps, RelativePosition, UiEvent } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, MessageContainer, Point, Rectangle, SizeProps } from \"@itwin/core-react\";\r\nimport { offsetAndContainInContainer, Tooltip } from \"@itwin/appui-layout-react\";\r\nimport { MessageManager } from \"./MessageManager\";\r\nimport { MessageDiv, MessageSpan } from \"./MessageSpan\";\r\nimport { NotifyMessageDetailsType, NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\n\r\n// cSpell:ignore noicon\r\n\r\n/** Properties of [[PointerMessage]] component.\r\n * @public\r\n */\r\nexport interface PointerMessageProps extends CommonProps {\r\n  /** Text to display */\r\n  message?: string;\r\n}\r\n\r\n/** [[PointerMessage]] state.\r\n * @internal\r\n */\r\ninterface PointerMessageState {\r\n  isVisible: boolean;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  position: PointProps;\r\n  messageDetails?: NotifyMessageDetailsType;\r\n}\r\n\r\n/** [[PointerMessageChangedEvent]] arguments.\r\n * @public\r\n */\r\nexport interface PointerMessageChangedEventArgs {\r\n  isVisible: boolean;\r\n  priority: OutputMessagePriority;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  relativePosition?: RelativePosition;\r\n  viewport?: HTMLElement;\r\n  pt?: XAndY;\r\n  messageDetails?: NotifyMessageDetailsType;\r\n}\r\n\r\n/** Pointer Message Changed Event emitted by the [[PointerMessage]] component\r\n * @public\r\n */\r\nexport class PointerMessageChangedEvent extends UiEvent<PointerMessageChangedEventArgs> { }\r\n\r\n/** [[PointerMessagePositionChangedEvent]] arguments.\r\n * @internal\r\n */\r\ninterface PointerMessagePositionChangedEventArgs {\r\n  pt: XAndY;\r\n  relativePosition: RelativePosition;\r\n}\r\n\r\n/** Pointer Message Position Changed Event emitted by the [[PointerMessage]] component\r\n * @internal\r\n */\r\nclass PointerMessagePositionChangedEvent extends UiEvent<PointerMessagePositionChangedEventArgs> { }\r\n\r\n/** Pointer message pops up near pointer when attempting an invalid interaction.\r\n * @public\r\n */\r\nexport class PointerMessage extends React.Component<PointerMessageProps, PointerMessageState> {\r\n  private static _pointerMessageChangedEvent: PointerMessageChangedEvent = new PointerMessageChangedEvent();\r\n  private static readonly _onPointerMessagePositionChangedEvent = new PointerMessagePositionChangedEvent();\r\n\r\n  public static get onPointerMessageChangedEvent(): PointerMessageChangedEvent { return PointerMessage._pointerMessageChangedEvent; }\r\n\r\n  public static showMessage(message: NotifyMessageDetailsType): void {\r\n    PointerMessage.onPointerMessageChangedEvent.emit({\r\n      isVisible: true,\r\n      priority: message.priority,\r\n      message: message.briefMessage,\r\n      detailedMessage: message.detailedMessage,\r\n      relativePosition: message.relativePosition,\r\n      viewport: message.viewport,\r\n      pt: message.displayPoint,\r\n      messageDetails: message,\r\n    });\r\n  }\r\n\r\n  public static updateMessage(displayPoint: XAndY, relativePosition: RelativePosition): void {\r\n    PointerMessage._onPointerMessagePositionChangedEvent.emit({\r\n      pt: displayPoint,\r\n      relativePosition,\r\n    });\r\n  }\r\n\r\n  public static hideMessage(): void {\r\n    PointerMessage.onPointerMessageChangedEvent.emit({\r\n      isVisible: false,\r\n      priority: OutputMessagePriority.None,\r\n      message: \"\",\r\n    });\r\n  }\r\n\r\n  public override readonly state: Readonly<PointerMessageState> = {\r\n    message: \"\",\r\n    isVisible: false,\r\n    position: {\r\n      x: 0,\r\n      y: 0,\r\n    },\r\n  };\r\n\r\n  private _relativePosition?: RelativePosition;\r\n  private _viewport?: HTMLElement;\r\n  private _position?: XAndY;\r\n  private _size: SizeProps = {\r\n    height: 0,\r\n    width: 0,\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    if (!this.state.isVisible)\r\n      return null;\r\n\r\n    const className = classnames(\r\n      \"uifw-pointer-message\",\r\n      this.props.className);\r\n    const severity = MessageManager.getSeverity(this.state.messageDetails!);\r\n\r\n    return (\r\n      <Tooltip\r\n        className={className}\r\n        onSizeChanged={this._handleSizeChanged}\r\n        position={this.state.position}\r\n        style={this.props.style}\r\n      >\r\n        <div className=\"uifw-pointer-message-content\">\r\n          {(severity !== MessageSeverity.None) &&\r\n            <span className=\"uifw-pointer-message-icon\"><i className={`icon ${MessageContainer.getIconClassName(severity, false)}`} /></span>\r\n          }\r\n          <span className=\"uifw-pointer-message-text\">\r\n            <MessageSpan className=\"uifw-pointer-message-brief\" message={this.state.message} />\r\n            {this.state.detailedMessage &&\r\n              <MessageDiv className=\"uifw-pointer-message-detailed\" message={this.state.detailedMessage} />\r\n            }\r\n          </span>\r\n        </div>\r\n      </Tooltip>\r\n    );\r\n  }\r\n\r\n  public override componentDidMount(): void {\r\n    PointerMessage.onPointerMessageChangedEvent.addListener(this._handlePointerMessageChangedEvent);\r\n    PointerMessage._onPointerMessagePositionChangedEvent.addListener(this._handlePointerMessagePositionChangedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount(): void {\r\n    PointerMessage.onPointerMessageChangedEvent.removeListener(this._handlePointerMessageChangedEvent);\r\n    PointerMessage._onPointerMessagePositionChangedEvent.removeListener(this._handlePointerMessagePositionChangedEvent);\r\n  }\r\n\r\n  // istanbul ignore next\r\n  private _handleSizeChanged = (size: SizeProps) => {\r\n    this._size = size;\r\n    this.updatePosition();\r\n  };\r\n\r\n  private _handlePointerMessageChangedEvent = (args: PointerMessageChangedEventArgs) => {\r\n    this._relativePosition = args.relativePosition;\r\n    this._viewport = args.viewport;\r\n    this._position = args.pt;\r\n    this.setState(() => ({\r\n      isVisible: args.isVisible,\r\n      message: args.message,\r\n      detailedMessage: args.detailedMessage,\r\n      messageDetails: args.messageDetails,\r\n    }));\r\n    this.updatePosition();\r\n  };\r\n\r\n  private _handlePointerMessagePositionChangedEvent = (args: PointerMessagePositionChangedEventArgs) => {\r\n    this._relativePosition = args.relativePosition;\r\n    this._position = args.pt;\r\n    this.updatePosition();\r\n  };\r\n\r\n  private updatePosition() {\r\n    const adjustmentOffset = 20;\r\n    let offset: PointProps | undefined;\r\n    switch (this._relativePosition) {\r\n      case RelativePosition.Top:\r\n        offset = { x: 0, y: -adjustmentOffset };\r\n        break;\r\n      case RelativePosition.TopRight:\r\n        offset = { x: adjustmentOffset, y: -adjustmentOffset };\r\n        break;\r\n      case RelativePosition.Right:\r\n        offset = { x: adjustmentOffset, y: 0 };\r\n        break;\r\n      case RelativePosition.BottomRight:\r\n        offset = { x: adjustmentOffset, y: adjustmentOffset };\r\n        break;\r\n      case RelativePosition.Bottom:\r\n        offset = { x: 0, y: adjustmentOffset };\r\n        break;\r\n      case RelativePosition.BottomLeft:\r\n        offset = { x: -adjustmentOffset, y: adjustmentOffset };\r\n        break;\r\n      case RelativePosition.Left:\r\n        offset = { x: -adjustmentOffset, y: 0 };\r\n        break;\r\n      case RelativePosition.TopLeft:\r\n        offset = { x: -adjustmentOffset, y: -adjustmentOffset };\r\n        break;\r\n    }\r\n\r\n    this.setState((prevState) => {\r\n      if (!this._viewport)\r\n        return null;\r\n      // istanbul ignore if\r\n      if (!this._position)\r\n        return null;\r\n\r\n      const containerBounds = Rectangle.create(this._viewport.getBoundingClientRect());\r\n      const relativeBounds = Rectangle.createFromSize(this._size).offset(this._position);\r\n      const viewportOffset = new Point().getOffsetTo(containerBounds.topLeft());\r\n\r\n      const adjustedPosition = offsetAndContainInContainer(relativeBounds, containerBounds.getSize(), offset);\r\n      const position = adjustedPosition.offset(viewportOffset);\r\n\r\n      // istanbul ignore else\r\n      if (position.equals(prevState.position))\r\n        return null;\r\n\r\n      // istanbul ignore next\r\n      return {\r\n        position,\r\n      };\r\n    });\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Pointer.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/Pointer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAc,gBAAgB,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC/F,OAAO,EAAe,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,EAAa,MAAM,mBAAmB,CAAC;AACrG,OAAO,EAAE,2BAA2B,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAsCxD;;GAEG;AACH,MAAM,OAAO,0BAA2B,SAAQ,OAAuC;CAAI;AAU3F;;GAEG;AACH,MAAM,kCAAmC,SAAQ,OAA+C;CAAI;AAEpG;;GAEG;AACH,MAAa,cAAe,SAAQ,KAAK,CAAC,SAAmD;IAA7F;;QAkC2B,UAAK,GAAkC;YAC9D,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE;gBACR,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,CAAC;aACL;SACF,CAAC;QAKM,UAAK,GAAc;YACzB,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;SACT,CAAC;QA2CF,uBAAuB;QACf,uBAAkB,GAAG,CAAC,IAAe,EAAE,EAAE;YAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,sCAAiC,GAAG,CAAC,IAAoC,EAAE,EAAE;YACnF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,cAAc,EAAE,IAAI,CAAC,cAAc;aACpC,CAAC,CAAC,CAAC;YACJ,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,8CAAyC,GAAG,CAAC,IAA4C,EAAE,EAAE;YACnG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;IAwDJ,CAAC;IAvKQ,MAAM,KAAK,4BAA4B,KAAiC,OAAO,cAAc,CAAC,2BAA2B,CAAC,CAAC,CAAC;IAE5H,MAAM,CAAC,WAAW,CAAC,OAAiC;QACzD,cAAc,CAAC,4BAA4B,CAAC,IAAI,CAAC;YAC/C,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,OAAO,EAAE,OAAO,CAAC,YAAY;YAC7B,eAAe,EAAE,OAAO,CAAC,eAAe;YACxC,gBAAgB,EAAE,OAAO,CAAC,gBAAgB;YAC1C,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,EAAE,EAAE,OAAO,CAAC,YAAY;YACxB,cAAc,EAAE,OAAO;SACxB,CAAC,CAAC;IACL,CAAC;IAEM,MAAM,CAAC,aAAa,CAAC,YAAmB,EAAE,gBAAkC;QACjF,cAAc,CAAC,qCAAqC,CAAC,IAAI,CAAC;YACxD,EAAE,EAAE,YAAY;YAChB,gBAAgB;SACjB,CAAC,CAAC;IACL,CAAC;IAEM,MAAM,CAAC,WAAW;QACvB,cAAc,CAAC,4BAA4B,CAAC,IAAI,CAAC;YAC/C,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,qBAAqB,CAAC,IAAI;YACpC,OAAO,EAAE,EAAE;SACZ,CAAC,CAAC;IACL,CAAC;IAmBe,MAAM;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;YACvB,OAAO,IAAI,CAAC;QAEd,MAAM,SAAS,GAAG,UAAU,CAC1B,sBAAsB,EACtB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACxB,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,cAAe,CAAC,CAAC;QAExE,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,IAAI,CAAC,kBAAkB,EACtC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEvB,6BAAK,SAAS,EAAC,8BAA8B;gBAC1C,CAAC,QAAQ,KAAK,eAAe,CAAC,IAAI,CAAC;oBAClC,8BAAM,SAAS,EAAC,2BAA2B;wBAAC,oBAAC,IAAI,IAAC,SAAS,EAAC,MAAM,EAAC,QAAQ,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,GAAI,CAAO;gBAExI,8BAAM,SAAS,EAAC,2BAA2B;oBACzC,oBAAC,WAAW,IAAC,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI;oBAClF,IAAI,CAAC,KAAK,CAAC,eAAe;wBACzB,oBAAC,UAAU,IAAC,SAAS,EAAC,+BAA+B,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,GAAI,CAE1F,CACH,CACE,CACX,CAAC;IACJ,CAAC;IAEe,iBAAiB;QAC/B,cAAc,CAAC,4BAA4B,CAAC,WAAW,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;QAChG,cAAc,CAAC,qCAAqC,CAAC,WAAW,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;IACnH,CAAC;IAEe,oBAAoB;QAClC,cAAc,CAAC,4BAA4B,CAAC,cAAc,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;QACnG,cAAc,CAAC,qCAAqC,CAAC,cAAc,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;IACtH,CAAC;IA2BO,cAAc;QACpB,MAAM,gBAAgB,GAAG,EAAE,CAAC;QAC5B,IAAI,MAA8B,CAAC;QACnC,QAAQ,IAAI,CAAC,iBAAiB,EAAE;YAC9B,KAAK,gBAAgB,CAAC,GAAG;gBACvB,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC;gBACxC,MAAM;YACR,KAAK,gBAAgB,CAAC,QAAQ;gBAC5B,MAAM,GAAG,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC;gBACvD,MAAM;YACR,KAAK,gBAAgB,CAAC,KAAK;gBACzB,MAAM,GAAG,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBACvC,MAAM;YACR,KAAK,gBAAgB,CAAC,WAAW;gBAC/B,MAAM,GAAG,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC;gBACtD,MAAM;YACR,KAAK,gBAAgB,CAAC,MAAM;gBAC1B,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC;gBACvC,MAAM;YACR,KAAK,gBAAgB,CAAC,UAAU;gBAC9B,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,gBAAgB,EAAE,CAAC;gBACvD,MAAM;YACR,KAAK,gBAAgB,CAAC,IAAI;gBACxB,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBACxC,MAAM;YACR,KAAK,gBAAgB,CAAC,OAAO;gBAC3B,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC;gBACxD,MAAM;SACT;QAED,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,IAAI,CAAC,SAAS;gBACjB,OAAO,IAAI,CAAC;YACd,qBAAqB;YACrB,IAAI,CAAC,IAAI,CAAC,SAAS;gBACjB,OAAO,IAAI,CAAC;YAEd,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,CAAC;YACjF,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACnF,MAAM,cAAc,GAAG,IAAI,KAAK,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC,CAAC;YAE1E,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,cAAc,EAAE,eAAe,CAAC,OAAO,EAAE,EAAE,MAAM,CAAC,CAAC;YACxG,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;YAEzD,uBAAuB;YACvB,IAAI,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;gBACrC,OAAO,IAAI,CAAC;YAEd,uBAAuB;YACvB,OAAO;gBACL,QAAQ;aACT,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;;AAzKc,0CAA2B,GAA+B,IAAI,0BAA0B,EAAE,AAA/D,CAAgE;AAClF,oDAAqC,GAAG,IAAI,kCAAkC,EAAE,AAA3C,CAA4C;SAF9F,cAAc","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 \"./Pointer.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { XAndY } from \"@itwin/core-geometry\";\r\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\r\nimport { MessageSeverity, PointProps, RelativePosition, UiEvent } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon, MessageContainer, Point, Rectangle, SizeProps } from \"@itwin/core-react\";\r\nimport { offsetAndContainInContainer, Tooltip } from \"@itwin/appui-layout-react\";\r\nimport { MessageManager } from \"./MessageManager\";\r\nimport { MessageDiv, MessageSpan } from \"./MessageSpan\";\r\nimport { NotifyMessageDetailsType, NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\n\r\n// cSpell:ignore noicon\r\n\r\n/** Properties of [[PointerMessage]] component.\r\n * @public\r\n */\r\nexport interface PointerMessageProps extends CommonProps {\r\n  /** Text to display */\r\n  message?: string;\r\n}\r\n\r\n/** [[PointerMessage]] state.\r\n * @internal\r\n */\r\ninterface PointerMessageState {\r\n  isVisible: boolean;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  position: PointProps;\r\n  messageDetails?: NotifyMessageDetailsType;\r\n}\r\n\r\n/** [[PointerMessageChangedEvent]] arguments.\r\n * @public\r\n */\r\nexport interface PointerMessageChangedEventArgs {\r\n  isVisible: boolean;\r\n  priority: OutputMessagePriority;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  relativePosition?: RelativePosition;\r\n  viewport?: HTMLElement;\r\n  pt?: XAndY;\r\n  messageDetails?: NotifyMessageDetailsType;\r\n}\r\n\r\n/** Pointer Message Changed Event emitted by the [[PointerMessage]] component\r\n * @public\r\n */\r\nexport class PointerMessageChangedEvent extends UiEvent<PointerMessageChangedEventArgs> { }\r\n\r\n/** [[PointerMessagePositionChangedEvent]] arguments.\r\n * @internal\r\n */\r\ninterface PointerMessagePositionChangedEventArgs {\r\n  pt: XAndY;\r\n  relativePosition: RelativePosition;\r\n}\r\n\r\n/** Pointer Message Position Changed Event emitted by the [[PointerMessage]] component\r\n * @internal\r\n */\r\nclass PointerMessagePositionChangedEvent extends UiEvent<PointerMessagePositionChangedEventArgs> { }\r\n\r\n/** Pointer message pops up near pointer when attempting an invalid interaction.\r\n * @public\r\n */\r\nexport class PointerMessage extends React.Component<PointerMessageProps, PointerMessageState> {\r\n  private static _pointerMessageChangedEvent: PointerMessageChangedEvent = new PointerMessageChangedEvent();\r\n  private static readonly _onPointerMessagePositionChangedEvent = new PointerMessagePositionChangedEvent();\r\n\r\n  public static get onPointerMessageChangedEvent(): PointerMessageChangedEvent { return PointerMessage._pointerMessageChangedEvent; }\r\n\r\n  public static showMessage(message: NotifyMessageDetailsType): void {\r\n    PointerMessage.onPointerMessageChangedEvent.emit({\r\n      isVisible: true,\r\n      priority: message.priority,\r\n      message: message.briefMessage,\r\n      detailedMessage: message.detailedMessage,\r\n      relativePosition: message.relativePosition,\r\n      viewport: message.viewport,\r\n      pt: message.displayPoint,\r\n      messageDetails: message,\r\n    });\r\n  }\r\n\r\n  public static updateMessage(displayPoint: XAndY, relativePosition: RelativePosition): void {\r\n    PointerMessage._onPointerMessagePositionChangedEvent.emit({\r\n      pt: displayPoint,\r\n      relativePosition,\r\n    });\r\n  }\r\n\r\n  public static hideMessage(): void {\r\n    PointerMessage.onPointerMessageChangedEvent.emit({\r\n      isVisible: false,\r\n      priority: OutputMessagePriority.None,\r\n      message: \"\",\r\n    });\r\n  }\r\n\r\n  public override readonly state: Readonly<PointerMessageState> = {\r\n    message: \"\",\r\n    isVisible: false,\r\n    position: {\r\n      x: 0,\r\n      y: 0,\r\n    },\r\n  };\r\n\r\n  private _relativePosition?: RelativePosition;\r\n  private _viewport?: HTMLElement;\r\n  private _position?: XAndY;\r\n  private _size: SizeProps = {\r\n    height: 0,\r\n    width: 0,\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    if (!this.state.isVisible)\r\n      return null;\r\n\r\n    const className = classnames(\r\n      \"uifw-pointer-message\",\r\n      this.props.className);\r\n    const severity = MessageManager.getSeverity(this.state.messageDetails!);\r\n\r\n    return (\r\n      <Tooltip\r\n        className={className}\r\n        onSizeChanged={this._handleSizeChanged}\r\n        position={this.state.position}\r\n        style={this.props.style}\r\n      >\r\n        <div className=\"uifw-pointer-message-content\">\r\n          {(severity !== MessageSeverity.None) &&\r\n            <span className=\"uifw-pointer-message-icon\"><Icon className=\"icon\" iconSpec={`${MessageContainer.getIcon(severity, false)}`} /></span>\r\n          }\r\n          <span className=\"uifw-pointer-message-text\">\r\n            <MessageSpan className=\"uifw-pointer-message-brief\" message={this.state.message} />\r\n            {this.state.detailedMessage &&\r\n              <MessageDiv className=\"uifw-pointer-message-detailed\" message={this.state.detailedMessage} />\r\n            }\r\n          </span>\r\n        </div>\r\n      </Tooltip>\r\n    );\r\n  }\r\n\r\n  public override componentDidMount(): void {\r\n    PointerMessage.onPointerMessageChangedEvent.addListener(this._handlePointerMessageChangedEvent);\r\n    PointerMessage._onPointerMessagePositionChangedEvent.addListener(this._handlePointerMessagePositionChangedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount(): void {\r\n    PointerMessage.onPointerMessageChangedEvent.removeListener(this._handlePointerMessageChangedEvent);\r\n    PointerMessage._onPointerMessagePositionChangedEvent.removeListener(this._handlePointerMessagePositionChangedEvent);\r\n  }\r\n\r\n  // istanbul ignore next\r\n  private _handleSizeChanged = (size: SizeProps) => {\r\n    this._size = size;\r\n    this.updatePosition();\r\n  };\r\n\r\n  private _handlePointerMessageChangedEvent = (args: PointerMessageChangedEventArgs) => {\r\n    this._relativePosition = args.relativePosition;\r\n    this._viewport = args.viewport;\r\n    this._position = args.pt;\r\n    this.setState(() => ({\r\n      isVisible: args.isVisible,\r\n      message: args.message,\r\n      detailedMessage: args.detailedMessage,\r\n      messageDetails: args.messageDetails,\r\n    }));\r\n    this.updatePosition();\r\n  };\r\n\r\n  private _handlePointerMessagePositionChangedEvent = (args: PointerMessagePositionChangedEventArgs) => {\r\n    this._relativePosition = args.relativePosition;\r\n    this._position = args.pt;\r\n    this.updatePosition();\r\n  };\r\n\r\n  private updatePosition() {\r\n    const adjustmentOffset = 20;\r\n    let offset: PointProps | undefined;\r\n    switch (this._relativePosition) {\r\n      case RelativePosition.Top:\r\n        offset = { x: 0, y: -adjustmentOffset };\r\n        break;\r\n      case RelativePosition.TopRight:\r\n        offset = { x: adjustmentOffset, y: -adjustmentOffset };\r\n        break;\r\n      case RelativePosition.Right:\r\n        offset = { x: adjustmentOffset, y: 0 };\r\n        break;\r\n      case RelativePosition.BottomRight:\r\n        offset = { x: adjustmentOffset, y: adjustmentOffset };\r\n        break;\r\n      case RelativePosition.Bottom:\r\n        offset = { x: 0, y: adjustmentOffset };\r\n        break;\r\n      case RelativePosition.BottomLeft:\r\n        offset = { x: -adjustmentOffset, y: adjustmentOffset };\r\n        break;\r\n      case RelativePosition.Left:\r\n        offset = { x: -adjustmentOffset, y: 0 };\r\n        break;\r\n      case RelativePosition.TopLeft:\r\n        offset = { x: -adjustmentOffset, y: -adjustmentOffset };\r\n        break;\r\n    }\r\n\r\n    this.setState((prevState) => {\r\n      if (!this._viewport)\r\n        return null;\r\n      // istanbul ignore if\r\n      if (!this._position)\r\n        return null;\r\n\r\n      const containerBounds = Rectangle.create(this._viewport.getBoundingClientRect());\r\n      const relativeBounds = Rectangle.createFromSize(this._size).offset(this._position);\r\n      const viewportOffset = new Point().getOffsetTo(containerBounds.topLeft());\r\n\r\n      const adjustedPosition = offsetAndContainInContainer(relativeBounds, containerBounds.getSize(), offset);\r\n      const position = adjustedPosition.offset(viewportOffset);\r\n\r\n      // istanbul ignore else\r\n      if (position.equals(prevState.position))\r\n        return null;\r\n\r\n      // istanbul ignore next\r\n      return {\r\n        position,\r\n      };\r\n    });\r\n  }\r\n}\r\n"]}

package/lib/esm/appui-react/messages/Pointer.scss

@@ -14,28 +14,28 @@
     width: $uifw-popup-border-width;
   }
 
-  background-color: rgba($buic-background-2-rgb, $uifw-popup-opacity);
+  background-color: hsl(var(--iui-color-background-hsl) / $uifw-popup-opacity);
 
   .uifw-pointer-message-content {
     display: flex;
     flex-direction: row;
     align-items: center;
 
-    >.uifw-pointer-message-icon {
+    > .uifw-pointer-message-icon {
       padding-left: 3px;
       padding-right: 3px;
     }
 
-    >.uifw-pointer-message-text {
-      color: $buic-foreground-body;
+    > .uifw-pointer-message-text {
+      color: var(--iui-color-text);
       padding-left: 3px;
       padding-right: 3px;
 
-      >.uifw-pointer-message-brief {
+      > .uifw-pointer-message-brief {
         @include uicore-text(body);
       }
 
-      >.uifw-pointer-message-detailed {
+      > .uifw-pointer-message-detailed {
         @include uicore-text(small);
       }
     }

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

@@ -1,63 +1,63 @@
-/** @packageDocumentation
- * @module Notification
- */
-import { BeDuration } from "@itwin/core-bentley";
-import { Point2d, XAndY } from "@itwin/core-geometry";
-import { NotifyMessageDetails, OutputMessageAlert, OutputMessagePriority, OutputMessageType } from "@itwin/core-frontend";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { MessageType } from "@itwin/core-react";
-/** Types for message in [[MessageManager]]
- * @public
- */
-export declare type NotifyMessageType = MessageType;
-/** Types for NotifyMessageDetails.
- * @public
- */
-export declare type NotifyMessageDetailsType = NotifyMessageDetails | ReactNotifyMessageDetails;
-/** Describes a message to be displayed to the user and adds support for React components in messages.
- * @public
- */
-export declare class ReactNotifyMessageDetails {
-    priority: OutputMessagePriority;
-    briefMessage: NotifyMessageType;
-    detailedMessage?: MessageType | undefined;
-    msgType: OutputMessageType;
-    openAlert: OutputMessageAlert;
-    private _notifyMessageDetails;
-    /** @internal */
-    get messageDetails(): NotifyMessageDetails;
-    /** Amount of time a Toast message is displayed */
-    get displayTime(): BeDuration;
-    set displayTime(duration: BeDuration);
-    /** Anchor viewport for a Pointer message */
-    get viewport(): HTMLElement | undefined;
-    /** Point for a Pointer message */
-    get displayPoint(): Point2d | undefined;
-    /** Relative position for a Pointer message */
-    get relativePosition(): RelativePosition;
-    /** Anchor input field for an Input Field message */
-    get inputField(): HTMLElement | undefined;
-    /** Constructor
-     *  @param priority           The priority this message should be accorded by the NotificationManager.
-     *  @param briefMessage       A short message that conveys the simplest explanation of the issue.
-     *  @param detailedMessage    A comprehensive message that explains the issue in detail and potentially offers a solution.
-     *  @param msgType            The type of message.
-     *  @param openAlert          Whether an alert box should be displayed or not, and if so what kind.
-     */
-    constructor(priority: OutputMessagePriority, briefMessage: NotifyMessageType, detailedMessage?: MessageType | undefined, msgType?: OutputMessageType, openAlert?: OutputMessageAlert);
-    /** Set OutputMessageType.Pointer message details.
-     * @param viewport            Viewport over which to display the Pointer type message.
-     * @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.
-     */
-    setPointerTypeDetails(viewport: HTMLElement, displayPoint: XAndY, relativePosition?: RelativePosition): void;
-    /** Set OutputMessageType.InputField message details.
-     * @param inputField          Input field that message pertains. The message will be shown just below this input field element.
-     */
-    setInputFieldTypeDetails(inputField: HTMLElement): void;
-}
-/** ReactNotifyMessageDetails type guard.
- * @internal
- */
-export declare const isReactNotifyMessageDetails: (details: any) => details is ReactNotifyMessageDetails;
+/** @packageDocumentation
+ * @module Notification
+ */
+import { BeDuration } from "@itwin/core-bentley";
+import { Point2d, XAndY } from "@itwin/core-geometry";
+import { NotifyMessageDetails, OutputMessageAlert, OutputMessagePriority, OutputMessageType } from "@itwin/core-frontend";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { MessageType } from "@itwin/core-react";
+/** Types for message in [[MessageManager]]
+ * @public
+ */
+export type NotifyMessageType = MessageType;
+/** Types for NotifyMessageDetails.
+ * @public
+ */
+export type NotifyMessageDetailsType = NotifyMessageDetails | ReactNotifyMessageDetails;
+/** Describes a message to be displayed to the user and adds support for React components in messages.
+ * @public
+ */
+export declare class ReactNotifyMessageDetails {
+    priority: OutputMessagePriority;
+    briefMessage: NotifyMessageType;
+    detailedMessage?: MessageType | undefined;
+    msgType: OutputMessageType;
+    openAlert: OutputMessageAlert;
+    private _notifyMessageDetails;
+    /** @internal */
+    get messageDetails(): NotifyMessageDetails;
+    /** Amount of time a Toast message is displayed */
+    get displayTime(): BeDuration;
+    set displayTime(duration: BeDuration);
+    /** Anchor viewport for a Pointer message */
+    get viewport(): HTMLElement | undefined;
+    /** Point for a Pointer message */
+    get displayPoint(): Point2d | undefined;
+    /** Relative position for a Pointer message */
+    get relativePosition(): RelativePosition;
+    /** Anchor input field for an Input Field message */
+    get inputField(): HTMLElement | undefined;
+    /** Constructor
+     *  @param priority           The priority this message should be accorded by the NotificationManager.
+     *  @param briefMessage       A short message that conveys the simplest explanation of the issue.
+     *  @param detailedMessage    A comprehensive message that explains the issue in detail and potentially offers a solution.
+     *  @param msgType            The type of message.
+     *  @param openAlert          Whether an alert box should be displayed or not, and if so what kind.
+     */
+    constructor(priority: OutputMessagePriority, briefMessage: NotifyMessageType, detailedMessage?: MessageType | undefined, msgType?: OutputMessageType, openAlert?: OutputMessageAlert);
+    /** Set OutputMessageType.Pointer message details.
+     * @param viewport            Viewport over which to display the Pointer type message.
+     * @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.
+     */
+    setPointerTypeDetails(viewport: HTMLElement, displayPoint: XAndY, relativePosition?: RelativePosition): void;
+    /** Set OutputMessageType.InputField message details.
+     * @param inputField          Input field that message pertains. The message will be shown just below this input field element.
+     */
+    setInputFieldTypeDetails(inputField: HTMLElement): void;
+}
+/** ReactNotifyMessageDetails type guard.
+ * @internal
+ */
+export declare const isReactNotifyMessageDetails: (details: any) => details is ReactNotifyMessageDetails;
 //# sourceMappingURL=ReactNotifyMessageDetails.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReactNotifyMessageDetails.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/ReactNotifyMessageDetails.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1H,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,oBAAY,iBAAiB,GAAG,WAAW,CAAC;AAE5C;;GAEG;AACH,oBAAY,wBAAwB,GAAG,oBAAoB,GAAG,yBAAyB,CAAC;AAExF;;GAEG;AACH,qBAAa,yBAAyB;IA2B3B,QAAQ,EAAE,qBAAqB;IAC/B,YAAY,EAAE,iBAAiB;IAC/B,eAAe,CAAC;IAChB,OAAO;IACP,SAAS;IA9BlB,OAAO,CAAC,qBAAqB,CAAuB;IAEpD,gBAAgB;IAChB,IAAW,cAAc,IAAI,oBAAoB,CAAuC;IAExF,kDAAkD;IAClD,IAAW,WAAW,IAAI,UAAU,CAAmD;IACvF,IAAW,WAAW,CAAC,QAAQ,EAAE,UAAU,EAAwD;IAEnG,4CAA4C;IAC5C,IAAW,QAAQ,IAAI,WAAW,GAAG,SAAS,CAAgD;IAC9F,kCAAkC;IAClC,IAAW,YAAY,IAAI,OAAO,GAAG,SAAS,CAAoD;IAClG,8CAA8C;IAC9C,IAAW,gBAAgB,IAAI,gBAAgB,CAAwD;IACvG,oDAAoD;IACpD,IAAW,UAAU,IAAI,WAAW,GAAG,SAAS,CAAkD;IAElG;;;;;;OAMG;gBAEM,QAAQ,EAAE,qBAAqB,EAC/B,YAAY,EAAE,iBAAiB,EAC/B,eAAe,CAAC,yBAAmB,EACnC,OAAO,oBAA0B,EACjC,SAAS,qBAA0B;IAK5C;;;;OAIG;IACI,qBAAqB,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,mBAA4B;IAIrH;;OAEG;IACI,wBAAwB,CAAC,UAAU,EAAE,WAAW;CAGxD;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,YAAa,GAAG,yCAEvD,CAAC"}
+{"version":3,"file":"ReactNotifyMessageDetails.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/messages/ReactNotifyMessageDetails.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1H,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,GAAG,yBAAyB,CAAC;AAExF;;GAEG;AACH,qBAAa,yBAAyB;IA2B3B,QAAQ,EAAE,qBAAqB;IAC/B,YAAY,EAAE,iBAAiB;IAC/B,eAAe,CAAC;IAChB,OAAO;IACP,SAAS;IA9BlB,OAAO,CAAC,qBAAqB,CAAuB;IAEpD,gBAAgB;IAChB,IAAW,cAAc,IAAI,oBAAoB,CAAuC;IAExF,kDAAkD;IAClD,IAAW,WAAW,IAAI,UAAU,CAAmD;IACvF,IAAW,WAAW,CAAC,QAAQ,EAAE,UAAU,EAAwD;IAEnG,4CAA4C;IAC5C,IAAW,QAAQ,IAAI,WAAW,GAAG,SAAS,CAAgD;IAC9F,kCAAkC;IAClC,IAAW,YAAY,IAAI,OAAO,GAAG,SAAS,CAAoD;IAClG,8CAA8C;IAC9C,IAAW,gBAAgB,IAAI,gBAAgB,CAAwD;IACvG,oDAAoD;IACpD,IAAW,UAAU,IAAI,WAAW,GAAG,SAAS,CAAkD;IAElG;;;;;;OAMG;gBAEM,QAAQ,EAAE,qBAAqB,EAC/B,YAAY,EAAE,iBAAiB,EAC/B,eAAe,CAAC,yBAAmB,EACnC,OAAO,oBAA0B,EACjC,SAAS,qBAA0B;IAK5C;;;;OAIG;IACI,qBAAqB,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,mBAA4B;IAIrH;;OAEG;IACI,wBAAwB,CAAC,UAAU,EAAE,WAAW;CAGxD;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,YAAa,GAAG,yCAEvD,CAAC"}