@itwin/appui-react 4.15.5 → 4.16.0

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

@@ -7,10 +7,12 @@ import { ConfigurableUiControlType } from "../configurableui/ConfigurableUiContr
 import { WidgetControl } from "../widgets/WidgetControl";
 /** Status Bar Field type.
  * @public
+ * @deprecated in 4.16.0. Type is not used in AppUI.
  */
 export type StatusBarFieldId = string | null;
 /** Status Bar Widget Control.
  * @public
+ * @deprecated in 4.16.0. Extends a deprecated class {@link WidgetControl}.
  */
 export declare abstract class StatusBarWidgetControl extends WidgetControl {
     constructor(info: ConfigurableCreateInfo, options: any);

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBarWidgetControl.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBarWidgetControl.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAC;AAE7C;;GAEG;AACH,8BAAsB,sBAAuB,SAAQ,aAAa;gBACpD,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG;IAItD,wEAAwE;aACxD,YAAY,IAAI,KAAK,CAAC,SAAS;IAE/C,sFAAsF;IACtE,OAAO,IAAI,yBAAyB;CAGrD"}
+{"version":3,"file":"StatusBarWidgetControl.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBarWidgetControl.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAAC;AAE7C;;;GAGG;AACH,8BAAsB,sBAAuB,SAAQ,aAAa;gBACpD,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG;IAItD,wEAAwE;aACxD,YAAY,IAAI,KAAK,CAAC,SAAS;IAE/C,sFAAsF;IACtE,OAAO,IAAI,yBAAyB;CAGrD"}

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

@@ -9,6 +9,7 @@ import { ConfigurableUiControlType } from "../configurableui/ConfigurableUiContr
 import { WidgetControl } from "../widgets/WidgetControl";
 /** Status Bar Widget Control.
  * @public
+ * @deprecated in 4.16.0. Extends a deprecated class {@link WidgetControl}.
  */
 export class StatusBarWidgetControl extends WidgetControl {
     constructor(info, options) {

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBarWidgetControl.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBarWidgetControl.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAOzD;;GAEG;AACH,MAAM,OAAgB,sBAAuB,SAAQ,aAAa;IAChE,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACvB,CAAC;IAKD,sFAAsF;IACtE,OAAO;QACrB,OAAO,yBAAyB,CAAC,eAAe,CAAC;IACnD,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport type { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\nimport { ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\nimport { WidgetControl } from \"../widgets/WidgetControl\";\n\n/** Status Bar Field type.\n * @public\n */\nexport type StatusBarFieldId = string | null;\n\n/** Status Bar Widget Control.\n * @public\n */\nexport abstract class StatusBarWidgetControl extends WidgetControl {\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n  }\n\n  /** Gets the React node associated with this StatusBar Widget Control */\n  public abstract getReactNode(): React.ReactNode;\n\n  /** Gets the type of ConfigurableUiControl, which is 'StatusBarWidget' in this case */\n  public override getType(): ConfigurableUiControlType {\n    return ConfigurableUiControlType.StatusBarWidget;\n  }\n}\n"]}
+{"version":3,"file":"StatusBarWidgetControl.js","sourceRoot":"","sources":["../../../../src/appui-react/statusbar/StatusBarWidgetControl.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAUzD;;;GAGG;AACH,MAAM,OAAgB,sBAAuB,SAAQ,aAAa;IAChE,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACvB,CAAC;IAKD,sFAAsF;IACtE,OAAO;QACrB,OAAO,yBAAyB,CAAC,eAAe,CAAC;IACnD,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport type { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\nimport { ConfigurableUiControlType } from \"../configurableui/ConfigurableUiControl\";\nimport { WidgetControl } from \"../widgets/WidgetControl\";\n\n/* eslint-disable deprecation/deprecation */\n\n/** Status Bar Field type.\n * @public\n * @deprecated in 4.16.0. Type is not used in AppUI.\n */\nexport type StatusBarFieldId = string | null;\n\n/** Status Bar Widget Control.\n * @public\n * @deprecated in 4.16.0. Extends a deprecated class {@link WidgetControl}.\n */\nexport abstract class StatusBarWidgetControl extends WidgetControl {\n  constructor(info: ConfigurableCreateInfo, options: any) {\n    super(info, options);\n  }\n\n  /** Gets the React node associated with this StatusBar Widget Control */\n  public abstract getReactNode(): React.ReactNode;\n\n  /** Gets the type of ConfigurableUiControl, which is 'StatusBarWidget' in this case */\n  public override getType(): ConfigurableUiControlType {\n    return ConfigurableUiControlType.StatusBarWidget;\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/statusbar/dialog/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AAEH,MAAM,WAAW,kCAAmC,SAAQ,WAAW;IACrE,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,kCAAkC,qBAG1C"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/statusbar/dialog/Button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AAEH,MAAM,WAAW,kCAAmC,SAAQ,WAAW;IACrE,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,kCAAkC,qBAW1C"}

package/lib/esm/appui-react/statusbar/dialog/Button.js

@@ -11,6 +11,7 @@ import { IconButton } from "@itwin/itwinui-react";
  * @beta
  */
 export function StatusBarDialogTitleBarButton(props) {
-    return React.createElement(IconButton, { ...props, styleType: "borderless", size: "small" });
+    const { title, ...otherProps } = props;
+    return (React.createElement(IconButton, { ...otherProps, styleType: "borderless", size: "small", label: title }));
 }
 //# sourceMappingURL=Button.js.map

package/lib/esm/appui-react/statusbar/dialog/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusbar/dialog/Button.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAelD;;GAEG;AACH,MAAM,UAAU,6BAA6B,CAC3C,KAAyC;IAEzC,OAAO,oBAAC,UAAU,OAAK,KAAK,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAG,CAAC;AACvE,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport type { CommonProps } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\n\n/** Properties of [[StatusBarDialogTitleBarButton]] component.\n * @beta\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface StatusBarDialogTitleBarButtonProps extends CommonProps {\n  /** Button content. */\n  children?: React.ReactNode;\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Button title. */\n  title?: string;\n}\n\n/** Dialog component used in a [[StatusBarDialog]] component.\n * @beta\n */\nexport function StatusBarDialogTitleBarButton(\n  props: StatusBarDialogTitleBarButtonProps\n) {\n  return <IconButton {...props} styleType=\"borderless\" size=\"small\" />;\n}\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusbar/dialog/Button.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAelD;;GAEG;AACH,MAAM,UAAU,6BAA6B,CAC3C,KAAyC;IAEzC,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACvC,OAAO,CACL,oBAAC,UAAU,OACL,UAAU,EACd,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport type { CommonProps } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\n\n/** Properties of [[StatusBarDialogTitleBarButton]] component.\n * @beta\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface StatusBarDialogTitleBarButtonProps extends CommonProps {\n  /** Button content. */\n  children?: React.ReactNode;\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Button title. */\n  title?: string;\n}\n\n/** Dialog component used in a [[StatusBarDialog]] component.\n * @beta\n */\nexport function StatusBarDialogTitleBarButton(\n  props: StatusBarDialogTitleBarButtonProps\n) {\n  const { title, ...otherProps } = props;\n  return (\n    <IconButton\n      {...otherProps}\n      styleType=\"borderless\"\n      size=\"small\"\n      label={title}\n    />\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SectionsField.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAUH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,sBAAsB,CAAC;AAI9B;;GAEG;AAEH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,qBA4FlE"}
+{"version":3,"file":"SectionsField.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AASH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,sBAAsB,CAAC;AAI9B;;GAEG;AAEH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,qBAqFlE"}

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

@@ -27,21 +27,16 @@ export function SectionsStatusField(props) {
     const [isPopupOpen, setPopupOpen] = React.useState(false);
     const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
     React.useEffect(() => {
-        const onClipChanged = (viewport, _eventType, _provider) => {
+        const clipActive = !!activeViewport && !!activeViewport.view.getViewClip();
+        setShowIndicator(clipActive || !props.hideWhenUnused);
+        setHasManipulatorsShown(clipActive && !!activeViewport && !!ViewClipDecoration.get(activeViewport));
+        return ViewClipDecorationProvider.create().onActiveClipChanged.addListener((viewport) => {
             if (viewport !== activeViewport)
                 return;
             setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));
             const isClipActive = !!activeViewport.view.getViewClip();
             setShowIndicator(isClipActive || !props.hideWhenUnused);
-        };
-        const clipActive = !!activeViewport && !!activeViewport.view.getViewClip();
-        setShowIndicator(clipActive || !props.hideWhenUnused);
-        setHasManipulatorsShown(clipActive && !!activeViewport && !!ViewClipDecoration.get(activeViewport));
-        ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
-        return () => {
-            // Get or create static ViewClipDecorationProvider
-            ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
-        };
+        });
     }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
     const toggleManipulators = async (e) => {
         if (activeViewport) {
@@ -59,7 +54,7 @@ export function SectionsStatusField(props) {
                 React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
                     React.createElement("div", { className: classnames("uifw-sections-label") }, translate("tools.sectionShowHandles")),
                     React.createElement(ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown })))) },
-        React.createElement(IconButton, { title: tooltip, styleType: "borderless" },
+        React.createElement(IconButton, { label: tooltip, styleType: "borderless", "data-testid": "sections-status-field-button" },
             React.createElement(Icon, { iconSpec: svgSectionTool }),
             React.createElement(StatusBarPopover.ExpandIndicator, null))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport svgSectionTool from \"@bentley/icons-generic/icons/section-tool.svg\";\nimport type { ClipEventType, Viewport } from \"@itwin/core-frontend\";\nimport {\n  IModelApp,\n  ViewClipClearTool,\n  ViewClipDecoration,\n  ViewClipDecorationProvider,\n} from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { Button, IconButton, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\nimport { StatusBarDialog } from \"../statusbar/dialog/Dialog\";\nimport \"./SectionsField.scss\";\nimport { useTranslation } from \"../hooks/useTranslation\";\nimport { StatusBarPopover } from \"../statusbar/popup/StatusBarPopover\";\n\n/** Sections Status Field Props\n * @beta\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface SectionsStatusFieldProps extends CommonProps {\n  hideWhenUnused?: boolean;\n}\n\n/** Status Field for showing section extra tools for clearing and showing manipulators\n * @beta\n */\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\n  const { translate } = useTranslation();\n  const tooltip = translate(\"tools.sectionTools\");\n\n  const activeViewport = useActiveViewport();\n  const [showIndicator, setShowIndicator] = React.useState(false);\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\n\n  React.useEffect(() => {\n    const onClipChanged = (\n      viewport: Viewport,\n      _eventType: ClipEventType,\n      _provider: ViewClipDecorationProvider\n    ) => {\n      if (viewport !== activeViewport) return;\n\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\n      const isClipActive = !!activeViewport.view.getViewClip();\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\n    };\n\n    const clipActive = !!activeViewport && !!activeViewport.view.getViewClip();\n    setShowIndicator(clipActive || !props.hideWhenUnused);\n    setHasManipulatorsShown(\n      clipActive && !!activeViewport && !!ViewClipDecoration.get(activeViewport)\n    );\n\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(\n      onClipChanged\n    );\n    return () => {\n      // Get or create static ViewClipDecorationProvider\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(\n        onClipChanged\n      );\n    };\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\n\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (activeViewport) {\n      setHasManipulatorsShown(e.target.checked);\n      await ViewClipDecorationProvider.create().toggleDecoration(\n        activeViewport\n      );\n    }\n  };\n\n  const handleClear = async () => {\n    await IModelApp.tools.run(\n      ViewClipClearTool.toolId,\n      ViewClipDecorationProvider.create()\n    );\n    setPopupOpen(false);\n  };\n\n  return (\n    <>\n      {showIndicator && (\n        <StatusBarPopover\n          visible={isPopupOpen}\n          onVisibleChange={setPopupOpen}\n          content={\n            <StatusBarDialog\n              titleBar={<StatusBarDialog.TitleBar title={tooltip} />}\n            >\n              <div className=\"uifw-sections-footer-contents\">\n                <Button onClick={handleClear}>\n                  {translate(\"tools.sectionClear\")}\n                </Button>\n                <div className=\"uifw-uifw-sections-toggle-container\">\n                  <div className={classnames(\"uifw-sections-label\")}>\n                    {translate(\"tools.sectionShowHandles\")}\n                  </div>\n                  <ToggleSwitch\n                    className=\"uifw-sections-toggle\"\n                    onChange={toggleManipulators}\n                    checked={hasManipulatorsShown}\n                  />\n                </div>\n              </div>\n            </StatusBarDialog>\n          }\n        >\n          <IconButton title={tooltip} styleType=\"borderless\">\n            <Icon iconSpec={svgSectionTool} />\n            <StatusBarPopover.ExpandIndicator />\n          </IconButton>\n        </StatusBarPopover>\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport svgSectionTool from \"@bentley/icons-generic/icons/section-tool.svg\";\nimport {\n  IModelApp,\n  ViewClipClearTool,\n  ViewClipDecoration,\n  ViewClipDecorationProvider,\n} from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { Button, IconButton, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\nimport { StatusBarDialog } from \"../statusbar/dialog/Dialog\";\nimport \"./SectionsField.scss\";\nimport { useTranslation } from \"../hooks/useTranslation\";\nimport { StatusBarPopover } from \"../statusbar/popup/StatusBarPopover\";\n\n/** Sections Status Field Props\n * @beta\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface SectionsStatusFieldProps extends CommonProps {\n  hideWhenUnused?: boolean;\n}\n\n/** Status Field for showing section extra tools for clearing and showing manipulators\n * @beta\n */\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\n  const { translate } = useTranslation();\n  const tooltip = translate(\"tools.sectionTools\");\n\n  const activeViewport = useActiveViewport();\n  const [showIndicator, setShowIndicator] = React.useState(false);\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\n\n  React.useEffect(() => {\n    const clipActive = !!activeViewport && !!activeViewport.view.getViewClip();\n    setShowIndicator(clipActive || !props.hideWhenUnused);\n    setHasManipulatorsShown(\n      clipActive && !!activeViewport && !!ViewClipDecoration.get(activeViewport)\n    );\n\n    return ViewClipDecorationProvider.create().onActiveClipChanged.addListener(\n      (viewport) => {\n        if (viewport !== activeViewport) return;\n\n        setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\n        const isClipActive = !!activeViewport.view.getViewClip();\n        setShowIndicator(isClipActive || !props.hideWhenUnused);\n      }\n    );\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\n\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (activeViewport) {\n      setHasManipulatorsShown(e.target.checked);\n      await ViewClipDecorationProvider.create().toggleDecoration(\n        activeViewport\n      );\n    }\n  };\n\n  const handleClear = async () => {\n    await IModelApp.tools.run(\n      ViewClipClearTool.toolId,\n      ViewClipDecorationProvider.create()\n    );\n    setPopupOpen(false);\n  };\n\n  return (\n    <>\n      {showIndicator && (\n        <StatusBarPopover\n          visible={isPopupOpen}\n          onVisibleChange={setPopupOpen}\n          content={\n            <StatusBarDialog\n              titleBar={<StatusBarDialog.TitleBar title={tooltip} />}\n            >\n              <div className=\"uifw-sections-footer-contents\">\n                <Button onClick={handleClear}>\n                  {translate(\"tools.sectionClear\")}\n                </Button>\n                <div className=\"uifw-uifw-sections-toggle-container\">\n                  <div className={classnames(\"uifw-sections-label\")}>\n                    {translate(\"tools.sectionShowHandles\")}\n                  </div>\n                  <ToggleSwitch\n                    className=\"uifw-sections-toggle\"\n                    onChange={toggleManipulators}\n                    checked={hasManipulatorsShown}\n                  />\n                </div>\n              </div>\n            </StatusBarDialog>\n          }\n        >\n          <IconButton\n            label={tooltip}\n            styleType=\"borderless\"\n            data-testid=\"sections-status-field-button\"\n          >\n            {/* eslint-disable-next-line deprecation/deprecation */}\n            <Icon iconSpec={svgSectionTool} />\n            <StatusBarPopover.ExpandIndicator />\n          </IconButton>\n        </StatusBarPopover>\n      )}\n    </>\n  );\n}\n"]}

package/lib/esm/appui-react/statusfields/SelectionCount.d.ts

@@ -1,9 +1,9 @@
 /** @packageDocumentation
  * @module StatusBar
  */
+import * as React from "react";
 import type { IModelConnection } from "@itwin/core-frontend";
 import type { CommonProps } from "@itwin/core-react";
-import * as React from "react";
 import "./SelectionCount.scss";
 /** Properties for the [[SelectionCountField]] component.
  * @beta

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCount.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionCount.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAE/B;;GAEG;AAEH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,qBAWlE;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,gBAAgB,GAAG,SAAS,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,uBAAuB,GAAG,MAAM,CAczE"}
+{"version":3,"file":"SelectionCount.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionCount.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD,OAAO,uBAAuB,CAAC;AAE/B;;GAEG;AAEH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,qBAelE;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,gBAAgB,GAAG,SAAS,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,uBAAuB,GAAG,MAAM,CAczE"}

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

@@ -5,17 +5,19 @@
 /** @packageDocumentation
  * @module StatusBar
  */
+import * as React from "react";
 import { Icon } from "@itwin/core-react";
 import { SvgCursor } from "@itwin/itwinui-icons-react";
 import classnames from "classnames";
-import * as React from "react";
+import { StatusBarCornerComponentContext } from "../statusbar/StatusBarCornerComponentContext";
 import "./SelectionCount.scss";
 /** Status field component used to display the number of selected items.
  * @note Use [[useSelectionSetSize]] hook to get the selection count.
  * @beta
  */
 export function SelectionCountField(props) {
-    const className = classnames("uifw-statusFields-selectionCount", props.className);
+    const cornerContext = React.useContext(StatusBarCornerComponentContext);
+    const className = classnames("uifw-statusFields-selectionCount", cornerContext === "left-corner" && "uifw-left-corner", cornerContext === "right-corner" && "uifw-right-corner", props.className);
     return (React.createElement("div", { className: className, style: props.style },
         React.createElement(Icon, { iconSpec: React.createElement(SvgCursor, null) }),
         props.count));

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionCount.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionCount.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAIH,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAU/B;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,SAAS,GAAG,UAAU,CAC1B,kCAAkC,EAClC,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,SAAS,OAAG,GAAI;QAChC,KAAK,CAAC,KAAK,CACR,CACP,CAAC;AACJ,CAAC;AASD;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAA6B;IAC/D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;YACX,OAAO;QACT,CAAC;QACD,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAClC,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,EAAE;YACtD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { SvgCursor } from \"@itwin/itwinui-icons-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport \"./SelectionCount.scss\";\n\n/** Properties for the [[SelectionCountField]] component.\n * @beta\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface SelectionCountFieldProps extends CommonProps {\n  count: number;\n}\n\n/** Status field component used to display the number of selected items.\n * @note Use [[useSelectionSetSize]] hook to get the selection count.\n * @beta\n */\nexport function SelectionCountField(props: SelectionCountFieldProps) {\n  const className = classnames(\n    \"uifw-statusFields-selectionCount\",\n    props.className\n  );\n  return (\n    <div className={className} style={props.style}>\n      <Icon iconSpec={<SvgCursor />} />\n      {props.count}\n    </div>\n  );\n}\n\n/** Arguments for [[useSelectionSetSize]] hook.\n * @beta\n */\nexport interface UseSelectionSetSizeArgs {\n  iModel: IModelConnection | undefined;\n}\n\n/** React hook that returns element count of a selection set.\n * @beta\n */\nexport function useSelectionSetSize(args: UseSelectionSetSizeArgs): number {\n  const [size, setSize] = React.useState(0);\n  const { iModel } = args;\n  React.useEffect(() => {\n    if (!iModel) {\n      setSize(0);\n      return;\n    }\n    setSize(iModel.selectionSet.size);\n    return iModel.selectionSet.onChanged.addListener((ev) => {\n      setSize(ev.set.size);\n    });\n  }, [iModel]);\n  return size;\n}\n"]}
+{"version":3,"file":"SelectionCount.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionCount.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,+BAA+B,EAAE,MAAM,8CAA8C,CAAC;AAC/F,OAAO,uBAAuB,CAAC;AAU/B;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,UAAU,CAC1B,kCAAkC,EAClC,aAAa,KAAK,aAAa,IAAI,kBAAkB,EACrD,aAAa,KAAK,cAAc,IAAI,mBAAmB,EACvD,KAAK,CAAC,SAAS,CAChB,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAE3C,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,SAAS,OAAG,GAAI;QAChC,KAAK,CAAC,KAAK,CACR,CACP,CAAC;AACJ,CAAC;AASD;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAA6B;IAC/D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;YACX,OAAO;QACT,CAAC;QACD,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAClC,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,EAAE;YACtD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport * as React from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { SvgCursor } from \"@itwin/itwinui-icons-react\";\nimport classnames from \"classnames\";\nimport { StatusBarCornerComponentContext } from \"../statusbar/StatusBarCornerComponentContext\";\nimport \"./SelectionCount.scss\";\n\n/** Properties for the [[SelectionCountField]] component.\n * @beta\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface SelectionCountFieldProps extends CommonProps {\n  count: number;\n}\n\n/** Status field component used to display the number of selected items.\n * @note Use [[useSelectionSetSize]] hook to get the selection count.\n * @beta\n */\nexport function SelectionCountField(props: SelectionCountFieldProps) {\n  const cornerContext = React.useContext(StatusBarCornerComponentContext);\n  const className = classnames(\n    \"uifw-statusFields-selectionCount\",\n    cornerContext === \"left-corner\" && \"uifw-left-corner\",\n    cornerContext === \"right-corner\" && \"uifw-right-corner\",\n    props.className\n  );\n  return (\n    <div className={className} style={props.style}>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Icon iconSpec={<SvgCursor />} />\n      {props.count}\n    </div>\n  );\n}\n\n/** Arguments for [[useSelectionSetSize]] hook.\n * @beta\n */\nexport interface UseSelectionSetSizeArgs {\n  iModel: IModelConnection | undefined;\n}\n\n/** React hook that returns element count of a selection set.\n * @beta\n */\nexport function useSelectionSetSize(args: UseSelectionSetSizeArgs): number {\n  const [size, setSize] = React.useState(0);\n  const { iModel } = args;\n  React.useEffect(() => {\n    if (!iModel) {\n      setSize(0);\n      return;\n    }\n    setSize(iModel.selectionSet.size);\n    return iModel.selectionSet.onChanged.addListener((ev) => {\n      setSize(ev.set.size);\n    });\n  }, [iModel]);\n  return size;\n}\n"]}

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

@@ -6,9 +6,18 @@
   gap: var(--iui-size-2xs);
   display: flex;
   align-items: center;
-  padding: 0 var(--iui-size-2xs) 0 var(--iui-size-2xs);
+  min-width: var(--iui-size-2xl);
+  padding-left: var(--iui-size-2xs);
 
   .icon {
     color: var(--iui-color-icon);
   }
+
+  &.uifw-left-corner {
+    margin-left: var(--iui-size-m);
+  }
+
+  &.uifw-right-corner {
+    margin-right: var(--iui-size-m);
+  }
 }

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;AASH,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAY,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0D/B,oEAAoE;AAEpE,UAAU,kBAAmB,SAAQ,WAAW;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAuFtD"}
+{"version":3,"file":"SnapMode.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"AAIA;;GAEG;AASH,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAY,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2D/B,oEAAoE;AAEpE,UAAU,kBAAmB,SAAQ,WAAW;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAyFtD"}

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

@@ -22,6 +22,7 @@ import { useTranslation } from "../hooks/useTranslation";
 import { useReduxFrameworkState } from "../uistate/useReduxFrameworkState";
 import { Button } from "@itwin/itwinui-react";
 import { StatusBarPopover } from "../statusbar/popup/StatusBarPopover";
+// eslint-disable-next-line deprecation/deprecation
 function getIconFromIconName(iconName) {
     let iconSpec = snapModeKeypoint;
     switch (iconName) {
@@ -115,8 +116,12 @@ export function SnapModeField(props) {
                 }
                 // eslint-disable-next-line deprecation/deprecation
                 UiFramework.setAccudrawSnapMode(item.value);
-            }, isActive: (snapMode & item.value) === item.value, icon: React.createElement(Icon, { className: `icon`, iconSpec: getIconFromIconName(item.iconName) }) }, item.label)))) },
-        React.createElement(Button, { styleType: "borderless", title: title, endIcon: React.createElement(Icon, { iconSpec: getIconFromIconName(iconName) }) },
+            }, isActive: (snapMode & item.value) === item.value, icon: 
+            // eslint-disable-next-line deprecation/deprecation
+            React.createElement(Icon, { className: `icon`, iconSpec: getIconFromIconName(item.iconName) }) }, item.label)))) },
+        React.createElement(Button, { styleType: "borderless", title: title, 
+            // eslint-disable-next-line deprecation/deprecation
+            endIcon: React.createElement(Icon, { iconSpec: getIconFromIconName(iconName) }) },
             title,
             React.createElement(StatusBarPopover.ExpandIndicator, null))));
 }

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":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport snapModeBisector from \"@bentley/icons-generic/icons/snaps-bisector.svg\";\nimport snapModeCenter from \"@bentley/icons-generic/icons/snaps-center.svg\";\nimport snapModeIntersection from \"@bentley/icons-generic/icons/snaps-intersection.svg\";\nimport snapModeMidpoint from \"@bentley/icons-generic/icons/snaps-midpoint.svg\";\nimport snapModeNearest from \"@bentley/icons-generic/icons/snaps-nearest.svg\";\nimport snapModeOrigin from \"@bentley/icons-generic/icons/snaps-origin.svg\";\nimport snapModeKeypoint from \"@bentley/icons-generic/icons/snaps.svg\";\nimport { SnapMode } from \"@itwin/core-frontend\";\nimport { Icon } from \"@itwin/core-react\";\nimport type { CommonProps, IconSpec } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { UiFramework } from \"../UiFramework\";\nimport { SnapModePanel } from \"../layout/footer/snap-mode/Panel\";\nimport { Snap } from \"../layout/footer/snap-mode/Snap\";\nimport { useTranslation } from \"../hooks/useTranslation\";\nimport { useReduxFrameworkState } from \"../uistate/useReduxFrameworkState\";\nimport { Button } from \"@itwin/itwinui-react\";\nimport { StatusBarPopover } from \"../statusbar/popup/StatusBarPopover\";\n\n/** Define the properties that will be used to represent the available snap modes. */\ninterface SnapModeFieldEntry {\n  label: string;\n  value: number;\n  iconName: string;\n}\n\nfunction getIconFromIconName(iconName: string): IconSpec {\n  let iconSpec = snapModeKeypoint;\n  switch (iconName) {\n    case \"snaps\":\n      iconSpec = snapModeKeypoint;\n      break;\n    case \"snaps-intersection\":\n      iconSpec = snapModeIntersection;\n      break;\n    case \"snaps-center\":\n      iconSpec = snapModeCenter;\n      break;\n    case \"snaps-nearest\":\n      iconSpec = snapModeNearest;\n      break;\n    case \"snaps-origin\":\n      iconSpec = snapModeOrigin;\n      break;\n    case \"snaps-midpoint\":\n      iconSpec = snapModeMidpoint;\n      break;\n    case \"snaps-bisector\":\n      iconSpec = snapModeBisector;\n      break;\n  }\n  return iconSpec;\n}\n\n/** Return icon class name for a specific snapMode. */\nconst getSnapModeIconNameFromMode = (\n  modeEntries: SnapModeFieldEntry[],\n  snapMode: number\n) => {\n  for (const modeEntry of modeEntries) {\n    if (modeEntry.value === snapMode) return modeEntry.iconName;\n  }\n\n  if (snapMode > 0) return \"snaps-multione\";\n\n  return \"placeholder\";\n};\n\n/** Defines properties supported by the SnapMode Field Component. */\n// eslint-disable-next-line deprecation/deprecation\ninterface SnapModeFieldProps extends CommonProps {\n  /** Uses redux store as a fallback. Defaults to {@link SnapMode.NearestKeypoint}.\n   * @note Enum flags are supported.\n   */\n  snapMode?: SnapMode;\n  onChange?: (newSnapMode: SnapMode) => void;\n}\n\n/** `SnapModeField` component designed to be specified in a status bar. It will\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\n * @public\n */\nexport function SnapModeField(props: SnapModeFieldProps) {\n  const { translate } = useTranslation();\n  const reduxSnapMode = useReduxFrameworkState(\n    // eslint-disable-next-line deprecation/deprecation\n    (state) => state?.configurableUiState.snapMode\n  );\n  const snapMode = props.snapMode ?? reduxSnapMode ?? SnapMode.NearestKeypoint;\n\n  const snapModes: SnapModeFieldEntry[] = [\n    {\n      label: translate(\"snapModeField.keypoint\"),\n      value: SnapMode.NearestKeypoint as number,\n      iconName: \"snaps\",\n    },\n    {\n      label: translate(\"snapModeField.intersection\"),\n      value: SnapMode.Intersection as number,\n      iconName: \"snaps-intersection\",\n    },\n    {\n      label: translate(\"snapModeField.center\"),\n      value: SnapMode.Center as number,\n      iconName: \"snaps-center\",\n    },\n    {\n      label: translate(\"snapModeField.nearest\"),\n      value: SnapMode.Nearest as number,\n      iconName: \"snaps-nearest\",\n    },\n    {\n      label: translate(\"snapModeField.origin\"),\n      value: SnapMode.Origin as number,\n      iconName: \"snaps-origin\",\n    },\n    {\n      label: translate(\"snapModeField.midpoint\"),\n      value: SnapMode.MidPoint as number,\n      iconName: \"snaps-midpoint\",\n    },\n    {\n      label: translate(\"snapModeField.bisector\"),\n      value: SnapMode.Bisector as number,\n      iconName: \"snaps-bisector\",\n    },\n  ];\n  const iconName = getSnapModeIconNameFromMode(snapModes, snapMode);\n\n  const title = translate(\"snapModeField.snapMode\");\n  return (\n    <StatusBarPopover\n      content={\n        <SnapModePanel title={title}>\n          {snapModes.map((item, index) => (\n            <Snap\n              key={`SM_${index}`}\n              onClick={() => {\n                if (props.onChange) {\n                  props.onChange(item.value);\n                  return;\n                }\n                // eslint-disable-next-line deprecation/deprecation\n                UiFramework.setAccudrawSnapMode(item.value);\n              }}\n              isActive={(snapMode & item.value) === item.value}\n              icon={\n                <Icon\n                  className={`icon`}\n                  iconSpec={getIconFromIconName(item.iconName)}\n                />\n              }\n            >\n              {item.label}\n            </Snap>\n          ))}\n        </SnapModePanel>\n      }\n    >\n      <Button\n        styleType=\"borderless\"\n        title={title}\n        endIcon={<Icon iconSpec={getIconFromIconName(iconName)} />}\n      >\n        {title}\n        <StatusBarPopover.ExpandIndicator />\n      </Button>\n    </StatusBarPopover>\n  );\n}\n"]}
+{"version":3,"file":"SnapMode.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport snapModeBisector from \"@bentley/icons-generic/icons/snaps-bisector.svg\";\nimport snapModeCenter from \"@bentley/icons-generic/icons/snaps-center.svg\";\nimport snapModeIntersection from \"@bentley/icons-generic/icons/snaps-intersection.svg\";\nimport snapModeMidpoint from \"@bentley/icons-generic/icons/snaps-midpoint.svg\";\nimport snapModeNearest from \"@bentley/icons-generic/icons/snaps-nearest.svg\";\nimport snapModeOrigin from \"@bentley/icons-generic/icons/snaps-origin.svg\";\nimport snapModeKeypoint from \"@bentley/icons-generic/icons/snaps.svg\";\nimport { SnapMode } from \"@itwin/core-frontend\";\nimport { Icon } from \"@itwin/core-react\";\nimport type { CommonProps, IconSpec } from \"@itwin/core-react\";\nimport * as React from \"react\";\nimport { UiFramework } from \"../UiFramework\";\nimport { SnapModePanel } from \"../layout/footer/snap-mode/Panel\";\nimport { Snap } from \"../layout/footer/snap-mode/Snap\";\nimport { useTranslation } from \"../hooks/useTranslation\";\nimport { useReduxFrameworkState } from \"../uistate/useReduxFrameworkState\";\nimport { Button } from \"@itwin/itwinui-react\";\nimport { StatusBarPopover } from \"../statusbar/popup/StatusBarPopover\";\n\n/** Define the properties that will be used to represent the available snap modes. */\ninterface SnapModeFieldEntry {\n  label: string;\n  value: number;\n  iconName: string;\n}\n\n// eslint-disable-next-line deprecation/deprecation\nfunction getIconFromIconName(iconName: string): IconSpec {\n  let iconSpec = snapModeKeypoint;\n  switch (iconName) {\n    case \"snaps\":\n      iconSpec = snapModeKeypoint;\n      break;\n    case \"snaps-intersection\":\n      iconSpec = snapModeIntersection;\n      break;\n    case \"snaps-center\":\n      iconSpec = snapModeCenter;\n      break;\n    case \"snaps-nearest\":\n      iconSpec = snapModeNearest;\n      break;\n    case \"snaps-origin\":\n      iconSpec = snapModeOrigin;\n      break;\n    case \"snaps-midpoint\":\n      iconSpec = snapModeMidpoint;\n      break;\n    case \"snaps-bisector\":\n      iconSpec = snapModeBisector;\n      break;\n  }\n  return iconSpec;\n}\n\n/** Return icon class name for a specific snapMode. */\nconst getSnapModeIconNameFromMode = (\n  modeEntries: SnapModeFieldEntry[],\n  snapMode: number\n) => {\n  for (const modeEntry of modeEntries) {\n    if (modeEntry.value === snapMode) return modeEntry.iconName;\n  }\n\n  if (snapMode > 0) return \"snaps-multione\";\n\n  return \"placeholder\";\n};\n\n/** Defines properties supported by the SnapMode Field Component. */\n// eslint-disable-next-line deprecation/deprecation\ninterface SnapModeFieldProps extends CommonProps {\n  /** Uses redux store as a fallback. Defaults to {@link SnapMode.NearestKeypoint}.\n   * @note Enum flags are supported.\n   */\n  snapMode?: SnapMode;\n  onChange?: (newSnapMode: SnapMode) => void;\n}\n\n/** `SnapModeField` component designed to be specified in a status bar. It will\n * display the active snap mode that AccuSnap will use and allow the user to select a new snap mode.\n * @public\n */\nexport function SnapModeField(props: SnapModeFieldProps) {\n  const { translate } = useTranslation();\n  const reduxSnapMode = useReduxFrameworkState(\n    // eslint-disable-next-line deprecation/deprecation\n    (state) => state?.configurableUiState.snapMode\n  );\n  const snapMode = props.snapMode ?? reduxSnapMode ?? SnapMode.NearestKeypoint;\n\n  const snapModes: SnapModeFieldEntry[] = [\n    {\n      label: translate(\"snapModeField.keypoint\"),\n      value: SnapMode.NearestKeypoint as number,\n      iconName: \"snaps\",\n    },\n    {\n      label: translate(\"snapModeField.intersection\"),\n      value: SnapMode.Intersection as number,\n      iconName: \"snaps-intersection\",\n    },\n    {\n      label: translate(\"snapModeField.center\"),\n      value: SnapMode.Center as number,\n      iconName: \"snaps-center\",\n    },\n    {\n      label: translate(\"snapModeField.nearest\"),\n      value: SnapMode.Nearest as number,\n      iconName: \"snaps-nearest\",\n    },\n    {\n      label: translate(\"snapModeField.origin\"),\n      value: SnapMode.Origin as number,\n      iconName: \"snaps-origin\",\n    },\n    {\n      label: translate(\"snapModeField.midpoint\"),\n      value: SnapMode.MidPoint as number,\n      iconName: \"snaps-midpoint\",\n    },\n    {\n      label: translate(\"snapModeField.bisector\"),\n      value: SnapMode.Bisector as number,\n      iconName: \"snaps-bisector\",\n    },\n  ];\n  const iconName = getSnapModeIconNameFromMode(snapModes, snapMode);\n\n  const title = translate(\"snapModeField.snapMode\");\n  return (\n    <StatusBarPopover\n      content={\n        <SnapModePanel title={title}>\n          {snapModes.map((item, index) => (\n            <Snap\n              key={`SM_${index}`}\n              onClick={() => {\n                if (props.onChange) {\n                  props.onChange(item.value);\n                  return;\n                }\n                // eslint-disable-next-line deprecation/deprecation\n                UiFramework.setAccudrawSnapMode(item.value);\n              }}\n              isActive={(snapMode & item.value) === item.value}\n              icon={\n                // eslint-disable-next-line deprecation/deprecation\n                <Icon\n                  className={`icon`}\n                  iconSpec={getIconFromIconName(item.iconName)}\n                />\n              }\n            >\n              {item.label}\n            </Snap>\n          ))}\n        </SnapModePanel>\n      }\n    >\n      <Button\n        styleType=\"borderless\"\n        title={title}\n        // eslint-disable-next-line deprecation/deprecation\n        endIcon={<Icon iconSpec={getIconFromIconName(iconName)} />}\n      >\n        {title}\n        <StatusBarPopover.ExpandIndicator />\n      </Button>\n    </StatusBarPopover>\n  );\n}\n"]}

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

@@ -85,7 +85,7 @@ export class ViewAttributesStatusField extends React.Component {
     render() {
         const title = UiFramework.translate("listTools.viewAttributes");
         return (React.createElement(StatusBarPopover, { content: React.createElement(StatusBarDialog, { titleBar: React.createElement(StatusBarDialog.TitleBar, { title: title }) }, this.getViewFlags()) },
-            React.createElement(IconButton, { styleType: "borderless", title: title },
+            React.createElement(IconButton, { styleType: "borderless", label: title },
                 React.createElement(SvgWindowSettings, null),
                 React.createElement(StatusBarPopover.ExpandIndicator, null))));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ViewAttributes.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/ViewAttributes.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./ViewAttributes.scss\";\nimport * as React from \"react\";\nimport type { ViewFlagProps } from \"@itwin/core-common\";\nimport { ViewFlags } from \"@itwin/core-common\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Checkbox, IconButton } from \"@itwin/itwinui-react\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { StatusBarDialog } from \"../statusbar/dialog/Dialog\";\nimport { SvgWindowSettings } from \"@itwin/itwinui-icons-react\";\nimport { StatusBarPopover } from \"../statusbar/popup/StatusBarPopover\";\n\ninterface ViewAttributesStatusFieldState {\n  viewFlags: ViewFlagProps;\n  cameraOn: boolean;\n  target: HTMLElement | null;\n}\n\n/** Widget for showing Checkboxes for View Attributes\n * @beta\n */\nexport class ViewAttributesStatusField extends React.Component<\n  CommonProps, // eslint-disable-line deprecation/deprecation\n  ViewAttributesStatusFieldState\n> {\n  // eslint-disable-next-line deprecation/deprecation\n  constructor(props: CommonProps) {\n    super(props);\n\n    this.state = {\n      cameraOn: false,\n      viewFlags: {},\n      target: null,\n    };\n  }\n\n  public override componentDidMount() {\n    this.updateState();\n  }\n\n  private updateState() {\n    if (IModelApp.viewManager.selectedView) {\n      const viewFlags: ViewFlagProps = {\n        ...IModelApp.viewManager.selectedView.view.viewFlags.toJSON(),\n      };\n      const cameraOn = IModelApp.viewManager.selectedView.isCameraOn;\n\n      this.setState({\n        viewFlags,\n        cameraOn,\n      });\n    }\n  }\n\n  private _handleViewFlagClick = (flagName: string) => {\n    if (IModelApp.viewManager.selectedView) {\n      const props: ViewFlagProps =\n        IModelApp.viewManager.selectedView.viewFlags.toJSON();\n      (props as any)[flagName] =\n        (props as any)[flagName] === undefined\n          ? true\n          : !(props as any)[flagName];\n      const viewFlags = ViewFlags.fromJSON(props);\n      IModelApp.viewManager.selectedView.viewFlags = viewFlags;\n      this.updateState();\n    }\n  };\n\n  private _handleToggleCamera = async () => {\n    await IModelApp.tools.run(\n      \"View.ToggleCamera\",\n      IModelApp.viewManager.selectedView\n    );\n    this.updateState();\n  };\n\n  private getViewFlagItem(flagName: string, value: boolean, labelKey: string) {\n    return (\n      <Checkbox\n        key={flagName}\n        label={UiFramework.translate(labelKey)}\n        onClick={() => this._handleViewFlagClick(flagName)}\n        defaultChecked={value}\n      />\n    );\n  }\n\n  private getFlagState(flagName: string) {\n    return this.state.viewFlags.hasOwnProperty(flagName)\n      ? (this.state.viewFlags as any)[flagName]\n      : false;\n  }\n\n  private getToggleCameraItem() {\n    return (\n      <Checkbox\n        key={\"toggleCamera\"}\n        label={UiFramework.translate(\"listTools.camera\")}\n        onClick={this._handleToggleCamera}\n        defaultChecked={this.state.cameraOn}\n      />\n    );\n  }\n\n  private getViewFlags() {\n    const items: React.ReactElement[] = [];\n    items.push(\n      this.getViewFlagItem(\"acs\", this.getFlagState(\"acs\"), \"listTools.acs\")\n    );\n    items.push(this.getToggleCameraItem());\n    items.push(\n      this.getViewFlagItem(\n        \"noConstruct\",\n        !this.getFlagState(\"noConstruct\"),\n        \"listTools.constructions\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"hidEdges\",\n        this.getFlagState(\"hidEdges\"),\n        \"listTools.hidEdges\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"monochrome\",\n        this.getFlagState(\"monochrome\"),\n        \"listTools.monochrome\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"visEdges\",\n        this.getFlagState(\"visEdges\"),\n        \"listTools.visEdges\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"ambientOcclusion\",\n        this.getFlagState(\"ambientOcclusion\"),\n        \"listTools.ambientOcclusion\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"shadows\",\n        this.getFlagState(\"shadows\"),\n        \"listTools.shadows\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"backgroundMap\",\n        this.getFlagState(\"backgroundMap\"),\n        \"listTools.backgroundMap\"\n      )\n    );\n    return <div className=\"uifw-view-attributes-contents\">{items}</div>;\n  }\n\n  public override render() {\n    const title = UiFramework.translate(\"listTools.viewAttributes\");\n\n    return (\n      <StatusBarPopover\n        content={\n          <StatusBarDialog\n            titleBar={<StatusBarDialog.TitleBar title={title} />}\n          >\n            {this.getViewFlags()}\n          </StatusBarDialog>\n        }\n      >\n        <IconButton styleType=\"borderless\" title={title}>\n          <SvgWindowSettings />\n          <StatusBarPopover.ExpandIndicator />\n        </IconButton>\n      </StatusBarPopover>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ViewAttributes.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/ViewAttributes.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./ViewAttributes.scss\";\nimport * as React from \"react\";\nimport type { ViewFlagProps } from \"@itwin/core-common\";\nimport { ViewFlags } from \"@itwin/core-common\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Checkbox, IconButton } from \"@itwin/itwinui-react\";\nimport { UiFramework } from \"../UiFramework\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { StatusBarDialog } from \"../statusbar/dialog/Dialog\";\nimport { SvgWindowSettings } from \"@itwin/itwinui-icons-react\";\nimport { StatusBarPopover } from \"../statusbar/popup/StatusBarPopover\";\n\ninterface ViewAttributesStatusFieldState {\n  viewFlags: ViewFlagProps;\n  cameraOn: boolean;\n  target: HTMLElement | null;\n}\n\n/** Widget for showing Checkboxes for View Attributes\n * @beta\n */\nexport class ViewAttributesStatusField extends React.Component<\n  CommonProps, // eslint-disable-line deprecation/deprecation\n  ViewAttributesStatusFieldState\n> {\n  // eslint-disable-next-line deprecation/deprecation\n  constructor(props: CommonProps) {\n    super(props);\n\n    this.state = {\n      cameraOn: false,\n      viewFlags: {},\n      target: null,\n    };\n  }\n\n  public override componentDidMount() {\n    this.updateState();\n  }\n\n  private updateState() {\n    if (IModelApp.viewManager.selectedView) {\n      const viewFlags: ViewFlagProps = {\n        ...IModelApp.viewManager.selectedView.view.viewFlags.toJSON(),\n      };\n      const cameraOn = IModelApp.viewManager.selectedView.isCameraOn;\n\n      this.setState({\n        viewFlags,\n        cameraOn,\n      });\n    }\n  }\n\n  private _handleViewFlagClick = (flagName: string) => {\n    if (IModelApp.viewManager.selectedView) {\n      const props: ViewFlagProps =\n        IModelApp.viewManager.selectedView.viewFlags.toJSON();\n      (props as any)[flagName] =\n        (props as any)[flagName] === undefined\n          ? true\n          : !(props as any)[flagName];\n      const viewFlags = ViewFlags.fromJSON(props);\n      IModelApp.viewManager.selectedView.viewFlags = viewFlags;\n      this.updateState();\n    }\n  };\n\n  private _handleToggleCamera = async () => {\n    await IModelApp.tools.run(\n      \"View.ToggleCamera\",\n      IModelApp.viewManager.selectedView\n    );\n    this.updateState();\n  };\n\n  private getViewFlagItem(flagName: string, value: boolean, labelKey: string) {\n    return (\n      <Checkbox\n        key={flagName}\n        label={UiFramework.translate(labelKey)}\n        onClick={() => this._handleViewFlagClick(flagName)}\n        defaultChecked={value}\n      />\n    );\n  }\n\n  private getFlagState(flagName: string) {\n    return this.state.viewFlags.hasOwnProperty(flagName)\n      ? (this.state.viewFlags as any)[flagName]\n      : false;\n  }\n\n  private getToggleCameraItem() {\n    return (\n      <Checkbox\n        key={\"toggleCamera\"}\n        label={UiFramework.translate(\"listTools.camera\")}\n        onClick={this._handleToggleCamera}\n        defaultChecked={this.state.cameraOn}\n      />\n    );\n  }\n\n  private getViewFlags() {\n    const items: React.ReactElement[] = [];\n    items.push(\n      this.getViewFlagItem(\"acs\", this.getFlagState(\"acs\"), \"listTools.acs\")\n    );\n    items.push(this.getToggleCameraItem());\n    items.push(\n      this.getViewFlagItem(\n        \"noConstruct\",\n        !this.getFlagState(\"noConstruct\"),\n        \"listTools.constructions\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"hidEdges\",\n        this.getFlagState(\"hidEdges\"),\n        \"listTools.hidEdges\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"monochrome\",\n        this.getFlagState(\"monochrome\"),\n        \"listTools.monochrome\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"visEdges\",\n        this.getFlagState(\"visEdges\"),\n        \"listTools.visEdges\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"ambientOcclusion\",\n        this.getFlagState(\"ambientOcclusion\"),\n        \"listTools.ambientOcclusion\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"shadows\",\n        this.getFlagState(\"shadows\"),\n        \"listTools.shadows\"\n      )\n    );\n    items.push(\n      this.getViewFlagItem(\n        \"backgroundMap\",\n        this.getFlagState(\"backgroundMap\"),\n        \"listTools.backgroundMap\"\n      )\n    );\n    return <div className=\"uifw-view-attributes-contents\">{items}</div>;\n  }\n\n  public override render() {\n    const title = UiFramework.translate(\"listTools.viewAttributes\");\n\n    return (\n      <StatusBarPopover\n        content={\n          <StatusBarDialog\n            titleBar={<StatusBarDialog.TitleBar title={title} />}\n          >\n            {this.getViewFlags()}\n          </StatusBarDialog>\n        }\n      >\n        <IconButton styleType=\"borderless\" label={title}>\n          <SvgWindowSettings />\n          <StatusBarPopover.ExpandIndicator />\n        </IconButton>\n      </StatusBarPopover>\n    );\n  }\n}\n"]}

package/lib/esm/appui-react/statusfields/message-center/MessageCenterField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageCenterField.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/message-center/MessageCenterField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWrD,OAAO,2BAA2B,CAAC;AASnC;;GAEG;AAEH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,qBAsIpD"}
+{"version":3,"file":"MessageCenterField.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/message-center/MessageCenterField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBrD,OAAO,2BAA2B,CAAC;AAWnC;;GAEG;AAEH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,qBA8HpD"}

package/lib/esm/appui-react/statusfields/message-center/MessageCenterField.js

@@ -6,9 +6,8 @@
  * @module Notification
  */
 import * as React from "react";
-import { Icon } from "@itwin/core-react";
-import { Button, NotificationMarker, Tabs } from "@itwin/itwinui-react";
-import { SvgChat } from "@itwin/itwinui-icons-react";
+import { Button, Icon, NotificationMarker, Tabs } from "@itwin/itwinui-react";
+import { SvgChat, SvgInfo, SvgStatusError, SvgStatusSuccess, SvgStatusWarning, } from "@itwin/itwinui-icons-react";
 import { OutputMessagePriority } from "@itwin/core-frontend";
 import { MessageCenterMessage } from "./MessageCenterMessage";
 import { MessageManager } from "../../messages/MessageManager";
@@ -32,8 +31,7 @@ export function MessageCenterField(props) {
         setNotify(false);
         setIsOpen(isOpenState);
     };
-    const isProblemStatus = (message) => {
-        // See priority values in DgnPlatform defined in NotificationManager
+    const isErrorMessage = (message) => {
         return (message.priority === OutputMessagePriority.Error ||
             message.priority === OutputMessagePriority.Fatal);
     };
@@ -43,26 +41,28 @@ export function MessageCenterField(props) {
         });
     }, []);
     React.useEffect(() => {
-        const determineStatus = () => {
-            const message = [...MessageManager.messages].pop();
-            if (message) {
-                if (isProblemStatus(message)) {
-                    return setStatus("negative");
-                }
-                else if (message.priority === OutputMessagePriority.Success) {
-                    return setStatus("positive");
-                }
-                else {
-                    return setStatus("primary");
-                }
-            }
-            return;
-        };
         MessageManager.registerAnimateOutToElement(indicatorRef.current);
         return MessageManager.onMessagesUpdatedEvent.addListener(() => {
-            MessageManager.messages.length > 0 ? setNotify(true) : setNotify(false);
-            setMessages(MessageManager.messages);
-            determineStatus();
+            const newMessages = MessageManager.messages;
+            newMessages.length > 0 ? setNotify(true) : setNotify(false);
+            setMessages(newMessages);
+            const lastMessage = newMessages[newMessages.length - 1];
+            if (!lastMessage)
+                return;
+            switch (lastMessage.priority) {
+                case OutputMessagePriority.Success:
+                    setStatus("positive");
+                    break;
+                case OutputMessagePriority.Warning:
+                    setStatus("warning");
+                    break;
+                case OutputMessagePriority.Error:
+                case OutputMessagePriority.Fatal:
+                    setStatus("negative");
+                    break;
+                default:
+                    setStatus("primary");
+            }
         });
     }, []);
     return (React.createElement(StatusBarPopover, { visible: isOpen, onVisibleChange: (visible) => handleOpenChange(visible), className: "uifw-statusFields-messageCenter-messageCenterField_popover", content: React.createElement(React.Fragment, null,
@@ -73,12 +73,10 @@ export function MessageCenterField(props) {
                     let tabMessages = [...messages].reverse();
                     tabMessages =
                         tab === "errors"
-                            ? tabMessages.filter(isProblemStatus)
+                            ? tabMessages.filter(isErrorMessage)
                             : tabMessages;
                     return (React.createElement(Tabs.Panel, { value: tab, key: tab, className: "uifw-statusFields-messageCenter-messageCenterField_panel" }, tabMessages.length === 0 ? (React.createElement("span", { className: "uifw-message-prompt" }, translate("messageCenter.prompt"))) : (tabMessages.map((message, index) => {
-                        const iconClassName = MessageManager.getIconClassName(message);
-                        const iconSpec = MessageManager.getIconSpecFromDetails(message);
-                        return (React.createElement(MessageCenterMessage, { key: index, message: message.briefMessage, details: message.detailedMessage, icon: React.createElement(Icon, { iconSpec: iconSpec, className: iconClassName }) }));
+                        return (React.createElement(MessageCenterMessage, { key: index, message: message.briefMessage, details: message.detailedMessage, icon: React.createElement(MessageIcon, { priority: message.priority }) }));
                     }))));
                 }))) },
         React.createElement(Button, { ref: indicatorRef, styleType: "borderless", startIcon: React.createElement(NotificationMarker, { status: status, enabled: notify },
@@ -86,4 +84,20 @@ export function MessageCenterField(props) {
             translate("messageCenter.messages"),
             React.createElement(StatusBarPopover.ExpandIndicator, null))));
 }
+function MessageIcon({ priority }) {
+    switch (priority) {
+        case OutputMessagePriority.Error:
+        case OutputMessagePriority.Fatal:
+            return (React.createElement(Icon, { fill: "negative" },
+                React.createElement(SvgStatusError, null)));
+        case OutputMessagePriority.Warning:
+            return (React.createElement(Icon, { fill: "warning" },
+                React.createElement(SvgStatusWarning, null)));
+        case OutputMessagePriority.Info:
+            return (React.createElement(Icon, { fill: "informational" },
+                React.createElement(SvgInfo, null)));
+    }
+    return (React.createElement(Icon, { fill: "positive" },
+        React.createElement(SvgStatusSuccess, null)));
+}
 //# sourceMappingURL=MessageCenterField.js.map

package/lib/esm/appui-react/statusfields/message-center/MessageCenterField.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageCenterField.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/message-center/MessageCenterField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Notification\n */\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon } from \"@itwin/core-react\";\nimport { Button, NotificationMarker, Tabs } from \"@itwin/itwinui-react\";\nimport { SvgChat } from \"@itwin/itwinui-icons-react\";\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\n\nimport { MessageCenterMessage } from \"./MessageCenterMessage\";\nimport { MessageManager } from \"../../messages/MessageManager\";\nimport { TitleBar } from \"../../layout/footer/dialog/TitleBar\";\n\nimport type { NotifyMessageDetailsType } from \"../../messages/ReactNotifyMessageDetails\";\nimport \"./MessageCenterField.scss\";\nimport { useTranslation } from \"../../hooks/useTranslation\";\nimport { StatusBarPopover } from \"../../statusbar/popup/StatusBarPopover\";\n\n/** Type for Status state to satisfy NotificationMarker type checking. */\ntype NotificationMarkerStatus = \"primary\" | \"negative\" | \"positive\";\n\nconst tabs = [\"all\", \"errors\"] as const;\n\n/** Message Center Field React component.\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function MessageCenterField(props: CommonProps) {\n  const [messages, setMessages] = React.useState(MessageManager.messages);\n  const [notify, setNotify] = React.useState(false);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [status, setStatus] =\n    React.useState<NotificationMarkerStatus>(\"primary\");\n  const { translate } = useTranslation();\n\n  const indicatorRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleOpenChange = (isOpenState: boolean) => {\n    setNotify(false);\n    setIsOpen(isOpenState);\n  };\n\n  const isProblemStatus = (message: NotifyMessageDetailsType): boolean => {\n    // See priority values in DgnPlatform defined in NotificationManager\n    return (\n      message.priority === OutputMessagePriority.Error ||\n      message.priority === OutputMessagePriority.Fatal\n    );\n  };\n\n  React.useEffect(() => {\n    return MessageManager.onOpenMessageCenterEvent.addListener(() => {\n      handleOpenChange(true);\n    });\n  }, []);\n\n  React.useEffect(() => {\n    const determineStatus = () => {\n      const message = [...MessageManager.messages].pop();\n\n      if (message) {\n        if (isProblemStatus(message)) {\n          return setStatus(\"negative\");\n        } else if (message.priority === OutputMessagePriority.Success) {\n          return setStatus(\"positive\");\n        } else {\n          return setStatus(\"primary\");\n        }\n      }\n      return;\n    };\n\n    MessageManager.registerAnimateOutToElement(indicatorRef.current);\n\n    return MessageManager.onMessagesUpdatedEvent.addListener(() => {\n      MessageManager.messages.length > 0 ? setNotify(true) : setNotify(false);\n      setMessages(MessageManager.messages);\n      determineStatus();\n    });\n  }, []);\n\n  return (\n    <StatusBarPopover\n      visible={isOpen}\n      onVisibleChange={(visible) => handleOpenChange(visible)}\n      className=\"uifw-statusFields-messageCenter-messageCenterField_popover\"\n      content={\n        <>\n          <TitleBar title={translate(\"messageCenter.messages\")}></TitleBar>\n\n          <Tabs.Wrapper type=\"pill\">\n            <Tabs.TabList>\n              {tabs.map((tab) => (\n                <Tabs.Tab\n                  label={translate(`messageCenter.${tab}`)}\n                  key={tab}\n                  value={tab}\n                />\n              ))}\n            </Tabs.TabList>\n            {tabs.map((tab) => {\n              let tabMessages = [...messages].reverse();\n              tabMessages =\n                tab === \"errors\"\n                  ? tabMessages.filter(isProblemStatus)\n                  : tabMessages;\n              return (\n                <Tabs.Panel\n                  value={tab}\n                  key={tab}\n                  className=\"uifw-statusFields-messageCenter-messageCenterField_panel\"\n                >\n                  {tabMessages.length === 0 ? (\n                    <span className=\"uifw-message-prompt\">\n                      {translate(\"messageCenter.prompt\")}\n                    </span>\n                  ) : (\n                    tabMessages.map((message, index) => {\n                      const iconClassName =\n                        MessageManager.getIconClassName(message);\n                      const iconSpec =\n                        MessageManager.getIconSpecFromDetails(message);\n\n                      return (\n                        <MessageCenterMessage\n                          key={index}\n                          message={message.briefMessage}\n                          details={message.detailedMessage}\n                          icon={\n                            <Icon\n                              iconSpec={iconSpec}\n                              className={iconClassName}\n                            />\n                          }\n                        />\n                      );\n                    })\n                  )}\n                </Tabs.Panel>\n              );\n            })}\n          </Tabs.Wrapper>\n        </>\n      }\n    >\n      <Button\n        ref={indicatorRef}\n        styleType=\"borderless\"\n        startIcon={\n          <NotificationMarker status={status} enabled={notify}>\n            <SvgChat />\n          </NotificationMarker>\n        }\n        className={props.className}\n        style={props.style}\n      >\n        {translate(\"messageCenter.messages\")}\n        <StatusBarPopover.ExpandIndicator />\n      </Button>\n    </StatusBarPopover>\n  );\n}\n"]}
+{"version":3,"file":"MessageCenterField.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/message-center/MessageCenterField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Notification\n */\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Button, Icon, NotificationMarker, Tabs } from \"@itwin/itwinui-react\";\nimport {\n  SvgChat,\n  SvgInfo,\n  SvgStatusError,\n  SvgStatusSuccess,\n  SvgStatusWarning,\n} from \"@itwin/itwinui-icons-react\";\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\n\nimport { MessageCenterMessage } from \"./MessageCenterMessage\";\nimport { MessageManager } from \"../../messages/MessageManager\";\nimport { TitleBar } from \"../../layout/footer/dialog/TitleBar\";\n\nimport type { NotifyMessageDetailsType } from \"../../messages/ReactNotifyMessageDetails\";\nimport \"./MessageCenterField.scss\";\nimport { useTranslation } from \"../../hooks/useTranslation\";\nimport { StatusBarPopover } from \"../../statusbar/popup/StatusBarPopover\";\n\n/** Type for Status state to satisfy NotificationMarker type checking. */\ntype NotificationMarkerStatus = Required<\n  React.ComponentProps<typeof NotificationMarker>\n>[\"status\"];\n\nconst tabs = [\"all\", \"errors\"] as const;\n\n/** Message Center Field React component.\n * @public\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function MessageCenterField(props: CommonProps) {\n  const [messages, setMessages] = React.useState(MessageManager.messages);\n  const [notify, setNotify] = React.useState(false);\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [status, setStatus] =\n    React.useState<NotificationMarkerStatus>(\"primary\");\n  const { translate } = useTranslation();\n\n  const indicatorRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleOpenChange = (isOpenState: boolean) => {\n    setNotify(false);\n    setIsOpen(isOpenState);\n  };\n\n  const isErrorMessage = (message: NotifyMessageDetailsType): boolean => {\n    return (\n      message.priority === OutputMessagePriority.Error ||\n      message.priority === OutputMessagePriority.Fatal\n    );\n  };\n\n  React.useEffect(() => {\n    return MessageManager.onOpenMessageCenterEvent.addListener(() => {\n      handleOpenChange(true);\n    });\n  }, []);\n\n  React.useEffect(() => {\n    MessageManager.registerAnimateOutToElement(indicatorRef.current);\n\n    return MessageManager.onMessagesUpdatedEvent.addListener(() => {\n      const newMessages = MessageManager.messages;\n      newMessages.length > 0 ? setNotify(true) : setNotify(false);\n      setMessages(newMessages);\n\n      const lastMessage = newMessages[newMessages.length - 1];\n      if (!lastMessage) return;\n\n      switch (lastMessage.priority) {\n        case OutputMessagePriority.Success:\n          setStatus(\"positive\");\n          break;\n        case OutputMessagePriority.Warning:\n          setStatus(\"warning\");\n          break;\n        case OutputMessagePriority.Error:\n        case OutputMessagePriority.Fatal:\n          setStatus(\"negative\");\n          break;\n        default:\n          setStatus(\"primary\");\n      }\n    });\n  }, []);\n\n  return (\n    <StatusBarPopover\n      visible={isOpen}\n      onVisibleChange={(visible) => handleOpenChange(visible)}\n      className=\"uifw-statusFields-messageCenter-messageCenterField_popover\"\n      content={\n        <>\n          <TitleBar title={translate(\"messageCenter.messages\")}></TitleBar>\n\n          <Tabs.Wrapper type=\"pill\">\n            <Tabs.TabList>\n              {tabs.map((tab) => (\n                <Tabs.Tab\n                  label={translate(`messageCenter.${tab}`)}\n                  key={tab}\n                  value={tab}\n                />\n              ))}\n            </Tabs.TabList>\n            {tabs.map((tab) => {\n              let tabMessages = [...messages].reverse();\n              tabMessages =\n                tab === \"errors\"\n                  ? tabMessages.filter(isErrorMessage)\n                  : tabMessages;\n              return (\n                <Tabs.Panel\n                  value={tab}\n                  key={tab}\n                  className=\"uifw-statusFields-messageCenter-messageCenterField_panel\"\n                >\n                  {tabMessages.length === 0 ? (\n                    <span className=\"uifw-message-prompt\">\n                      {translate(\"messageCenter.prompt\")}\n                    </span>\n                  ) : (\n                    tabMessages.map((message, index) => {\n                      return (\n                        <MessageCenterMessage\n                          key={index}\n                          message={message.briefMessage}\n                          details={message.detailedMessage}\n                          icon={<MessageIcon priority={message.priority} />}\n                        />\n                      );\n                    })\n                  )}\n                </Tabs.Panel>\n              );\n            })}\n          </Tabs.Wrapper>\n        </>\n      }\n    >\n      <Button\n        ref={indicatorRef}\n        styleType=\"borderless\"\n        startIcon={\n          <NotificationMarker status={status} enabled={notify}>\n            <SvgChat />\n          </NotificationMarker>\n        }\n        className={props.className}\n        style={props.style}\n      >\n        {translate(\"messageCenter.messages\")}\n        <StatusBarPopover.ExpandIndicator />\n      </Button>\n    </StatusBarPopover>\n  );\n}\n\ninterface MessageIconProps {\n  priority: OutputMessagePriority;\n}\n\nfunction MessageIcon({ priority }: MessageIconProps) {\n  switch (priority) {\n    case OutputMessagePriority.Error:\n    case OutputMessagePriority.Fatal:\n      return (\n        <Icon fill=\"negative\">\n          <SvgStatusError />\n        </Icon>\n      );\n    case OutputMessagePriority.Warning:\n      return (\n        <Icon fill=\"warning\">\n          <SvgStatusWarning />\n        </Icon>\n      );\n    case OutputMessagePriority.Info:\n      return (\n        <Icon fill=\"informational\">\n          <SvgInfo />\n        </Icon>\n      );\n  }\n  return (\n    <Icon fill=\"positive\">\n      <SvgStatusSuccess />\n    </Icon>\n  );\n}\n"]}

package/lib/esm/appui-react/statusfields/message-center/MessageCenterMessage.js

@@ -8,14 +8,14 @@
 import "./MessageCenterMessage.scss";
 import * as React from "react";
 import { MessageRenderer } from "@itwin/core-react";
-import { Icon, Text } from "@itwin/itwinui-react";
+import { Text } from "@itwin/itwinui-react";
 /** Message entry in [[MessageCenter]] component.
  * @internal
  */
 export function MessageCenterMessage(props) {
     const { icon, message, details, style, className } = props;
     return (React.createElement("div", { className: "uifw-statusFields-messageCenter-messageCenterMessage", style: style },
-        icon && React.createElement(Icon, { size: "small" }, icon),
+        icon,
         message && (React.createElement("span", { className: "uifw-content" },
             React.createElement(MessageRenderer, { message: message, className: className, useSpan: true }),
             details && (React.createElement(Text, { variant: "small" },

package/lib/esm/appui-react/statusfields/message-center/MessageCenterMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageCenterMessage.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/message-center/MessageCenterMessage.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAqBlD;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,sDAAsD,EACjE,KAAK,EAAE,KAAK;QAEX,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAQ;QACxC,OAAO,IAAI,CACV,8BAAM,SAAS,EAAC,cAAc;YAE5B,oBAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,SAAG;YAClE,OAAO,IAAI,CACV,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO;gBAEnB,oBAAC,eAAe,IAAC,OAAO,EAAE,OAAO,GAAI,CAChC,CACR,CACI,CACR,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module MessageCenter\n */\n\nimport \"./MessageCenterMessage.scss\";\nimport * as React from \"react\";\nimport type { CommonProps, MessageType } from \"@itwin/core-react\";\nimport { MessageRenderer } from \"@itwin/core-react\";\nimport { Icon, Text } from \"@itwin/itwinui-react\";\n\n/** Properties of [[MessageCenterMessage]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface MessageCenterMessageProps extends CommonProps {\n  /** Message content. */\n  // eslint-disable-next-line deprecation/deprecation\n  message?: MessageType;\n  /** Message icon. */\n  icon?: React.ReactNode;\n  /** Additional Details */\n  // eslint-disable-next-line deprecation/deprecation\n  details?: MessageType;\n  /** className */\n  className?: string;\n  /** Optional style */\n  style?: object;\n}\n\n/** Message entry in [[MessageCenter]] component.\n * @internal\n */\nexport function MessageCenterMessage(props: MessageCenterMessageProps) {\n  const { icon, message, details, style, className } = props;\n\n  return (\n    <div\n      className={\"uifw-statusFields-messageCenter-messageCenterMessage\"}\n      style={style}\n    >\n      {icon && <Icon size=\"small\">{icon}</Icon>}\n      {message && (\n        <span className=\"uifw-content\">\n          {/* eslint-disable-next-line deprecation/deprecation */}\n          <MessageRenderer message={message} className={className} useSpan />\n          {details && (\n            <Text variant=\"small\">\n              {/* eslint-disable-next-line deprecation/deprecation */}\n              <MessageRenderer message={details} />\n            </Text>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"MessageCenterMessage.js","sourceRoot":"","sources":["../../../../../src/appui-react/statusfields/message-center/MessageCenterMessage.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAqB5C;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,sDAAsD,EACjE,KAAK,EAAE,KAAK;QAEX,IAAI;QACJ,OAAO,IAAI,CACV,8BAAM,SAAS,EAAC,cAAc;YAE5B,oBAAC,eAAe,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,SAAG;YAClE,OAAO,IAAI,CACV,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO;gBAEnB,oBAAC,eAAe,IAAC,OAAO,EAAE,OAAO,GAAI,CAChC,CACR,CACI,CACR,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module MessageCenter\n */\n\nimport \"./MessageCenterMessage.scss\";\nimport * as React from \"react\";\nimport type { CommonProps, MessageType } from \"@itwin/core-react\";\nimport { MessageRenderer } from \"@itwin/core-react\";\nimport { Text } from \"@itwin/itwinui-react\";\n\n/** Properties of [[MessageCenterMessage]] component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface MessageCenterMessageProps extends CommonProps {\n  /** Message content. */\n  // eslint-disable-next-line deprecation/deprecation\n  message?: MessageType;\n  /** Message icon. */\n  icon?: React.ReactNode;\n  /** Additional Details */\n  // eslint-disable-next-line deprecation/deprecation\n  details?: MessageType;\n  /** className */\n  className?: string;\n  /** Optional style */\n  style?: object;\n}\n\n/** Message entry in [[MessageCenter]] component.\n * @internal\n */\nexport function MessageCenterMessage(props: MessageCenterMessageProps) {\n  const { icon, message, details, style, className } = props;\n\n  return (\n    <div\n      className={\"uifw-statusFields-messageCenter-messageCenterMessage\"}\n      style={style}\n    >\n      {icon}\n      {message && (\n        <span className=\"uifw-content\">\n          {/* eslint-disable-next-line deprecation/deprecation */}\n          <MessageRenderer message={message} className={className} useSpan />\n          {details && (\n            <Text variant=\"small\">\n              {/* eslint-disable-next-line deprecation/deprecation */}\n              <MessageRenderer message={details} />\n            </Text>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"]}