@itwin/appui-react 4.13.3 → 4.14.0

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

@@ -8,13 +8,13 @@ import "./Overflow.scss";
  * @internal
  */
 export interface StatusBarOverflowProps extends CommonProps {
-    /** Function called when button is clicked. */
-    onClick?: () => void;
     /** Function called when button is resized. */
-    onResize?: (w: number) => void;
+    onResize: (w: number) => void;
+    /** Fields to be placed in the overflow panel. */
+    overflowItems: React.ReactNode[];
 }
 /** Entry point to overflow status bar items of [[StatusBarComposer]] component.
  * @internal
  */
-export declare const StatusBarOverflow: React.ForwardRefExoticComponent<StatusBarOverflowProps & React.RefAttributes<HTMLDivElement>>;
+export declare function StatusBarOverflow(props: StatusBarOverflowProps): React.JSX.Element;
 //# sourceMappingURL=Overflow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,iBAAiB,CAAC;AAGzB;;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;AACH,eAAO,MAAM,iBAAiB,+FAwB5B,CAAC"}
+{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Overflow.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,iDAAiD;IACjD,aAAa,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAClC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBA2B9D"}

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

@@ -5,23 +5,22 @@
 /** @packageDocumentation
  * @module StatusBar
  */
-import { useRefs, useResizeObserver } from "@itwin/core-react";
-import classnames from "classnames";
+import { useResizeObserver } from "@itwin/core-react";
 import * as React from "react";
-import { Ellipsis } from "../layout/base/Ellipsis";
-import "./Overflow.scss";
 import { useTranslation } from "../hooks/useTranslation";
+import { IconButton } from "@itwin/itwinui-react";
+import { SvgMore } from "@itwin/itwinui-icons-react";
+import { StatusBarPopover } from "./popup/StatusBarPopover";
+import "./Overflow.scss";
 /** Entry point to overflow status bar items of [[StatusBarComposer]] component.
  * @internal
  */
-export const StatusBarOverflow = React.forwardRef(function StatusBarOverflow(props, ref) {
+export function StatusBarOverflow(props) {
+    const { overflowItems, onResize, ...otherProps } = props;
     const { translate } = useTranslation();
-    const roRef = useResizeObserver(props.onResize);
-    const refs = useRefs(roRef, ref);
-    const className = classnames("uifw-statusbar-overflow", props.className);
-    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: translate("statusBar.overflow") },
-        React.createElement(Ellipsis, null)));
-});
+    const roRef = useResizeObserver(onResize);
+    return (React.createElement(StatusBarPopover, { content: React.createElement("div", { className: "uifw-statusbar-overflow-panel", "data-testid": "uifw-statusbar-overflow-panel" }, overflowItems) },
+        React.createElement(IconButton, { ...otherProps, ref: roRef, title: translate("statusBar.overflow"), styleType: "borderless" },
+            React.createElement(SvgMore, null))));
+}
 //# sourceMappingURL=Overflow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Overflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAYzD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAG/C,SAAS,iBAAiB,CAAC,KAAK,EAAE,GAAG;IACrC,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,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,CAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEzE,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,SAAS,CAAC,oBAAoB,CAAC;QAEtC,oBAAC,QAAQ,OAAG,CACR,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","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 type { CommonProps } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Ellipsis } from \"../layout/base/Ellipsis\";\nimport \"./Overflow.scss\";\nimport { useTranslation } from \"../hooks/useTranslation\";\n\n/** Properties of [[StatusBarOverflow]] component.\n * @internal\n */\nexport interface StatusBarOverflowProps extends CommonProps {\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Function called when button is resized. */\n  onResize?: (w: number) => void;\n}\n\n/** Entry point to overflow status bar items of [[StatusBarComposer]] component.\n * @internal\n */\nexport const StatusBarOverflow = React.forwardRef<\n  HTMLDivElement,\n  StatusBarOverflowProps\n>(function StatusBarOverflow(props, ref) {\n  const { translate } = useTranslation();\n\n  const roRef = useResizeObserver<HTMLDivElement>(props.onResize);\n  const refs = useRefs(roRef, ref);\n  const className = classnames(\"uifw-statusbar-overflow\", props.className);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <div\n      className={className}\n      onClick={props.onClick}\n      ref={refs}\n      style={props.style}\n      role=\"button\"\n      tabIndex={-1}\n      title={translate(\"statusBar.overflow\")}\n    >\n      <Ellipsis />\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Overflow.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,iBAAiB,CAAC;AAYzB;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IAEvC,MAAM,KAAK,GAAG,iBAAiB,CAAiB,QAAQ,CAAC,CAAC;IAE1D,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EACL,6BACE,SAAS,EAAC,+BAA+B,iBAC7B,+BAA+B,IAE1C,aAAa,CACV;QAGR,oBAAC,UAAU,OACL,UAAU,EACd,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,SAAS,CAAC,oBAAoB,CAAC,EACtC,SAAS,EAAC,YAAY;YAEtB,oBAAC,OAAO,OAAG,CACA,CACI,CACpB,CAAC;AACJ,CAAC","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 type { CommonProps } from \"@itwin/core-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { useTranslation } from \"../hooks/useTranslation\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { StatusBarPopover } from \"./popup/StatusBarPopover\";\nimport \"./Overflow.scss\";\n\n/** Properties of [[StatusBarOverflow]] component.\n * @internal\n */\nexport interface StatusBarOverflowProps extends CommonProps {\n  /** Function called when button is resized. */\n  onResize: (w: number) => void;\n  /** Fields to be placed in the overflow panel. */\n  overflowItems: React.ReactNode[];\n}\n\n/** Entry point to overflow status bar items of [[StatusBarComposer]] component.\n * @internal\n */\nexport function StatusBarOverflow(props: StatusBarOverflowProps) {\n  const { overflowItems, onResize, ...otherProps } = props;\n  const { translate } = useTranslation();\n\n  const roRef = useResizeObserver<HTMLDivElement>(onResize);\n\n  return (\n    <StatusBarPopover\n      content={\n        <div\n          className=\"uifw-statusbar-overflow-panel\"\n          data-testid=\"uifw-statusbar-overflow-panel\"\n        >\n          {overflowItems}\n        </div>\n      }\n    >\n      <IconButton\n        {...otherProps}\n        ref={roRef}\n        title={translate(\"statusBar.overflow\")}\n        styleType=\"borderless\"\n      >\n        <SvgMore />\n      </IconButton>\n    </StatusBarPopover>\n  );\n}\n"]}

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

@@ -2,27 +2,14 @@
  * 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;
+.uifw-statusbar-overflow-panel {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  cursor: pointer;
-  flex-shrink: 0;
+  flex-direction: column;
+  padding: var(--iui-size-xs);
+  gap: var(--iui-size-2xs);
 
-  &:hover {
-    background: $buic-background-2;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &.nz-hidden {
-    visibility: hidden;
+  .uifw-statusBar-separator {
+    display: none;
   }
 }

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

@@ -12,7 +12,7 @@ import classnames from "classnames";
  * @public
  */
 export function StatusBarSeparator(props) {
-    const className = classnames("uifw-statusbar-separator", props.className);
+    const className = classnames("uifw-statusBar-separator", props.className);
     return React.createElement("div", { className: className, style: props.style });
 }
 //# sourceMappingURL=Separator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Separator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAkB;IACnD,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;AAC3D,CAAC","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 type { 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(\"uifw-statusbar-separator\", props.className);\n  return <div className={className} style={props.style} />;\n}\n"]}
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/Separator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAkB;IACnD,MAAM,SAAS,GAAG,UAAU,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;AAC3D,CAAC","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 type { 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(\"uifw-statusBar-separator\", props.className);\n  return <div className={className} style={props.style} />;\n}\n"]}

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

@@ -2,11 +2,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../layout/footer/variables";
 
-.uifw-statusbar-separator {
-  height: calc(100% - (#{$nz-footer-indicator-vertical-padding} * 2));
+.uifw-statusBar-separator {
+  height: calc(100% - 6px);
   width: 1px;
-  margin: $nz-footer-indicator-vertical-padding 0;
+  margin: 3px 0;
   background-color: var(--iui-color-border-subtle);
 }

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

@@ -15,6 +15,7 @@ export interface StatusBarProps extends CommonProps {
 }
 /** Status Bar React component.
  * @public
+ * @deprecated in 4.13.x. Use {@link StatusBarComposer} instead.
  */
 export declare function StatusBar(props: StatusBarProps): React.JSX.Element;
 /** StatusBar With Space Between Items React functional component
@@ -35,14 +36,17 @@ export declare function StatusBarCenterSection(props: CommonDivProps): React.JSX
 export declare function StatusBarRightSection(props: CommonDivProps): React.JSX.Element;
 /** Components used in a [[StatusBar]].
  * @public
+ * @deprecated in 4.13.x. Please use components directly.
  */
 export declare namespace StatusBar {
     /** Field of a [[StatusBar]].
      * @beta
+     * @deprecated in 4.13.x. Use [iTwinUI Button](https://itwinui.bentley.com/docs/button) instead.
      */
     const Field: React.ForwardRefExoticComponent<import("./Field").StatusBarFieldProps & React.RefAttributes<HTMLDivElement>>;
     /** Popup of a [[StatusBar]].
      * @beta
+     * @deprecated in 4.13.x. Use `StatusBarPopover` instead.
      */
     const Popup: typeof StatusBarPopup;
 }

package/lib/esm/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,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAIvE;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,sBAAsB,CAAC;CACxC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAmB9C;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,qBAS1D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,qBASzD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,qBAS3D;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,qBAS1D;AAED;;GAEG;AACH,yBAAiB,SAAS,CAAC;IACzB;;OAEG;IACI,MAAM,KAAK,8GAAiB,CAAC;IAEpC;;OAEG;IACI,MAAM,KAAK,uBAAiB,CAAC;CACrC"}
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAKvE;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,sBAAsB,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAmB9C;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,qBAS1D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,qBASzD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,qBAS3D;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,qBAS1D;AAED;;;GAGG;AACH,yBAAiB,SAAS,CAAC;IACzB;;;OAGG;IAEI,MAAM,KAAK,8GAAiB,CAAC;IAEpC;;;OAGG;IAEI,MAAM,KAAK,uBAAiB,CAAC;CACrC"}

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

@@ -17,6 +17,7 @@ import { SafeAreaInsetsHelpers } from "../layout/base/SafeAreaInsets";
 import { DockedBar } from "../widget-panels/DockedBar";
 /** Status Bar React component.
  * @public
+ * @deprecated in 4.13.x. Use {@link StatusBarComposer} instead.
  */
 export function StatusBar(props) {
     const safeAreaInsets = React.useContext(SafeAreaContext);
@@ -63,15 +64,20 @@ export function StatusBarRightSection(props) {
 }
 /** Components used in a [[StatusBar]].
  * @public
+ * @deprecated in 4.13.x. Please use components directly.
  */
 (function (StatusBar) {
     /** Field of a [[StatusBar]].
      * @beta
+     * @deprecated in 4.13.x. Use [iTwinUI Button](https://itwinui.bentley.com/docs/button) instead.
      */
+    // eslint-disable-next-line deprecation/deprecation
     StatusBar.Field = StatusBarField;
     /** Popup of a [[StatusBar]].
      * @beta
+     * @deprecated in 4.13.x. Use `StatusBarPopover` instead.
      */
+    // eslint-disable-next-line deprecation/deprecation
     StatusBar.Popup = StatusBarPopup;
 })(StatusBar || (StatusBar = {}));
 //# sourceMappingURL=StatusBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAUvD;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,UAAU,CAC1B,gBAAgB,EAChB,cAAc,IAAI,qBAAqB,CAAC,gBAAgB,CAAC,cAAc,CAAC,EACxE,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,YAAY,EAAE,WAAW,CAAC,UAAU,CAAC,sBAAsB;QAE1D,KAAK,CAAC,aAAa,EAAE,YAAY,EAAE,EAAE,IAAI,IAAI;QAC7C,KAAK,CAAC,QAAQ,CACL,CACb,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAqB;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO;IACL,mDAAmD;IACnD,oBAAC,GAAG,OACE,QAAQ,EACZ,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,GACrE,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAqB;IACxD,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO;IACL,mDAAmD;IACnD,oBAAC,GAAG,OACE,QAAQ,EACZ,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,GAC5D,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAC,KAAqB;IAC1D,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO;IACL,mDAAmD;IACnD,oBAAC,GAAG,OACE,QAAQ,EACZ,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,GAC9D,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAqB;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO;IACL,mDAAmD;IACnD,oBAAC,GAAG,OACE,QAAQ,EACZ,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,sBAAsB,GAC7D,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,WAAiB,SAAS;IACxB;;OAEG;IACU,eAAK,GAAG,cAAc,CAAC;IAEpC;;OAEG;IACU,eAAK,GAAG,cAAc,CAAC;AACtC,CAAC,EAVgB,SAAS,KAAT,SAAS,QAUzB","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 type { CommonDivProps, CommonProps } from \"@itwin/core-react\";\nimport { Div } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { UiFramework } from \"../UiFramework\";\nimport { SafeAreaContext } from \"../safearea/SafeAreaContext\";\nimport { StatusBarField } from \"./Field\";\nimport { StatusBarPopup } from \"./popup/Popup\";\nimport \"./StatusBar.scss\";\nimport type { StatusBarWidgetControl } from \"./StatusBarWidgetControl\";\nimport { SafeAreaInsetsHelpers } from \"../layout/base/SafeAreaInsets\";\nimport { DockedBar } from \"../widget-panels/DockedBar\";\n\n/** Properties for the [[StatusBar]] React component\n * @public\n */\nexport interface StatusBarProps extends CommonProps {\n  children?: React.ReactNode;\n  widgetControl?: StatusBarWidgetControl;\n}\n\n/** Status Bar React component.\n * @public\n */\nexport function StatusBar(props: StatusBarProps) {\n  const safeAreaInsets = React.useContext(SafeAreaContext);\n  const className = classnames(\n    \"uifw-statusBar\",\n    safeAreaInsets && SafeAreaInsetsHelpers.getCssClassNames(safeAreaInsets),\n    props.className\n  );\n\n  return (\n    <DockedBar\n      placement=\"bottom\"\n      className={className}\n      style={props.style}\n      onMouseEnter={UiFramework.visibility.handleWidgetMouseEnter}\n    >\n      {props.widgetControl?.getReactNode?.() ?? null}\n      {props.children}\n    </DockedBar>\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 (\n    // eslint-disable-next-line deprecation/deprecation\n    <Div\n      {...divProps}\n      mainClassName={className ? className : \"uifw-statusbar-space-between\"}\n    />\n  );\n}\n\n/** StatusBar Left Section React functional component\n * @public\n */\nexport function StatusBarLeftSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return (\n    // eslint-disable-next-line deprecation/deprecation\n    <Div\n      {...divProps}\n      mainClassName={className ? className : \"uifw-statusbar-left\"}\n    />\n  );\n}\n\n/** StatusBar Center Section React functional component\n * @public\n */\nexport function StatusBarCenterSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return (\n    // eslint-disable-next-line deprecation/deprecation\n    <Div\n      {...divProps}\n      mainClassName={className ? className : \"uifw-statusbar-center\"}\n    />\n  );\n}\n\n/** StatusBar Right Section React functional component\n * @public\n */\nexport function StatusBarRightSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return (\n    // eslint-disable-next-line deprecation/deprecation\n    <Div\n      {...divProps}\n      mainClassName={className ? className : \"uifw-statusbar-right\"}\n    />\n  );\n}\n\n/** Components used in a [[StatusBar]].\n * @public\n */\nexport namespace StatusBar {\n  /** Field of a [[StatusBar]].\n   * @beta\n   */\n  export const Field = StatusBarField;\n\n  /** Popup of a [[StatusBar]].\n   * @beta\n   */\n  export const Popup = StatusBarPopup;\n}\n"]}
+{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAWvD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,UAAU,CAC1B,gBAAgB,EAChB,cAAc,IAAI,qBAAqB,CAAC,gBAAgB,CAAC,cAAc,CAAC,EACxE,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,YAAY,EAAE,WAAW,CAAC,UAAU,CAAC,sBAAsB;QAE1D,KAAK,CAAC,aAAa,EAAE,YAAY,EAAE,EAAE,IAAI,IAAI;QAC7C,KAAK,CAAC,QAAQ,CACL,CACb,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAqB;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO;IACL,mDAAmD;IACnD,oBAAC,GAAG,OACE,QAAQ,EACZ,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,GACrE,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAqB;IACxD,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO;IACL,mDAAmD;IACnD,oBAAC,GAAG,OACE,QAAQ,EACZ,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,GAC5D,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,sBAAsB,CAAC,KAAqB;IAC1D,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO;IACL,mDAAmD;IACnD,oBAAC,GAAG,OACE,QAAQ,EACZ,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,GAC9D,CACH,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAqB;IACzD,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO;IACL,mDAAmD;IACnD,oBAAC,GAAG,OACE,QAAQ,EACZ,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,sBAAsB,GAC7D,CACH,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,WAAiB,SAAS;IACxB;;;OAGG;IACH,mDAAmD;IACtC,eAAK,GAAG,cAAc,CAAC;IAEpC;;;OAGG;IACH,mDAAmD;IACtC,eAAK,GAAG,cAAc,CAAC;AACtC,CAAC,EAdgB,SAAS,KAAT,SAAS,QAczB","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 type { CommonDivProps, CommonProps } from \"@itwin/core-react\";\nimport { Div } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { UiFramework } from \"../UiFramework\";\nimport { SafeAreaContext } from \"../safearea/SafeAreaContext\";\nimport { StatusBarField } from \"./Field\";\nimport { StatusBarPopup } from \"./popup/Popup\";\nimport \"./StatusBar.scss\";\nimport type { StatusBarWidgetControl } from \"./StatusBarWidgetControl\";\nimport { SafeAreaInsetsHelpers } from \"../layout/base/SafeAreaInsets\";\nimport { DockedBar } from \"../widget-panels/DockedBar\";\nimport { StatusBarComposer } from \"./StatusBarComposer\";\n\n/** Properties for the [[StatusBar]] React component\n * @public\n */\nexport interface StatusBarProps extends CommonProps {\n  children?: React.ReactNode;\n  widgetControl?: StatusBarWidgetControl;\n}\n\n/** Status Bar React component.\n * @public\n * @deprecated in 4.13.x. Use {@link StatusBarComposer} instead.\n */\nexport function StatusBar(props: StatusBarProps) {\n  const safeAreaInsets = React.useContext(SafeAreaContext);\n  const className = classnames(\n    \"uifw-statusBar\",\n    safeAreaInsets && SafeAreaInsetsHelpers.getCssClassNames(safeAreaInsets),\n    props.className\n  );\n\n  return (\n    <DockedBar\n      placement=\"bottom\"\n      className={className}\n      style={props.style}\n      onMouseEnter={UiFramework.visibility.handleWidgetMouseEnter}\n    >\n      {props.widgetControl?.getReactNode?.() ?? null}\n      {props.children}\n    </DockedBar>\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 (\n    // eslint-disable-next-line deprecation/deprecation\n    <Div\n      {...divProps}\n      mainClassName={className ? className : \"uifw-statusbar-space-between\"}\n    />\n  );\n}\n\n/** StatusBar Left Section React functional component\n * @public\n */\nexport function StatusBarLeftSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return (\n    // eslint-disable-next-line deprecation/deprecation\n    <Div\n      {...divProps}\n      mainClassName={className ? className : \"uifw-statusbar-left\"}\n    />\n  );\n}\n\n/** StatusBar Center Section React functional component\n * @public\n */\nexport function StatusBarCenterSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return (\n    // eslint-disable-next-line deprecation/deprecation\n    <Div\n      {...divProps}\n      mainClassName={className ? className : \"uifw-statusbar-center\"}\n    />\n  );\n}\n\n/** StatusBar Right Section React functional component\n * @public\n */\nexport function StatusBarRightSection(props: CommonDivProps) {\n  const { className, ...divProps } = props;\n  return (\n    // eslint-disable-next-line deprecation/deprecation\n    <Div\n      {...divProps}\n      mainClassName={className ? className : \"uifw-statusbar-right\"}\n    />\n  );\n}\n\n/** Components used in a [[StatusBar]].\n * @public\n * @deprecated in 4.13.x. Please use components directly.\n */\nexport namespace StatusBar {\n  /** Field of a [[StatusBar]].\n   * @beta\n   * @deprecated in 4.13.x. Use [iTwinUI Button](https://itwinui.bentley.com/docs/button) instead.\n   */\n  // eslint-disable-next-line deprecation/deprecation\n  export const Field = StatusBarField;\n\n  /** Popup of a [[StatusBar]].\n   * @beta\n   * @deprecated in 4.13.x. Use `StatusBarPopover` instead.\n   */\n  // eslint-disable-next-line deprecation/deprecation\n  export const Popup = StatusBarPopup;\n}\n"]}

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

@@ -2,6 +2,7 @@
  * 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/index";
 @import "../layout/safearea";
 
 .uifw-statusBar {
@@ -49,6 +50,34 @@
 .uifw-statusbar-docked {
   width: 100%;
   background-color: var(--iui-color-background);
+
+  .uifw-statusbar-item-container {
+    @include for-medium-desktop-up {
+      padding-left: var(--iui-size-m);
+    }
+
+    @include for-small-desktop-down {
+      padding-left: var(--iui-size-s);
+    }
+
+    @include for-phone-only {
+      padding-left: var(--iui-size-xs);
+    }
+
+    &:has(.uifw-statusBar-separator) {
+      padding-left: 0;
+
+      + .uifw-statusbar-item-container {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .uifw-statusbar-left .uifw-statusbar-item-container {
+    &:first-child {
+      padding-left: 0;
+    }
+  }
 }
 
 .uifw-statusbar-item-container {

package/lib/esm/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;AAMH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAEV,aAAa,EAEd,MAAM,iBAAiB,CAAC;AAoBzB,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,qBAqB5D;AAwJD;;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,qBA2R9D"}
+{"version":3,"file":"StatusBarComposer.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBarComposer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAMH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAEV,aAAa,EAEd,MAAM,iBAAiB,CAAC;AAoBzB,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,qBAqB5D;AAyLD;;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,qBAmQ9D"}

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

@@ -14,7 +14,6 @@ import { StatusBarLabelIndicator } from "../statusbar/LabelIndicator";
 import { SyncUiEventDispatcher } from "../syncui/SyncUiEventDispatcher";
 import { isProviderItem } from "../ui-items-provider/isProviderItem";
 import { StatusBarOverflow } from "./Overflow";
-import { StatusBarOverflowPanel } from "./OverflowPanel";
 import { StatusBarCenterSection, StatusBarLeftSection, StatusBarRightSection, StatusBarSpaceBetween, } from "./StatusBar";
 import { isStatusBarActionItem, isStatusBarCustomItem, isStatusBarLabelItem, StatusBarSection, } from "./StatusBarItem";
 import { StatusBarItemsManager } from "./StatusBarItemsManager";
@@ -62,7 +61,6 @@ function useStatusBarItemSyncEffect(itemsManager, syncIdsOfInterest) {
         const handleSyncUiEvent = (args) => {
             if (0 === syncIdsOfInterest.length)
                 return;
-            // istanbul ignore else
             if (syncIdsOfInterest.some((value) => args.eventIds.has(value.toLowerCase()))) {
                 // process each item that has interest
                 itemsManager.refreshAffectedItems(args.eventIds);
@@ -77,11 +75,14 @@ function useStatusBarItemSyncEffect(itemsManager, syncIdsOfInterest) {
 }
 function StatusBarLabelItemComponent(props) {
     const label = ConditionalStringValue.getValue(props.label);
+    // eslint-disable-next-line deprecation/deprecation
     return React.createElement(StatusBarLabelIndicator, { iconSpec: props.icon, label: label });
 }
 function StatusBarActionItemComponent(props) {
     const title = ConditionalStringValue.getValue(props.tooltip);
-    return (React.createElement(StatusBarLabelIndicator, { title: title, onClick: props.execute, iconSpec: props.icon }));
+    return (
+    // eslint-disable-next-line deprecation/deprecation
+    React.createElement(StatusBarLabelIndicator, { title: title, onClick: props.execute, iconSpec: props.icon }));
 }
 /** local function to combine items from Stage and from Extensions */
 function combineItems(stageItems, addonItems) {
@@ -104,15 +105,40 @@ function combineItems(stageItems, addonItems) {
     }
     return items;
 }
+/** local function to sort status bar items from left to right */
+const sortItems = (items) => {
+    const sortedItems = [];
+    [
+        StatusBarSection.Left,
+        StatusBarSection.Center,
+        StatusBarSection.Context,
+        StatusBarSection.Right,
+    ].forEach((section) => {
+        items
+            .filter((item) => item.section.valueOf() === section.valueOf())
+            .sort((a, b) => a.itemPriority - b.itemPriority)
+            .forEach((item) => sortedItems.push(item));
+    });
+    return sortedItems;
+};
 /** local function to ensure a width value is defined for a status bar entries.  */
 function verifiedMapEntries(map) {
     for (const [, val] of map) {
-        // istanbul ignore next
         if (val === undefined)
             return undefined;
     }
     return map;
 }
+/** local function to sort status bar item widths */
+const sortWidths = (widths, statusBarItems) => {
+    const widthsArray = Array.from(widths.entries());
+    widthsArray.sort((a, b) => {
+        const aIndex = statusBarItems.findIndex((item) => item.id === a[0]);
+        const bIndex = statusBarItems.findIndex((item) => item.id === b[0]);
+        return aIndex - bIndex;
+    });
+    return new Map(widthsArray);
+};
 /** Returns a subset of docked entry keys that exceed given width and should be placed in overflow panel. */
 function getItemToPlaceInOverflow(width, docked, overflowWidth) {
     let settingsWidth = 0;
@@ -130,7 +156,7 @@ function getItemToPlaceInOverflow(width, docked, overflowWidth) {
     for (; j > 0; j--) {
         if (settingsWidth <= width)
             break;
-        const w = docked[j][1];
+        const w = docked[j - 1][1];
         settingsWidth -= w;
     }
     const overflowItems = new Array();
@@ -150,7 +176,6 @@ function isItemInOverflow(id, overflowItemIds) {
 export function StatusBarComposer(props) {
     const { className, style, items, mainClassName, leftClassName, centerClassName, rightClassName, } = props;
     const [defaultItemsManager, setDefaultItemsManager] = React.useState(() => new StatusBarItemsManager(items));
-    const [isOverflowPanelOpen, setIsOverflowPanelOpen] = React.useState(false);
     const containerWidth = React.useRef(undefined);
     const isInitialMount = React.useRef(true);
     React.useEffect(() => {
@@ -167,10 +192,13 @@ export function StatusBarComposer(props) {
     const addonItems = useUiItemsProviderStatusBarItems(addonItemsManager);
     const addonSyncIdsOfInterest = React.useMemo(() => StatusBarItemsManager.getSyncIdsOfInterest(addonItems), [addonItems]);
     useStatusBarItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);
-    const statusBarItems = React.useMemo(() => combineItems(defaultItems, addonItems), [defaultItems, addonItems]);
     const entryWidths = React.useRef(new Map());
     const overflowWidth = React.useRef(undefined);
     const [overflown, setOverflown] = React.useState();
+    const statusBarItems = React.useMemo(() => {
+        const combinedItems = combineItems(defaultItems, addonItems);
+        return sortItems(combinedItems);
+    }, [defaultItems, addonItems]);
     const calculateOverflow = React.useCallback(() => {
         const widths = verifiedMapEntries(entryWidths.current);
         if (containerWidth.current === undefined ||
@@ -183,11 +211,8 @@ export function StatusBarComposer(props) {
         const newOverflown = getItemToPlaceInOverflow(containerWidth.current, [...widths.entries()], overflowWidth.current);
         if (!eqlOverflown(overflown, newOverflown)) {
             setOverflown(newOverflown);
-            // istanbul ignore next
-            if (0 === newOverflown.length && isOverflowPanelOpen)
-                setIsOverflowPanelOpen(false);
         }
-    }, [isOverflowPanelOpen, overflown]);
+    }, [overflown]);
     const handleOverflowResize = React.useCallback((w) => {
         const calculate = overflowWidth.current !== w;
         overflowWidth.current = w;
@@ -195,11 +220,16 @@ export function StatusBarComposer(props) {
     }, [calculateOverflow]);
     const handleEntryResize = React.useCallback((key) => (w) => {
         const oldW = entryWidths.current.get(key);
-        if (undefined === oldW || Math.abs(oldW - w) > 2) {
+        if (oldW === undefined || Math.abs(oldW - w) > 2) {
             entryWidths.current.set(key, w);
+            if (oldW === undefined) {
+                const widths = verifiedMapEntries(entryWidths.current);
+                if (widths !== undefined)
+                    entryWidths.current = sortWidths(widths, statusBarItems);
+            }
             calculateOverflow();
         }
-    }, [calculateOverflow]);
+    }, [calculateOverflow, statusBarItems]);
     const getSectionName = (section) => {
         switch (section) {
             case StatusBarSection.Center:
@@ -248,17 +278,9 @@ export function StatusBarComposer(props) {
         }
     }, [calculateOverflow]);
     const containerRef = React.useRef(null);
-    const targetRef = React.useRef(null);
     const resizeObserverRef = useResizeObserver(handleContainerResize);
     // allow  both the containerRef and the resize observer function that takes a ref to be processed when the ref is set.
     const refs = useRefs(containerRef, resizeObserverRef);
-    const onOverflowClick = React.useCallback(() => {
-        setIsOverflowPanelOpen((prev) => !prev);
-    }, []);
-    // istanbul ignore next
-    const handleOnClose = React.useCallback(() => {
-        setIsOverflowPanelOpen(false);
-    }, []);
     const leftItems = React.useMemo(() => getSectionItems(StatusBarSection.Left), [getSectionItems]);
     const centerItems = React.useMemo(() => getSectionItems(StatusBarSection.Center), [getSectionItems]);
     const rightItems = React.useMemo(() => getSectionItems(StatusBarSection.Right), [getSectionItems]);
@@ -273,11 +295,6 @@ export function StatusBarComposer(props) {
                 contextItems),
             React.createElement(StatusBarRightSection, { className: rightClassName },
                 rightItems,
-                (!overflown || overflown.length > 0) && (React.createElement(React.Fragment, null,
-                    React.createElement(StatusBarOverflow, { onClick: onOverflowClick, onResize: handleOverflowResize, ref: targetRef }),
-                    overflowItems.length > 0 &&
-                        isOverflowPanelOpen &&
-                        targetRef.current && (React.createElement(StatusBarOverflowPanel, { onClose: handleOnClose, open: true, target: targetRef.current },
-                        React.createElement("div", { className: "uifw-statusbar-overflow-items-container", "data-testid": "uifw-statusbar-overflow-items-container" }, overflowItems.map((overflowEntry) => overflowEntry))))))))));
+                (!overflown || overflown.length > 0) && (React.createElement(StatusBarOverflow, { onResize: handleOverflowResize, overflowItems: overflowItems }))))));
 }
 //# sourceMappingURL=StatusBarComposer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBarComposer.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBarComposer.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 {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n} from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { eqlOverflown } from \"../layout/tool-settings/Docked\";\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\nimport { SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher\";\nimport type { UiSyncEventArgs } from \"../syncui/UiSyncEvent\";\nimport { isProviderItem } from \"../ui-items-provider/isProviderItem\";\nimport { StatusBarOverflow } from \"./Overflow\";\nimport { StatusBarOverflowPanel } from \"./OverflowPanel\";\nimport {\n  StatusBarCenterSection,\n  StatusBarLeftSection,\n  StatusBarRightSection,\n  StatusBarSpaceBetween,\n} from \"./StatusBar\";\nimport type {\n  StatusBarActionItem,\n  StatusBarItem,\n  StatusBarLabelItem,\n} from \"./StatusBarItem\";\nimport {\n  isStatusBarActionItem,\n  isStatusBarCustomItem,\n  isStatusBarLabelItem,\n  StatusBarSection,\n} from \"./StatusBarItem\";\nimport { StatusBarItemsManager } from \"./StatusBarItemsManager\";\nimport { useDefaultStatusBarItems } from \"./useDefaultStatusBarItems\";\nimport { useUiItemsProviderStatusBarItems } from \"./useUiItemsProviderStatusBarItems\";\n\n/** Private  function to generate a value that will allow the proper order to be maintained when items are placed in overflow panel */\nfunction getCombinedSectionItemPriority(item: StatusBarItem) {\n  let sectionValue = 0;\n  if (item.section === StatusBarSection.Center) sectionValue = 100000;\n  else if (item.section === StatusBarSection.Context) sectionValue = 200000;\n  else if (item.section === StatusBarSection.Right) sectionValue = 300000;\n  return sectionValue + item.itemPriority;\n}\n\ninterface DockedStatusBarEntryContextArg {\n  readonly isOverflown: boolean;\n  readonly onResize: (w: number) => void;\n}\n\nconst DockedStatusBarEntryContext =\n  React.createContext<DockedStatusBarEntryContextArg>(null!);\nDockedStatusBarEntryContext.displayName = \"nz:DockedStatusBarEntryContext\";\n\n/** @internal */\nexport function useStatusBarEntry() {\n  return React.useContext(DockedStatusBarEntryContext);\n}\n\n/** Properties of [[DockedStatusBarItem]] component.\n * @internal future\n */\nexport interface StatusBarItemProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n  itemPriority?: number;\n  providerId?: string;\n  section?: string;\n}\n\n/** Used in [[StatusBarComposer]] component to display a statusbar item.\n * @internal future\n */\nexport function DockedStatusBarItem(props: StatusBarItemProps) {\n  const { onResize } = useStatusBarEntry();\n  const ref = useResizeObserver<HTMLDivElement>(onResize);\n  const className = classnames(\n    \"uifw-statusbar-item-container\",\n    props.className\n  );\n  return (\n    <div\n      data-item-id={props.itemId}\n      data-item-type=\"status-bar-item\"\n      data-item-location={props.section}\n      data-item-priority={props.itemPriority}\n      data-item-provider-id={props.providerId}\n      className={className}\n      ref={ref}\n      style={props.style}\n    >\n      {props.children}\n    </div>\n  );\n}\n\ninterface DockedStatusBarEntryProps {\n  children?: React.ReactNode;\n  entryKey: string;\n  getOnResize: (key: string) => (w: number) => void;\n}\n\n/** Wrapper for status bar entries so their size can be used to determine if the status bar container can display them or if they will need to be placed in an overflow panel. */\nfunction DockedStatusBarEntry({\n  children,\n  entryKey,\n  getOnResize,\n}: DockedStatusBarEntryProps) {\n  const onResize = React.useMemo(\n    () => getOnResize(entryKey),\n    [getOnResize, entryKey]\n  );\n  const entry = React.useMemo<DockedStatusBarEntryContextArg>(\n    () => ({\n      isOverflown: false,\n      onResize,\n    }),\n    [onResize]\n  );\n  return (\n    <DockedStatusBarEntryContext.Provider value={entry}>\n      {children}\n    </DockedStatusBarEntryContext.Provider>\n  );\n}\n\n/** Private function to set up sync event monitoring of statusbar items */\nfunction useStatusBarItemSyncEffect(\n  itemsManager: StatusBarItemsManager,\n  syncIdsOfInterest: string[]\n) {\n  React.useEffect(() => {\n    // eslint-disable-next-line deprecation/deprecation\n    const handleSyncUiEvent = (args: UiSyncEventArgs) => {\n      if (0 === syncIdsOfInterest.length) return;\n\n      // istanbul ignore else\n      if (\n        syncIdsOfInterest.some((value: string): boolean =>\n          args.eventIds.has(value.toLowerCase())\n        )\n      ) {\n        // process each item that has interest\n        itemsManager.refreshAffectedItems(args.eventIds);\n      }\n    };\n\n    // Note: that items with conditions have condition run when loaded into the items manager\n    SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);\n    return () => {\n      SyncUiEventDispatcher.onSyncUiEvent.removeListener(handleSyncUiEvent);\n    };\n  }, [itemsManager, itemsManager.items, syncIdsOfInterest]);\n}\n\nfunction StatusBarLabelItemComponent(props: StatusBarLabelItem) {\n  const label = ConditionalStringValue.getValue(props.label);\n  return <StatusBarLabelIndicator iconSpec={props.icon} label={label} />;\n}\n\nfunction StatusBarActionItemComponent(props: StatusBarActionItem) {\n  const title = ConditionalStringValue.getValue(props.tooltip);\n  return (\n    <StatusBarLabelIndicator\n      title={title}\n      onClick={props.execute}\n      iconSpec={props.icon}\n    />\n  );\n}\n\n/** local function to combine items from Stage and from Extensions */\nfunction combineItems(\n  stageItems: ReadonlyArray<StatusBarItem>,\n  addonItems: ReadonlyArray<StatusBarItem>\n) {\n  const items: StatusBarItem[] = [];\n  if (stageItems.length) {\n    // Walk through each and ensure no duplicate ids are added.\n    stageItems.forEach((srcItem) => {\n      if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n        items.push(srcItem);\n      }\n    });\n  }\n  if (addonItems.length) {\n    // Walk through each and ensure no duplicate ids are added.\n    addonItems.forEach((srcItem) => {\n      if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n        items.push(srcItem);\n      }\n    });\n  }\n  return items;\n}\n\n/** local function to ensure a width value is defined for a status bar entries.  */\nfunction verifiedMapEntries<T>(map: Map<string, T | undefined>) {\n  for (const [, val] of map) {\n    // istanbul ignore next\n    if (val === undefined) return undefined;\n  }\n  return map as Map<string, T>;\n}\n\n/** Returns a subset of docked entry keys that exceed given width and should be placed in overflow panel. */\nfunction getItemToPlaceInOverflow(\n  width: number,\n  docked: ReadonlyArray<readonly [string, number]>,\n  overflowWidth: number\n) {\n  let settingsWidth = 0;\n\n  let i = 0;\n  for (; i < docked.length; i++) {\n    const w = docked[i][1];\n    const newSettingsWidth = settingsWidth + w;\n    if (newSettingsWidth > width) {\n      settingsWidth += overflowWidth;\n      break;\n    }\n    settingsWidth = newSettingsWidth;\n  }\n\n  let j = i;\n  for (; j > 0; j--) {\n    if (settingsWidth <= width) break;\n    const w = docked[j][1];\n    settingsWidth -= w;\n  }\n\n  const overflowItems = new Array<string>();\n  for (i = j; i < docked.length; i++) {\n    overflowItems.push(docked[i][0]);\n  }\n  return overflowItems;\n}\n\nfunction isItemInOverflow(\n  id: string,\n  overflowItemIds: ReadonlyArray<string> | undefined\n) {\n  if (!overflowItemIds || 0 === overflowItemIds.length) return false;\n  return !!overflowItemIds.find((value) => value === id);\n}\n\n/** Properties for the [[StatusBarComposer]] React components\n * @public\n */\nexport interface StatusBarComposerProps extends CommonProps {\n  /** Status Bar items */\n  items: StatusBarItem[];\n\n  /** CSS class name override for the overall Status Bar */\n  mainClassName?: string;\n  /** CSS class name override for the left section */\n  leftClassName?: string;\n  /** CSS class name override for the center section */\n  centerClassName?: string;\n  /** CSS class name override for the right section */\n  rightClassName?: string;\n}\n\n/** Component to load components into the [[StatusBar]].\n * @public\n */\nexport function StatusBarComposer(props: StatusBarComposerProps) {\n  const {\n    className,\n    style,\n    items,\n    mainClassName,\n    leftClassName,\n    centerClassName,\n    rightClassName,\n  } = props;\n  const [defaultItemsManager, setDefaultItemsManager] = React.useState(\n    () => new StatusBarItemsManager(items)\n  );\n  const [isOverflowPanelOpen, setIsOverflowPanelOpen] = React.useState(false);\n  const containerWidth = React.useRef<number | undefined>(undefined);\n\n  const isInitialMount = React.useRef(true);\n  React.useEffect(() => {\n    if (isInitialMount.current) isInitialMount.current = false;\n    else {\n      setDefaultItemsManager(new StatusBarItemsManager(items));\n    }\n  }, [items]);\n  const defaultItems = useDefaultStatusBarItems(defaultItemsManager);\n  const syncIdsOfInterest = React.useMemo(\n    () => StatusBarItemsManager.getSyncIdsOfInterest(defaultItems),\n    [defaultItems]\n  );\n  useStatusBarItemSyncEffect(defaultItemsManager, syncIdsOfInterest);\n\n  const [addonItemsManager] = React.useState(() => new StatusBarItemsManager());\n  const addonItems = useUiItemsProviderStatusBarItems(addonItemsManager);\n  const addonSyncIdsOfInterest = React.useMemo(\n    () => StatusBarItemsManager.getSyncIdsOfInterest(addonItems),\n    [addonItems]\n  );\n  useStatusBarItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);\n\n  const statusBarItems = React.useMemo(\n    () => combineItems(defaultItems, addonItems),\n    [defaultItems, addonItems]\n  );\n  const entryWidths = React.useRef(new Map<string, number | undefined>());\n  const overflowWidth = React.useRef<number | undefined>(undefined);\n  const [overflown, setOverflown] = React.useState<ReadonlyArray<string>>();\n\n  const calculateOverflow = React.useCallback(() => {\n    const widths = verifiedMapEntries(entryWidths.current);\n    if (\n      containerWidth.current === undefined ||\n      widths === undefined ||\n      overflowWidth.current === undefined\n    ) {\n      setOverflown(new Array<string>());\n      return;\n    }\n\n    // Calculate overflow.\n    const newOverflown = getItemToPlaceInOverflow(\n      containerWidth.current,\n      [...widths.entries()],\n      overflowWidth.current\n    );\n    if (!eqlOverflown(overflown, newOverflown)) {\n      setOverflown(newOverflown);\n      // istanbul ignore next\n      if (0 === newOverflown.length && isOverflowPanelOpen)\n        setIsOverflowPanelOpen(false);\n    }\n  }, [isOverflowPanelOpen, overflown]);\n\n  const handleOverflowResize = React.useCallback(\n    (w: number) => {\n      const calculate = overflowWidth.current !== w;\n      overflowWidth.current = w;\n      calculate && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleEntryResize = React.useCallback(\n    (key: string) => (w: number) => {\n      const oldW = entryWidths.current.get(key);\n      if (undefined === oldW || Math.abs(oldW - w) > 2) {\n        entryWidths.current.set(key, w);\n        calculateOverflow();\n      }\n    },\n    [calculateOverflow]\n  );\n\n  const getSectionName = (section: StatusBarSection) => {\n    switch (section) {\n      case StatusBarSection.Center:\n      case StatusBarSection.Stage:\n        return \"status-bar-center\";\n      case StatusBarSection.Context:\n        return \"status-bar-right-start\";\n      case StatusBarSection.Right:\n      case StatusBarSection.Selection:\n        return \"status-bar-right-end\";\n      case StatusBarSection.Left:\n      case StatusBarSection.Message:\n        return \"status-bar-left\";\n    }\n  };\n\n  /** generate a wrapped status bar entry that will report its size. */\n  const getComponent = React.useCallback(\n    (\n      item: StatusBarItem,\n      key: string,\n      itemPriority: number,\n      section: StatusBarSection\n    ): React.ReactNode => {\n      const providerId = isProviderItem(item) ? item.providerId : undefined;\n      return (\n        <DockedStatusBarEntry\n          key={key}\n          entryKey={key}\n          getOnResize={handleEntryResize}\n        >\n          <DockedStatusBarItem\n            key={key}\n            itemId={item.id}\n            itemPriority={itemPriority}\n            providerId={providerId}\n            section={getSectionName(section)}\n          >\n            {isStatusBarCustomItem(item) && item.content}\n            {isStatusBarActionItem(item) && (\n              <StatusBarActionItemComponent {...item} />\n            )}\n            {isStatusBarLabelItem(item) && (\n              <StatusBarLabelItemComponent {...item} />\n            )}\n          </DockedStatusBarItem>\n        </DockedStatusBarEntry>\n      );\n    },\n    [handleEntryResize]\n  );\n\n  const getSectionItems = React.useCallback(\n    (section: StatusBarSection): React.ReactNode[] => {\n      const sectionItems = statusBarItems\n        .filter(\n          (item) =>\n            item.section.valueOf() === section.valueOf() &&\n            !isItemInOverflow(item.id, overflown) &&\n            !ConditionalBooleanValue.getValue(item.isHidden)\n        )\n        .sort((a, b) => a.itemPriority - b.itemPriority);\n\n      return sectionItems.map((sectionItem) => (\n        <React.Fragment key={sectionItem.id}>\n          {getComponent(\n            sectionItem,\n            sectionItem.id,\n            sectionItem.itemPriority,\n            sectionItem.section\n          )}\n        </React.Fragment>\n      ));\n    },\n    [statusBarItems, overflown, getComponent]\n  );\n\n  const getOverflowItems = React.useCallback((): React.ReactNode[] => {\n    const itemsInOverflow = statusBarItems\n      .filter(\n        (item) =>\n          isItemInOverflow(item.id, overflown) &&\n          !ConditionalBooleanValue.getValue(item.isHidden)\n      )\n      .sort(\n        (a, b) =>\n          getCombinedSectionItemPriority(a) - getCombinedSectionItemPriority(b)\n      )\n      .reverse();\n\n    return itemsInOverflow.map((item) => (\n      <React.Fragment key={item.id}>\n        {getComponent(item, item.id, item.itemPriority, item.section)}\n      </React.Fragment>\n    ));\n  }, [statusBarItems, overflown, getComponent]);\n\n  const handleContainerResize = React.useCallback(\n    (w: number) => {\n      if (\n        undefined === containerWidth.current ||\n        Math.abs(containerWidth.current - w) > 2\n      ) {\n        containerWidth.current = w;\n        calculateOverflow();\n      }\n    },\n    [calculateOverflow]\n  );\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const targetRef = React.useRef<HTMLDivElement>(null);\n  const resizeObserverRef = useResizeObserver(handleContainerResize);\n  // allow  both the containerRef and the resize observer function that takes a ref to be processed when the ref is set.\n  const refs = useRefs(containerRef, resizeObserverRef);\n\n  const onOverflowClick = React.useCallback(() => {\n    setIsOverflowPanelOpen((prev) => !prev);\n  }, []);\n  // istanbul ignore next\n  const handleOnClose = React.useCallback(() => {\n    setIsOverflowPanelOpen(false);\n  }, []);\n  const leftItems = React.useMemo(\n    () => getSectionItems(StatusBarSection.Left),\n    [getSectionItems]\n  );\n  const centerItems = React.useMemo(\n    () => getSectionItems(StatusBarSection.Center),\n    [getSectionItems]\n  );\n  const rightItems = React.useMemo(\n    () => getSectionItems(StatusBarSection.Right),\n    [getSectionItems]\n  );\n  const contextItems = React.useMemo(\n    () => getSectionItems(StatusBarSection.Context),\n    [getSectionItems]\n  );\n  const overflowItems = React.useMemo(\n    () => getOverflowItems(),\n    [getOverflowItems]\n  );\n\n  const containerClassName = classnames(\"uifw-statusbar-docked\", className);\n\n  return (\n    <div\n      className={containerClassName}\n      ref={refs}\n      style={style}\n      role=\"presentation\"\n    >\n      <StatusBarSpaceBetween className={mainClassName}>\n        <StatusBarLeftSection className={leftClassName}>\n          {leftItems}\n        </StatusBarLeftSection>\n        <StatusBarCenterSection className={centerClassName}>\n          {centerItems}\n          {contextItems}\n        </StatusBarCenterSection>\n        <StatusBarRightSection className={rightClassName}>\n          {rightItems}\n          {(!overflown || overflown.length > 0) && (\n            <>\n              <StatusBarOverflow\n                onClick={onOverflowClick}\n                onResize={handleOverflowResize}\n                ref={targetRef}\n              />\n              {overflowItems.length > 0 &&\n                isOverflowPanelOpen &&\n                targetRef.current && (\n                  <StatusBarOverflowPanel\n                    onClose={handleOnClose}\n                    open={true}\n                    target={targetRef.current}\n                  >\n                    <div\n                      className=\"uifw-statusbar-overflow-items-container\"\n                      data-testid=\"uifw-statusbar-overflow-items-container\"\n                    >\n                      {overflowItems.map((overflowEntry) => overflowEntry)}\n                    </div>\n                  </StatusBarOverflowPanel>\n                )}\n            </>\n          )}\n        </StatusBarRightSection>\n      </StatusBarSpaceBetween>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"StatusBarComposer.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBarComposer.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 {\n  ConditionalBooleanValue,\n  ConditionalStringValue,\n} from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useRefs, useResizeObserver } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { eqlOverflown } from \"../layout/tool-settings/Docked\";\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\nimport { SyncUiEventDispatcher } from \"../syncui/SyncUiEventDispatcher\";\nimport type { UiSyncEventArgs } from \"../syncui/UiSyncEvent\";\nimport { isProviderItem } from \"../ui-items-provider/isProviderItem\";\nimport { StatusBarOverflow } from \"./Overflow\";\nimport {\n  StatusBarCenterSection,\n  StatusBarLeftSection,\n  StatusBarRightSection,\n  StatusBarSpaceBetween,\n} from \"./StatusBar\";\nimport type {\n  StatusBarActionItem,\n  StatusBarItem,\n  StatusBarLabelItem,\n} from \"./StatusBarItem\";\nimport {\n  isStatusBarActionItem,\n  isStatusBarCustomItem,\n  isStatusBarLabelItem,\n  StatusBarSection,\n} from \"./StatusBarItem\";\nimport { StatusBarItemsManager } from \"./StatusBarItemsManager\";\nimport { useDefaultStatusBarItems } from \"./useDefaultStatusBarItems\";\nimport { useUiItemsProviderStatusBarItems } from \"./useUiItemsProviderStatusBarItems\";\n\n/** Private  function to generate a value that will allow the proper order to be maintained when items are placed in overflow panel */\nfunction getCombinedSectionItemPriority(item: StatusBarItem) {\n  let sectionValue = 0;\n  if (item.section === StatusBarSection.Center) sectionValue = 100000;\n  else if (item.section === StatusBarSection.Context) sectionValue = 200000;\n  else if (item.section === StatusBarSection.Right) sectionValue = 300000;\n  return sectionValue + item.itemPriority;\n}\n\ninterface DockedStatusBarEntryContextArg {\n  readonly isOverflown: boolean;\n  readonly onResize: (w: number) => void;\n}\n\nconst DockedStatusBarEntryContext =\n  React.createContext<DockedStatusBarEntryContextArg>(null!);\nDockedStatusBarEntryContext.displayName = \"nz:DockedStatusBarEntryContext\";\n\n/** @internal */\nexport function useStatusBarEntry() {\n  return React.useContext(DockedStatusBarEntryContext);\n}\n\n/** Properties of [[DockedStatusBarItem]] component.\n * @internal future\n */\nexport interface StatusBarItemProps extends CommonProps {\n  /** Tool setting content. */\n  children?: React.ReactNode;\n  itemPriority?: number;\n  providerId?: string;\n  section?: string;\n}\n\n/** Used in [[StatusBarComposer]] component to display a statusbar item.\n * @internal future\n */\nexport function DockedStatusBarItem(props: StatusBarItemProps) {\n  const { onResize } = useStatusBarEntry();\n  const ref = useResizeObserver<HTMLDivElement>(onResize);\n  const className = classnames(\n    \"uifw-statusbar-item-container\",\n    props.className\n  );\n  return (\n    <div\n      data-item-id={props.itemId}\n      data-item-type=\"status-bar-item\"\n      data-item-location={props.section}\n      data-item-priority={props.itemPriority}\n      data-item-provider-id={props.providerId}\n      className={className}\n      ref={ref}\n      style={props.style}\n    >\n      {props.children}\n    </div>\n  );\n}\n\ninterface DockedStatusBarEntryProps {\n  children?: React.ReactNode;\n  entryKey: string;\n  getOnResize: (key: string) => (w: number) => void;\n}\n\n/** Wrapper for status bar entries so their size can be used to determine if the status bar container can display them or if they will need to be placed in an overflow panel. */\nfunction DockedStatusBarEntry({\n  children,\n  entryKey,\n  getOnResize,\n}: DockedStatusBarEntryProps) {\n  const onResize = React.useMemo(\n    () => getOnResize(entryKey),\n    [getOnResize, entryKey]\n  );\n  const entry = React.useMemo<DockedStatusBarEntryContextArg>(\n    () => ({\n      isOverflown: false,\n      onResize,\n    }),\n    [onResize]\n  );\n  return (\n    <DockedStatusBarEntryContext.Provider value={entry}>\n      {children}\n    </DockedStatusBarEntryContext.Provider>\n  );\n}\n\n/** Private function to set up sync event monitoring of statusbar items */\nfunction useStatusBarItemSyncEffect(\n  itemsManager: StatusBarItemsManager,\n  syncIdsOfInterest: string[]\n) {\n  React.useEffect(() => {\n    // eslint-disable-next-line deprecation/deprecation\n    const handleSyncUiEvent = (args: UiSyncEventArgs) => {\n      if (0 === syncIdsOfInterest.length) return;\n\n      if (\n        syncIdsOfInterest.some((value: string): boolean =>\n          args.eventIds.has(value.toLowerCase())\n        )\n      ) {\n        // process each item that has interest\n        itemsManager.refreshAffectedItems(args.eventIds);\n      }\n    };\n\n    // Note: that items with conditions have condition run when loaded into the items manager\n    SyncUiEventDispatcher.onSyncUiEvent.addListener(handleSyncUiEvent);\n    return () => {\n      SyncUiEventDispatcher.onSyncUiEvent.removeListener(handleSyncUiEvent);\n    };\n  }, [itemsManager, itemsManager.items, syncIdsOfInterest]);\n}\n\nfunction StatusBarLabelItemComponent(props: StatusBarLabelItem) {\n  const label = ConditionalStringValue.getValue(props.label);\n  // eslint-disable-next-line deprecation/deprecation\n  return <StatusBarLabelIndicator iconSpec={props.icon} label={label} />;\n}\n\nfunction StatusBarActionItemComponent(props: StatusBarActionItem) {\n  const title = ConditionalStringValue.getValue(props.tooltip);\n  return (\n    // eslint-disable-next-line deprecation/deprecation\n    <StatusBarLabelIndicator\n      title={title}\n      onClick={props.execute}\n      iconSpec={props.icon}\n    />\n  );\n}\n\n/** local function to combine items from Stage and from Extensions */\nfunction combineItems(\n  stageItems: ReadonlyArray<StatusBarItem>,\n  addonItems: ReadonlyArray<StatusBarItem>\n) {\n  const items: StatusBarItem[] = [];\n  if (stageItems.length) {\n    // Walk through each and ensure no duplicate ids are added.\n    stageItems.forEach((srcItem) => {\n      if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n        items.push(srcItem);\n      }\n    });\n  }\n  if (addonItems.length) {\n    // Walk through each and ensure no duplicate ids are added.\n    addonItems.forEach((srcItem) => {\n      if (-1 === items.findIndex((item) => item.id === srcItem.id)) {\n        items.push(srcItem);\n      }\n    });\n  }\n  return items;\n}\n\n/** local function to sort status bar items from left to right */\nconst sortItems = (items: StatusBarItem[]) => {\n  const sortedItems: StatusBarItem[] = [];\n  [\n    StatusBarSection.Left,\n    StatusBarSection.Center,\n    StatusBarSection.Context,\n    StatusBarSection.Right,\n  ].forEach((section) => {\n    items\n      .filter((item) => item.section.valueOf() === section.valueOf())\n      .sort((a, b) => a.itemPriority - b.itemPriority)\n      .forEach((item) => sortedItems.push(item));\n  });\n\n  return sortedItems;\n};\n\n/** local function to ensure a width value is defined for a status bar entries.  */\nfunction verifiedMapEntries<T>(map: Map<string, T | undefined>) {\n  for (const [, val] of map) {\n    if (val === undefined) return undefined;\n  }\n  return map as Map<string, T>;\n}\n\n/** local function to sort status bar item widths */\nconst sortWidths = (\n  widths: Map<string, number>,\n  statusBarItems: StatusBarItem[]\n) => {\n  const widthsArray = Array.from(widths.entries());\n  widthsArray.sort((a, b) => {\n    const aIndex = statusBarItems.findIndex((item) => item.id === a[0]);\n    const bIndex = statusBarItems.findIndex((item) => item.id === b[0]);\n    return aIndex - bIndex;\n  });\n\n  return new Map<string, number>(widthsArray);\n};\n\n/** Returns a subset of docked entry keys that exceed given width and should be placed in overflow panel. */\nfunction getItemToPlaceInOverflow(\n  width: number,\n  docked: ReadonlyArray<readonly [string, number]>,\n  overflowWidth: number\n) {\n  let settingsWidth = 0;\n\n  let i = 0;\n  for (; i < docked.length; i++) {\n    const w = docked[i][1];\n    const newSettingsWidth = settingsWidth + w;\n    if (newSettingsWidth > width) {\n      settingsWidth += overflowWidth;\n      break;\n    }\n    settingsWidth = newSettingsWidth;\n  }\n\n  let j = i;\n  for (; j > 0; j--) {\n    if (settingsWidth <= width) break;\n    const w = docked[j - 1][1];\n    settingsWidth -= w;\n  }\n\n  const overflowItems = new Array<string>();\n  for (i = j; i < docked.length; i++) {\n    overflowItems.push(docked[i][0]);\n  }\n  return overflowItems;\n}\n\nfunction isItemInOverflow(\n  id: string,\n  overflowItemIds: ReadonlyArray<string> | undefined\n) {\n  if (!overflowItemIds || 0 === overflowItemIds.length) return false;\n  return !!overflowItemIds.find((value) => value === id);\n}\n\n/** Properties for the [[StatusBarComposer]] React components\n * @public\n */\nexport interface StatusBarComposerProps extends CommonProps {\n  /** Status Bar items */\n  items: StatusBarItem[];\n\n  /** CSS class name override for the overall Status Bar */\n  mainClassName?: string;\n  /** CSS class name override for the left section */\n  leftClassName?: string;\n  /** CSS class name override for the center section */\n  centerClassName?: string;\n  /** CSS class name override for the right section */\n  rightClassName?: string;\n}\n\n/** Component to load components into the [[StatusBar]].\n * @public\n */\nexport function StatusBarComposer(props: StatusBarComposerProps) {\n  const {\n    className,\n    style,\n    items,\n    mainClassName,\n    leftClassName,\n    centerClassName,\n    rightClassName,\n  } = props;\n  const [defaultItemsManager, setDefaultItemsManager] = React.useState(\n    () => new StatusBarItemsManager(items)\n  );\n  const containerWidth = React.useRef<number | undefined>(undefined);\n\n  const isInitialMount = React.useRef(true);\n  React.useEffect(() => {\n    if (isInitialMount.current) isInitialMount.current = false;\n    else {\n      setDefaultItemsManager(new StatusBarItemsManager(items));\n    }\n  }, [items]);\n  const defaultItems = useDefaultStatusBarItems(defaultItemsManager);\n  const syncIdsOfInterest = React.useMemo(\n    () => StatusBarItemsManager.getSyncIdsOfInterest(defaultItems),\n    [defaultItems]\n  );\n  useStatusBarItemSyncEffect(defaultItemsManager, syncIdsOfInterest);\n\n  const [addonItemsManager] = React.useState(() => new StatusBarItemsManager());\n  const addonItems = useUiItemsProviderStatusBarItems(addonItemsManager);\n  const addonSyncIdsOfInterest = React.useMemo(\n    () => StatusBarItemsManager.getSyncIdsOfInterest(addonItems),\n    [addonItems]\n  );\n  useStatusBarItemSyncEffect(addonItemsManager, addonSyncIdsOfInterest);\n\n  const entryWidths = React.useRef(new Map<string, number | undefined>());\n  const overflowWidth = React.useRef<number | undefined>(undefined);\n  const [overflown, setOverflown] = React.useState<ReadonlyArray<string>>();\n  const statusBarItems = React.useMemo(() => {\n    const combinedItems = combineItems(defaultItems, addonItems);\n    return sortItems(combinedItems);\n  }, [defaultItems, addonItems]);\n\n  const calculateOverflow = React.useCallback(() => {\n    const widths = verifiedMapEntries(entryWidths.current);\n\n    if (\n      containerWidth.current === undefined ||\n      widths === undefined ||\n      overflowWidth.current === undefined\n    ) {\n      setOverflown(new Array<string>());\n      return;\n    }\n\n    // Calculate overflow.\n    const newOverflown = getItemToPlaceInOverflow(\n      containerWidth.current,\n      [...widths.entries()],\n      overflowWidth.current\n    );\n    if (!eqlOverflown(overflown, newOverflown)) {\n      setOverflown(newOverflown);\n    }\n  }, [overflown]);\n\n  const handleOverflowResize = React.useCallback(\n    (w: number) => {\n      const calculate = overflowWidth.current !== w;\n      overflowWidth.current = w;\n      calculate && calculateOverflow();\n    },\n    [calculateOverflow]\n  );\n\n  const handleEntryResize = React.useCallback(\n    (key: string) => (w: number) => {\n      const oldW = entryWidths.current.get(key);\n      if (oldW === undefined || Math.abs(oldW - w) > 2) {\n        entryWidths.current.set(key, w);\n        if (oldW === undefined) {\n          const widths = verifiedMapEntries(entryWidths.current);\n          if (widths !== undefined)\n            entryWidths.current = sortWidths(widths, statusBarItems);\n        }\n\n        calculateOverflow();\n      }\n    },\n    [calculateOverflow, statusBarItems]\n  );\n\n  const getSectionName = (section: StatusBarSection) => {\n    switch (section) {\n      case StatusBarSection.Center:\n      case StatusBarSection.Stage:\n        return \"status-bar-center\";\n      case StatusBarSection.Context:\n        return \"status-bar-right-start\";\n      case StatusBarSection.Right:\n      case StatusBarSection.Selection:\n        return \"status-bar-right-end\";\n      case StatusBarSection.Left:\n      case StatusBarSection.Message:\n        return \"status-bar-left\";\n    }\n  };\n\n  /** generate a wrapped status bar entry that will report its size. */\n  const getComponent = React.useCallback(\n    (\n      item: StatusBarItem,\n      key: string,\n      itemPriority: number,\n      section: StatusBarSection\n    ): React.ReactNode => {\n      const providerId = isProviderItem(item) ? item.providerId : undefined;\n      return (\n        <DockedStatusBarEntry\n          key={key}\n          entryKey={key}\n          getOnResize={handleEntryResize}\n        >\n          <DockedStatusBarItem\n            key={key}\n            itemId={item.id}\n            itemPriority={itemPriority}\n            providerId={providerId}\n            section={getSectionName(section)}\n          >\n            {isStatusBarCustomItem(item) && item.content}\n            {isStatusBarActionItem(item) && (\n              <StatusBarActionItemComponent {...item} />\n            )}\n            {isStatusBarLabelItem(item) && (\n              <StatusBarLabelItemComponent {...item} />\n            )}\n          </DockedStatusBarItem>\n        </DockedStatusBarEntry>\n      );\n    },\n    [handleEntryResize]\n  );\n\n  const getSectionItems = React.useCallback(\n    (section: StatusBarSection): React.ReactNode[] => {\n      const sectionItems = statusBarItems\n        .filter(\n          (item) =>\n            item.section.valueOf() === section.valueOf() &&\n            !isItemInOverflow(item.id, overflown) &&\n            !ConditionalBooleanValue.getValue(item.isHidden)\n        )\n        .sort((a, b) => a.itemPriority - b.itemPriority);\n\n      return sectionItems.map((sectionItem) => (\n        <React.Fragment key={sectionItem.id}>\n          {getComponent(\n            sectionItem,\n            sectionItem.id,\n            sectionItem.itemPriority,\n            sectionItem.section\n          )}\n        </React.Fragment>\n      ));\n    },\n    [statusBarItems, overflown, getComponent]\n  );\n\n  const getOverflowItems = React.useCallback((): React.ReactNode[] => {\n    const itemsInOverflow = statusBarItems\n      .filter(\n        (item) =>\n          isItemInOverflow(item.id, overflown) &&\n          !ConditionalBooleanValue.getValue(item.isHidden)\n      )\n      .sort(\n        (a, b) =>\n          getCombinedSectionItemPriority(a) - getCombinedSectionItemPriority(b)\n      )\n      .reverse();\n\n    return itemsInOverflow.map((item) => (\n      <React.Fragment key={item.id}>\n        {getComponent(item, item.id, item.itemPriority, item.section)}\n      </React.Fragment>\n    ));\n  }, [statusBarItems, overflown, getComponent]);\n\n  const handleContainerResize = React.useCallback(\n    (w: number) => {\n      if (\n        undefined === containerWidth.current ||\n        Math.abs(containerWidth.current - w) > 2\n      ) {\n        containerWidth.current = w;\n        calculateOverflow();\n      }\n    },\n    [calculateOverflow]\n  );\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const resizeObserverRef = useResizeObserver(handleContainerResize);\n  // allow  both the containerRef and the resize observer function that takes a ref to be processed when the ref is set.\n  const refs = useRefs(containerRef, resizeObserverRef);\n\n  const leftItems = React.useMemo(\n    () => getSectionItems(StatusBarSection.Left),\n    [getSectionItems]\n  );\n  const centerItems = React.useMemo(\n    () => getSectionItems(StatusBarSection.Center),\n    [getSectionItems]\n  );\n  const rightItems = React.useMemo(\n    () => getSectionItems(StatusBarSection.Right),\n    [getSectionItems]\n  );\n  const contextItems = React.useMemo(\n    () => getSectionItems(StatusBarSection.Context),\n    [getSectionItems]\n  );\n  const overflowItems = React.useMemo(\n    () => getOverflowItems(),\n    [getOverflowItems]\n  );\n\n  const containerClassName = classnames(\"uifw-statusbar-docked\", className);\n\n  return (\n    <div\n      className={containerClassName}\n      ref={refs}\n      style={style}\n      role=\"presentation\"\n    >\n      <StatusBarSpaceBetween className={mainClassName}>\n        <StatusBarLeftSection className={leftClassName}>\n          {leftItems}\n        </StatusBarLeftSection>\n        <StatusBarCenterSection className={centerClassName}>\n          {centerItems}\n          {contextItems}\n        </StatusBarCenterSection>\n        <StatusBarRightSection className={rightClassName}>\n          {rightItems}\n          {(!overflown || overflown.length > 0) && (\n            <StatusBarOverflow\n              onResize={handleOverflowResize}\n              overflowItems={overflowItems}\n            />\n          )}\n        </StatusBarRightSection>\n      </StatusBarSpaceBetween>\n    </div>\n  );\n}\n"]}