@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/appui-react/statusfields/Indicator.scss

@@ -0,0 +1,172 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+@keyframes uifw-indicator-FadeIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.5);
+    transform: scale(.5);
+  }
+
+  50% {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+  }
+
+  100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 1;
+  }
+}
+
+@keyframes uifw-indicator-FadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.uifw-footer-indicator {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  visibility: visible;
+  color: $buic-foreground-body;
+
+  &.uifw-indicator-fade-in {
+    animation: uifw-indicator-FadeIn 1s linear;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &.uifw-indicator-fade-out {
+    animation: uifw-indicator-FadeOut 500ms linear;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Desktop */
+  @include for-medium-desktop-up {
+    &.nz-footer-mode {
+      padding-left: $nz-footer-indicator-horizontal-padding;
+      padding-right: $nz-footer-indicator-horizontal-padding;
+    }
+
+    &:not(.nz-footer-mode) {
+      padding-left: $nz-footer-widget-indicator-horizontal-padding;
+      padding-right: $nz-footer-widget-indicator-horizontal-padding;
+    }
+  }
+
+  /* Medium devices (landscape tablets) */
+  @include for-small-desktop-down {
+    padding-left: $nz-footer-indicator-horizontal-padding-medium;
+    padding-right: $nz-footer-indicator-horizontal-padding-medium;
+  }
+
+  /* Medium devices (portrait tablets) */
+  @include for-tablet-portrait-down {
+    font-size: $text-font-size-medium;
+  }
+
+  /* small devices (phones) */
+  @include for-phone-only {
+    font-size: $text-font-size-small;
+    padding-left: $nz-footer-indicator-horizontal-padding-small;
+    padding-right: $nz-footer-indicator-horizontal-padding-small;
+  }
+
+  >.nz-label {
+    margin-right: $space-between-text-and-icon;
+    display: none;
+    font-size: $text-font-size;
+
+    &.nz-is-visible {
+      display: block;
+    }
+  }
+
+  >.nz-balloon-container {
+    height: 100%;
+    position: relative;
+    display: grid;
+    align-content: center;
+
+    >.nz-balloon {
+      background-color: $buic-text-color;
+      text-align: center;
+      cursor: pointer;
+      min-width: $min-balloon-width;
+      min-height: $min-balloon-height;
+      border-radius: 50%;
+      padding: $balloon-padding;
+      filter: $icon-shadow;
+      position: relative;
+      align-self: center;
+
+      >.nz-arrow {
+        position: absolute;
+        width: 0;
+        bottom: -3px;
+        left: 0;
+        display: block;
+        border-width: 0;
+        border-bottom-width: $balloon-arrow-height;
+        border-left-width: $balloon-arrow-width;
+        border-style: solid;
+        border-color: transparent $buic-text-color;
+        transform: rotate(25deg);
+      }
+
+      >.nz-content {
+        position: relative;
+        color: #FFFFFF;
+        line-height: $min-balloon-height;
+        font-size: 11px;
+      }
+    }
+
+    >.nz-dialog {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 50%;
+    }
+  }
+}
+
+.uifw-indicator-icon {
+  font-size: $icon-size;
+  width: $icon-size;
+  height: $icon-size;
+  cursor: pointer;
+
+  /* Medium devices */
+  @include for-tablet-landscape-down {
+    font-size: $icon-size-medium;
+    width: $icon-size-medium;
+    height: $icon-size-medium;
+  }
+
+  /* Small devices */
+  @include for-phone-only {
+    font-size: $icon-size-small;
+    width: $icon-size-small;
+    height: $icon-size-small;
+  }
+
+  &:hover {
+    color: $buic-foreground-primary;
+  }
+}

package/lib/cjs/appui-react/statusfields/MessageCenter.d.ts

@@ -0,0 +1,56 @@
+/** @packageDocumentation
+ * @module Notification
+ */
+import * as React from "react";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Enum for the [[MessageCenterField]] active tab
+ * @internal
+ */
+declare enum MessageCenterActiveTab {
+    AllMessages = 0,
+    Problems = 1
+}
+/** State for the [[MessageCenterField]] React component
+ * @internal
+ */
+interface MessageCenterState {
+    activeTab: MessageCenterActiveTab;
+    target: HTMLDivElement | null;
+    messageCount: number;
+}
+/** Properties for withMessageCenterFieldProps HOC.
+ * @public
+ */
+export interface MessageCenterFieldProps extends StatusFieldProps {
+    /** Message center dialog target. */
+    targetRef?: React.Ref<HTMLElement>;
+}
+/** Message Center Field React component.
+ * @public
+ */
+export declare class MessageCenterField extends React.Component<MessageCenterFieldProps, MessageCenterState> {
+    private _className;
+    private _indicator;
+    private _title;
+    private _unloadMessagesUpdatedHandler?;
+    private _removeOpenMessagesCenterHandler?;
+    readonly state: Readonly<MessageCenterState>;
+    constructor(p: MessageCenterFieldProps);
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    private _handleMessagesUpdatedEvent;
+    private _handleOpenMessageCenterEvent;
+    render(): React.ReactNode;
+    private _handleTargetRef;
+    private _handleClose;
+    private _handleOutsideClick;
+    private _handleMessageIndicatorClick;
+    private _changeActiveTab;
+    private getMessages;
+    private isProblemStatus;
+    private setOpenWidget;
+}
+export {};
+//# sourceMappingURL=MessageCenter.d.ts.map

package/lib/cjs/appui-react/statusfields/MessageCenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageCenter.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/MessageCenter.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;GAEG;AACH,aAAK,sBAAsB;IACzB,WAAW,IAAA;IACX,QAAQ,IAAA;CACT;AAED;;GAEG;AACH,UAAU,kBAAkB;IAC1B,SAAS,EAAE,sBAAsB,CAAC;IAClC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,oCAAoC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,EAAE,kBAAkB,CAAC;IAClG,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAqC;IACvD,OAAO,CAAC,MAAM,CAAmD;IACjE,OAAO,CAAC,6BAA6B,CAAC,CAAa;IACnD,OAAO,CAAC,gCAAgC,CAAC,CAAa;IAEtD,SAAyB,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAI1D;gBAEU,CAAC,EAAE,uBAAuB;IAOtC,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAapC,OAAO,CAAC,2BAA2B,CAIjC;IAEF,OAAO,CAAC,6BAA6B,CAEnC;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;IAsDzC,OAAO,CAAC,gBAAgB,CAMtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,mBAAmB,CAOzB;IAEF,OAAO,CAAC,4BAA4B,CAMlC;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,WAAW;IA+BnB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,aAAa;CAKtB"}

package/lib/cjs/appui-react/statusfields/MessageCenter.js

@@ -0,0 +1,136 @@
+"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.MessageCenterField = void 0;
+const React = require("react");
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const MessageManager_1 = require("../messages/MessageManager");
+const MessageSpan_1 = require("../messages/MessageSpan");
+const UiFramework_1 = require("../UiFramework");
+/** Enum for the [[MessageCenterField]] active tab
+ * @internal
+ */
+var MessageCenterActiveTab;
+(function (MessageCenterActiveTab) {
+    MessageCenterActiveTab[MessageCenterActiveTab["AllMessages"] = 0] = "AllMessages";
+    MessageCenterActiveTab[MessageCenterActiveTab["Problems"] = 1] = "Problems";
+})(MessageCenterActiveTab || (MessageCenterActiveTab = {}));
+/** Message Center Field React component.
+ * @public
+ */
+class MessageCenterField extends React.Component {
+    constructor(p) {
+        super(p);
+        this._indicator = React.createRef();
+        this._title = UiFramework_1.UiFramework.translate("messageCenter.messages");
+        this.state = {
+            activeTab: MessageCenterActiveTab.AllMessages,
+            target: null,
+            messageCount: MessageManager_1.MessageManager.messages.length,
+        };
+        this._handleMessagesUpdatedEvent = () => {
+            // istanbul ignore else
+            if (this._unloadMessagesUpdatedHandler)
+                this.setState({ messageCount: MessageManager_1.MessageManager.messages.length });
+        };
+        this._handleOpenMessageCenterEvent = () => {
+            this.setOpenWidget(this._className);
+        };
+        this._handleTargetRef = (target) => {
+            if (typeof this.props.targetRef === "function")
+                this.props.targetRef(target);
+            else if (this.props.targetRef)
+                this.props.targetRef.current = target;
+            this.setState({ target });
+        };
+        this._handleClose = () => {
+            this.setOpenWidget(null);
+        };
+        this._handleOutsideClick = (e) => {
+            if (!this._indicator.current ||
+                !(e.target instanceof Node) ||
+                this._indicator.current.contains(e.target))
+                return;
+            this._handleClose();
+        };
+        this._handleMessageIndicatorClick = () => {
+            const isOpen = this.props.openWidget === this._className;
+            if (isOpen)
+                this.setOpenWidget(null);
+            else
+                this.setOpenWidget(this._className);
+        };
+        this._changeActiveTab = (tab) => {
+            this.setState({ activeTab: tab });
+        };
+        const instance = this.constructor;
+        this._className = instance.name;
+    }
+    /** @internal */
+    componentDidMount() {
+        this._unloadMessagesUpdatedHandler = MessageManager_1.MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent, this);
+        this._removeOpenMessagesCenterHandler = MessageManager_1.MessageManager.onOpenMessageCenterEvent.addListener(this._handleOpenMessageCenterEvent, this);
+    }
+    /** @internal */
+    componentWillUnmount() {
+        // istanbul ignore else
+        if (this._unloadMessagesUpdatedHandler) {
+            this._unloadMessagesUpdatedHandler();
+            this._unloadMessagesUpdatedHandler = undefined;
+        }
+        // istanbul ignore else
+        if (this._removeOpenMessagesCenterHandler) {
+            this._removeOpenMessagesCenterHandler();
+            this._removeOpenMessagesCenterHandler = undefined;
+        }
+    }
+    render() {
+        const tooltip = `${this.state.messageCount} ${this._title}`;
+        const footerMessages = (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: this.props.className, style: this.props.style, title: tooltip, ref: this._handleTargetRef },
+                React.createElement(appui_layout_react_1.MessageCenter, { indicatorRef: this._indicator, isInFooterMode: this.props.isInFooterMode, label: this.props.isInFooterMode ? this._title : undefined, onClick: this._handleMessageIndicatorClick }, this.state.messageCount.toString())),
+            React.createElement(appui_layout_react_1.FooterPopup, { isOpen: this.props.openWidget === this._className, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this.state.target },
+                React.createElement(appui_layout_react_1.MessageCenterDialog, { prompt: UiFramework_1.UiFramework.translate("messageCenter.prompt"), tabs: React.createElement(React.Fragment, null,
+                        React.createElement(appui_layout_react_1.MessageCenterTab, { isActive: this.state.activeTab === MessageCenterActiveTab.AllMessages, onClick: () => this._changeActiveTab(MessageCenterActiveTab.AllMessages) }, UiFramework_1.UiFramework.translate("messageCenter.all")),
+                        React.createElement(appui_layout_react_1.MessageCenterTab, { isActive: this.state.activeTab === MessageCenterActiveTab.Problems, onClick: () => this._changeActiveTab(MessageCenterActiveTab.Problems) }, UiFramework_1.UiFramework.translate("messageCenter.errors"))), title: this._title }, this.getMessages()))));
+        return footerMessages;
+    }
+    getMessages() {
+        const messages = MessageManager_1.MessageManager.messages.slice(0).reverse();
+        const tabRows = new Array();
+        messages.forEach((details, index) => {
+            /* istanbul ignore else */
+            if (this.state.activeTab === MessageCenterActiveTab.AllMessages || this.isProblemStatus(details.priority)) {
+                const iconClassName = MessageManager_1.MessageManager.getIconClassName(details);
+                const message = details.briefMessage;
+                tabRows.push(React.createElement(appui_layout_react_1.MessageCenterMessage, { key: index.toString(), icon: React.createElement("i", { className: iconClassName }) },
+                    React.createElement(MessageSpan_1.MessageSpan, { message: message }),
+                    details.detailedMessage &&
+                        React.createElement(React.Fragment, null,
+                            React.createElement("br", null),
+                            React.createElement(MessageSpan_1.MessageSpan, { className: "uicore-text-small", message: details.detailedMessage }))));
+            }
+        });
+        return tabRows;
+    }
+    isProblemStatus(priority) {
+        // See priority values in DgnPlatform defined in NotificationManager
+        if (priority === core_frontend_1.OutputMessagePriority.Error || priority === core_frontend_1.OutputMessagePriority.Fatal)
+            return true;
+        return false;
+    }
+    setOpenWidget(openWidget) {
+        // istanbul ignore else
+        if (this.props.onOpenWidget)
+            this.props.onOpenWidget(openWidget);
+    }
+}
+exports.MessageCenterField = MessageCenterField;
+//# sourceMappingURL=MessageCenter.js.map

package/lib/cjs/appui-react/statusfields/MessageCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageCenter.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/MessageCenter.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 * as React from \"react\";\r\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\r\nimport { FooterPopup, MessageCenter, MessageCenterDialog, MessageCenterMessage, MessageCenterTab } from \"@itwin/appui-layout-react\";\r\nimport { MessageManager } from \"../messages/MessageManager\";\r\nimport { MessageSpan } from \"../messages/MessageSpan\";\r\nimport { NotifyMessageDetailsType } from \"../messages/ReactNotifyMessageDetails\";\r\nimport { StatusBarFieldId } from \"../statusbar/StatusBarWidgetControl\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n/** Enum for the [[MessageCenterField]] active tab\r\n * @internal\r\n */\r\nenum MessageCenterActiveTab {\r\n  AllMessages,\r\n  Problems,\r\n}\r\n\r\n/** State for the [[MessageCenterField]] React component\r\n * @internal\r\n */\r\ninterface MessageCenterState {\r\n  activeTab: MessageCenterActiveTab;\r\n  target: HTMLDivElement | null;\r\n  messageCount: number;\r\n}\r\n\r\n/** Properties for withMessageCenterFieldProps HOC.\r\n * @public\r\n */\r\nexport interface MessageCenterFieldProps extends StatusFieldProps {\r\n  /** Message center dialog target. */\r\n  targetRef?: React.Ref<HTMLElement>;\r\n}\r\n\r\n/** Message Center Field React component.\r\n * @public\r\n */\r\nexport class MessageCenterField extends React.Component<MessageCenterFieldProps, MessageCenterState> {\r\n  private _className: string;\r\n  private _indicator = React.createRef<HTMLDivElement>();\r\n  private _title = UiFramework.translate(\"messageCenter.messages\");\r\n  private _unloadMessagesUpdatedHandler?: () => void;\r\n  private _removeOpenMessagesCenterHandler?: () => void;\r\n\r\n  public override readonly state: Readonly<MessageCenterState> = {\r\n    activeTab: MessageCenterActiveTab.AllMessages,\r\n    target: null,\r\n    messageCount: MessageManager.messages.length,\r\n  };\r\n\r\n  constructor(p: MessageCenterFieldProps) {\r\n    super(p);\r\n\r\n    const instance = this.constructor;\r\n    this._className = instance.name;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._unloadMessagesUpdatedHandler = MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent, this);\r\n    this._removeOpenMessagesCenterHandler = MessageManager.onOpenMessageCenterEvent.addListener(this._handleOpenMessageCenterEvent, this);\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    // istanbul ignore else\r\n    if (this._unloadMessagesUpdatedHandler) {\r\n      this._unloadMessagesUpdatedHandler();\r\n      this._unloadMessagesUpdatedHandler = undefined;\r\n    }\r\n    // istanbul ignore else\r\n    if (this._removeOpenMessagesCenterHandler) {\r\n      this._removeOpenMessagesCenterHandler();\r\n      this._removeOpenMessagesCenterHandler = undefined;\r\n    }\r\n  }\r\n\r\n  private _handleMessagesUpdatedEvent = () => {\r\n    // istanbul ignore else\r\n    if (this._unloadMessagesUpdatedHandler)\r\n      this.setState({ messageCount: MessageManager.messages.length });\r\n  };\r\n\r\n  private _handleOpenMessageCenterEvent = () => {\r\n    this.setOpenWidget(this._className);\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    const tooltip = `${this.state.messageCount} ${this._title}`;\r\n    const footerMessages = (\r\n      <>\r\n        <div\r\n          className={this.props.className}\r\n          style={this.props.style}\r\n          title={tooltip}\r\n          ref={this._handleTargetRef}\r\n        >\r\n          <MessageCenter\r\n            indicatorRef={this._indicator}\r\n            isInFooterMode={this.props.isInFooterMode}\r\n            label={this.props.isInFooterMode ? this._title : undefined}\r\n            onClick={this._handleMessageIndicatorClick}\r\n          >\r\n            {this.state.messageCount.toString()}\r\n          </MessageCenter>\r\n        </div>\r\n        <FooterPopup\r\n          isOpen={this.props.openWidget === this._className}\r\n          onClose={this._handleClose}\r\n          onOutsideClick={this._handleOutsideClick}\r\n          target={this.state.target}\r\n        >\r\n          <MessageCenterDialog\r\n            prompt={UiFramework.translate(\"messageCenter.prompt\")}\r\n            tabs={\r\n              <>\r\n                <MessageCenterTab\r\n                  isActive={this.state.activeTab === MessageCenterActiveTab.AllMessages}\r\n                  onClick={() => this._changeActiveTab(MessageCenterActiveTab.AllMessages)}\r\n                >\r\n                  {UiFramework.translate(\"messageCenter.all\")}\r\n                </MessageCenterTab>\r\n                <MessageCenterTab\r\n                  isActive={this.state.activeTab === MessageCenterActiveTab.Problems}\r\n                  onClick={() => this._changeActiveTab(MessageCenterActiveTab.Problems)}\r\n                >\r\n                  {UiFramework.translate(\"messageCenter.errors\")}\r\n                </MessageCenterTab>\r\n              </>\r\n            }\r\n            title={this._title}\r\n          >\r\n            {this.getMessages()}\r\n          </MessageCenterDialog>\r\n        </FooterPopup>\r\n      </>\r\n    );\r\n\r\n    return footerMessages;\r\n  }\r\n\r\n  private _handleTargetRef = (target: HTMLDivElement | null) => {\r\n    if (typeof this.props.targetRef === \"function\")\r\n      this.props.targetRef(target);\r\n    else if (this.props.targetRef)\r\n      (this.props.targetRef as React.MutableRefObject<HTMLElement | null>).current = target;\r\n    this.setState({ target });\r\n  };\r\n\r\n  private _handleClose = () => {\r\n    this.setOpenWidget(null);\r\n  };\r\n\r\n  private _handleOutsideClick = (e: MouseEvent) => {\r\n    if (!this._indicator.current ||\r\n      !(e.target instanceof Node) ||\r\n      this._indicator.current.contains(e.target))\r\n      return;\r\n\r\n    this._handleClose();\r\n  };\r\n\r\n  private _handleMessageIndicatorClick = () => {\r\n    const isOpen = this.props.openWidget === this._className;\r\n    if (isOpen)\r\n      this.setOpenWidget(null);\r\n    else\r\n      this.setOpenWidget(this._className);\r\n  };\r\n\r\n  private _changeActiveTab = (tab: MessageCenterActiveTab) => {\r\n    this.setState({ activeTab: tab });\r\n  };\r\n\r\n  private getMessages(): React.ReactChild[] {\r\n    const messages = MessageManager.messages.slice(0).reverse();\r\n    const tabRows: React.ReactChild[] = new Array<React.ReactChild>();\r\n\r\n    messages.forEach((details: NotifyMessageDetailsType, index: number) => {\r\n      /* istanbul ignore else */\r\n      if (this.state.activeTab === MessageCenterActiveTab.AllMessages || this.isProblemStatus(details.priority)) {\r\n\r\n        const iconClassName = MessageManager.getIconClassName(details);\r\n        const message = details.briefMessage;\r\n\r\n        tabRows.push(\r\n          <MessageCenterMessage\r\n            key={index.toString()}\r\n            icon={<i className={iconClassName} />}\r\n          >\r\n            <MessageSpan message={message} />\r\n            {details.detailedMessage &&\r\n              <>\r\n                <br />\r\n                <MessageSpan className=\"uicore-text-small\" message={details.detailedMessage} />\r\n              </>\r\n            }\r\n          </MessageCenterMessage>,\r\n        );\r\n      }\r\n    });\r\n\r\n    return tabRows;\r\n  }\r\n\r\n  private isProblemStatus(priority: OutputMessagePriority): boolean {\r\n    // See priority values in DgnPlatform defined in NotificationManager\r\n\r\n    if (priority === OutputMessagePriority.Error || priority === OutputMessagePriority.Fatal)\r\n      return true;\r\n\r\n    return false;\r\n  }\r\n\r\n  private setOpenWidget(openWidget: StatusBarFieldId) {\r\n    // istanbul ignore else\r\n    if (this.props.onOpenWidget)\r\n      this.props.onOpenWidget(openWidget);\r\n  }\r\n}\r\n"]}

package/lib/cjs/appui-react/statusfields/PromptField.d.ts

@@ -0,0 +1,31 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./PromptField.scss";
+import * as React from "react";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Defines properties supported by the Prompt Field Component.
+ */
+interface PromptFieldProps extends StatusFieldProps {
+    /** Prompt text for the active tool */
+    toolPrompt: string;
+}
+/**
+ * Prompt Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display prompts from tools. To send a prompt to this component use IModelApp.notifications.outputPromptByKey or
+ * IModelApp.notifications.outputPrompt.
+ */
+declare class PromptFieldComponent extends React.Component<PromptFieldProps> {
+    constructor(props: PromptFieldProps);
+    render(): React.ReactNode;
+}
+/**
+ * Prompt Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display prompts from tools. To send a prompt to this component use IModelApp.notifications.outputPromptByKey or
+ * IModelApp.notifications.outputPrompt.
+ * This React component is Redux connected.
+ * @public
+ * @deprecated Use ToolAssistanceField instead
+ */ export declare const PromptField: import("react-redux").ConnectedComponent<typeof PromptFieldComponent, import("react-redux").Omit<React.ClassAttributes<PromptFieldComponent> & PromptFieldProps, "toolPrompt">>;
+export {};
+//# sourceMappingURL=PromptField.d.ts.map

package/lib/cjs/appui-react/statusfields/PromptField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptField.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/PromptField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;GACG;AACH,UAAU,gBAAiB,SAAQ,gBAAgB;IACjD,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,cAAM,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;gBAEtD,KAAK,EAAE,gBAAgB;IAInB,MAAM,IAAI,KAAK,CAAC,SAAS;CAW1C;AAaD;;;;;;;GAOG,CACH,eAAO,MAAM,WAAW,iLAAiD,CAAC"}

package/lib/cjs/appui-react/statusfields/PromptField.js

@@ -0,0 +1,48 @@
+"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 StatusBar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptField = void 0;
+require("./PromptField.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const react_redux_1 = require("react-redux");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const UiFramework_1 = require("../UiFramework");
+/**
+ * Prompt Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display prompts from tools. To send a prompt to this component use IModelApp.notifications.outputPromptByKey or
+ * IModelApp.notifications.outputPrompt.
+ */
+class PromptFieldComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(appui_layout_react_1.FooterIndicator, { className: (0, classnames_1.default)("uifw-statusFields-promptField", this.props.className), style: this.props.style, isInFooterMode: this.props.isInFooterMode }, this.props.toolPrompt));
+    }
+}
+/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
+function mapStateToProps(state) {
+    const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { toolPrompt: frameworkState.configurableUiState.toolPrompt };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * Prompt Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display prompts from tools. To send a prompt to this component use IModelApp.notifications.outputPromptByKey or
+ * IModelApp.notifications.outputPrompt.
+ * This React component is Redux connected.
+ * @public
+ * @deprecated Use ToolAssistanceField instead
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+exports.PromptField = (0, react_redux_1.connect)(mapStateToProps)(PromptFieldComponent);
+//# sourceMappingURL=PromptField.js.map

package/lib/cjs/appui-react/statusfields/PromptField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/PromptField.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,8BAA4B;AAC5B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kEAA4D;AAC5D,gDAA6C;AAU7C;;;;GAIG;AACH,MAAM,oBAAqB,SAAQ,KAAK,CAAC,SAA2B;IAElE,YAAY,KAAuB;QACjC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC5E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,IAExC,IAAI,CAAC,KAAK,CAAC,UAAU,CACN,CACnB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,mBAAmB,CAAC,UAAU,EAAE,CAAC;AACvE,CAAC;AAED,4EAA4E;AAC5E;;;;;;;GAOG,CAAC,gEAAgE;AACvD,QAAA,WAAW,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,oBAAoB,CAAC,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 StatusBar\r\n */\r\n\r\nimport \"./PromptField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n/** Defines properties supported by the Prompt Field Component.\r\n */\r\ninterface PromptFieldProps extends StatusFieldProps {\r\n  /** Prompt text for the active tool */\r\n  toolPrompt: string;\r\n}\r\n\r\n/**\r\n * Prompt Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display prompts from tools. To send a prompt to this component use IModelApp.notifications.outputPromptByKey or\r\n * IModelApp.notifications.outputPrompt.\r\n */\r\nclass PromptFieldComponent extends React.Component<PromptFieldProps> {\r\n\r\n  constructor(props: PromptFieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <FooterIndicator\r\n        className={classnames(\"uifw-statusFields-promptField\", this.props.className)}\r\n        style={this.props.style}\r\n        isInFooterMode={this.props.isInFooterMode}\r\n      >\r\n        {this.props.toolPrompt}\r\n      </FooterIndicator>\r\n    );\r\n  }\r\n}\r\n\r\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\r\nfunction mapStateToProps(state: any) {\r\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\r\n  /* istanbul ignore next */\r\n  if (!frameworkState)\r\n    return undefined;\r\n\r\n  return { toolPrompt: frameworkState.configurableUiState.toolPrompt };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * Prompt Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display prompts from tools. To send a prompt to this component use IModelApp.notifications.outputPromptByKey or\r\n * IModelApp.notifications.outputPrompt.\r\n * This React component is Redux connected.\r\n * @public\r\n * @deprecated Use ToolAssistanceField instead\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const PromptField = connect(mapStateToProps)(PromptFieldComponent);\r\n"]}

package/lib/cjs/appui-react/statusfields/PromptField.scss

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.uifw-statusFields-promptField {
+  $font-size-medium: 12px;
+  $font-size-small: $font-size-medium;
+
+  overflow: hidden;
+
+  &.nz-footer-mode {
+    width: 20em;
+  }
+
+  &:not(.nz-footer-mode) {
+    width: 16em;
+  }
+
+  @media only screen and (max-width: 768px) {
+    font-size: $font-size-medium;
+
+    &.nz-footer-mode {
+      width: 12em;
+    }
+
+    &:not(.nz-footer-mode) {
+      width: 10em;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    font-size: $font-size-small;
+
+    &.nz-footer-mode {
+      width: 10em;
+    }
+
+    &:not(.nz-footer-mode) {
+      width: 8em;
+    }
+  }
+}

package/lib/cjs/appui-react/statusfields/SectionsField.d.ts

@@ -0,0 +1,17 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+/// <reference types="react" />
+import "./SectionsField.scss";
+import { StatusFieldProps } from "./StatusFieldProps";
+/** Sections Status Field Props
+ * @beta
+ */
+export interface SectionsStatusFieldProps extends StatusFieldProps {
+    hideWhenUnused?: boolean;
+}
+/** Status Field for showing section extra tools for clearing and showing manipulators
+ * @beta
+ */
+export declare function SectionsStatusField(props: SectionsStatusFieldProps): JSX.Element;
+//# sourceMappingURL=SectionsField.d.ts.map

package/lib/cjs/appui-react/statusfields/SectionsField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionsField.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,sBAAsB,CAAC;AAS9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAgFlE"}

package/lib/cjs/appui-react/statusfields/SectionsField.js

@@ -0,0 +1,76 @@
+"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 StatusBar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionsStatusField = void 0;
+require("./SectionsField.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const useActiveViewport_1 = require("../hooks/useActiveViewport");
+const UiFramework_1 = require("../UiFramework");
+const Indicator_1 = require("./Indicator");
+/** Status Field for showing section extra tools for clearing and showing manipulators
+ * @beta
+ */
+function SectionsStatusField(props) {
+    const [toolTip] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionTools"));
+    const [clearLabel] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionClear"));
+    const [showHandlesLabel] = React.useState(UiFramework_1.UiFramework.translate("tools.sectionShowHandles"));
+    const activeViewport = (0, useActiveViewport_1.useActiveViewport)();
+    const [showIndicator, setShowIndicator] = React.useState(false);
+    const [isPopupOpen, setPopupOpen] = React.useState(false);
+    const targetDiv = React.useRef(null);
+    const classes = (showIndicator) ? "uifw-indicator-fade-in" : "uifw-indicator-fade-out";
+    const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
+    React.useEffect(() => {
+        // istanbul ignore next
+        const onClipChanged = (viewport, _eventType, _provider) => {
+            if (viewport !== activeViewport)
+                return;
+            setHasManipulatorsShown(!!core_frontend_1.ViewClipDecoration.get(activeViewport));
+            const isClipActive = !!activeViewport.view.getViewClip();
+            setShowIndicator(isClipActive || !props.hideWhenUnused);
+        };
+        const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();
+        setShowIndicator(clipActive || !props.hideWhenUnused);
+        setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!core_frontend_1.ViewClipDecoration.get(activeViewport));
+        core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
+        return () => {
+            // Get or create static ViewClipDecorationProvider
+            core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
+        };
+    }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
+    // istanbul ignore next
+    const toggleManipulators = async (e) => {
+        if (activeViewport) {
+            setHasManipulatorsShown(e.target.checked);
+            await core_frontend_1.ViewClipDecorationProvider.create().toggleDecoration(activeViewport);
+        }
+    };
+    // istanbul ignore next
+    const handleClear = async () => {
+        await core_frontend_1.IModelApp.tools.run(core_frontend_1.ViewClipClearTool.toolId, core_frontend_1.ViewClipDecorationProvider.create());
+        setPopupOpen(false);
+    };
+    return (React.createElement("div", { className: "uifw-section-footer-popup-container" }, showIndicator &&
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: targetDiv, title: toolTip },
+                React.createElement(Indicator_1.Indicator, { className: classes, iconName: "icon-section-tool", onClick: () => setPopupOpen(!isPopupOpen), opened: isPopupOpen, isInFooterMode: props.isInFooterMode })),
+            React.createElement(appui_layout_react_1.FooterPopup, { target: targetDiv.current, onClose: () => setPopupOpen(false), isOpen: isPopupOpen },
+                React.createElement(appui_layout_react_1.Dialog, { titleBar: React.createElement(appui_layout_react_1.TitleBar, { title: toolTip }) },
+                    React.createElement("div", { className: "uifw-sections-footer-contents" },
+                        React.createElement(itwinui_react_1.Button, { onClick: handleClear }, clearLabel),
+                        React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
+                            React.createElement("div", { className: (0, classnames_1.default)("uifw-sections-label") }, showHandlesLabel),
+                            React.createElement(itwinui_react_1.ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown }))))))));
+}
+exports.SectionsStatusField = SectionsStatusField;
+//# sourceMappingURL=SectionsField.js.map