@itwin/appui-react 3.0.0-dev.100

package/lib/esm/appui-react/stagepanels/StagePanelEnums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StagePanelEnums.js","sourceRoot":"","sources":["../../../../src/appui-react/stagepanels/StagePanelEnums.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH;;;GAGG;AACH,MAAM,CAAN,IAAY,kBAOX;AAPD,WAAY,kBAAkB;IAC5B,2DAAS,CAAA;IACT,mEAAO,CAAA;IACP,6DAAI,CAAA;IACJ,+DAAK,CAAA;IACL,iEAAM,CAAA;IACN,yEAAU,CAAA;AACZ,CAAC,EAPW,kBAAkB,KAAlB,kBAAkB,QAO7B;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,2DAAK,CAAA;IACL,6DAAM,CAAA;IACN,uDAAG,CAAA;AACL,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B","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 Frontstage\r\n */\r\n\r\n/** Available Stage Panel locations.\r\n * @alpha\r\n * @deprecated - Use [StagePanelLocation]($appui-abstract) in bentley/appui-abstract instead.\r\n */\r\nexport enum StagePanelLocation {\r\n  Top = 101,\r\n  TopMost,\r\n  Left,\r\n  Right,\r\n  Bottom,\r\n  BottomMost,\r\n}\r\n\r\n/** Enum for Stage Panel Sections\r\n * @alpha\r\n * @deprecated - Use [StagePanelSection]($appui-abstract) in bentley/appui-abstract instead.\r\n */\r\nexport enum StagePanelSection {\r\n  Start,\r\n  Middle,\r\n  End,\r\n}\r\n"]}

package/lib/esm/appui-react/stagepanels/StagePanelHeader.d.ts

@@ -0,0 +1,28 @@
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import "./StagePanelHeader.scss";
+import * as React from "react";
+import { StagePanelLocation } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of a [[StagePanelHeader]] component
+ * @alpha
+ */
+export interface StagePanelHeaderProps extends CommonProps {
+    /** Describes if the collapse button is visible. */
+    collapseButton?: boolean;
+    /** Title of collapse button (displayed when hovered). */
+    collapseButtonTitle?: string;
+    /** Describes stage panel location of this header. */
+    location: StagePanelLocation;
+    /** Header title. */
+    title?: string;
+}
+/** Stage panel header React component.
+ * @alpha
+ */
+export declare class StagePanelHeader extends React.PureComponent<StagePanelHeaderProps> {
+    render(): JSX.Element;
+    private _handleCollapseButtonClick;
+}
+//# sourceMappingURL=StagePanelHeader.d.ts.map

package/lib/esm/appui-react/stagepanels/StagePanelHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StagePanelHeader.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/stagepanels/StagePanelHeader.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qDAAqD;IACrD,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9D,MAAM;IAyBtB,OAAO,CAAC,0BAA0B,CAUhC;CACH"}

package/lib/esm/appui-react/stagepanels/StagePanelHeader.js

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Frontstage
+ */
+import "./StagePanelHeader.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { FrontstageManager } from "../frontstage/FrontstageManager";
+import { StagePanelState } from "./StagePanelDef";
+/** Stage panel header React component.
+ * @alpha
+ */
+export class StagePanelHeader extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._handleCollapseButtonClick = () => {
+            const activeFrontstageDef = FrontstageManager.activeFrontstageDef;
+            // istanbul ignore if
+            if (!activeFrontstageDef)
+                return;
+            const stagePanel = activeFrontstageDef.getStagePanelDef(this.props.location);
+            // istanbul ignore if
+            if (!stagePanel)
+                return;
+            stagePanel.panelState = StagePanelState.Minimized;
+        };
+    }
+    render() {
+        const className = classnames("uifw-stagepanelheader", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style },
+            React.createElement("span", null, this.props.title),
+            this.props.collapseButton ?
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                React.createElement("i", { className: "uifw-collapse icon icon-close", title: this.props.collapseButtonTitle, onClick: this._handleCollapseButtonClick, role: "button", tabIndex: -1 }) :
+                undefined));
+    }
+}
+//# sourceMappingURL=StagePanelHeader.js.map

package/lib/esm/appui-react/stagepanels/StagePanelHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StagePanelHeader.js","sourceRoot":"","sources":["../../../../src/appui-react/stagepanels/StagePanelHeader.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAkBlD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAAhF;;QA0BU,+BAA0B,GAAG,GAAG,EAAE;YACxC,MAAM,mBAAmB,GAAG,iBAAiB,CAAC,mBAAmB,CAAC;YAClE,qBAAqB;YACrB,IAAI,CAAC,mBAAmB;gBACtB,OAAO;YACT,MAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAC7E,qBAAqB;YACrB,IAAI,CAAC,UAAU;gBACb,OAAO;YACT,UAAU,CAAC,UAAU,GAAG,eAAe,CAAC,SAAS,CAAC;QACpD,CAAC,CAAC;IACJ,CAAC;IApCiB,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAAC,uBAAuB,EAClD,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEvB,kCAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAQ;YAC9B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;gBAC1B,iEAAiE;gBACjE,2BACE,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,mBAAmB,EACrC,OAAO,EAAE,IAAI,CAAC,0BAA0B,EACxC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,GACZ,CAAC,CAAC;gBACJ,SAAS,CAEP,CACP,CAAC;IACJ,CAAC;CAaF","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 Frontstage\r\n */\r\n\r\nimport \"./StagePanelHeader.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { StagePanelLocation } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { FrontstageManager } from \"../frontstage/FrontstageManager\";\r\nimport { StagePanelState } from \"./StagePanelDef\";\r\n\r\n// cspell:ignore stagepanelheader\r\n\r\n/** Properties of a [[StagePanelHeader]] component\r\n * @alpha\r\n */\r\nexport interface StagePanelHeaderProps extends CommonProps {\r\n  /** Describes if the collapse button is visible. */\r\n  collapseButton?: boolean;\r\n  /** Title of collapse button (displayed when hovered). */\r\n  collapseButtonTitle?: string;\r\n  /** Describes stage panel location of this header. */\r\n  location: StagePanelLocation;\r\n  /** Header title. */\r\n  title?: string;\r\n}\r\n\r\n/** Stage panel header React component.\r\n * @alpha\r\n */\r\nexport class StagePanelHeader extends React.PureComponent<StagePanelHeaderProps> {\r\n  public override render() {\r\n    const className = classnames(\"uifw-stagepanelheader\",\r\n      this.props.className,\r\n    );\r\n    return (\r\n      <div\r\n        className={className}\r\n        style={this.props.style}\r\n      >\r\n        <span>{this.props.title}</span>\r\n        {this.props.collapseButton ?\r\n          // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n          <i\r\n            className=\"uifw-collapse icon icon-close\"\r\n            title={this.props.collapseButtonTitle}\r\n            onClick={this._handleCollapseButtonClick}\r\n            role=\"button\"\r\n            tabIndex={-1}\r\n          /> :\r\n          undefined\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private _handleCollapseButtonClick = () => {\r\n    const activeFrontstageDef = FrontstageManager.activeFrontstageDef;\r\n    // istanbul ignore if\r\n    if (!activeFrontstageDef)\r\n      return;\r\n    const stagePanel = activeFrontstageDef.getStagePanelDef(this.props.location);\r\n    // istanbul ignore if\r\n    if (!stagePanel)\r\n      return;\r\n    stagePanel.panelState = StagePanelState.Minimized;\r\n  };\r\n}\r\n"]}

package/lib/esm/appui-react/stagepanels/StagePanelHeader.scss

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+* 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/dialog/variables";
+
+.uifw-stagepanelheader {
+  align-items: center;
+  height: $nz-footer-title-bar-height;
+  justify-content: flex-end;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr auto;
+
+  >.uifw-collapse {
+    cursor: pointer;
+    justify-self: end;
+    padding: 5px;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/esm/appui-react/statusbar/Overflow.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./Overflow.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[StatusBarOverflow]] component.
+ * @internal
+ */
+export interface StatusBarOverflowProps extends CommonProps {
+    /** Function called when button is clicked. */
+    onClick?: () => void;
+    /** Function called when button is resized. */
+    onResize?: (w: number) => void;
+}
+/** Entry point to overflow status bar items of [[StatusBarComposer]] component.
+ * @internal
+ */
+export declare const StatusBarOverflow: React.MemoExoticComponent<React.ForwardRefExoticComponent<StatusBarOverflowProps & React.RefAttributes<HTMLDivElement>>>;
+//# sourceMappingURL=Overflow.d.ts.map

package/lib/esm/appui-react/statusbar/Overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAA8B,MAAM,mBAAmB,CAAC;AAI5E;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED;;GAEG;AAEH,eAAO,MAAM,iBAAiB,0HA2B7B,CAAC"}

package/lib/esm/appui-react/statusbar/Overflow.js

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./Overflow.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { useRefs, useResizeObserver } from "@itwin/core-react";
+import { Ellipsis } from "@itwin/appui-layout-react";
+import { UiFramework } from "../UiFramework";
+/** Entry point to overflow status bar items of [[StatusBarComposer]] component.
+ * @internal
+ */
+// eslint-disable-next-line react/display-name, @typescript-eslint/naming-convention
+export const StatusBarOverflow = React.memo(React.forwardRef(function StatusBarOverflow(props, ref) {
+    const roRef = useResizeObserver(props.onResize);
+    const refs = useRefs(roRef, ref);
+    const className = classnames("uifw-statusbar-overflow", props.className);
+    const title = React.useRef(UiFramework.translate("statusBar.overflow"));
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", { className: className, onClick: props.onClick, ref: refs, style: props.style, role: "button", tabIndex: -1, title: title.current },
+        React.createElement(Ellipsis, null)));
+}));
+//# sourceMappingURL=Overflow.js.map

package/lib/esm/appui-react/statusbar/Overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Overflow.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAY7C;;GAEG;AACH,oFAAoF;AACpF,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,KAAK,CAAC,UAAU,CACd,SAAS,iBAAiB,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,KAAK,GAAG,iBAAiB,CAAiB,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,UAAU,CAC1B,yBAAyB,EACzB,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAExE,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE,KAAK,CAAC,OAAO;QAEpB,oBAAC,QAAQ,OAAG,CACR,CACP,CAAC;AACJ,CAAC,CACF,CACF,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 \"./Overflow.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, useRefs, useResizeObserver } from \"@itwin/core-react\";\r\nimport { Ellipsis } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n/** Properties of [[StatusBarOverflow]] component.\r\n * @internal\r\n */\r\nexport interface StatusBarOverflowProps extends CommonProps {\r\n  /** Function called when button is clicked. */\r\n  onClick?: () => void;\r\n  /** Function called when button is resized. */\r\n  onResize?: (w: number) => void;\r\n}\r\n\r\n/** Entry point to overflow status bar items of [[StatusBarComposer]] component.\r\n * @internal\r\n */\r\n// eslint-disable-next-line react/display-name, @typescript-eslint/naming-convention\r\nexport const StatusBarOverflow = React.memo(\r\n  React.forwardRef<HTMLDivElement, StatusBarOverflowProps>(\r\n    function StatusBarOverflow(props, ref) { // eslint-disable-line @typescript-eslint/no-shadow, @typescript-eslint/naming-convention\r\n      const roRef = useResizeObserver<HTMLDivElement>(props.onResize);\r\n      const refs = useRefs(roRef, ref);\r\n      const className = classnames(\r\n        \"uifw-statusbar-overflow\",\r\n        props.className,\r\n      );\r\n      const title = React.useRef(UiFramework.translate(\"statusBar.overflow\"));\r\n\r\n      return (\r\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n        <div\r\n          className={className}\r\n          onClick={props.onClick}\r\n          ref={refs}\r\n          style={props.style}\r\n          role=\"button\"\r\n          tabIndex={-1}\r\n          title={title.current}\r\n        >\r\n          <Ellipsis />\r\n        </div>\r\n      );\r\n    },\r\n  ),\r\n);\r\n"]}

package/lib/esm/appui-react/statusbar/Overflow.scss

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.uifw-statusbar-overflow {
+  height: 100%;
+  width: 3em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    background: $buic-background-2;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.nz-hidden {
+    visibility: hidden;
+  }
+}

package/lib/esm/appui-react/statusbar/OverflowPanel.d.ts

@@ -0,0 +1,21 @@
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./OverflowPanel.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Properties of [[StatusBarOverflowPanel]] component.
+ * @internal
+ */
+export interface StatusBarOverflowPanelProps extends CommonProps {
+    /** Panel content. */
+    children?: React.ReactNode;
+    onClose: () => void;
+    target: HTMLElement | undefined;
+    open: boolean;
+}
+/** Displays overflow status bar items.
+ * @internal
+ */
+export declare function StatusBarOverflowPanel(props: StatusBarOverflowPanelProps): JSX.Element;
+//# sourceMappingURL=OverflowPanel.d.ts.map

package/lib/esm/appui-react/statusbar/OverflowPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowPanel.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/OverflowPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAS,MAAM,mBAAmB,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,WAAW;IAC9D,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAkBxE"}

package/lib/esm/appui-react/statusbar/OverflowPanel.js

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module ToolSettings
+ */
+import "./OverflowPanel.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Popup } from "@itwin/core-react";
+/** Displays overflow status bar items.
+ * @internal
+ */
+export function StatusBarOverflowPanel(props) {
+    const className = classnames("uifw-statusbar-panel", props.className);
+    return (React.createElement(Popup, { className: className, isOpen: props.open, offset: 0, onClose: props.onClose, style: props.style, showShadow: true, target: props.target }, props.children));
+}
+//# sourceMappingURL=OverflowPanel.js.map

package/lib/esm/appui-react/statusbar/OverflowPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowPanel.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/OverflowPanel.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAavD;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAC,KAAkC;IACvE,MAAM,SAAS,GAAG,UAAU,CAC1B,sBAAsB,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,IAEnB,KAAK,CAAC,QAAQ,CACT,CACT,CAAC;AACJ,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 ToolSettings\r\n */\r\n\r\nimport \"./OverflowPanel.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, Popup } from \"@itwin/core-react\";\r\n\r\n/** Properties of [[StatusBarOverflowPanel]] component.\r\n * @internal\r\n */\r\nexport interface StatusBarOverflowPanelProps extends CommonProps {\r\n  /** Panel content. */\r\n  children?: React.ReactNode;\r\n  onClose: () => void;\r\n  target: HTMLElement | undefined;\r\n  open: boolean;\r\n}\r\n\r\n/** Displays overflow status bar items.\r\n * @internal\r\n */\r\nexport function StatusBarOverflowPanel(props: StatusBarOverflowPanelProps) {\r\n  const className = classnames(\r\n    \"uifw-statusbar-panel\",\r\n    props.className,\r\n  );\r\n  return (\r\n    <Popup\r\n      className={className}\r\n      isOpen={props.open}\r\n      offset={0}\r\n      onClose={props.onClose}\r\n      style={props.style}\r\n      showShadow={true}\r\n      target={props.target}\r\n    >\r\n      {props.children}\r\n    </Popup>\r\n  );\r\n}\r\n"]}

package/lib/esm/appui-react/statusbar/OverflowPanel.scss

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+* 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/index";
+
+.uifw-statusbar-panel {
+  background: $buic-background-1;
+  padding: 0.5em;
+
+  &.core-popup.core-popup-top {
+    @include uicore-z-index(status-overflow-popup);
+  }
+}
+
+.uifw-statusbar-overflow-items-container {
+  display: flex;
+  flex-direction: column;
+
+  >.nz-footer-separator {
+    display: none;
+  }
+}

package/lib/esm/appui-react/statusbar/StatusBar.d.ts

@@ -0,0 +1,82 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./StatusBar.scss";
+import * as React from "react";
+import { CommonDivProps, CommonProps } from "@itwin/core-react";
+import { ActivityMessageEventArgs } from "../messages/MessageManager";
+import { StatusBarFieldId, StatusBarWidgetControl, StatusBarWidgetControlArgs } from "./StatusBarWidgetControl";
+import { StatusMessage } from "../messages/StatusMessageManager";
+/** State for the [[StatusBar]] React component
+ * @internal
+ */
+interface StatusBarState {
+    openWidget: StatusBarFieldId;
+    messages: ReadonlyArray<StatusMessage>;
+    activityMessageInfo: ActivityMessageEventArgs | undefined;
+    isActivityMessageVisible: boolean;
+    toastTarget: HTMLElement | null;
+}
+/** Properties for the [[StatusBar]] React component
+ * @public
+ */
+export interface StatusBarProps extends CommonProps {
+    widgetControl?: StatusBarWidgetControl;
+    isInFooterMode: boolean;
+}
+/** Status Bar React component.
+ * @public
+ */
+export declare class StatusBar extends React.Component<StatusBarProps, StatusBarState> {
+    /** @internal */
+    constructor(props: StatusBarProps);
+    render(): React.ReactNode;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private _handleMessageAddedEvent;
+    /** Respond to clearing the message list */
+    private _handleMessagesUpdatedEvent;
+    /**
+     * Sets state of the status bar to updated values reflecting activity progress.
+     * @param args  New values to set for ActivityMessage
+     */
+    private _handleActivityMessageUpdatedEvent;
+    /**
+     * Hides ActivityMessage after cancellation
+     */
+    private _handleActivityMessageCancelledEvent;
+    private getFooterMessages;
+    /**
+     * Ends canceled process and dismisses ActivityMessage
+     */
+    private _cancelActivityMessage;
+    /**
+     * Dismisses ActivityMessage
+     */
+    private _dismissActivityMessage;
+    private _handleOpenWidget;
+    private _closeMessage;
+    private _handleToastTargetRef;
+}
+/** StatusBar With Space Between Items React functional component
+ * @public
+ */
+export declare function StatusBarSpaceBetween(props: CommonDivProps): JSX.Element;
+/** StatusBar Left Section React functional component
+ * @public
+ */
+export declare function StatusBarLeftSection(props: CommonDivProps): JSX.Element;
+/** StatusBar Center Section React functional component
+ * @public
+ */
+export declare function StatusBarCenterSection(props: CommonDivProps): JSX.Element;
+/** StatusBar Right Section React functional component
+ * @public
+ */
+export declare function StatusBarRightSection(props: CommonDivProps): JSX.Element;
+/** Context providing values for StatusFieldProps and MessageCenterFieldProps
+ *  @internal
+ */
+export declare const StatusBarContext: React.Context<StatusBarWidgetControlArgs>;
+export {};
+//# sourceMappingURL=StatusBar.d.ts.map

package/lib/esm/appui-react/statusbar/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,WAAW,EAAO,MAAM,mBAAmB,CAAC;AAErE,OAAO,EAAE,wBAAwB,EAAyC,MAAM,4BAA4B,CAAC;AAG7G,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAChH,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAKjE;;GAEG;AACH,UAAU,cAAc;IACtB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACvC,mBAAmB,EAAE,wBAAwB,GAAG,SAAS,CAAC;IAC1D,wBAAwB,EAAE,OAAO,CAAC;IAClC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAE5E,gBAAgB;gBACJ,KAAK,EAAE,cAAc;IAYjB,MAAM,IAAI,KAAK,CAAC,SAAS;IAuCzB,iBAAiB;IAUjB,oBAAoB;IAOpC,OAAO,CAAC,wBAAwB,CAE9B;IAEF,2CAA2C;IAC3C,OAAO,CAAC,2BAA2B,CAEjC;IAEF;;;OAGG;IACH,OAAO,CAAC,kCAAkC,CAKxC;IAEF;;OAEG;IACH,OAAO,CAAC,oCAAoC,CAI1C;IAEF,OAAO,CAAC,iBAAiB;IAiBzB;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAG5B;IAEF;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAI7B;IAEF,OAAO,CAAC,iBAAiB,CAIvB;IAEF,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,qBAAqB,CAE3B;CACH;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,eAG1D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,eAGzD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,eAG3D;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,eAG1D;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,2CAK3B,CAAC"}

package/lib/esm/appui-react/statusbar/StatusBar.js

@@ -0,0 +1,160 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./StatusBar.scss";
+import * as React from "react";
+import { Div } from "@itwin/core-react";
+import { Footer } from "@itwin/appui-layout-react";
+import { MessageManager } from "../messages/MessageManager";
+import { SafeAreaContext } from "../safearea/SafeAreaContext";
+import { UiShowHideManager } from "../utils/UiShowHideManager";
+import { StatusMessagesContainer } from "../messages/StatusMessagesContainer";
+/** Status Bar React component.
+ * @public
+ */
+export class StatusBar extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._handleMessageAddedEvent = (_args) => {
+            this.setState({ messages: MessageManager.activeMessageManager.messages });
+        };
+        /** Respond to clearing the message list */
+        this._handleMessagesUpdatedEvent = () => {
+            this.setState({ messages: MessageManager.activeMessageManager.messages });
+        };
+        /**
+         * Sets state of the status bar to updated values reflecting activity progress.
+         * @param args  New values to set for ActivityMessage
+         */
+        this._handleActivityMessageUpdatedEvent = (args) => {
+            this.setState((prevState) => ({
+                activityMessageInfo: args,
+                isActivityMessageVisible: args.restored ? true : prevState.isActivityMessageVisible,
+            }));
+        };
+        /**
+         * Hides ActivityMessage after cancellation
+         */
+        this._handleActivityMessageCancelledEvent = () => {
+            this.setState({
+                isActivityMessageVisible: false,
+            });
+        };
+        /**
+         * Ends canceled process and dismisses ActivityMessage
+         */
+        this._cancelActivityMessage = () => {
+            MessageManager.endActivityMessage(false);
+            this._dismissActivityMessage();
+        };
+        /**
+         * Dismisses ActivityMessage
+         */
+        this._dismissActivityMessage = () => {
+            this.setState({
+                isActivityMessageVisible: false,
+            });
+        };
+        this._handleOpenWidget = (openWidget) => {
+            this.setState({
+                openWidget,
+            });
+        };
+        this._closeMessage = (id) => {
+            MessageManager.activeMessageManager.remove(id);
+            MessageManager.updateMessages();
+        };
+        this._handleToastTargetRef = (toastTarget) => {
+            this.setState({ toastTarget });
+        };
+        this.state = {
+            openWidget: null,
+            messages: MessageManager.activeMessageManager.messages,
+            activityMessageInfo: undefined,
+            isActivityMessageVisible: false,
+            toastTarget: null,
+        };
+    }
+    render() {
+        let footerSections = null;
+        const widgetControl = this.props.widgetControl;
+        // istanbul ignore else
+        if (widgetControl && widgetControl.getReactNode) {
+            footerSections = widgetControl.getReactNode({
+                isInFooterMode: this.props.isInFooterMode,
+                openWidget: this.state.openWidget,
+                toastTargetRef: this._handleToastTargetRef,
+                onOpenWidget: this._handleOpenWidget,
+            });
+        }
+        return (React.createElement(StatusBarContext.Provider, { value: {
+                isInFooterMode: this.props.isInFooterMode,
+                openWidget: this.state.openWidget,
+                toastTargetRef: this._handleToastTargetRef,
+                onOpenWidget: this._handleOpenWidget,
+            } },
+            React.createElement(SafeAreaContext.Consumer, null, (safeAreaInsets) => (React.createElement(Footer, { className: this.props.className, messages: this.getFooterMessages(), isInFooterMode: this.props.isInFooterMode, onMouseEnter: UiShowHideManager.handleWidgetMouseEnter, safeAreaInsets: safeAreaInsets, style: this.props.style }, footerSections)))));
+    }
+    componentDidMount() {
+        MessageManager.onMessageAddedEvent.addListener(this._handleMessageAddedEvent);
+        MessageManager.onActivityMessageUpdatedEvent.addListener(this._handleActivityMessageUpdatedEvent);
+        MessageManager.onActivityMessageCancelledEvent.addListener(this._handleActivityMessageCancelledEvent);
+        MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent);
+        MessageManager.activeMessageManager.initialize();
+        MessageManager.updateMessages();
+    }
+    componentWillUnmount() {
+        MessageManager.onMessageAddedEvent.removeListener(this._handleMessageAddedEvent);
+        MessageManager.onActivityMessageUpdatedEvent.removeListener(this._handleActivityMessageUpdatedEvent);
+        MessageManager.onActivityMessageCancelledEvent.removeListener(this._handleActivityMessageCancelledEvent);
+        MessageManager.onMessagesUpdatedEvent.removeListener(this._handleMessagesUpdatedEvent);
+    }
+    getFooterMessages() {
+        if (!(this.state.activityMessageInfo && this.state.isActivityMessageVisible) && this.state.messages.length === 0)
+            return null;
+        return (React.createElement(StatusMessagesContainer, { messages: this.state.messages, activityMessageInfo: this.state.activityMessageInfo, isActivityMessageVisible: this.state.isActivityMessageVisible, toastTarget: this.state.toastTarget, closeMessage: this._closeMessage, cancelActivityMessage: this._cancelActivityMessage, dismissActivityMessage: this._dismissActivityMessage }));
+    }
+}
+/** StatusBar With Space Between Items React functional component
+ * @public
+ */
+export function StatusBarSpaceBetween(props) {
+    const { className, ...divProps } = props;
+    return React.createElement(Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-space-between" });
+}
+/** StatusBar Left Section React functional component
+ * @public
+ */
+export function StatusBarLeftSection(props) {
+    const { className, ...divProps } = props;
+    return React.createElement(Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-left" });
+}
+/** StatusBar Center Section React functional component
+ * @public
+ */
+export function StatusBarCenterSection(props) {
+    const { className, ...divProps } = props;
+    return React.createElement(Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-center" });
+}
+/** StatusBar Right Section React functional component
+ * @public
+ */
+export function StatusBarRightSection(props) {
+    const { className, ...divProps } = props;
+    return React.createElement(Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-right" });
+}
+/** Context providing values for StatusFieldProps and MessageCenterFieldProps
+ *  @internal
+ */
+export const StatusBarContext = React.createContext({
+    isInFooterMode: true,
+    onOpenWidget: /* istanbul ignore next */ () => { },
+    openWidget: "",
+    toastTargetRef: { current: null },
+});
+//# sourceMappingURL=StatusBar.js.map

package/lib/esm/appui-react/statusbar/StatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBar.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 StatusBar\r\n */\r\n\r\nimport \"./StatusBar.scss\";\r\nimport * as React from \"react\";\r\nimport { CommonDivProps, CommonProps, Div } from \"@itwin/core-react\";\r\nimport { Footer } from \"@itwin/appui-layout-react\";\r\nimport { ActivityMessageEventArgs, MessageAddedEventArgs, MessageManager } from \"../messages/MessageManager\";\r\nimport { SafeAreaContext } from \"../safearea/SafeAreaContext\";\r\nimport { UiShowHideManager } from \"../utils/UiShowHideManager\";\r\nimport { StatusBarFieldId, StatusBarWidgetControl, StatusBarWidgetControlArgs } from \"./StatusBarWidgetControl\";\r\nimport { StatusMessage } from \"../messages/StatusMessageManager\";\r\nimport { StatusMessagesContainer } from \"../messages/StatusMessagesContainer\";\r\n\r\n// cspell:ignore safearea\r\n\r\n/** State for the [[StatusBar]] React component\r\n * @internal\r\n */\r\ninterface StatusBarState {\r\n  openWidget: StatusBarFieldId;\r\n  messages: ReadonlyArray<StatusMessage>;\r\n  activityMessageInfo: ActivityMessageEventArgs | undefined;\r\n  isActivityMessageVisible: boolean;\r\n  toastTarget: HTMLElement | null;\r\n}\r\n\r\n/** Properties for the [[StatusBar]] React component\r\n * @public\r\n */\r\nexport interface StatusBarProps extends CommonProps {\r\n  widgetControl?: StatusBarWidgetControl;\r\n  isInFooterMode: boolean;\r\n}\r\n\r\n/** Status Bar React component.\r\n * @public\r\n */\r\nexport class StatusBar extends React.Component<StatusBarProps, StatusBarState> {\r\n\r\n  /** @internal */\r\n  constructor(props: StatusBarProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      openWidget: null,\r\n      messages: MessageManager.activeMessageManager.messages,\r\n      activityMessageInfo: undefined,\r\n      isActivityMessageVisible: false,\r\n      toastTarget: null,\r\n    };\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    let footerSections: React.ReactNode = null;\r\n    const widgetControl = this.props.widgetControl;\r\n\r\n    // istanbul ignore else\r\n    if (widgetControl && widgetControl.getReactNode) {\r\n      footerSections = widgetControl.getReactNode({\r\n        isInFooterMode: this.props.isInFooterMode,\r\n        openWidget: this.state.openWidget,\r\n        toastTargetRef: this._handleToastTargetRef,\r\n        onOpenWidget: this._handleOpenWidget,\r\n      });\r\n    }\r\n\r\n    return (\r\n      <StatusBarContext.Provider value={{\r\n        isInFooterMode: this.props.isInFooterMode,\r\n        openWidget: this.state.openWidget,\r\n        toastTargetRef: this._handleToastTargetRef,\r\n        onOpenWidget: this._handleOpenWidget,\r\n      }}>\r\n        <SafeAreaContext.Consumer>\r\n          {(safeAreaInsets) => (\r\n            <Footer\r\n              className={this.props.className}\r\n              messages={this.getFooterMessages()}\r\n              isInFooterMode={this.props.isInFooterMode}\r\n              onMouseEnter={UiShowHideManager.handleWidgetMouseEnter}\r\n              safeAreaInsets={safeAreaInsets}\r\n              style={this.props.style}\r\n            >\r\n              {footerSections}\r\n            </Footer>\r\n          )}\r\n        </SafeAreaContext.Consumer>\r\n      </StatusBarContext.Provider>\r\n    );\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    MessageManager.onMessageAddedEvent.addListener(this._handleMessageAddedEvent);\r\n    MessageManager.onActivityMessageUpdatedEvent.addListener(this._handleActivityMessageUpdatedEvent);\r\n    MessageManager.onActivityMessageCancelledEvent.addListener(this._handleActivityMessageCancelledEvent);\r\n    MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent);\r\n\r\n    MessageManager.activeMessageManager.initialize();\r\n    MessageManager.updateMessages();\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    MessageManager.onMessageAddedEvent.removeListener(this._handleMessageAddedEvent);\r\n    MessageManager.onActivityMessageUpdatedEvent.removeListener(this._handleActivityMessageUpdatedEvent);\r\n    MessageManager.onActivityMessageCancelledEvent.removeListener(this._handleActivityMessageCancelledEvent);\r\n    MessageManager.onMessagesUpdatedEvent.removeListener(this._handleMessagesUpdatedEvent);\r\n  }\r\n\r\n  private _handleMessageAddedEvent = (_args: MessageAddedEventArgs) => {\r\n    this.setState({ messages: MessageManager.activeMessageManager.messages });\r\n  };\r\n\r\n  /** Respond to clearing the message list */\r\n  private _handleMessagesUpdatedEvent = () => {\r\n    this.setState({ messages: MessageManager.activeMessageManager.messages });\r\n  };\r\n\r\n  /**\r\n   * Sets state of the status bar to updated values reflecting activity progress.\r\n   * @param args  New values to set for ActivityMessage\r\n   */\r\n  private _handleActivityMessageUpdatedEvent = (args: ActivityMessageEventArgs) => {\r\n    this.setState((prevState) => ({\r\n      activityMessageInfo: args,\r\n      isActivityMessageVisible: args.restored ? true : prevState.isActivityMessageVisible,\r\n    }));\r\n  };\r\n\r\n  /**\r\n   * Hides ActivityMessage after cancellation\r\n   */\r\n  private _handleActivityMessageCancelledEvent = () => {\r\n    this.setState({\r\n      isActivityMessageVisible: false,\r\n    });\r\n  };\r\n\r\n  private getFooterMessages(): React.ReactNode {\r\n    if (!(this.state.activityMessageInfo && this.state.isActivityMessageVisible) && this.state.messages.length === 0)\r\n      return null;\r\n\r\n    return (\r\n      <StatusMessagesContainer\r\n        messages={this.state.messages}\r\n        activityMessageInfo={this.state.activityMessageInfo}\r\n        isActivityMessageVisible={this.state.isActivityMessageVisible}\r\n        toastTarget={this.state.toastTarget}\r\n        closeMessage={this._closeMessage}\r\n        cancelActivityMessage={this._cancelActivityMessage}\r\n        dismissActivityMessage={this._dismissActivityMessage}\r\n      />\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Ends canceled process and dismisses ActivityMessage\r\n   */\r\n  private _cancelActivityMessage = () => {\r\n    MessageManager.endActivityMessage(false);\r\n    this._dismissActivityMessage();\r\n  };\r\n\r\n  /**\r\n   * Dismisses ActivityMessage\r\n   */\r\n  private _dismissActivityMessage = () => {\r\n    this.setState({\r\n      isActivityMessageVisible: false,\r\n    });\r\n  };\r\n\r\n  private _handleOpenWidget = (openWidget: StatusBarFieldId) => {\r\n    this.setState({\r\n      openWidget,\r\n    });\r\n  };\r\n\r\n  private _closeMessage = (id: string) => {\r\n    MessageManager.activeMessageManager.remove(id);\r\n    MessageManager.updateMessages();\r\n  };\r\n\r\n  private _handleToastTargetRef = (toastTarget: HTMLElement | null) => {\r\n    this.setState({ toastTarget });\r\n  };\r\n}\r\n\r\n/** StatusBar With Space Between Items React functional component\r\n * @public\r\n */\r\nexport function StatusBarSpaceBetween(props: CommonDivProps) {\r\n  const { className, ...divProps } = props;\r\n  return <Div {...divProps} mainClassName={className ? className : \"uifw-statusbar-space-between\"} />;\r\n}\r\n\r\n/** StatusBar Left Section React functional component\r\n * @public\r\n */\r\nexport function StatusBarLeftSection(props: CommonDivProps) {\r\n  const { className, ...divProps } = props;\r\n  return <Div {...divProps} mainClassName={className ? className : \"uifw-statusbar-left\"} />;\r\n}\r\n\r\n/** StatusBar Center Section React functional component\r\n * @public\r\n */\r\nexport function StatusBarCenterSection(props: CommonDivProps) {\r\n  const { className, ...divProps } = props;\r\n  return <Div {...divProps} mainClassName={className ? className : \"uifw-statusbar-center\"} />;\r\n}\r\n\r\n/** StatusBar Right Section React functional component\r\n * @public\r\n */\r\nexport function StatusBarRightSection(props: CommonDivProps) {\r\n  const { className, ...divProps } = props;\r\n  return <Div {...divProps} mainClassName={className ? className : \"uifw-statusbar-right\"} />;\r\n}\r\n\r\n/** Context providing values for StatusFieldProps and MessageCenterFieldProps\r\n *  @internal\r\n */\r\nexport const StatusBarContext = React.createContext<StatusBarWidgetControlArgs>({ // eslint-disable-line @typescript-eslint/naming-convention\r\n  isInFooterMode: true,\r\n  onOpenWidget: /* istanbul ignore next */ () => { },\r\n  openWidget: \"\",\r\n  toastTargetRef: { current: null },\r\n});\r\n"]}

package/lib/esm/appui-react/statusbar/StatusBar.scss

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.uifw-statusbar-space-between {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.uifw-statusbar-left {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.uifw-statusbar-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.uifw-statusbar-right {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.uifw-statusbar-docked {
+  width: 100%;
+  background-color: $buic-background-statusbar;
+}
+
+.uifw-statusbar-item-container {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+}