@itwin/appui-react 3.0.0-dev.154 → 3.0.0-dev.155

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

@@ -3,38 +3,39 @@
  */
 import "./Indicator.scss";
 import * as React from "react";
-import { ConditionalStringValue } from "@itwin/appui-abstract";
+import { ConditionalStringValue, StatusBarLabelSide } from "@itwin/appui-abstract";
 import { CommonProps } from "@itwin/core-react";
+import { FooterPopupContentType } from "@itwin/appui-layout-react";
 /** Properties of [[Indicator]] component. */
 interface IndicatorProps extends CommonProps {
-    /** Label of balloon icon. */
+    /** Label of balloon icon. @deprecated use label */
     balloonLabel?: string;
-    /** Dialog that is opened when indicator is clicked. */
+    /** Dialog to display in popup when indicator is clicked. */
     dialog?: React.ReactChild;
-    /** Describes if the indicator label is visible. */
-    isLabelVisible?: boolean;
-    /** Icon to use in the footer. */
+    /** Icon to use in the footer. @deprecated use iconSpec */
     iconName?: string;
     /** specification for Icon, overrides iconName specification */
     iconSpec?: string | ConditionalStringValue;
+    /** Describes if the indicator label is visible. */
+    isLabelVisible?: boolean;
     /** Indicator label. */
     label?: string;
+    /** Side to display label. */
+    labelSide?: StatusBarLabelSide;
     /** Function called when indicator is clicked. */
     onClick?: () => void;
-    /** Determines if indicator has been opened to show contained dialog */
-    opened: boolean;
+    /** If dialog prop is set, used to determine initial state. */
+    opened?: boolean;
     /** Describes whether the footer is in footer or widget mode. */
     isInFooterMode?: boolean;
-    /** Tooltip text */
+    /** Tooltip text if not specified label is used */
     toolTip?: string;
+    /** ContentType is used to determine color of popup arrow. If not set defaults to FooterPopupContentType.Dialog */
+    contentType?: FooterPopupContentType;
 }
 /** General-purpose [[Footer]] indicator. Shows an icon and supports an optional popup dialog.
  * @beta
  */
-export declare class Indicator extends React.Component<IndicatorProps, any> {
-    constructor(props: IndicatorProps);
-    private _handleOnIndicatorClick;
-    render(): JSX.Element;
-}
+export declare function Indicator(props: IndicatorProps): JSX.Element;
 export {};
 //# sourceMappingURL=Indicator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAEtD,6CAA6C;AAC7C,UAAU,cAAe,SAAQ,WAAW;IAC1C,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,GAAG,sBAAsB,CAAC;IAC3C,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,MAAM,EAAE,OAAO,CAAC;IAChB,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC;gBACrD,KAAK,EAAE,cAAc;IAIjC,OAAO,CAAC,uBAAuB,CAI7B;IAEc,MAAM;CA6BvB"}
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAe,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEhF,6CAA6C;AAC7C,UAAU,cAAe,SAAQ,WAAW;IAC1C,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IAC1B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,GAAG,sBAAsB,CAAC;IAC3C,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kHAAkH;IAClH,WAAW,CAAC,EAAE,sBAAsB,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA0C9C"}

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

@@ -11,31 +11,33 @@ exports.Indicator = void 0;
 require("./Indicator.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
 /** General-purpose [[Footer]] indicator. Shows an icon and supports an optional popup dialog.
  * @beta
  */
-class Indicator extends React.Component {
-    constructor(props) {
-        super(props);
-        this._handleOnIndicatorClick = () => {
-            // istanbul ignore else
-            if (this.props.onClick)
-                this.props.onClick();
-        };
-    }
-    render() {
-        const className = (0, classnames_1.default)("uifw-footer-indicator", this.props.isInFooterMode && "nz-footer-mode", this.props.className);
-        const iconClassNames = (0, classnames_1.default)("icon", "uifw-indicator-icon", this.props.iconName ? this.props.iconName : /* istanbul ignore next */ "icon-placeholder");
-        return (React.createElement("div", { className: className, title: this.props.toolTip ? this.props.toolTip : this.props.label, style: this.props.style },
-            React.createElement("div", { className: "nz-balloon-container", onClick: this._handleOnIndicatorClick, role: "presentation" },
-                (this.props.iconName && !this.props.iconSpec) && React.createElement("div", { className: iconClassNames }),
-                this.props.iconSpec && React.createElement("div", { className: "uifw-indicator-icon" },
-                    " ",
-                    React.createElement(core_react_1.Icon, { iconSpec: this.props.iconSpec })),
-                this.props.opened &&
-                    React.createElement("div", { className: "nz-dialog" }, this.props.dialog))));
-    }
+function Indicator(props) {
+    const { className, contentType, dialog, iconName, iconSpec, isInFooterMode, isLabelVisible, label, labelSide, onClick, opened, style, toolTip } = props;
+    const hasClickAction = React.useMemo(() => !!onClick || !!dialog, [dialog, onClick]);
+    const [isOpen, setIsOpen] = React.useState(!!opened);
+    const handleOnIndicatorClick = React.useCallback(() => {
+        if (dialog) {
+            setIsOpen(!isOpen);
+        }
+        onClick && onClick();
+    }, [dialog, isOpen, onClick]);
+    const inFooter = React.useMemo(() => false === isInFooterMode ? false : true, [isInFooterMode]);
+    const target = React.useRef(null);
+    const icon = React.useMemo(() => iconSpec !== null && iconSpec !== void 0 ? iconSpec : iconName, [iconSpec, iconName]);
+    const title = React.useMemo(() => toolTip !== null && toolTip !== void 0 ? toolTip : label, [toolTip, label]);
+    const classNames = (0, classnames_1.default)("uifw-footer-label-left", "uifw-footer-indicator", inFooter && "nz-footer-mode", hasClickAction && "uifw-footer-action", labelSide === appui_abstract_1.StatusBarLabelSide.Right && "uifw-footer-label-reversed", className);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: target, role: "button", tabIndex: -1, className: classNames, title: title, style: style, onClick: handleOnIndicatorClick },
+            isLabelVisible && label && React.createElement("span", null, appui_abstract_1.ConditionalStringValue.getValue(label)),
+            icon && React.createElement("div", { className: "uifw-indicator-icon" },
+                React.createElement(core_react_1.Icon, { iconSpec: icon }))),
+        dialog && React.createElement(appui_layout_react_1.FooterPopup, { contentType: contentType, target: target.current, onClose: () => setIsOpen(false), isOpen: isOpen }, dialog)));
 }
 exports.Indicator = Indicator;
 //# sourceMappingURL=Indicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/Indicator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAE/B,kDAAsD;AA0BtD;;GAEG;AACH,MAAa,SAAU,SAAQ,KAAK,CAAC,SAA8B;IACjE,YAAY,KAAqB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;QAGP,4BAAuB,GAAG,GAAG,EAAE;YACrC,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;gBACpB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACzB,CAAC,CAAC;IANF,CAAC;IAQe,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,uBAAuB,EACvB,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,gBAAgB,EAC7C,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAExB,MAAM,cAAc,GAAG,IAAA,oBAAU,EAC/B,MAAM,EACN,qBAAqB,EACrB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,kBAAkB,CAC1F,CAAC;QAEF,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EACjE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,6BAAK,SAAS,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,EAAE,IAAI,EAAC,cAAc;gBAC7F,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,6BAAK,SAAS,EAAE,cAAc,GAAI;gBACnF,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,6BAAK,SAAS,EAAC,qBAAqB;;oBAAE,oBAAC,iBAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAI,CAAM;gBAC1G,IAAI,CAAC,KAAK,CAAC,MAAM;oBAChB,6BAAK,SAAS,EAAC,WAAW,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,CACd,CAEJ,CACF,CACP,CAAC;IACJ,CAAC;CACF;AAxCD,8BAwCC","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 \"./Indicator.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ConditionalStringValue } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\n\r\n/** Properties of [[Indicator]] component. */\r\ninterface IndicatorProps extends CommonProps {\r\n  /** Label of balloon icon. */\r\n  balloonLabel?: string;\r\n  /** Dialog that is opened when indicator is clicked. */\r\n  dialog?: React.ReactChild;\r\n  /** Describes if the indicator label is visible. */\r\n  isLabelVisible?: boolean;\r\n  /** Icon to use in the footer. */\r\n  iconName?: string;\r\n  /** specification for Icon, overrides iconName specification */\r\n  iconSpec?: string | ConditionalStringValue;\r\n  /** Indicator label. */\r\n  label?: string;\r\n  /** Function called when indicator is clicked. */\r\n  onClick?: () => void;\r\n  /** Determines if indicator has been opened to show contained dialog */\r\n  opened: boolean;\r\n  /** Describes whether the footer is in footer or widget mode. */\r\n  isInFooterMode?: boolean;\r\n  /** Tooltip text */\r\n  toolTip?: string;\r\n}\r\n\r\n/** General-purpose [[Footer]] indicator. Shows an icon and supports an optional popup dialog.\r\n * @beta\r\n */\r\nexport class Indicator extends React.Component<IndicatorProps, any> {\r\n  constructor(props: IndicatorProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _handleOnIndicatorClick = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onClick)\r\n      this.props.onClick();\r\n  };\r\n\r\n  public override render() {\r\n    const className = classnames(\r\n      \"uifw-footer-indicator\",\r\n      this.props.isInFooterMode && \"nz-footer-mode\",\r\n      this.props.className);\r\n\r\n    const iconClassNames = classnames(\r\n      \"icon\",\r\n      \"uifw-indicator-icon\",\r\n      this.props.iconName ? this.props.iconName : /* istanbul ignore next */ \"icon-placeholder\",\r\n    );\r\n\r\n    return (\r\n      <div\r\n        className={className}\r\n        title={this.props.toolTip ? this.props.toolTip : this.props.label}\r\n        style={this.props.style}>\r\n        <div className=\"nz-balloon-container\" onClick={this._handleOnIndicatorClick} role=\"presentation\">\r\n          {(this.props.iconName && !this.props.iconSpec) && <div className={iconClassNames} />}\r\n          {this.props.iconSpec && <div className=\"uifw-indicator-icon\"> <Icon iconSpec={this.props.iconSpec} /></div>}\r\n          {this.props.opened &&\r\n            <div className=\"nz-dialog\">\r\n              {this.props.dialog}\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/Indicator.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAC/B,0DAAmF;AACnF,kDAAsD;AACtD,kEAAgF;AA8BhF;;GAEG;AACH,SAAgB,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACxJ,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACrF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACrD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACpD,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;SACpB;QACD,OAAO,IAAI,OAAO,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAChG,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC7E,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IACtE,MAAM,UAAU,GAAG,IAAA,oBAAU,EAC3B,wBAAwB,EAAE,uBAAuB,EACjD,QAAQ,IAAI,gBAAgB,EAC5B,cAAc,IAAI,oBAAoB,EACtC,SAAS,KAAK,mCAAkB,CAAC,KAAK,IAAI,4BAA4B,EACtE,SAAS,CAAC,CAAC;IACb,OAAO,CAEL;QAEE,6BAAK,GAAG,EAAE,MAAM,EACd,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,EAC1B,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,sBAAsB;YAE9B,cAAc,IAAI,KAAK,IAAI,kCAAO,uCAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAQ;YAChF,IAAI,IAAI,6BAAK,SAAS,EAAC,qBAAqB;gBAAC,oBAAC,iBAAI,IAAC,QAAQ,EAAE,IAAI,GAAI,CAAM,CACxE;QACL,MAAM,IAAI,oBAAC,gCAAW,IAAC,WAAW,EAAE,WAAW,EAC9C,MAAM,EAAE,MAAM,CAAC,OAAO,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EAAE,MAAM,IACb,MAAM,CACK,CACb,CACJ,CAAC;AACJ,CAAC;AA1CD,8BA0CC","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 \"./Indicator.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ConditionalStringValue, StatusBarLabelSide } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { FooterPopup, FooterPopupContentType } from \"@itwin/appui-layout-react\";\r\n\r\n/** Properties of [[Indicator]] component. */\r\ninterface IndicatorProps extends CommonProps {\r\n  /** Label of balloon icon. @deprecated use label */\r\n  balloonLabel?: string;\r\n  /** Dialog to display in popup when indicator is clicked. */\r\n  dialog?: React.ReactChild;\r\n  /** Icon to use in the footer. @deprecated use iconSpec */\r\n  iconName?: string;\r\n  /** specification for Icon, overrides iconName specification */\r\n  iconSpec?: string | ConditionalStringValue;\r\n  /** Describes if the indicator label is visible. */\r\n  isLabelVisible?: boolean;\r\n  /** Indicator label. */\r\n  label?: string;\r\n  /** Side to display label. */\r\n  labelSide?: StatusBarLabelSide;\r\n  /** Function called when indicator is clicked. */\r\n  onClick?: () => void;\r\n  /** If dialog prop is set, used to determine initial state. */\r\n  opened?: boolean;\r\n  /** Describes whether the footer is in footer or widget mode. */\r\n  isInFooterMode?: boolean;\r\n  /** Tooltip text if not specified label is used */\r\n  toolTip?: string;\r\n  /** ContentType is used to determine color of popup arrow. If not set defaults to FooterPopupContentType.Dialog */\r\n  contentType?: FooterPopupContentType;\r\n}\r\n\r\n/** General-purpose [[Footer]] indicator. Shows an icon and supports an optional popup dialog.\r\n * @beta\r\n */\r\nexport function Indicator(props: IndicatorProps) {\r\n  const { className, contentType, dialog, iconName, iconSpec, isInFooterMode, isLabelVisible, label, labelSide, onClick, opened, style, toolTip } = props;\r\n  const hasClickAction = React.useMemo(() => !!onClick || !!dialog, [dialog, onClick]);\r\n  const [isOpen, setIsOpen] = React.useState(!!opened);\r\n  const handleOnIndicatorClick = React.useCallback(() => {\r\n    if (dialog) {\r\n      setIsOpen(!isOpen);\r\n    }\r\n    onClick && onClick();\r\n  }, [dialog, isOpen, onClick]);\r\n  const inFooter = React.useMemo(() => false === isInFooterMode ? false : true, [isInFooterMode]);\r\n  const target = React.useRef<HTMLDivElement>(null);\r\n  const icon = React.useMemo(() => iconSpec ?? iconName, [iconSpec, iconName]);\r\n  const title = React.useMemo(() => toolTip ?? label, [toolTip, label]);\r\n  const classNames = classnames(\r\n    \"uifw-footer-label-left\", \"uifw-footer-indicator\",\r\n    inFooter && \"nz-footer-mode\",\r\n    hasClickAction && \"uifw-footer-action\",\r\n    labelSide === StatusBarLabelSide.Right && \"uifw-footer-label-reversed\",\r\n    className);\r\n  return (\r\n\r\n    <>\r\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n      <div ref={target}\r\n        role=\"button\" tabIndex={-1}\r\n        className={classNames}\r\n        title={title}\r\n        style={style}\r\n        onClick={handleOnIndicatorClick}\r\n      >\r\n        {isLabelVisible && label && <span>{ConditionalStringValue.getValue(label)}</span>}\r\n        {icon && <div className=\"uifw-indicator-icon\"><Icon iconSpec={icon} /></div>}\r\n      </div>\r\n      {dialog && <FooterPopup contentType={contentType}\r\n        target={target.current}\r\n        onClose={() => setIsOpen(false)}\r\n        isOpen={isOpen}>\r\n        {dialog}\r\n      </FooterPopup>}\r\n    </>\r\n  );\r\n}\r\n"]}

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

@@ -42,12 +42,29 @@
   align-items: center;
   visibility: visible;
   color: $buic-foreground-body;
+  gap: 8px;
+
+  &.uifw-footer-action {
+    cursor: pointer;
+
+    &:hover {
+      color: $buic-foreground-primary;
+    }
+  }
+
+  &.uifw-footer-label-reversed {
+    flex-direction: row-reverse;
+  }
 
   >.nz-label {
     font-size: $text-font-size;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    @include for-tablet-landscape-down {
+      display: none;
+    }
   }
 
   &.uifw-indicator-fade-in {
@@ -153,26 +170,23 @@
 }
 
 .uifw-indicator-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: $icon-size;
   width: $icon-size;
-  height: $icon-size;
-  cursor: pointer;
 
   /* Medium devices */
   @include for-tablet-landscape-down {
     font-size: $icon-size-medium;
     width: $icon-size-medium;
-    height: $icon-size-medium;
   }
 
   /* Small devices */
   @include for-phone-only {
     font-size: $icon-size-small;
     width: $icon-size-small;
-    height: $icon-size-small;
-  }
 
-  &:hover {
-    color: $buic-foreground-primary;
   }
+
 }

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

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

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

@@ -93,8 +93,9 @@ class MessageCenterField extends React.Component {
     }
     render() {
         const tooltip = `${this.state.messageCount} ${this._title}`;
+        const divStyle = { ...this.props.style, height: "100%" };
         const footerMessages = (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: this.props.className, style: this.props.style, title: tooltip, ref: this._handleTargetRef },
+            React.createElement("div", { className: this.props.className, style: divStyle, title: tooltip, ref: this._handleTargetRef },
                 React.createElement(appui_layout_react_1.MessageCenter, { indicatorRef: this._indicator, isInFooterMode: this.props.isInFooterMode, label: this.props.isInFooterMode ? this._title : undefined, onClick: this._handleMessageIndicatorClick }, this.state.messageCount.toString())),
             React.createElement(appui_layout_react_1.FooterPopup, { isOpen: this.props.openWidget === this._className, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this.state.target },
                 React.createElement(appui_layout_react_1.MessageCenterDialog, { prompt: UiFramework_1.UiFramework.translate("messageCenter.prompt"), tabs: React.createElement(React.Fragment, null,

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

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

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

@@ -19,7 +19,6 @@ interface SnapModeFieldState {
 declare class SnapModeFieldComponent extends React.Component<SnapModeFieldProps, SnapModeFieldState> {
     private _className;
     private _snapModeFieldArray;
-    private _indicator;
     private _title;
     readonly state: SnapModeFieldState;
     constructor(props: SnapModeFieldProps);
@@ -27,19 +26,12 @@ declare class SnapModeFieldComponent extends React.Component<SnapModeFieldProps,
     private getSnapModeIconNameFromMode;
     /** Standard React render method. */
     render(): React.ReactNode;
-    private _handleTargetRef;
-    private _handleClose;
-    private _handleOutsideClick;
     /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used
-     * to select a SnapMode.
-     */
+      * to select a SnapMode.
+      */
     private getSnapEntries;
     /** Called when user clicks on a Snap Mode entry in the pop-up window. */
     private _handleSnapModeFieldClick;
-    /** Called when user click on field in status bar which triggers the pop-up to open. */
-    private _handleSnapModeIndicatorClick;
-    /** Opens the pop-up window. */
-    private setOpenWidget;
 }
 /**
  * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will

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

@@ -1 +1 @@
-{"version":3,"file":"SnapMode.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD;GACG;AACH,UAAU,kBAAmB,SAAQ,gBAAgB;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CACpC;AASD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,cAAM,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAC1F,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,mBAAmB,CAQzB;IACF,OAAO,CAAC,UAAU,CAAqC;IACvD,OAAO,CAAC,MAAM,CAAmD;IAEjE,SAAyB,KAAK,EAAE,kBAAkB,CAEhD;gBAEU,KAAK,EAAE,kBAAkB;IAOrC,sDAAsD;IACtD,OAAO,CAAC,2BAA2B;IAcnC,oCAAoC;IACpB,MAAM,IAAI,KAAK,CAAC,SAAS;IAoCzC,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,mBAAmB,CAOzB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc;IAiBtB,yEAAyE;IACzE,OAAO,CAAC,yBAAyB,CAE/B;IAEF,uFAAuF;IACvF,OAAO,CAAC,6BAA6B,CAMnC;IAEF,+BAA+B;IAC/B,OAAO,CAAC,aAAa;CAKtB;AAkBD;;;;;GAKG,CACH,eAAO,MAAM,aAAa,qMAAgE,CAAC"}
+{"version":3,"file":"SnapMode.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD;GACG;AACH,UAAU,kBAAmB,SAAQ,gBAAgB;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CACpC;AASD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,cAAM,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IAC1F,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,mBAAmB,CAQzB;IACF,OAAO,CAAC,MAAM,CAAmD;IAEjE,SAAyB,KAAK,EAAE,kBAAkB,CAEhD;gBAEU,KAAK,EAAE,kBAAkB;IAOrC,sDAAsD;IACtD,OAAO,CAAC,2BAA2B;IAcnC,oCAAoC;IACpB,MAAM,IAAI,KAAK,CAAC,SAAS;IAkBzC;;QAEI;IACJ,OAAO,CAAC,cAAc;IAiBtB,yEAAyE;IACzE,OAAO,CAAC,yBAAyB,CAE/B;CAEH;AAkBD;;;;;GAKG,CACH,eAAO,MAAM,aAAa,qMAAgE,CAAC"}

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

@@ -14,6 +14,7 @@ const core_frontend_1 = require("@itwin/core-frontend");
 const appui_layout_react_1 = require("@itwin/appui-layout-react");
 const state_1 = require("../configurableui/state");
 const UiFramework_1 = require("../UiFramework");
+const Indicator_1 = require("./Indicator");
 /**
  * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will
  * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.
@@ -30,36 +31,14 @@ class SnapModeFieldComponent extends React.Component {
             { label: UiFramework_1.UiFramework.translate("snapModeField.midpoint"), value: core_frontend_1.SnapMode.MidPoint, iconName: "snaps-midpoint" },
             { label: UiFramework_1.UiFramework.translate("snapModeField.bisector"), value: core_frontend_1.SnapMode.Bisector, iconName: "snaps-bisector" },
         ];
-        this._indicator = React.createRef();
         this._title = UiFramework_1.UiFramework.translate("snapModeField.snapMode");
         this.state = {
             target: null,
         };
-        this._handleTargetRef = (target) => {
-            this.setState({ target });
-        };
-        this._handleClose = () => {
-            this.setOpenWidget(null);
-        };
-        this._handleOutsideClick = (e) => {
-            if (!this._indicator.current ||
-                !(e.target instanceof Node) ||
-                this._indicator.current.contains(e.target))
-                return;
-            this._handleClose();
-        };
         /** Called when user clicks on a Snap Mode entry in the pop-up window. */
         this._handleSnapModeFieldClick = (snapModeField) => {
             this.props.setSnapMode(snapModeField);
         };
-        /** Called when user click on field in status bar which triggers the pop-up to open. */
-        this._handleSnapModeIndicatorClick = () => {
-            const isOpen = this.props.openWidget === this._className;
-            if (isOpen)
-                this.setOpenWidget(null);
-            else
-                this.setOpenWidget(this._className);
-        };
         const instance = this.constructor;
         this._className = instance.name;
     }
@@ -78,26 +57,16 @@ class SnapModeFieldComponent extends React.Component {
     /** Standard React render method. */
     render() {
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: this._handleTargetRef, className: this.props.className, style: this.props.style, title: this._title },
-                React.createElement(appui_layout_react_1.SnapMode // eslint-disable-line deprecation/deprecation
-                , { icon: React.createElement("i", { className: `icon icon-${this.getSnapModeIconNameFromMode(this.props.snapMode)}` }), indicatorRef: this._indicator, isInFooterMode: this.props.isInFooterMode, onClick: this._handleSnapModeIndicatorClick }, this.props.isInFooterMode ? this._title : /* istanbul ignore next */ undefined)),
-            React.createElement(appui_layout_react_1.FooterPopup, { contentType: appui_layout_react_1.FooterPopupContentType.Panel, isOpen: this.props.openWidget === this._className, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this.state.target },
-                React.createElement(appui_layout_react_1.SnapModePanel, { title: this._title }, this.getSnapEntries()))));
+            React.createElement(Indicator_1.Indicator, { iconName: `icon-${this.getSnapModeIconNameFromMode(this.props.snapMode)}`, toolTip: this._title, label: this._title, isLabelVisible: true, dialog: React.createElement(appui_layout_react_1.SnapModePanel, { title: this._title }, this.getSnapEntries()) })));
     }
     /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used
-     * to select a SnapMode.
-     */
+      * to select a SnapMode.
+      */
     getSnapEntries() {
         return this._snapModeFieldArray.map((item, index) => {
             return (React.createElement(appui_layout_react_1.Snap, { key: `SM_${index}`, onClick: () => this._handleSnapModeFieldClick(item.value), isActive: (this.props.snapMode & item.value) === item.value, icon: React.createElement("i", { className: `icon icon-${item.iconName}` }) }, item.label));
         });
     }
-    /** Opens the pop-up window. */
-    setOpenWidget(openWidget) {
-        // istanbul ignore else
-        if (this.props.onOpenWidget)
-            this.props.onOpenWidget(openWidget);
-    }
 }
 // Used by Redux to map dispatch functions to props entry. This requires SnapModeFieldProps interface above to include a setSnapMode entry */
 const mapDispatch = {

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

@@ -1 +1 @@
-{"version":3,"file":"SnapMode.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.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 * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SnapMode } from \"@itwin/core-frontend\";\r\nimport { FooterPopup, FooterPopupContentType, SnapMode as NZ_SnapMode, Snap, SnapModePanel } from \"@itwin/appui-layout-react\";\r\nimport { ConfigurableUiActions } from \"../configurableui/state\";\r\nimport { StatusBarFieldId } from \"../statusbar/StatusBarWidgetControl\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n// cSpell:ignore multione\r\n/** Defines properties supported by the SnapMode Field Component.\r\n */\r\ninterface SnapModeFieldProps extends StatusFieldProps {\r\n  snapMode: number;\r\n  setSnapMode: (mode: number) => any;\r\n}\r\n\r\n/** Define the properties that will be used to represent the available snap modes. */\r\ninterface SnapModeFieldEntry {\r\n  label: string;\r\n  value: number;\r\n  iconName: string;\r\n}\r\n\r\ninterface SnapModeFieldState {\r\n  target: HTMLElement | null;\r\n}\r\n\r\n/**\r\n * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\r\n */\r\nclass SnapModeFieldComponent extends React.Component<SnapModeFieldProps, SnapModeFieldState> {\r\n  private _className: string;\r\n  private _snapModeFieldArray: SnapModeFieldEntry[] = [\r\n    { label: UiFramework.translate(\"snapModeField.keypoint\"), value: SnapMode.NearestKeypoint as number, iconName: \"snaps\" },\r\n    { label: UiFramework.translate(\"snapModeField.intersection\"), value: SnapMode.Intersection as number, iconName: \"snaps-intersection\" },\r\n    { label: UiFramework.translate(\"snapModeField.center\"), value: SnapMode.Center as number, iconName: \"snaps-center\" },\r\n    { label: UiFramework.translate(\"snapModeField.nearest\"), value: SnapMode.Nearest as number, iconName: \"snaps-nearest\" },\r\n    { label: UiFramework.translate(\"snapModeField.origin\"), value: SnapMode.Origin as number, iconName: \"snaps-origin\" },\r\n    { label: UiFramework.translate(\"snapModeField.midpoint\"), value: SnapMode.MidPoint as number, iconName: \"snaps-midpoint\" },\r\n    { label: UiFramework.translate(\"snapModeField.bisector\"), value: SnapMode.Bisector as number, iconName: \"snaps-bisector\" },\r\n  ];\r\n  private _indicator = React.createRef<HTMLDivElement>();\r\n  private _title = UiFramework.translate(\"snapModeField.snapMode\");\r\n\r\n  public override readonly state: SnapModeFieldState = {\r\n    target: null,\r\n  };\r\n\r\n  constructor(props: SnapModeFieldProps) {\r\n    super(props);\r\n\r\n    const instance = this.constructor;\r\n    this._className = instance.name;\r\n  }\r\n\r\n  /** Return icon class name for a specific snapMode. */\r\n  private getSnapModeIconNameFromMode(snapMode: number): string {\r\n    for (const mode of this._snapModeFieldArray) {\r\n      if (mode.value === snapMode)\r\n        return mode.iconName;\r\n    }\r\n\r\n    /* istanbul ignore else */\r\n    if (snapMode > 0)\r\n      return \"snaps-multione\";\r\n\r\n    /* istanbul ignore next */\r\n    return \"placeholder\";\r\n  }\r\n\r\n  /** Standard React render method. */\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <>\r\n        <div ref={this._handleTargetRef}\r\n          className={this.props.className}\r\n          style={this.props.style}\r\n          title={this._title}\r\n        >\r\n          <NZ_SnapMode // eslint-disable-line deprecation/deprecation\r\n            icon={\r\n              <i className={`icon icon-${this.getSnapModeIconNameFromMode(this.props.snapMode)}`} />\r\n            }\r\n            indicatorRef={this._indicator}\r\n            isInFooterMode={this.props.isInFooterMode}\r\n            onClick={this._handleSnapModeIndicatorClick}\r\n          >\r\n            {this.props.isInFooterMode ? this._title : /* istanbul ignore next */ undefined}\r\n          </NZ_SnapMode>\r\n        </div>\r\n        <FooterPopup\r\n          contentType={FooterPopupContentType.Panel}\r\n          isOpen={this.props.openWidget === this._className}\r\n          onClose={this._handleClose}\r\n          onOutsideClick={this._handleOutsideClick}\r\n          target={this.state.target}\r\n        >\r\n          <SnapModePanel\r\n            title={this._title}\r\n          >\r\n            {this.getSnapEntries()}\r\n          </SnapModePanel>\r\n        </FooterPopup>\r\n      </>\r\n    );\r\n  }\r\n\r\n  private _handleTargetRef = (target: HTMLElement | null) => {\r\n    this.setState({ target });\r\n  };\r\n\r\n  private _handleClose = () => {\r\n    this.setOpenWidget(null);\r\n  };\r\n\r\n  private _handleOutsideClick = (e: MouseEvent) => {\r\n    if (!this._indicator.current ||\r\n      !(e.target instanceof Node) ||\r\n      this._indicator.current.contains(e.target))\r\n      return;\r\n\r\n    this._handleClose();\r\n  };\r\n\r\n  /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used\r\n   * to select a SnapMode.\r\n   */\r\n  private getSnapEntries(): JSX.Element[] {\r\n    return this._snapModeFieldArray.map((item: SnapModeFieldEntry, index: number) => {\r\n      return (\r\n        <Snap\r\n          key={`SM_${index}`}\r\n          onClick={() => this._handleSnapModeFieldClick(item.value)}\r\n          isActive={(this.props.snapMode & item.value) === item.value}\r\n          icon={\r\n            <i className={`icon icon-${item.iconName}`} />\r\n          }\r\n        >\r\n          {item.label}\r\n        </Snap >\r\n      );\r\n    });\r\n  }\r\n\r\n  /** Called when user clicks on a Snap Mode entry in the pop-up window. */\r\n  private _handleSnapModeFieldClick = (snapModeField: number) => {\r\n    this.props.setSnapMode(snapModeField);\r\n  };\r\n\r\n  /** Called when user click on field in status bar which triggers the pop-up to open. */\r\n  private _handleSnapModeIndicatorClick = () => {\r\n    const isOpen = this.props.openWidget === this._className;\r\n    if (isOpen)\r\n      this.setOpenWidget(null);\r\n    else\r\n      this.setOpenWidget(this._className);\r\n  };\r\n\r\n  /** Opens the pop-up window. */\r\n  private setOpenWidget(openWidget: StatusBarFieldId) {\r\n    // istanbul ignore else\r\n    if (this.props.onOpenWidget)\r\n      this.props.onOpenWidget(openWidget);\r\n  }\r\n}\r\n\r\n// Used by Redux to map dispatch functions to props entry. This requires SnapModeFieldProps interface above to include a setSnapMode entry */\r\nconst mapDispatch = {\r\n  setSnapMode: ConfigurableUiActions.setSnapMode,\r\n};\r\n\r\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\r\nfunction mapStateToProps(state: any) {\r\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\r\n  /* istanbul ignore next */\r\n  if (!frameworkState)\r\n    return undefined;\r\n\r\n  return { snapMode: frameworkState.configurableUiState.snapMode };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\r\n * This Field React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SnapModeField = connect(mapStateToProps, mapDispatch)(SnapModeFieldComponent);\r\n"]}
+{"version":3,"file":"SnapMode.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.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 * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { SnapMode } from \"@itwin/core-frontend\";\r\nimport { Snap, SnapModePanel } from \"@itwin/appui-layout-react\";\r\nimport { ConfigurableUiActions } from \"../configurableui/state\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\nimport { Indicator } from \"./Indicator\";\r\n\r\n// cSpell:ignore multione\r\n/** Defines properties supported by the SnapMode Field Component.\r\n */\r\ninterface SnapModeFieldProps extends StatusFieldProps {\r\n  snapMode: number;\r\n  setSnapMode: (mode: number) => any;\r\n}\r\n\r\n/** Define the properties that will be used to represent the available snap modes. */\r\ninterface SnapModeFieldEntry {\r\n  label: string;\r\n  value: number;\r\n  iconName: string;\r\n}\r\n\r\ninterface SnapModeFieldState {\r\n  target: HTMLElement | null;\r\n}\r\n\r\n/**\r\n * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\r\n */\r\nclass SnapModeFieldComponent extends React.Component<SnapModeFieldProps, SnapModeFieldState> {\r\n  private _className: string;\r\n  private _snapModeFieldArray: SnapModeFieldEntry[] = [\r\n    { label: UiFramework.translate(\"snapModeField.keypoint\"), value: SnapMode.NearestKeypoint as number, iconName: \"snaps\" },\r\n    { label: UiFramework.translate(\"snapModeField.intersection\"), value: SnapMode.Intersection as number, iconName: \"snaps-intersection\" },\r\n    { label: UiFramework.translate(\"snapModeField.center\"), value: SnapMode.Center as number, iconName: \"snaps-center\" },\r\n    { label: UiFramework.translate(\"snapModeField.nearest\"), value: SnapMode.Nearest as number, iconName: \"snaps-nearest\" },\r\n    { label: UiFramework.translate(\"snapModeField.origin\"), value: SnapMode.Origin as number, iconName: \"snaps-origin\" },\r\n    { label: UiFramework.translate(\"snapModeField.midpoint\"), value: SnapMode.MidPoint as number, iconName: \"snaps-midpoint\" },\r\n    { label: UiFramework.translate(\"snapModeField.bisector\"), value: SnapMode.Bisector as number, iconName: \"snaps-bisector\" },\r\n  ];\r\n  private _title = UiFramework.translate(\"snapModeField.snapMode\");\r\n\r\n  public override readonly state: SnapModeFieldState = {\r\n    target: null,\r\n  };\r\n\r\n  constructor(props: SnapModeFieldProps) {\r\n    super(props);\r\n\r\n    const instance = this.constructor;\r\n    this._className = instance.name;\r\n  }\r\n\r\n  /** Return icon class name for a specific snapMode. */\r\n  private getSnapModeIconNameFromMode(snapMode: number): string {\r\n    for (const mode of this._snapModeFieldArray) {\r\n      if (mode.value === snapMode)\r\n        return mode.iconName;\r\n    }\r\n\r\n    /* istanbul ignore else */\r\n    if (snapMode > 0)\r\n      return \"snaps-multione\";\r\n\r\n    /* istanbul ignore next */\r\n    return \"placeholder\";\r\n  }\r\n\r\n  /** Standard React render method. */\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <>\r\n        <Indicator\r\n          iconName={`icon-${this.getSnapModeIconNameFromMode(this.props.snapMode)}`}\r\n          toolTip={this._title}\r\n          label={this._title}\r\n          isLabelVisible={true}\r\n          dialog={\r\n            <SnapModePanel title={this._title}>\r\n              {this.getSnapEntries()}\r\n            </SnapModePanel>\r\n          }\r\n        />\r\n      </>\r\n    );\r\n  }\r\n\r\n  /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used\r\n    * to select a SnapMode.\r\n    */\r\n  private getSnapEntries(): JSX.Element[] {\r\n    return this._snapModeFieldArray.map((item: SnapModeFieldEntry, index: number) => {\r\n      return (\r\n        <Snap\r\n          key={`SM_${index}`}\r\n          onClick={() => this._handleSnapModeFieldClick(item.value)}\r\n          isActive={(this.props.snapMode & item.value) === item.value}\r\n          icon={\r\n            <i className={`icon icon-${item.iconName}`} />\r\n          }\r\n        >\r\n          {item.label}\r\n        </Snap >\r\n      );\r\n    });\r\n  }\r\n\r\n  /** Called when user clicks on a Snap Mode entry in the pop-up window. */\r\n  private _handleSnapModeFieldClick = (snapModeField: number) => {\r\n    this.props.setSnapMode(snapModeField);\r\n  };\r\n\r\n}\r\n\r\n// Used by Redux to map dispatch functions to props entry. This requires SnapModeFieldProps interface above to include a setSnapMode entry */\r\nconst mapDispatch = {\r\n  setSnapMode: ConfigurableUiActions.setSnapMode,\r\n};\r\n\r\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\r\nfunction mapStateToProps(state: any) {\r\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\r\n  /* istanbul ignore next */\r\n  if (!frameworkState)\r\n    return undefined;\r\n\r\n  return { snapMode: frameworkState.configurableUiState.snapMode };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * Snap Mode Field React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\r\n * This Field React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SnapModeField = connect(mapStateToProps, mapDispatch)(SnapModeFieldComponent);\r\n"]}

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

@@ -18,8 +18,6 @@ export declare class ViewAttributesStatusField extends React.Component<StatusFie
     private _title;
     constructor(props: StatusFieldProps);
     componentDidMount(): void;
-    /** Handle opening/closing the dialog */
-    private _handleIndicatorClick;
     private updateState;
     private _handleViewFlagClick;
     private _handleToggleCamera;
@@ -29,10 +27,6 @@ export declare class ViewAttributesStatusField extends React.Component<StatusFie
     private getToggleCameraItem;
     private getViewFlags;
     render(): JSX.Element;
-    private _handleTargetRef;
-    private _handleClose;
-    /** Opens the pop-up window. */
-    private setOpenWidget;
 }
 export {};
 //# sourceMappingURL=ViewAttributes.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ViewAttributes.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/ViewAttributes.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAa,MAAM,oBAAoB,CAAC;AAO9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,UAAU,8BAA8B;IACtC,SAAS,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,EAAE,8BAA8B,CAAC;IAC9G,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAAqD;gBAEvD,KAAK,EAAE,gBAAgB;IAYnB,iBAAiB;IAIjC,wCAAwC;IACxC,OAAO,CAAC,qBAAqB,CAQ3B;IAGF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,oBAAoB,CAQ1B;IAEF,OAAO,CAAC,mBAAmB,CAGzB;IAGF,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,YAAY;IAcJ,MAAM;IA4BtB,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,+BAA+B;IAC/B,OAAO,CAAC,aAAa;CAKtB"}
+{"version":3,"file":"ViewAttributes.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/ViewAttributes.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAa,MAAM,oBAAoB,CAAC;AAM9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,UAAU,8BAA8B;IACtC,SAAS,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,EAAE,8BAA8B,CAAC;IAC9G,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAAqD;gBAEvD,KAAK,EAAE,gBAAgB;IAYnB,iBAAiB;IAKjC,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,oBAAoB,CAQ1B;IAEF,OAAO,CAAC,mBAAmB,CAGzB;IAGF,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,YAAY;IAcJ,MAAM;CAoBvB"}

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

@@ -23,15 +23,6 @@ class ViewAttributesStatusField extends React.Component {
     constructor(props) {
         super(props);
         this._title = UiFramework_1.UiFramework.translate("listTools.viewAttributes");
-        /** Handle opening/closing the dialog */
-        this._handleIndicatorClick = () => {
-            this.updateState();
-            const isOpen = this.props.openWidget === this._className;
-            if (isOpen)
-                this.setOpenWidget(null);
-            else
-                this.setOpenWidget(this._className);
-        };
         // istanbul ignore next
         this._handleViewFlagClick = (flagName) => {
             if (core_frontend_1.IModelApp.viewManager.selectedView) {
@@ -46,12 +37,6 @@ class ViewAttributesStatusField extends React.Component {
             await core_frontend_1.IModelApp.tools.run("View.ToggleCamera", core_frontend_1.IModelApp.viewManager.selectedView);
             this.updateState();
         };
-        this._handleTargetRef = (target) => {
-            this.setState({ target });
-        };
-        this._handleClose = () => {
-            this.setOpenWidget(null);
-        };
         this.state = {
             cameraOn: false,
             viewFlags: {},
@@ -104,16 +89,7 @@ class ViewAttributesStatusField extends React.Component {
     render() {
         const isOpen = this.props.openWidget === this._className;
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: this._handleTargetRef, title: this._title },
-                React.createElement(Indicator_1.Indicator, { iconName: "icon-window-settings", onClick: this._handleIndicatorClick, opened: isOpen, isInFooterMode: this.props.isInFooterMode })),
-            React.createElement(appui_layout_react_1.FooterPopup, { target: this.state.target, onClose: this._handleClose, isOpen: isOpen },
-                React.createElement(appui_layout_react_1.Dialog, { titleBar: React.createElement(appui_layout_react_1.TitleBar, { title: this._title }) }, this.getViewFlags()))));
-    }
-    /** Opens the pop-up window. */
-    setOpenWidget(openWidget) {
-        // istanbul ignore else
-        if (this.props.onOpenWidget)
-            this.props.onOpenWidget(openWidget);
+            React.createElement(Indicator_1.Indicator, { iconName: "icon-window-settings", opened: isOpen, toolTip: this._title, dialog: React.createElement(appui_layout_react_1.Dialog, { titleBar: React.createElement(appui_layout_react_1.TitleBar, { title: this._title }) }, this.getViewFlags()), isInFooterMode: this.props.isInFooterMode })));
     }
 }
 exports.ViewAttributesStatusField = ViewAttributesStatusField;