@itwin/appui-react 4.0.0-dev.2 → 4.0.0-dev.20

package/lib/cjs/appui-react/statusbar/Popup.js

@@ -0,0 +1,20 @@
+"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.StatusBarPopup = void 0;
+const React = require("react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+/** Popup component used in [[StatusBar]] component.
+ * @beta
+ */
+function StatusBarPopup(props) {
+    return (React.createElement(appui_layout_react_1.FooterPopup, { ...props }));
+}
+exports.StatusBarPopup = StatusBarPopup;
+//# sourceMappingURL=Popup.js.map

package/lib/cjs/appui-react/statusbar/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Popup.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAE/B,kEAAwD;AAExD;;GAEG;AACH,SAAgB,cAAc,CAAC,KAA0B;IACvD,OAAO,CACL,oBAAC,gCAAW,OACN,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAND,wCAMC","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 * as React from \"react\";\r\nimport { PopupProps } from \"@itwin/core-react\";\r\nimport { FooterPopup } from \"@itwin/appui-layout-react\";\r\n\r\n/** Popup component used in [[StatusBar]] component.\r\n * @beta\r\n */\r\nexport function StatusBarPopup(props: Partial<PopupProps>) {\r\n  return (\r\n    <FooterPopup\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/statusbar/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Separator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,+BAA+B;AAC/B,2CAAoC;AAGpC;;GAEG;AACH,SAAgB,kBAAkB,CAAC,KAAkB;IACnD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,0BAA0B,EAC1B,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC;AAXD,gDAWC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./Separator.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { CommonProps } from \"@itwin/core-react\";\n\n/** Component used to separate status fields in a status bar.\n * @public\n */\nexport function StatusBarSeparator(props: CommonProps) {\n  const className = classnames(\n    \"uifw-statusbar-separator\",\n    props.className\n  );\n  return (\n    <div\n      className={className}\n      style={props.style}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Separator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,+BAA+B;AAC/B,2CAAoC;AAGpC;;GAEG;AACH,SAAgB,kBAAkB,CAAC,KAAkB;IACnD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,0BAA0B,EAC1B,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC;AAXD,gDAWC","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 \"./Separator.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\n\r\n/** Component used to separate status fields in a status bar.\r\n * @public\r\n */\r\nexport function StatusBarSeparator(props: CommonProps) {\r\n  const className = classnames(\r\n    \"uifw-statusbar-separator\",\r\n    props.className\r\n  );\r\n  return (\r\n    <div\r\n      className={className}\r\n      style={props.style}\r\n    />\r\n  );\r\n}\r\n"]}

package/lib/cjs/appui-react/statusbar/Separator.scss

@@ -1,14 +1,12 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
-
-.uifw-statusbar-separator {
-  height: calc(100% - (#{$nz-footer-indicator-vertical-padding} * 2));
-  width: 1px;
-  filter: drop-shadow(1px 0 $buic-foreground-body-reverse);
-  margin: $nz-footer-indicator-vertical-padding 0;
-  background-color: $buic-foreground-disabled;
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.uifw-statusbar-separator {
+  height: calc(100% - (#{$nz-footer-indicator-vertical-padding} * 2));
+  width: 1px;
+  margin: $nz-footer-indicator-vertical-padding 0;
+  background-color: var(--iui-color-border-subtle);
+}

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

@@ -6,6 +6,7 @@ import * as React from "react";
 import { CommonDivProps, CommonProps } from "@itwin/core-react";
 import { ActivityMessageEventArgs } from "../messages/MessageManager";
 import { StatusBarWidgetControl } from "./StatusBarWidgetControl";
+import { StatusBarPopup } from "./Popup";
 /** State for the [[StatusBar]] React component
  * @internal
  */
@@ -16,6 +17,7 @@ interface StatusBarState {
  * @public
  */
 export interface StatusBarProps extends CommonProps {
+    children?: React.ReactNode;
     widgetControl?: StatusBarWidgetControl;
 }
 /** Status Bar React component.
@@ -59,5 +61,18 @@ export declare function StatusBarCenterSection(props: CommonDivProps): JSX.Eleme
  * @public
  */
 export declare function StatusBarRightSection(props: CommonDivProps): JSX.Element;
+/** Components used in a [[StatusBar]].
+ * @public
+ */
+export declare namespace StatusBar {
+    /** Field of a [[StatusBar]].
+     * @beta
+     */
+    const Field: React.ForwardRefExoticComponent<import("./Field").StatusBarFieldProps & React.RefAttributes<HTMLDivElement>>;
+    /** Popup of a [[StatusBar]].
+     * @beta
+     */
+    const Popup: typeof StatusBarPopup;
+}
 export {};
 //# sourceMappingURL=StatusBar.d.ts.map

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

@@ -1 +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,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAMlE;;GAEG;AACH,UAAU,cAAc;IACtB,mBAAmB,EAAE,wBAAwB,GAAG,SAAS,CAAC;CAC3D;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,aAAa,CAAC,EAAE,sBAAsB,CAAC;CACxC;AAUD;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC5E,OAAO,CAAC,QAAQ,CAA0B;IAE1C,gBAAgB;gBACJ,KAAK,EAAE,cAAc;IAQjB,MAAM,IAAI,KAAK,CAAC,SAAS;IAkBzB,iBAAiB;IASjB,oBAAoB;IAOpC,OAAO,CAAC,wBAAwB,CAQ9B;IAEF,OAAO,CAAC,eAAe,CAUrB;IAEF,2CAA2C;IAC3C,OAAO,CAAC,2BAA2B,CAEjC;IAEF;;;OAGG;IACH,OAAO,CAAC,kCAAkC,CAIxC;IAEF;;OAEG;IACH,OAAO,CAAC,oCAAoC,CAI1C;IAEF,OAAO,CAAC,aAAa,CAGnB;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"}
+{"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;AAE7G,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIzC;;GAEG;AACH,UAAU,cAAc;IACtB,mBAAmB,EAAE,wBAAwB,GAAG,SAAS,CAAC;CAC3D;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,sBAAsB,CAAC;CACxC;AAUD;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC5E,OAAO,CAAC,QAAQ,CAA0B;IAE1C,gBAAgB;gBACJ,KAAK,EAAE,cAAc;IAQjB,MAAM,IAAI,KAAK,CAAC,SAAS;IAmBzB,iBAAiB;IASjB,oBAAoB;IAOpC,OAAO,CAAC,wBAAwB,CAQ9B;IAEF,OAAO,CAAC,eAAe,CAUrB;IAEF,2CAA2C;IAC3C,OAAO,CAAC,2BAA2B,CAEjC;IAEF;;;OAGG;IACH,OAAO,CAAC,kCAAkC,CAIxC;IAEF;;OAEG;IACH,OAAO,CAAC,oCAAoC,CAI1C;IAEF,OAAO,CAAC,aAAa,CAGnB;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,yBAAiB,SAAS,CAAC;IACzB;;OAEG;IACI,MAAM,KAAK,8GAAiB,CAAC;IAEpC;;OAEG;IACI,MAAM,KAAK,uBAAiB,CAAC;CACrC"}

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

@@ -14,9 +14,11 @@ 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 SafeAreaHelpers_1 = require("../safearea/SafeAreaHelpers");
 const ActivityMessage_1 = require("../messages/ActivityMessage");
+const UiFramework_1 = require("../UiFramework");
+const Field_1 = require("./Field");
+const Popup_1 = require("./Popup");
 /** Status Bar React component.
  * @public
  */
@@ -75,10 +77,9 @@ class StatusBar extends React.Component {
         };
     }
     render() {
-        return (React.createElement(SafeAreaContext_1.SafeAreaContext.Consumer, null, (safeAreaInsets) => {
-            var _a, _b, _c;
-            return (React.createElement(appui_layout_react_1.Footer, { className: this.props.className, messages: React.createElement(ActivityMessage_1.ActivityMessageRenderer, null), onMouseEnter: UiShowHideManager_1.UiShowHideManager.handleWidgetMouseEnter, safeAreaInsets: (0, SafeAreaHelpers_1.toLayoutSafeAreaInsets)(safeAreaInsets), style: this.props.style }, (_c = (_b = (_a = this.props.widgetControl) === null || _a === void 0 ? void 0 : _a.getReactNode) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : null));
-        }));
+        return (React.createElement(SafeAreaContext_1.SafeAreaContext.Consumer, null, (safeAreaInsets) => (React.createElement(appui_layout_react_1.Footer, { className: this.props.className, messages: React.createElement(ActivityMessage_1.ActivityMessageRenderer, null), onMouseEnter: UiFramework_1.UiFramework.visibility.handleWidgetMouseEnter, safeAreaInsets: (0, SafeAreaHelpers_1.toLayoutSafeAreaInsets)(safeAreaInsets), style: this.props.style },
+            this.props.widgetControl?.getReactNode?.() ?? null,
+            this.props.children))));
     }
     componentDidMount() {
         MessageManager_1.MessageManager.onMessageAddedEvent.addListener(this._handleMessageAddedEvent);
@@ -127,4 +128,17 @@ function StatusBarRightSection(props) {
     return React.createElement(core_react_1.Div, { ...divProps, mainClassName: className ? className : "uifw-statusbar-right" });
 }
 exports.StatusBarRightSection = StatusBarRightSection;
+/** Components used in a [[StatusBar]].
+ * @public
+ */
+(function (StatusBar) {
+    /** Field of a [[StatusBar]].
+     * @beta
+     */
+    StatusBar.Field = Field_1.StatusBarField;
+    /** Popup of a [[StatusBar]].
+     * @beta
+     */
+    StatusBar.Popup = Popup_1.StatusBarPopup;
+})(StatusBar = exports.StatusBar || (exports.StatusBar = {}));
 //# sourceMappingURL=StatusBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBar.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./StatusBar.scss\";\nimport * as React from \"react\";\nimport { CommonDivProps, CommonProps, Div } from \"@itwin/core-react\";\nimport { Footer } from \"@itwin/appui-layout-react\";\nimport { ActivityMessageEventArgs, MessageAddedEventArgs, MessageManager } from \"../messages/MessageManager\";\nimport { SafeAreaContext } from \"../safearea/SafeAreaContext\";\nimport { UiShowHideManager } from \"../utils/UiShowHideManager\";\nimport { StatusBarWidgetControl } from \"./StatusBarWidgetControl\";\nimport { toLayoutSafeAreaInsets } from \"../safearea/SafeAreaHelpers\";\nimport { ActivityMessageRenderer } from \"../messages/ActivityMessage\";\n\n// cspell:ignore safearea\n\n/** State for the [[StatusBar]] React component\n * @internal\n */\ninterface StatusBarState {\n  activityMessageInfo: ActivityMessageEventArgs | undefined;\n}\n\n/** Properties for the [[StatusBar]] React component\n * @public\n */\nexport interface StatusBarProps extends CommonProps {\n  widgetControl?: StatusBarWidgetControl;\n}\n\n/** Message type for the [[StatusBar]] React component\n * @internal\n */\ninterface StatusBarMessage {\n  close: () => void;\n  id: string;\n}\n\n/** Status Bar React component.\n * @public\n */\nexport class StatusBar extends React.Component<StatusBarProps, StatusBarState> {\n  private messages: StatusBarMessage[] = [];\n\n  /** @internal */\n  constructor(props: StatusBarProps) {\n    super(props);\n\n    this.state = {\n      activityMessageInfo: undefined,\n    };\n  }\n\n  public override render(): React.ReactNode {\n    return (\n      <SafeAreaContext.Consumer>\n        {(safeAreaInsets) => (\n          <Footer\n            className={this.props.className}\n            messages={<ActivityMessageRenderer />}\n            onMouseEnter={UiShowHideManager.handleWidgetMouseEnter}\n            safeAreaInsets={toLayoutSafeAreaInsets(safeAreaInsets)}\n            style={this.props.style}\n          >\n            {this.props.widgetControl?.getReactNode?.() ?? null}\n          </Footer>\n        )}\n      </SafeAreaContext.Consumer>\n    );\n  }\n\n  public override componentDidMount() {\n    MessageManager.onMessageAddedEvent.addListener(this._handleMessageAddedEvent);\n    MessageManager.onActivityMessageUpdatedEvent.addListener(this._handleActivityMessageUpdatedEvent);\n    MessageManager.onActivityMessageCancelledEvent.addListener(this._handleActivityMessageCancelledEvent);\n    MessageManager.onMessagesUpdatedEvent.addListener(this._handleMessagesUpdatedEvent);\n\n    MessageManager.updateMessages();\n  }\n\n  public override componentWillUnmount() {\n    MessageManager.onMessageAddedEvent.removeListener(this._handleMessageAddedEvent);\n    MessageManager.onActivityMessageUpdatedEvent.removeListener(this._handleActivityMessageUpdatedEvent);\n    MessageManager.onActivityMessageCancelledEvent.removeListener(this._handleActivityMessageCancelledEvent);\n    MessageManager.onMessagesUpdatedEvent.removeListener(this._handleMessagesUpdatedEvent);\n  }\n\n  private _handleMessageAddedEvent = (_args: MessageAddedEventArgs) => {\n    this._updateMessages();\n    const messagesToAdd = MessageManager.activeMessageManager.messages.filter((msg) => !this.messages.find((m) => m.id === msg.id));\n    messagesToAdd.forEach((msg) => {\n      const displayedMessage = MessageManager.displayMessage(msg.messageDetails, { onRemove: () => this._closeMessage(msg.id) });\n      if (!!displayedMessage)\n        this.messages.push({ close: displayedMessage.close, id: msg.id });\n    });\n  };\n\n  private _updateMessages = () => {\n    const updatedMessages = [...this.messages];\n    this.messages.forEach((m) => {\n      if (!MessageManager.activeMessageManager.messages.some((msg) => m.id === msg.id)) {\n        m.close();\n        const index = updatedMessages.findIndex((msg) => msg.id === m.id);\n        updatedMessages.splice(index, 1);\n      }\n    });\n    this.messages = updatedMessages;\n  };\n\n  /** Respond to clearing the message list */\n  private _handleMessagesUpdatedEvent = () => {\n    this._updateMessages();\n  };\n\n  /**\n   * Sets state of the status bar to updated values reflecting activity progress.\n   * @param args  New values to set for ActivityMessage\n   */\n  private _handleActivityMessageUpdatedEvent = (args: ActivityMessageEventArgs) => {\n    this.setState({\n      activityMessageInfo: args,\n    });\n  };\n\n  /**\n   * Hides ActivityMessage after cancellation\n   */\n  private _handleActivityMessageCancelledEvent = () => {\n    this.setState({\n      activityMessageInfo: undefined,\n    });\n  };\n\n  private _closeMessage = (id: string) => {\n    MessageManager.activeMessageManager.remove(id);\n    MessageManager.updateMessages();\n  };\n}\n\n/** StatusBar With Space Between Items React functional component\n * @public\n */\nexport function StatusBarSpaceBetween(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return <Div {...divProps} mainClassName={className ? className : \"uifw-statusbar-space-between\"} />;\n}\n\n/** StatusBar Left Section React functional component\n * @public\n */\nexport function StatusBarLeftSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return <Div {...divProps} mainClassName={className ? className : \"uifw-statusbar-left\"} />;\n}\n\n/** StatusBar Center Section React functional component\n * @public\n */\nexport function StatusBarCenterSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return <Div {...divProps} mainClassName={className ? className : \"uifw-statusbar-center\"} />;\n}\n\n/** StatusBar Right Section React functional component\n * @public\n */\nexport function StatusBarRightSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return <Div {...divProps} mainClassName={className ? className : \"uifw-statusbar-right\"} />;\n}\n"]}
+{"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 { StatusBarWidgetControl } from \"./StatusBarWidgetControl\";\r\nimport { toLayoutSafeAreaInsets } from \"../safearea/SafeAreaHelpers\";\r\nimport { ActivityMessageRenderer } from \"../messages/ActivityMessage\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusBarField } from \"./Field\";\r\nimport { StatusBarPopup } from \"./Popup\";\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  activityMessageInfo: ActivityMessageEventArgs | undefined;\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  children?: React.ReactNode;\r\n  widgetControl?: StatusBarWidgetControl;\r\n}\r\n\r\n/** Message type for the [[StatusBar]] React component\r\n * @internal\r\n */\r\ninterface StatusBarMessage {\r\n  close: () => void;\r\n  id: string;\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  private messages: StatusBarMessage[] = [];\r\n\r\n  /** @internal */\r\n  constructor(props: StatusBarProps) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      activityMessageInfo: undefined,\r\n    };\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <SafeAreaContext.Consumer>\r\n        {(safeAreaInsets) => (\r\n          <Footer\r\n            className={this.props.className}\r\n            messages={<ActivityMessageRenderer />}\r\n            onMouseEnter={UiFramework.visibility.handleWidgetMouseEnter}\r\n            safeAreaInsets={toLayoutSafeAreaInsets(safeAreaInsets)}\r\n            style={this.props.style}\r\n          >\r\n            {this.props.widgetControl?.getReactNode?.() ?? null}\r\n            {this.props.children}\r\n          </Footer>\r\n        )}\r\n      </SafeAreaContext.Consumer>\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.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._updateMessages();\r\n    const messagesToAdd = MessageManager.activeMessageManager.messages.filter((msg) => !this.messages.find((m) => m.id === msg.id));\r\n    messagesToAdd.forEach((msg) => {\r\n      const displayedMessage = MessageManager.displayMessage(msg.messageDetails, { onRemove: () => this._closeMessage(msg.id) });\r\n      if (!!displayedMessage)\r\n        this.messages.push({ close: displayedMessage.close, id: msg.id });\r\n    });\r\n  };\r\n\r\n  private _updateMessages = () => {\r\n    const updatedMessages = [...this.messages];\r\n    this.messages.forEach((m) => {\r\n      if (!MessageManager.activeMessageManager.messages.some((msg) => m.id === msg.id)) {\r\n        m.close();\r\n        const index = updatedMessages.findIndex((msg) => msg.id === m.id);\r\n        updatedMessages.splice(index, 1);\r\n      }\r\n    });\r\n    this.messages = updatedMessages;\r\n  };\r\n\r\n  /** Respond to clearing the message list */\r\n  private _handleMessagesUpdatedEvent = () => {\r\n    this._updateMessages();\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({\r\n      activityMessageInfo: args,\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      activityMessageInfo: undefined,\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\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/** Components used in a [[StatusBar]].\r\n * @public\r\n */\r\nexport namespace StatusBar {\r\n  /** Field of a [[StatusBar]].\r\n   * @beta\r\n   */\r\n  export const Field = StatusBarField;\r\n\r\n  /** Popup of a [[StatusBar]].\r\n   * @beta\r\n   */\r\n  export const Popup = StatusBarPopup;\r\n}\r\n"]}

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

@@ -1,44 +1,42 @@
-/*---------------------------------------------------------------------------------------------
-* 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;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.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: var(--iui-color-background);
+}
+
+.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

@@ -2,8 +2,8 @@
  * @module StatusBar
  */
 import * as React from "react";
-import { CommonStatusBarItem } from "@itwin/appui-abstract";
 import { CommonProps } from "@itwin/core-react";
+import { StatusBarItem } from "./StatusBarItem";
 interface DockedStatusBarEntryContextArg {
     readonly isOverflown: boolean;
     readonly onResize: (w: number) => void;
@@ -29,7 +29,7 @@ export declare function DockedStatusBarItem(props: StatusBarItemProps): JSX.Elem
  */
 export interface StatusBarComposerProps extends CommonProps {
     /** Status Bar items */
-    items: CommonStatusBarItem[];
+    items: StatusBarItem[];
     /** CSS class name override for the overall Status Bar */
     mainClassName?: string;
     /** CSS class name override for the left section */

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

@@ -1 +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,EAA8B,MAAM,mBAAmB,CAAC;AAuB5E,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;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,eAqB5D;AAwID;;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,eAiM9D"}
+{"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;AAE/B,OAAO,EAAE,WAAW,EAA8B,MAAM,mBAAmB,CAAC;AAM5E,OAAO,EAA2F,aAAa,EAAwC,MAAM,iBAAiB,CAAC;AAmB/K,UAAU,8BAA8B;IACtC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAKD,gBAAgB;AAChB,wBAAgB,iBAAiB,mCAEhC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,eAqB5D;AAsID;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,uBAAuB;IACvB,KAAK,EAAE,aAAa,EAAE,CAAC;IAEvB,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,eAkM9D"}

package/lib/cjs/appui-react/statusbar/StatusBarComposer.js

@@ -21,18 +21,19 @@ const StatusBarItem_1 = require("./StatusBarItem");
 const useDefaultStatusBarItems_1 = require("./useDefaultStatusBarItems");
 const useUiItemsProviderStatusBarItems_1 = require("./useUiItemsProviderStatusBarItems");
 const LabelIndicator_1 = require("../statusbar/LabelIndicator");
+const StatusBarItemsManager_1 = require("./StatusBarItemsManager");
+const isProviderItem_1 = require("../ui-items-provider/isProviderItem");
 /** Private  function to generate a value that will allow the proper order to be maintained when items are placed in overflow panel */
 function getCombinedSectionItemPriority(item) {
     let sectionValue = 0;
-    if (item.section === appui_abstract_1.StatusBarSection.Center)
+    if (item.section === StatusBarItem_1.StatusBarSection.Center)
         sectionValue = 100000;
-    else if (item.section === appui_abstract_1.StatusBarSection.Context)
+    else if (item.section === StatusBarItem_1.StatusBarSection.Context)
         sectionValue = 200000;
-    else if (item.section === appui_abstract_1.StatusBarSection.Right)
+    else if (item.section === StatusBarItem_1.StatusBarSection.Right)
         sectionValue = 300000;
     return sectionValue + item.itemPriority;
 }
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const DockedStatusBarEntryContext = React.createContext(null);
 DockedStatusBarEntryContext.displayName = "nz:DockedStatusBarEntryContext";
 /** @internal */
@@ -79,15 +80,13 @@ function useStatusBarItemSyncEffect(itemsManager, syncIdsOfInterest) {
         };
     }, [itemsManager, itemsManager.items, syncIdsOfInterest]);
 }
-/** function to produce a StatusBarItem component from an AbstractStatusBarLabelItem */
-function generateActionStatusLabelItem(item) {
-    const label = appui_abstract_1.ConditionalStringValue.getValue(item.label);
-    return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: item.icon, label: label }));
+function StatusBarLabelItemComponent(props) {
+    const label = appui_abstract_1.ConditionalStringValue.getValue(props.label);
+    return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: props.icon, label: label }));
 }
-/** function to produce a StatusBarItem component from an AbstractStatusBarActionItem */
-function generateActionStatusBarItem(item) {
-    const title = appui_abstract_1.ConditionalStringValue.getValue(item.tooltip);
-    return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { title: title, onClick: item.execute, iconSpec: item.icon }));
+function StatusBarActionItemComponent(props) {
+    const title = appui_abstract_1.ConditionalStringValue.getValue(props.tooltip);
+    return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { title: title, onClick: props.execute, iconSpec: props.icon }));
 }
 /** local function to combine items from Stage and from Extensions */
 function combineItems(stageItems, addonItems) {
@@ -155,7 +154,7 @@ function isItemInOverflow(id, overflowItemIds) {
  */
 function StatusBarComposer(props) {
     const { className, style, items, mainClassName, leftClassName, centerClassName, rightClassName } = props;
-    const [defaultItemsManager, setDefaultItemsManager] = React.useState(() => new appui_abstract_1.StatusBarItemsManager(items));
+    const [defaultItemsManager, setDefaultItemsManager] = React.useState(() => new StatusBarItemsManager_1.StatusBarItemsManager(items));
     const [isOverflowPanelOpen, setIsOverflowPanelOpen] = React.useState(false);
     const containerWidth = React.useRef(undefined);
     const isInitialMount = React.useRef(true);
@@ -163,15 +162,15 @@ function StatusBarComposer(props) {
         if (isInitialMount.current)
             isInitialMount.current = false;
         else {
-            setDefaultItemsManager(new appui_abstract_1.StatusBarItemsManager(items));
+            setDefaultItemsManager(new StatusBarItemsManager_1.StatusBarItemsManager(items));
         }
     }, [items]);
     const defaultItems = (0, useDefaultStatusBarItems_1.useDefaultStatusBarItems)(defaultItemsManager);
-    const syncIdsOfInterest = React.useMemo(() => appui_abstract_1.StatusBarItemsManager.getSyncIdsOfInterest(defaultItems), [defaultItems]);
+    const syncIdsOfInterest = React.useMemo(() => StatusBarItemsManager_1.StatusBarItemsManager.getSyncIdsOfInterest(defaultItems), [defaultItems]);
     useStatusBarItemSyncEffect(defaultItemsManager, syncIdsOfInterest);
-    const [addonItemsManager] = React.useState(() => new appui_abstract_1.StatusBarItemsManager());
+    const [addonItemsManager] = React.useState(() => new StatusBarItemsManager_1.StatusBarItemsManager());
     const addonItems = (0, useUiItemsProviderStatusBarItems_1.useUiItemsProviderStatusBarItems)(addonItemsManager);
-    const addonSyncIdsOfInterest = React.useMemo(() => appui_abstract_1.StatusBarItemsManager.getSyncIdsOfInterest(addonItems), [addonItems]);
+    const addonSyncIdsOfInterest = React.useMemo(() => StatusBarItemsManager_1.StatusBarItemsManager.getSyncIdsOfInterest(addonItems), [addonItems]);
     useStatusBarItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);
     const statusBarItems = React.useMemo(() => combineItems(defaultItems, addonItems), [defaultItems, addonItems]);
     const entryWidths = React.useRef(new Map());
@@ -208,38 +207,39 @@ function StatusBarComposer(props) {
     }, [calculateOverflow]);
     const getSectionName = (section) => {
         switch (section) {
-            case appui_abstract_1.StatusBarSection.Center:
-            case appui_abstract_1.StatusBarSection.Stage:
+            case StatusBarItem_1.StatusBarSection.Center:
+            case StatusBarItem_1.StatusBarSection.Stage:
                 return "status-bar-center";
-            case appui_abstract_1.StatusBarSection.Context:
+            case StatusBarItem_1.StatusBarSection.Context:
                 return "status-bar-right-start";
-            case appui_abstract_1.StatusBarSection.Right:
-            case appui_abstract_1.StatusBarSection.Selection:
+            case StatusBarItem_1.StatusBarSection.Right:
+            case StatusBarItem_1.StatusBarSection.Selection:
                 return "status-bar-right-end";
-            case appui_abstract_1.StatusBarSection.Left:
-            case appui_abstract_1.StatusBarSection.Message:
+            case StatusBarItem_1.StatusBarSection.Left:
+            case StatusBarItem_1.StatusBarSection.Message:
                 return "status-bar-left";
         }
     };
     /** generate a wrapped status bar entry that will report its size. */
-    const getComponent = React.useCallback((item, key, itemPriority, section, providerId) => {
+    const getComponent = React.useCallback((item, key, itemPriority, section) => {
+        const providerId = (0, isProviderItem_1.isProviderItem)(item) ? item.providerId : undefined;
         return (React.createElement(DockedStatusBarEntry, { key: key, entryKey: key, getOnResize: handleEntryResize },
             React.createElement(DockedStatusBarItem, { key: key, itemId: item.id, itemPriority: itemPriority, providerId: providerId, section: getSectionName(section) },
-                (0, StatusBarItem_1.isStatusBarItem)(item) && item.reactNode,
-                (0, appui_abstract_1.isAbstractStatusBarActionItem)(item) && generateActionStatusBarItem(item),
-                (0, appui_abstract_1.isAbstractStatusBarLabelItem)(item) && generateActionStatusLabelItem(item))));
+                (0, StatusBarItem_1.isStatusBarCustomItem)(item) && item.content,
+                (0, StatusBarItem_1.isStatusBarActionItem)(item) && React.createElement(StatusBarActionItemComponent, { ...item }),
+                (0, StatusBarItem_1.isStatusBarLabelItem)(item) && React.createElement(StatusBarLabelItemComponent, { ...item }))));
     }, [handleEntryResize]);
     const getSectionItems = React.useCallback((section) => {
         const sectionItems = statusBarItems
             .filter((item) => item.section === section && !isItemInOverflow(item.id, overflown) && !appui_abstract_1.ConditionalBooleanValue.getValue(item.isHidden))
             .sort((a, b) => a.itemPriority - b.itemPriority);
-        return sectionItems.map((sectionItem) => (React.createElement(React.Fragment, { key: sectionItem.id }, getComponent(sectionItem, sectionItem.id, sectionItem.itemPriority, sectionItem.section, sectionItem.providerId))));
+        return sectionItems.map((sectionItem) => (React.createElement(React.Fragment, { key: sectionItem.id }, getComponent(sectionItem, sectionItem.id, sectionItem.itemPriority, sectionItem.section))));
     }, [statusBarItems, overflown, getComponent]);
     const getOverflowItems = React.useCallback(() => {
         const itemsInOverflow = statusBarItems
             .filter((item) => isItemInOverflow(item.id, overflown) && !appui_abstract_1.ConditionalBooleanValue.getValue(item.isHidden))
             .sort((a, b) => getCombinedSectionItemPriority(a) - getCombinedSectionItemPriority(b)).reverse();
-        return itemsInOverflow.map((item) => (React.createElement(React.Fragment, { key: item.id }, getComponent(item, item.id, item.itemPriority, item.section, item.providerId))));
+        return itemsInOverflow.map((item) => (React.createElement(React.Fragment, { key: item.id }, getComponent(item, item.id, item.itemPriority, item.section))));
     }, [statusBarItems, overflown, getComponent]);
     const handleContainerResize = React.useCallback((w) => {
         if ((undefined === containerWidth.current) || Math.abs(containerWidth.current - w) > 2) {
@@ -259,10 +259,10 @@ function StatusBarComposer(props) {
     const handleOnClose = React.useCallback(() => {
         setIsOverflowPanelOpen(false);
     }, []);
-    const leftItems = React.useMemo(() => getSectionItems(appui_abstract_1.StatusBarSection.Left), [getSectionItems]);
-    const centerItems = React.useMemo(() => getSectionItems(appui_abstract_1.StatusBarSection.Center), [getSectionItems]);
-    const rightItems = React.useMemo(() => getSectionItems(appui_abstract_1.StatusBarSection.Right), [getSectionItems]);
-    const contextItems = React.useMemo(() => getSectionItems(appui_abstract_1.StatusBarSection.Context), [getSectionItems]);
+    const leftItems = React.useMemo(() => getSectionItems(StatusBarItem_1.StatusBarSection.Left), [getSectionItems]);
+    const centerItems = React.useMemo(() => getSectionItems(StatusBarItem_1.StatusBarSection.Center), [getSectionItems]);
+    const rightItems = React.useMemo(() => getSectionItems(StatusBarItem_1.StatusBarSection.Right), [getSectionItems]);
+    const contextItems = React.useMemo(() => getSectionItems(StatusBarItem_1.StatusBarSection.Context), [getSectionItems]);
     const overflowItems = React.useMemo(() => getOverflowItems(), [getOverflowItems]);
     const containerClassName = (0, classnames_1.default)("uifw-statusbar-docked", className);
     return (React.createElement("div", { className: containerClassName, ref: refs, style: style, role: "presentation" },