@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/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/cjs/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/cjs/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/cjs/appui-react/statusbar/StatusBar.js

@@ -0,0 +1,168 @@
+"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.StatusBarContext = exports.StatusBarRightSection = exports.StatusBarCenterSection = exports.StatusBarLeftSection = exports.StatusBarSpaceBetween = exports.StatusBar = void 0;
+require("./StatusBar.scss");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const MessageManager_1 = require("../messages/MessageManager");
+const SafeAreaContext_1 = require("../safearea/SafeAreaContext");
+const UiShowHideManager_1 = require("../utils/UiShowHideManager");
+const StatusMessagesContainer_1 = require("../messages/StatusMessagesContainer");
+/** Status Bar React component.
+ * @public
+ */
+class StatusBar extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._handleMessageAddedEvent = (_args) => {
+            this.setState({ messages: MessageManager_1.MessageManager.activeMessageManager.messages });
+        };
+        /** Respond to clearing the message list */
+        this._handleMessagesUpdatedEvent = () => {
+            this.setState({ messages: MessageManager_1.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_1.MessageManager.endActivityMessage(false);
+            this._dismissActivityMessage();
+        };
+        /**
+         * Dismisses ActivityMessage
+         */
+        this._dismissActivityMessage = () => {
+            this.setState({
+                isActivityMessageVisible: false,
+            });
+        };
+        this._handleOpenWidget = (openWidget) => {
+            this.setState({
+                openWidget,
+            });
+        };
+        this._closeMessage = (id) => {
+            MessageManager_1.MessageManager.activeMessageManager.remove(id);
+            MessageManager_1.MessageManager.updateMessages();
+        };
+        this._handleToastTargetRef = (toastTarget) => {
+            this.setState({ toastTarget });
+        };
+        this.state = {
+            openWidget: null,
+            messages: MessageManager_1.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(exports.StatusBarContext.Provider, { value: {
+                isInFooterMode: this.props.isInFooterMode,
+                openWidget: this.state.openWidget,
+                toastTargetRef: this._handleToastTargetRef,
+                onOpenWidget: this._handleOpenWidget,
+            } },
+            React.createElement(SafeAreaContext_1.SafeAreaContext.Consumer, null, (safeAreaInsets) => (React.createElement(appui_layout_react_1.Footer, { className: this.props.className, messages: this.getFooterMessages(), isInFooterMode: this.props.isInFooterMode, onMouseEnter: UiShowHideManager_1.UiShowHideManager.handleWidgetMouseEnter, safeAreaInsets: safeAreaInsets, style: this.props.style }, footerSections)))));
+    }
+    componentDidMount() {
+        MessageManager_1.MessageManager.onMessageAddedEvent.addListener(this._handleMessageAddedEvent);
+        MessageManager_1.MessageManager.onActivityMessageUpdatedEvent.addListener(this._handleActivityMessageUpdatedEvent);
+        MessageManager_1.MessageManager.onActivityMessageCancelledEvent.addListener(this._handleActivityMessageCancelledEvent);
+        MessageManager_1.MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent);
+        MessageManager_1.MessageManager.activeMessageManager.initialize();
+        MessageManager_1.MessageManager.updateMessages();
+    }
+    componentWillUnmount() {
+        MessageManager_1.MessageManager.onMessageAddedEvent.removeListener(this._handleMessageAddedEvent);
+        MessageManager_1.MessageManager.onActivityMessageUpdatedEvent.removeListener(this._handleActivityMessageUpdatedEvent);
+        MessageManager_1.MessageManager.onActivityMessageCancelledEvent.removeListener(this._handleActivityMessageCancelledEvent);
+        MessageManager_1.MessageManager.onMessagesUpdatedEvent.removeListener(this._handleMessagesUpdatedEvent);
+    }
+    getFooterMessages() {
+        if (!(this.state.activityMessageInfo && this.state.isActivityMessageVisible) && this.state.messages.length === 0)
+            return null;
+        return (React.createElement(StatusMessagesContainer_1.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 }));
+    }
+}
+exports.StatusBar = StatusBar;
+/** StatusBar With Space Between Items React functional component
+ * @public
+ */
+function StatusBarSpaceBetween(props) {
+    const { className, ...divProps } = props;
+    return React.createElement(core_react_1.Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-space-between" });
+}
+exports.StatusBarSpaceBetween = StatusBarSpaceBetween;
+/** StatusBar Left Section React functional component
+ * @public
+ */
+function StatusBarLeftSection(props) {
+    const { className, ...divProps } = props;
+    return React.createElement(core_react_1.Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-left" });
+}
+exports.StatusBarLeftSection = StatusBarLeftSection;
+/** StatusBar Center Section React functional component
+ * @public
+ */
+function StatusBarCenterSection(props) {
+    const { className, ...divProps } = props;
+    return React.createElement(core_react_1.Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-center" });
+}
+exports.StatusBarCenterSection = StatusBarCenterSection;
+/** StatusBar Right Section React functional component
+ * @public
+ */
+function StatusBarRightSection(props) {
+    const { className, ...divProps } = props;
+    return React.createElement(core_react_1.Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-right" });
+}
+exports.StatusBarRightSection = StatusBarRightSection;
+/** Context providing values for StatusFieldProps and MessageCenterFieldProps
+ *  @internal
+ */
+exports.StatusBarContext = React.createContext({
+    isInFooterMode: true,
+    onOpenWidget: /* istanbul ignore next */ () => { },
+    openWidget: "",
+    toastTargetRef: { current: null },
+});
+//# sourceMappingURL=StatusBar.js.map

package/lib/cjs/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/cjs/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;
+}

package/lib/cjs/appui-react/statusbar/StatusBarComposer.d.ts

@@ -0,0 +1,44 @@
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import * as React from "react";
+import { CommonStatusBarItem } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+interface DockedStatusBarEntryContextArg {
+    readonly isOverflown: boolean;
+    readonly onResize: (w: number) => void;
+}
+/** @internal */
+export declare function useStatusBarEntry(): DockedStatusBarEntryContextArg;
+/** Properties of [[DockedStatusBarItem]] component.
+ * @internal future
+ */
+export interface StatusBarItemProps extends CommonProps {
+    /** Tool setting content. */
+    children?: React.ReactNode;
+}
+/** Used in [[StatusBarComposer]] component to display a statusbar item.
+ * @internal future
+ */
+export declare function DockedStatusBarItem(props: StatusBarItemProps): JSX.Element;
+/** Properties for the [[StatusBarComposer]] React components
+ * @public
+ */
+export interface StatusBarComposerProps extends CommonProps {
+    /** Status Bar items */
+    items: CommonStatusBarItem[];
+    /** CSS class name override for the overall Status Bar */
+    mainClassName?: string;
+    /** CSS class name override for the left section */
+    leftClassName?: string;
+    /** CSS class name override for the center section */
+    centerClassName?: string;
+    /** CSS class name override for the right section */
+    rightClassName?: string;
+}
+/** Component to load components into the [[StatusBar]].
+ * @public
+ */
+export declare function StatusBarComposer(props: StatusBarComposerProps): JSX.Element;
+export {};
+//# sourceMappingURL=StatusBarComposer.d.ts.map

package/lib/cjs/appui-react/statusbar/StatusBarComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBarComposer.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBarComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACoD,mBAAmB,EAE7E,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAoC,MAAM,mBAAmB,CAAC;AAuBlF,UAAU,8BAA8B;IACtC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAMD,gBAAgB;AAChB,wBAAgB,iBAAiB,mCAEhC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,eAkB5D;AAuHD;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,uBAAuB;IACvB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAE7B,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAiL9D"}