@itwin/appui-react 3.0.0-dev.98 → 3.1.0-dev.0

package/lib/esm/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,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,IAAI,EAAE,MAAM,mBAAmB,CAAC;AA0BtD;;GAEG;AACH,MAAM,OAAO,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,UAAU,CAC1B,uBAAuB,EACvB,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,gBAAgB,EAC7C,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAExB,MAAM,cAAc,GAAG,UAAU,CAC/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,IAAI,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","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":"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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 \"./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 className=\"nz-label\">{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/esm/appui-react/statusfields/Indicator.scss

@@ -42,6 +42,30 @@
   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 {
     animation: uifw-indicator-FadeIn 1s linear;
@@ -86,16 +110,6 @@
     padding-right: $nz-footer-indicator-horizontal-padding-small;
   }
 
-  >.nz-label {
-    margin-right: $space-between-text-and-icon;
-    display: none;
-    font-size: $text-font-size;
-
-    &.nz-is-visible {
-      display: block;
-    }
-  }
-
   >.nz-balloon-container {
     height: 100%;
     position: relative;
@@ -147,26 +161,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/esm/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/esm/appui-react/statusfields/MessageCenter.js

@@ -90,8 +90,9 @@ export 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(MessageCenter, { indicatorRef: this._indicator, isInFooterMode: this.props.isInFooterMode, label: this.props.isInFooterMode ? this._title : undefined, onClick: this._handleMessageIndicatorClick }, this.state.messageCount.toString())),
             React.createElement(FooterPopup, { isOpen: this.props.openWidget === this._className, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this.state.target },
                 React.createElement(MessageCenterDialog, { prompt: UiFramework.translate("messageCenter.prompt"), tabs: React.createElement(React.Fragment, null,

package/lib/esm/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/esm/appui-react/statusfields/SelectionScope.d.ts

@@ -23,6 +23,7 @@ interface SelectionScopeFieldProps extends StatusFieldProps {
 declare class SelectionScopeFieldComponent extends React.Component<SelectionScopeFieldProps> {
     private _label;
     private _toolTip;
+    private _scopeOptions;
     constructor(props: SelectionScopeFieldProps);
     private _updateSelectValue;
     render(): React.ReactNode;

package/lib/esm/appui-react/statusfields/SelectionScope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionScope.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;GAEG;AACH,UAAU,wBAAyB,SAAQ,gBAAgB;IAEzD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wBAAwB,EAAE,0BAA0B,EAAE,CAAC;CACxD;AAED;;;;;;;GAOG;AACH,cAAM,4BAA6B,SAAQ,KAAK,CAAC,SAAS,CAAC,wBAAwB,CAAC;IAClF,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,QAAQ,CAAwD;gBAE5D,KAAK,EAAE,wBAAwB;IAI3C,OAAO,CAAC,kBAAkB,CAKxB;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;CA0B1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,mBAAmB,gPAAyD,CAAC"}
+{"version":3,"file":"SelectionScope.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;GAEG;AACH,UAAU,wBAAyB,SAAQ,gBAAgB;IAEzD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wBAAwB,EAAE,0BAA0B,EAAE,CAAC;CACxD;AAED;;;;;;;GAOG;AACH,cAAM,4BAA6B,SAAQ,KAAK,CAAC,SAAS,CAAC,wBAAwB,CAAC;IAClF,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,QAAQ,CAAwD;IACxE,OAAO,CAAC,aAAa,CAA8B;gBAEvC,KAAK,EAAE,wBAAwB;IAQ3C,OAAO,CAAC,kBAAkB,CAKxB;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;CAwB1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,mBAAmB,gPAAyD,CAAC"}

package/lib/esm/appui-react/statusfields/SelectionScope.js

@@ -25,23 +25,25 @@ class SelectionScopeFieldComponent extends React.Component {
         super(props);
         this._label = UiFramework.translate("selectionScopeField.label");
         this._toolTip = UiFramework.translate("selectionScopeField.toolTip");
+        this._scopeOptions = [];
         this._updateSelectValue = (newValue) => {
             // istanbul ignore else
             if (newValue) {
                 UiFramework.setActiveSelectionScope(newValue);
             }
         };
+        this._scopeOptions = this.props.availableSelectionScopes.map((scope) => {
+            const label = UiFramework.translate(`selectionScopeLabels.${scope.id}`);
+            return { value: scope.id, label };
+        });
     }
     render() {
-        const scopeOptions = this.props.availableSelectionScopes.map((scope) => {
-            return { value: scope.id, label: scope.label };
-        });
         return (React.createElement(FooterIndicator, { className: classnames("uifw-statusFields-selectionScope", this.props.className), style: this.props.style, isInFooterMode: this.props.isInFooterMode },
             this.props.isInFooterMode &&
                 React.createElement("label", { className: "uifw-statusFields-selectionScope-label" },
                     this._label,
                     ":"),
-            React.createElement(Select, { className: "uifw-statusFields-selectionScope-selector", value: this.props.activeSelectionScope, options: scopeOptions, onChange: this._updateSelectValue, "data-testid": "components-selectionScope-selector", title: this._toolTip })));
+            React.createElement(Select, { className: "uifw-statusFields-selectionScope-selector", value: this.props.activeSelectionScope, options: this._scopeOptions, onChange: this._updateSelectValue, "data-testid": "components-selectionScope-selector", title: this._toolTip, size: "small" })));
     }
 }
 /** Function used by Redux to map state data in Redux store to props that are used to render this component. */

package/lib/esm/appui-react/statusfields/SelectionScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionScope.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAY7C;;;;;;;GAOG;AACH,MAAM,4BAA6B,SAAQ,KAAK,CAAC,SAAmC;IAIlF,YAAY,KAA+B;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJP,WAAM,GAAG,WAAW,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAC5D,aAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC;QAMhE,uBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE;YAChD,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,WAAW,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;aAC/C;QACH,CAAC,CAAC;IAPF,CAAC;IASe,MAAM;QACpB,MAAM,YAAY,GAA2B,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,KAAiC,EAAE,EAAE;YACzH,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;QACjD,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,UAAU,CAAC,kCAAkC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC/E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc;YAExC,IAAI,CAAC,KAAK,CAAC,cAAc;gBACxB,+BAAO,SAAS,EAAC,wCAAwC;oBACtD,IAAI,CAAC,MAAM;wBACN;YAEV,oBAAC,MAAM,IACL,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,EACtC,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,iBACrB,oCAAoC,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAI,CACT,CACpB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,oBAAoB,EAAE,cAAc,CAAC,YAAY,CAAC,oBAAoB,EAAE,wBAAwB,EAAE,cAAc,CAAC,YAAY,CAAC,wBAAwB,EAAE,CAAC;AACpK,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACpE,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,4BAA4B,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module StatusBar\r\n */\r\n\r\nimport \"./SelectionScope.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { PresentationSelectionScope } from \"../redux/SessionState\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n/** Defines properties supported by the SelectionScopeField Component.\r\n * @public\r\n */\r\ninterface SelectionScopeFieldProps extends StatusFieldProps {\r\n\r\n  activeSelectionScope: string;\r\n  availableSelectionScopes: PresentationSelectionScope[];\r\n}\r\n\r\n/**\r\n * Status Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\r\n * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents\r\n * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated\r\n * in the Redux state.\r\n * @public\r\n */\r\nclass SelectionScopeFieldComponent extends React.Component<SelectionScopeFieldProps> {\r\n  private _label = UiFramework.translate(\"selectionScopeField.label\");\r\n  private _toolTip = UiFramework.translate(\"selectionScopeField.toolTip\");\r\n\r\n  constructor(props: SelectionScopeFieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _updateSelectValue = (newValue: string) => {\r\n    // istanbul ignore else\r\n    if (newValue) {\r\n      UiFramework.setActiveSelectionScope(newValue);\r\n    }\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    const scopeOptions: SelectOption<string>[] = this.props.availableSelectionScopes.map((scope: PresentationSelectionScope) => {\r\n      return { value: scope.id, label: scope.label };\r\n    });\r\n\r\n    return (\r\n      <FooterIndicator\r\n        className={classnames(\"uifw-statusFields-selectionScope\", this.props.className)}\r\n        style={this.props.style}\r\n        isInFooterMode={this.props.isInFooterMode}\r\n      >\r\n        {this.props.isInFooterMode &&\r\n          <label className=\"uifw-statusFields-selectionScope-label\">\r\n            {this._label}:\r\n          </label>\r\n        }\r\n        <Select\r\n          className=\"uifw-statusFields-selectionScope-selector\"\r\n          value={this.props.activeSelectionScope}\r\n          options={scopeOptions}\r\n          onChange={this._updateSelectValue}\r\n          data-testid=\"components-selectionScope-selector\"\r\n          title={this._toolTip} />\r\n      </FooterIndicator >\r\n    );\r\n  }\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 { activeSelectionScope: frameworkState.sessionState.activeSelectionScope, availableSelectionScopes: frameworkState.sessionState.availableSelectionScopes };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.\r\n * This React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SelectionScopeField = connect(mapStateToProps)(SelectionScopeFieldComponent);\r\n"]}
+{"version":3,"file":"SelectionScope.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAY7C;;;;;;;GAOG;AACH,MAAM,4BAA6B,SAAQ,KAAK,CAAC,SAAmC;IAKlF,YAAY,KAA+B;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;QALP,WAAM,GAAG,WAAW,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAC5D,aAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC;QAChE,kBAAa,GAA2B,EAAE,CAAC;QAU3C,uBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE;YAChD,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,WAAW,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;aAC/C;QACH,CAAC,CAAC;QAXA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,KAAiC,EAAE,EAAE;YACjG,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,wBAAwB,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;YACxE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC;IASe,MAAM;QAEpB,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,UAAU,CAAC,kCAAkC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC/E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc;YAExC,IAAI,CAAC,KAAK,CAAC,cAAc;gBACxB,+BAAO,SAAS,EAAC,wCAAwC;oBACtD,IAAI,CAAC,MAAM;wBACN;YAEV,oBAAC,MAAM,IACL,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,EACtC,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,kBAAkB,iBACrB,oCAAoC,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,IAAI,EAAC,OAAO,GAAG,CACA,CACpB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,oBAAoB,EAAE,cAAc,CAAC,YAAY,CAAC,oBAAoB,EAAE,wBAAwB,EAAE,cAAc,CAAC,YAAY,CAAC,wBAAwB,EAAE,CAAC;AACpK,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACpE,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,4BAA4B,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module StatusBar\r\n */\r\n\r\nimport \"./SelectionScope.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { PresentationSelectionScope } from \"../redux/SessionState\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusFieldProps } from \"./StatusFieldProps\";\r\n\r\n/** Defines properties supported by the SelectionScopeField Component.\r\n * @public\r\n */\r\ninterface SelectionScopeFieldProps extends StatusFieldProps {\r\n\r\n  activeSelectionScope: string;\r\n  availableSelectionScopes: PresentationSelectionScope[];\r\n}\r\n\r\n/**\r\n * Status Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\r\n * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents\r\n * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated\r\n * in the Redux state.\r\n * @public\r\n */\r\nclass SelectionScopeFieldComponent extends React.Component<SelectionScopeFieldProps> {\r\n  private _label = UiFramework.translate(\"selectionScopeField.label\");\r\n  private _toolTip = UiFramework.translate(\"selectionScopeField.toolTip\");\r\n  private _scopeOptions: SelectOption<string>[] = [];\r\n\r\n  constructor(props: SelectionScopeFieldProps) {\r\n    super(props);\r\n    this._scopeOptions = this.props.availableSelectionScopes.map((scope: PresentationSelectionScope) => {\r\n      const label = UiFramework.translate(`selectionScopeLabels.${scope.id}`);\r\n      return { value: scope.id, label };\r\n    });\r\n  }\r\n\r\n  private _updateSelectValue = (newValue: string) => {\r\n    // istanbul ignore else\r\n    if (newValue) {\r\n      UiFramework.setActiveSelectionScope(newValue);\r\n    }\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n\r\n    return (\r\n      <FooterIndicator\r\n        className={classnames(\"uifw-statusFields-selectionScope\", this.props.className)}\r\n        style={this.props.style}\r\n        isInFooterMode={this.props.isInFooterMode}\r\n      >\r\n        {this.props.isInFooterMode &&\r\n          <label className=\"uifw-statusFields-selectionScope-label\">\r\n            {this._label}:\r\n          </label>\r\n        }\r\n        <Select\r\n          className=\"uifw-statusFields-selectionScope-selector\"\r\n          value={this.props.activeSelectionScope}\r\n          options={this._scopeOptions}\r\n          onChange={this._updateSelectValue}\r\n          data-testid=\"components-selectionScope-selector\"\r\n          title={this._toolTip}\r\n          size=\"small\" />\r\n      </FooterIndicator >\r\n    );\r\n  }\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 { activeSelectionScope: frameworkState.sessionState.activeSelectionScope, availableSelectionScopes: frameworkState.sessionState.availableSelectionScopes };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will\r\n * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.\r\n * This React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SelectionScopeField = connect(mapStateToProps)(SelectionScopeFieldComponent);\r\n"]}

package/lib/esm/appui-react/statusfields/SelectionScope.scss

@@ -15,6 +15,9 @@
   >.uifw-statusFields-selectionScope-label {
     display: inline;
     padding-right: 4px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 
     @include for-tablet-portrait-down {
       display: none;
@@ -23,7 +26,10 @@
   }
 
   >.uifw-statusFields-selectionScope-selector {
-    min-width: 130px;
+    min-width: 140px;
+    &.iui-select.iui-small {
+      width: auto;
+    }
 
     @include for-tablet-portrait-down {
       font-size: $font-size-medium;
@@ -32,7 +38,11 @@
     @include for-phone-only {
       font-size: $font-size-small;
     }
-
   }
+}
+
+.uifw-statusFields-selectionScope-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 
-}

package/lib/esm/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/esm/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/esm/appui-react/statusfields/SnapMode.js

@@ -8,9 +8,10 @@
 import * as React from "react";
 import { connect } from "react-redux";
 import { SnapMode } from "@itwin/core-frontend";
-import { FooterPopup, FooterPopupContentType, SnapMode as NZ_SnapMode, Snap, SnapModePanel } from "@itwin/appui-layout-react";
+import { Snap, SnapModePanel } from "@itwin/appui-layout-react";
 import { ConfigurableUiActions } from "../configurableui/state";
 import { UiFramework } from "../UiFramework";
+import { Indicator } from "./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.
@@ -27,36 +28,14 @@ class SnapModeFieldComponent extends React.Component {
             { label: UiFramework.translate("snapModeField.midpoint"), value: SnapMode.MidPoint, iconName: "snaps-midpoint" },
             { label: UiFramework.translate("snapModeField.bisector"), value: SnapMode.Bisector, iconName: "snaps-bisector" },
         ];
-        this._indicator = React.createRef();
         this._title = 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;
     }
@@ -75,25 +54,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(NZ_SnapMode, { 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(FooterPopup, { contentType: FooterPopupContentType.Panel, isOpen: this.props.openWidget === this._className, onClose: this._handleClose, onOutsideClick: this._handleOutsideClick, target: this.state.target },
-                React.createElement(SnapModePanel, { title: this._title }, this.getSnapEntries()))));
+            React.createElement(Indicator, { iconName: `icon-${this.getSnapModeIconNameFromMode(this.props.snapMode)}`, toolTip: this._title, label: this._title, isLabelVisible: true, dialog: React.createElement(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(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/esm/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\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/esm/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/esm/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/esm/appui-react/statusfields/ViewAttributes.js

@@ -9,7 +9,7 @@ import "./ViewAttributes.scss";
 import * as React from "react";
 import { ViewFlags } from "@itwin/core-common";
 import { IModelApp } from "@itwin/core-frontend";
-import { Dialog, FooterPopup, TitleBar } from "@itwin/appui-layout-react";
+import { Dialog, TitleBar } from "@itwin/appui-layout-react";
 import { Checkbox } from "@itwin/itwinui-react";
 import { UiFramework } from "../UiFramework";
 import { Indicator } from "./Indicator";
@@ -20,15 +20,6 @@ export class ViewAttributesStatusField extends React.Component {
     constructor(props) {
         super(props);
         this._title = 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 (IModelApp.viewManager.selectedView) {
@@ -43,12 +34,6 @@ export class ViewAttributesStatusField extends React.Component {
             await IModelApp.tools.run("View.ToggleCamera", IModelApp.viewManager.selectedView);
             this.updateState();
         };
-        this._handleTargetRef = (target) => {
-            this.setState({ target });
-        };
-        this._handleClose = () => {
-            this.setOpenWidget(null);
-        };
         this.state = {
             cameraOn: false,
             viewFlags: {},
@@ -101,16 +86,7 @@ export 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, { iconName: "icon-window-settings", onClick: this._handleIndicatorClick, opened: isOpen, isInFooterMode: this.props.isInFooterMode })),
-            React.createElement(FooterPopup, { target: this.state.target, onClose: this._handleClose, isOpen: isOpen },
-                React.createElement(Dialog, { titleBar: React.createElement(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, { iconName: "icon-window-settings", opened: isOpen, toolTip: this._title, dialog: React.createElement(Dialog, { titleBar: React.createElement(TitleBar, { title: this._title }) }, this.getViewFlags()), isInFooterMode: this.props.isInFooterMode })));
     }
 }
 //# sourceMappingURL=ViewAttributes.js.map