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

package/lib/cjs/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 \"./SectionsField.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Dialog, FooterPopup, TitleBar } from \"@itwin/appui-layout-react\";\nimport { ClipEventType, IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider, Viewport } from \"@itwin/core-frontend\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { Button, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\nimport { UiFramework } from \"../UiFramework\";\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\n\n/** Sections Status Field Props\n * @beta\n */\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 [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [\n    UiFramework.translate(\"tools.sectionTools\"),\n    UiFramework.translate(\"tools.sectionClear\"),\n    UiFramework.translate(\"tools.sectionShowHandles\")], []);\n  const activeViewport = useActiveViewport();\n  const [showIndicator, setShowIndicator] = React.useState(false);\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\n  const targetDiv = React.useRef<HTMLDivElement>(null);\n  const classes = (showIndicator) ? \"uifw-indicator-fade-in\" : \"uifw-indicator-fade-out\";\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\n\n  React.useEffect(() => {\n    // istanbul ignore next\n    const onClipChanged = (viewport: Viewport, _eventType: ClipEventType, _provider: ViewClipDecorationProvider) => {\n      if (viewport !== activeViewport)\n        return;\n\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\n      const isClipActive = !!activeViewport.view.getViewClip();\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\n    };\n\n    const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();\n    setShowIndicator(clipActive || !props.hideWhenUnused);\n    setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));\n\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);\n    return () => {\n      // Get or create static ViewClipDecorationProvider\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);\n    };\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\n\n  // istanbul ignore next\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (activeViewport) {\n      setHasManipulatorsShown(e.target.checked);\n      await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);\n    }\n  };\n\n  // istanbul ignore next\n  const handleClear = async () => {\n    await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());\n    setPopupOpen(false);\n  };\n\n  return (\n    <div className=\"uifw-section-footer-popup-container\">\n      {showIndicator &&\n        <>\n          <div ref={targetDiv} title={toolTip}>\n            <StatusBarLabelIndicator\n              className={classes}\n              iconSpec=\"icon-section-tool\"\n              onClick={() => setPopupOpen(!isPopupOpen)}\n            />\n          </div>\n          <FooterPopup\n            target={targetDiv.current}\n            onClose={() => setPopupOpen(false)}\n            isOpen={isPopupOpen}>\n            <Dialog\n              titleBar={\n                <TitleBar title={toolTip} />\n              }>\n              <div className=\"uifw-sections-footer-contents\">\n                <Button onClick={handleClear}>{clearLabel}</Button>\n                <div className=\"uifw-uifw-sections-toggle-container\">\n                  <div className={classnames(\"uifw-sections-label\")}>{showHandlesLabel}</div>\n                  <ToggleSwitch className=\"uifw-sections-toggle\" onChange={toggleManipulators} checked={hasManipulatorsShown} />\n                </div>\n              </div>\n            </Dialog>\n          </FooterPopup>\n        </>\n      }\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.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 \"./SectionsField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Dialog, FooterPopup, TitleBar } from \"@itwin/appui-layout-react\";\r\nimport { ClipEventType, IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider, Viewport } from \"@itwin/core-frontend\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Button, ToggleSwitch } from \"@itwin/itwinui-react\";\r\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\r\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport svgSectionTool from \"@bentley/icons-generic/icons/section-tool.svg\";\r\n\r\n/** Sections Status Field Props\r\n * @beta\r\n */\r\nexport interface SectionsStatusFieldProps extends CommonProps {\r\n  hideWhenUnused?: boolean;\r\n}\r\n\r\n/** Status Field for showing section extra tools for clearing and showing manipulators\r\n * @beta\r\n */\r\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\r\n  const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [\r\n    UiFramework.translate(\"tools.sectionTools\"),\r\n    UiFramework.translate(\"tools.sectionClear\"),\r\n    UiFramework.translate(\"tools.sectionShowHandles\")], []);\r\n  const activeViewport = useActiveViewport();\r\n  const [showIndicator, setShowIndicator] = React.useState(false);\r\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\r\n  const targetDiv = React.useRef<HTMLDivElement>(null);\r\n  const classes = (showIndicator) ? \"uifw-field-fade-in\" : \"uifw-field-fade-out\";\r\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    // istanbul ignore next\r\n    const onClipChanged = (viewport: Viewport, _eventType: ClipEventType, _provider: ViewClipDecorationProvider) => {\r\n      if (viewport !== activeViewport)\r\n        return;\r\n\r\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\r\n      const isClipActive = !!activeViewport.view.getViewClip();\r\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\r\n    };\r\n\r\n    const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();\r\n    setShowIndicator(clipActive || !props.hideWhenUnused);\r\n    setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));\r\n\r\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);\r\n    return () => {\r\n      // Get or create static ViewClipDecorationProvider\r\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);\r\n    };\r\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\r\n\r\n  // istanbul ignore next\r\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (activeViewport) {\r\n      setHasManipulatorsShown(e.target.checked);\r\n      await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);\r\n    }\r\n  };\r\n\r\n  // istanbul ignore next\r\n  const handleClear = async () => {\r\n    await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());\r\n    setPopupOpen(false);\r\n  };\r\n  const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgSectionTool);\r\n\r\n  return (\r\n    <div className=\"uifw-section-footer-popup-container\">\r\n      {showIndicator &&\r\n        <>\r\n          <div ref={targetDiv} title={toolTip}>\r\n            <StatusBarLabelIndicator\r\n              className={classes}\r\n              iconSpec={iconSpec}\r\n              onClick={() => setPopupOpen(!isPopupOpen)}\r\n            />\r\n          </div>\r\n          <FooterPopup\r\n            target={targetDiv.current}\r\n            onClose={() => setPopupOpen(false)}\r\n            isOpen={isPopupOpen}>\r\n            <Dialog\r\n              titleBar={\r\n                <TitleBar title={toolTip} />\r\n              }>\r\n              <div className=\"uifw-sections-footer-contents\">\r\n                <Button onClick={handleClear}>{clearLabel}</Button>\r\n                <div className=\"uifw-uifw-sections-toggle-container\">\r\n                  <div className={classnames(\"uifw-sections-label\")}>{showHandlesLabel}</div>\r\n                  <ToggleSwitch className=\"uifw-sections-toggle\" onChange={toggleManipulators} checked={hasManipulatorsShown} />\r\n                </div>\r\n              </div>\r\n            </Dialog>\r\n          </FooterPopup>\r\n        </>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}

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

@@ -1,36 +1,35 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/typography";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.uifw-sections-footer-contents {
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-  padding: 8px;
-}
-
-.uifw-uifw-sections-toggle-container {
-  display: flex;
-  margin: var(--iui-size-2xs);
-  justify-content: center;
-}
-
-.uifw-sections-toggle {
-  align-self: center;
-  margin-right: var(--iui-size-xs);
-}
-
-.uifw-sections-label {
-  @include iui-font-family;
-  color: $buic-text-color;
-  font-size: var(--iui-font-size-1);
-  align-self: center;
-  margin: var(--iui-size-xs);
-
-  &.disabled {
-    color: $buic-text-color-disabled;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.uifw-sections-footer-contents {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  padding: 8px;
+}
+
+.uifw-uifw-sections-toggle-container {
+  display: flex;
+  margin: var(--iui-size-2xs);
+  justify-content: center;
+}
+
+.uifw-sections-toggle {
+  align-self: center;
+  margin-right: var(--iui-size-xs);
+}
+
+.uifw-sections-label {
+  font-family: var(--iui-font-sans);
+  color: var(--iui-color-text);
+  font-size: var(--iui-font-size-1);
+  align-self: center;
+  margin: var(--iui-size-xs);
+
+  &.disabled {
+    color: var(--iui-color-text-disabled);
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionInfo.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAItD;GACG;AACH,UAAU,uBAAwB,SAAQ,WAAW;IACnD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,cAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;gBAEpE,KAAK,EAAE,uBAAuB;IAI1B,MAAM,IAAI,KAAK,CAAC,SAAS;CAW1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,kBAAkB,0MAAwD,CAAC"}
+{"version":3,"file":"SelectionInfo.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAKtD;GACG;AACH,UAAU,uBAAwB,SAAQ,WAAW;IACnD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,cAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;gBAEpE,KAAK,EAAE,uBAAuB;IAI1B,MAAM,IAAI,KAAK,CAAC,SAAS;CAW1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,kBAAkB,0MAAwD,CAAC"}

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

@@ -15,6 +15,7 @@ const react_redux_1 = require("react-redux");
 const core_react_1 = require("@itwin/core-react");
 const appui_layout_react_1 = require("@itwin/appui-layout-react");
 const UiFramework_1 = require("../UiFramework");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 /**
  * Status Field React component. This component is designed to be specified in a status bar definition.
  * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
@@ -25,7 +26,7 @@ class SelectionInfoFieldComponent extends React.Component {
     }
     render() {
         return (React.createElement(appui_layout_react_1.FooterIndicator, { className: (0, classnames_1.default)("uifw-statusFields-selectionInfo", this.props.className), style: this.props.style },
-            React.createElement(core_react_1.Icon, { iconSpec: "icon-cursor" }),
+            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCursor, null) }),
             this.props.selectionCount.toString()));
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionInfo.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kDAAsD;AACtD,kEAA4D;AAC5D,gDAA6C;AAQ7C;;;GAGG;AACH,MAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAkC;IAEhF,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEtB,oBAAC,iBAAI,IAAC,QAAQ,EAAE,aAAa,GAAI;YACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CACrB,CACnB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;AAC1E,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACvD,QAAA,kBAAkB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,2BAA2B,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./SelectionInfo.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { CommonProps, Icon } from \"@itwin/core-react\";\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\nimport { UiFramework } from \"../UiFramework\";\n\n/** Defines properties supported by the SelectionInfo Field Component.\n */\ninterface SelectionInfoFieldProps extends CommonProps {\n  selectionCount: number;\n}\n\n/**\n * Status Field React component. This component is designed to be specified in a status bar definition.\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\n */\nclass SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {\n\n  constructor(props: SelectionInfoFieldProps) {\n    super(props);\n  }\n\n  public override render(): React.ReactNode {\n    return (\n      <FooterIndicator\n        className={classnames(\"uifw-statusFields-selectionInfo\", this.props.className)}\n        style={this.props.style}\n      >\n        {<Icon iconSpec={\"icon-cursor\"} />}\n        {this.props.selectionCount.toString()}\n      </FooterIndicator>\n    );\n  }\n}\n\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\nfunction mapStateToProps(state: any) {\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\n  /* istanbul ignore next */\n  if (!frameworkState)\n    return undefined;\n\n  return { selectionCount: frameworkState.sessionState.numItemsSelected };\n}\n\n// we declare the variable and export that rather than using export default.\n/**\n * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\n * This React component is Redux connected.\n * @public\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\nexport const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);\n"]}
+{"version":3,"file":"SelectionInfo.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kDAAsD;AACtD,kEAA4D;AAC5D,gDAA6C;AAC7C,oEAAuD;AAQvD;;;GAGG;AACH,MAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAkC;IAEhF,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEtB,oBAAC,iBAAI,IAAC,QAAQ,EAAE,oBAAC,+BAAS,OAAG,GAAI;YACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CACrB,CACnB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;AAC1E,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACvD,QAAA,kBAAkB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,2BAA2B,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 \"./SelectionInfo.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { SvgCursor } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Defines properties supported by the SelectionInfo Field Component.\r\n */\r\ninterface SelectionInfoFieldProps extends CommonProps {\r\n  selectionCount: number;\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 */\r\nclass SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {\r\n\r\n  constructor(props: SelectionInfoFieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <FooterIndicator\r\n        className={classnames(\"uifw-statusFields-selectionInfo\", this.props.className)}\r\n        style={this.props.style}\r\n      >\r\n        {<Icon iconSpec={<SvgCursor />} />}\r\n        {this.props.selectionCount.toString()}\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 { selectionCount: frameworkState.sessionState.numItemsSelected };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * SelectionInfo 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 * This React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);\r\n"]}

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

@@ -1,15 +1,15 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/_variables";
-
-.uifw-statusFields-selectionInfo {
-  .icon {
-    color: $icon-color;
-    font-size: $icon-size;
-    padding-right: 4px;
-  }
-
-  min-width: 6em;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/_variables";
+
+.uifw-statusFields-selectionInfo {
+  .icon {
+    color: $icon-color;
+    font-size: $icon-size;
+    padding-right: 4px;
+  }
+
+  min-width: 6em;
 }

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

@@ -1,8 +1,8 @@
 /** @packageDocumentation
  * @module StatusBar
  */
+/// <reference types="react" />
 import "./SelectionScope.scss";
-import * as React from "react";
 import { PresentationSelectionScope } from "../redux/SessionState";
 import { CommonProps } from "@itwin/core-react";
 /** Defines properties supported by the SelectionScopeField Component.
@@ -20,19 +20,12 @@ interface SelectionScopeFieldProps extends CommonProps {
  * in the Redux state.
  * @public
  */
-declare class SelectionScopeFieldComponent extends React.Component<SelectionScopeFieldProps> {
-    private _label;
-    private _toolTip;
-    private _scopeOptions;
-    constructor(props: SelectionScopeFieldProps);
-    private _updateSelectValue;
-    render(): React.ReactNode;
-}
+declare function SelectionScopeFieldComponent(props: SelectionScopeFieldProps): JSX.Element;
 /**
  * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will
  * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.
  * This React component is Redux connected.
  * @public
- */ export declare const SelectionScopeField: import("react-redux").ConnectedComponent<typeof SelectionScopeFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionScopeFieldComponent> & SelectionScopeFieldProps, "availableSelectionScopes" | "activeSelectionScope">>;
+ */ export declare const SelectionScopeField: import("react-redux").ConnectedComponent<typeof SelectionScopeFieldComponent, import("react-redux").Omit<SelectionScopeFieldProps, "availableSelectionScopes" | "activeSelectionScope">>;
 export {};
 //# sourceMappingURL=SelectionScope.d.ts.map

package/lib/cjs/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,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,UAAU,wBAAyB,SAAQ,WAAW;IAEpD,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;CAqB1C;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;AAM/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,UAAU,wBAAyB,SAAQ,WAAW;IACpD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wBAAwB,EAAE,0BAA0B,EAAE,CAAC;CACxD;AAED;;;;;;;GAOG;AACH,iBAAS,4BAA4B,CAAC,KAAK,EAAE,wBAAwB,eAiCpE;AAaD;;;;;GAKG,CACH,eAAO,MAAM,mBAAmB,0LAAyD,CAAC"}

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

@@ -23,30 +23,23 @@ const UiFramework_1 = require("../UiFramework");
  * in the Redux state.
  * @public
  */
-class SelectionScopeFieldComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._label = UiFramework_1.UiFramework.translate("selectionScopeField.label");
-        this._toolTip = UiFramework_1.UiFramework.translate("selectionScopeField.toolTip");
-        this._scopeOptions = [];
-        this._updateSelectValue = (newValue) => {
-            // istanbul ignore else
-            if (newValue) {
-                UiFramework_1.UiFramework.setActiveSelectionScope(newValue);
-            }
-        };
-        this._scopeOptions = this.props.availableSelectionScopes.map((scope) => {
-            const label = !!scope.label ? scope.label : UiFramework_1.UiFramework.translate(`selectionScopeLabels.${scope.id}`);
-            return { value: scope.id, label };
-        });
-    }
-    render() {
-        return (React.createElement(appui_layout_react_1.FooterIndicator, { className: (0, classnames_1.default)("uifw-statusFields-selectionScope", this.props.className), style: this.props.style },
-            React.createElement("label", { className: "uifw-statusFields-selectionScope-label" },
-                this._label,
-                ":"),
-            React.createElement(itwinui_react_1.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 SelectionScopeFieldComponent(props) {
+    const label = UiFramework_1.UiFramework.translate("selectionScopeField.label");
+    const toolTip = UiFramework_1.UiFramework.translate("selectionScopeField.toolTip");
+    const options = React.useMemo(() => props.availableSelectionScopes.map((scope) => {
+        return { value: scope.id, label: scope.label };
+    }), [props.availableSelectionScopes]);
+    const updateSelectValue = (newValue) => {
+        // istanbul ignore else
+        if (newValue) {
+            UiFramework_1.UiFramework.setActiveSelectionScope(newValue);
+        }
+    };
+    return (React.createElement(appui_layout_react_1.FooterIndicator, { className: (0, classnames_1.default)("uifw-statusFields-selectionScope", props.className), style: props.style },
+        React.createElement("label", { className: "uifw-statusFields-selectionScope-label" },
+            label,
+            ":"),
+        React.createElement(itwinui_react_1.Select, { className: "uifw-statusFields-selectionScope-selector", value: props.activeSelectionScope, options: options, onChange: updateSelectValue, "data-testid": "components-selectionScope-selector", title: toolTip, size: "small" })));
 }
 /** Function used by Redux to map state data in Redux store to props that are used to render this component. */
 function mapStateToProps(state) {

package/lib/cjs/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,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kEAA4D;AAC5D,wDAA4D;AAE5D,gDAA6C;AAY7C;;;;;;;GAOG;AACH,MAAM,4BAA6B,SAAQ,KAAK,CAAC,SAAmC;IAKlF,YAAY,KAA+B;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;QALP,WAAM,GAAG,yBAAW,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAC5D,aAAQ,GAAG,yBAAW,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,yBAAW,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,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAW,CAAC,SAAS,CAAC,wBAAwB,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;YACtG,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC;IASe,MAAM;QAEpB,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,kCAAkC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC/E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEvB,+BAAO,SAAS,EAAC,wCAAwC;gBACtD,IAAI,CAAC,MAAM;oBACN;YACR,oBAAC,sBAAM,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,yBAAW,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;AACvD,QAAA,mBAAmB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,4BAA4B,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./SelectionScope.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\nimport { PresentationSelectionScope } from \"../redux/SessionState\";\nimport { UiFramework } from \"../UiFramework\";\nimport { CommonProps } from \"@itwin/core-react\";\n\n/** Defines properties supported by the SelectionScopeField Component.\n * @public\n */\ninterface SelectionScopeFieldProps extends CommonProps {\n\n  activeSelectionScope: string;\n  availableSelectionScopes: PresentationSelectionScope[];\n}\n\n/**\n * Status Field React component. This component is designed to be specified in a status bar definition.\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\n * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents\n * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated\n * in the Redux state.\n * @public\n */\nclass SelectionScopeFieldComponent extends React.Component<SelectionScopeFieldProps> {\n  private _label = UiFramework.translate(\"selectionScopeField.label\");\n  private _toolTip = UiFramework.translate(\"selectionScopeField.toolTip\");\n  private _scopeOptions: SelectOption<string>[] = [];\n\n  constructor(props: SelectionScopeFieldProps) {\n    super(props);\n    this._scopeOptions = this.props.availableSelectionScopes.map((scope: PresentationSelectionScope) => {\n      const label = !!scope.label ? scope.label : UiFramework.translate(`selectionScopeLabels.${scope.id}`);\n      return { value: scope.id, label };\n    });\n  }\n\n  private _updateSelectValue = (newValue: string) => {\n    // istanbul ignore else\n    if (newValue) {\n      UiFramework.setActiveSelectionScope(newValue);\n    }\n  };\n\n  public override render(): React.ReactNode {\n\n    return (\n      <FooterIndicator\n        className={classnames(\"uifw-statusFields-selectionScope\", this.props.className)}\n        style={this.props.style}\n      >\n        <label className=\"uifw-statusFields-selectionScope-label\">\n          {this._label}:\n        </label>\n        <Select\n          className=\"uifw-statusFields-selectionScope-selector\"\n          value={this.props.activeSelectionScope}\n          options={this._scopeOptions}\n          onChange={this._updateSelectValue}\n          data-testid=\"components-selectionScope-selector\"\n          title={this._toolTip}\n          size=\"small\" />\n      </FooterIndicator >\n    );\n  }\n}\n\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\nfunction mapStateToProps(state: any) {\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\n  /* istanbul ignore next */\n  if (!frameworkState)\n    return undefined;\n\n  return { activeSelectionScope: frameworkState.sessionState.activeSelectionScope, availableSelectionScopes: frameworkState.sessionState.availableSelectionScopes };\n}\n\n// we declare the variable and export that rather than using export default.\n/**\n * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will\n * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.\n * This React component is Redux connected.\n * @public\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\nexport const SelectionScopeField = connect(mapStateToProps)(SelectionScopeFieldComponent);\n"]}
+{"version":3,"file":"SelectionScope.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kEAA4D;AAC5D,wDAA8C;AAE9C,gDAA6C;AAW7C;;;;;;;GAOG;AACH,SAAS,4BAA4B,CAAC,KAA+B;IACnE,MAAM,KAAK,GAAG,yBAAW,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;IACjE,MAAM,OAAO,GAAG,yBAAW,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC;IAErE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC/E,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;IACjD,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAEtC,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,uBAAuB;QACvB,IAAI,QAAQ,EAAE;YACZ,yBAAW,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;SAC/C;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,kCAAkC,EAAE,KAAK,CAAC,SAAS,CAAC,EAC1E,KAAK,EAAE,KAAK,CAAC,KAAK;QAElB,+BAAO,SAAS,EAAC,wCAAwC;YACtD,KAAK;gBACA;QACR,oBAAC,sBAAM,IACL,SAAS,EAAC,2CAA2C,EACrD,KAAK,EAAE,KAAK,CAAC,oBAAoB,EACjC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,iBAAiB,iBACf,oCAAoC,EAChD,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,OAAO,GAAG,CACA,CACpB,CAAC;AACJ,CAAC;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,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;AACvD,QAAA,mBAAmB,GAAG,IAAA,qBAAO,EAAC,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 } from \"@itwin/itwinui-react\";\r\nimport { PresentationSelectionScope } from \"../redux/SessionState\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\n\r\n/** Defines properties supported by the SelectionScopeField Component.\r\n * @public\r\n */\r\ninterface SelectionScopeFieldProps extends CommonProps {\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\nfunction SelectionScopeFieldComponent(props: SelectionScopeFieldProps) {\r\n  const label = UiFramework.translate(\"selectionScopeField.label\");\r\n  const toolTip = UiFramework.translate(\"selectionScopeField.toolTip\");\r\n\r\n  const options = React.useMemo(() => props.availableSelectionScopes.map((scope) => {\r\n    return { value: scope.id, label: scope.label };\r\n  }), [props.availableSelectionScopes]);\r\n\r\n  const 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  return (\r\n    <FooterIndicator\r\n      className={classnames(\"uifw-statusFields-selectionScope\", props.className)}\r\n      style={props.style}\r\n    >\r\n      <label className=\"uifw-statusFields-selectionScope-label\">\r\n        {label}:\r\n      </label>\r\n      <Select\r\n        className=\"uifw-statusFields-selectionScope-selector\"\r\n        value={props.activeSelectionScope}\r\n        options={options}\r\n        onChange={updateSelectValue}\r\n        data-testid=\"components-selectionScope-selector\"\r\n        title={toolTip}\r\n        size=\"small\" />\r\n    </FooterIndicator >\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/cjs/appui-react/statusfields/SelectionScope.scss

@@ -1,46 +1,46 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
-
-.uifw-statusFields-selectionScope {
-  $font-size-medium: var(--iui-font-size-0);
-  $font-size-small: var(--iui-font-size-0) - 1px;
-  overflow: hidden;
-  padding-right: 0px;
-
-  > .uifw-statusFields-selectionScope-label {
-    display: inline;
-    padding-right: 4px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-
-    @include for-tablet-portrait-down {
-      display: none;
-      padding-right: 0px;
-    }
-  }
-
-  > .uifw-statusFields-selectionScope-selector {
-    min-width: 140px;
-    &.iui-select.iui-small {
-      width: auto;
-    }
-
-    @include for-tablet-portrait-down {
-      font-size: $font-size-medium;
-    }
-
-    @include for-phone-only {
-      font-size: $font-size-small;
-    }
-  }
-}
-
-.uifw-statusFields-selectionScope-label {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/variables";
+
+.uifw-statusFields-selectionScope {
+  $font-size-medium: var(--iui-font-size-0);
+  $font-size-small: var(--iui-font-size-0) - 1px;
+  overflow: hidden;
+  padding-right: 0px;
+
+  > .uifw-statusFields-selectionScope-label {
+    display: inline;
+    padding-right: 4px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    @include for-tablet-portrait-down {
+      display: none;
+      padding-right: 0px;
+    }
+  }
+
+  > .uifw-statusFields-selectionScope-selector {
+    min-width: 140px;
+    &.iui-select[data-iui-size="small"] {
+      width: auto;
+    }
+
+    @include for-tablet-portrait-down {
+      font-size: $font-size-medium;
+    }
+
+    @include for-phone-only {
+      font-size: $font-size-small;
+    }
+  }
+}
+
+.uifw-statusFields-selectionScope-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

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

@@ -1,42 +1,23 @@
 /** @packageDocumentation
  * @module StatusBar
  */
-import * as React from "react";
+/// <reference types="react" />
 import { CommonProps } from "@itwin/core-react";
 /** Defines properties supported by the SnapMode Field Component.
  */
 interface SnapModeFieldProps extends CommonProps {
     snapMode: number;
-    setSnapMode: (mode: number) => any;
-}
-interface SnapModeFieldState {
-    target: HTMLElement | null;
 }
 /**
  * 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.
  */
-declare class SnapModeFieldComponent extends React.Component<SnapModeFieldProps, SnapModeFieldState> {
-    private _snapModeFieldArray;
-    private _title;
-    readonly state: SnapModeFieldState;
-    constructor(props: SnapModeFieldProps);
-    /** Return icon class name for a specific snapMode. */
-    private getSnapModeIconNameFromMode;
-    /** Standard React render method. */
-    render(): React.ReactNode;
-    /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used
-      * to select a SnapMode.
-      */
-    private getSnapEntries;
-    /** Called when user clicks on a Snap Mode entry in the pop-up window. */
-    private _handleSnapModeFieldClick;
-}
+declare function SnapModeFieldComponent(props: SnapModeFieldProps): JSX.Element;
 /**
  * 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.
  * This Field React component is Redux connected.
  * @public
- */ export declare const SnapModeField: import("react-redux").ConnectedComponent<typeof SnapModeFieldComponent, import("react-redux").Omit<React.ClassAttributes<SnapModeFieldComponent> & SnapModeFieldProps, "setSnapMode" | "snapMode">>;
+ */ export declare const SnapModeField: import("react-redux").ConnectedComponent<typeof SnapModeFieldComponent, import("react-redux").Omit<SnapModeFieldProps, "snapMode">>;
 export {};
 //# sourceMappingURL=SnapMode.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SnapMode.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SnapMode.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD;GACG;AACH,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,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,mBAAmB,CAQzB;IACF,OAAO,CAAC,MAAM,CAAmD;IAEjE,SAAyB,KAAK,EAAE,kBAAkB,CAEhD;gBAEU,KAAK,EAAE,kBAAkB;IAIrC,sDAAsD;IACtD,OAAO,CAAC,2BAA2B;IAcnC,oCAAoC;IACpB,MAAM,IAAI,KAAK,CAAC,SAAS;IAiBzC;;QAEI;IACJ,OAAO,CAAC,cAAc;IAiBtB,yEAAyE;IACzE,OAAO,CAAC,yBAAyB,CAE/B;CAEH;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;;AAOH,OAAO,EAAE,WAAW,EAAkB,MAAM,mBAAmB,CAAC;AAahE;GACG;AACH,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAqCD;;;GAGG;AACH,iBAAS,sBAAsB,CAAC,KAAK,EAAE,kBAAkB,eAiDxD;AAaD;;;;;GAKG,CACH,eAAO,MAAM,aAAa,qIAAmD,CAAC"}

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

@@ -12,37 +12,61 @@ const React = require("react");
 const react_redux_1 = require("react-redux");
 const core_frontend_1 = require("@itwin/core-frontend");
 const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const state_1 = require("../configurableui/state");
 const UiFramework_1 = require("../UiFramework");
+const core_react_1 = require("@itwin/core-react");
 const LabelIndicator_1 = require("../statusbar/LabelIndicator");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const snaps_svg_1 = require("@bentley/icons-generic/icons/snaps.svg");
+const snaps_intersection_svg_1 = require("@bentley/icons-generic/icons/snaps-intersection.svg");
+const snaps_center_svg_1 = require("@bentley/icons-generic/icons/snaps-center.svg");
+const snaps_nearest_svg_1 = require("@bentley/icons-generic/icons/snaps-nearest.svg");
+const snaps_origin_svg_1 = require("@bentley/icons-generic/icons/snaps-origin.svg");
+const snaps_midpoint_svg_1 = require("@bentley/icons-generic/icons/snaps-midpoint.svg");
+const snaps_bisector_svg_1 = require("@bentley/icons-generic/icons/snaps-bisector.svg");
+function getIconFromIconName(iconName) {
+    let iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_svg_1.default);
+    switch (iconName) {
+        case "snaps":
+            iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_svg_1.default);
+            break;
+        case "snaps-intersection":
+            iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_intersection_svg_1.default);
+            break;
+        case "snaps-center":
+            iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_center_svg_1.default);
+            break;
+        case "snaps-nearest":
+            iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_nearest_svg_1.default);
+            break;
+        case "snaps-origin":
+            iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_origin_svg_1.default);
+            break;
+        case "snaps-midpoint":
+            iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_midpoint_svg_1.default);
+            break;
+        case "snaps-bisector":
+            iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(snaps_bisector_svg_1.default);
+            break;
+    }
+    return iconSpec;
+}
 /**
  * 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.
  */
-class SnapModeFieldComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._snapModeFieldArray = [
-            { label: UiFramework_1.UiFramework.translate("snapModeField.keypoint"), value: core_frontend_1.SnapMode.NearestKeypoint, iconName: "snaps" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.intersection"), value: core_frontend_1.SnapMode.Intersection, iconName: "snaps-intersection" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.center"), value: core_frontend_1.SnapMode.Center, iconName: "snaps-center" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.nearest"), value: core_frontend_1.SnapMode.Nearest, iconName: "snaps-nearest" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.origin"), value: core_frontend_1.SnapMode.Origin, iconName: "snaps-origin" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.midpoint"), value: core_frontend_1.SnapMode.MidPoint, iconName: "snaps-midpoint" },
-            { label: UiFramework_1.UiFramework.translate("snapModeField.bisector"), value: core_frontend_1.SnapMode.Bisector, iconName: "snaps-bisector" },
-        ];
-        this._title = UiFramework_1.UiFramework.translate("snapModeField.snapMode");
-        this.state = {
-            target: null,
-        };
-        /** Called when user clicks on a Snap Mode entry in the pop-up window. */
-        this._handleSnapModeFieldClick = (snapModeField) => {
-            this.props.setSnapMode(snapModeField);
-        };
-    }
+function SnapModeFieldComponent(props) {
+    const snapModes = React.useMemo(() => [
+        { label: UiFramework_1.UiFramework.translate("snapModeField.keypoint"), value: core_frontend_1.SnapMode.NearestKeypoint, iconName: "snaps" },
+        { label: UiFramework_1.UiFramework.translate("snapModeField.intersection"), value: core_frontend_1.SnapMode.Intersection, iconName: "snaps-intersection" },
+        { label: UiFramework_1.UiFramework.translate("snapModeField.center"), value: core_frontend_1.SnapMode.Center, iconName: "snaps-center" },
+        { label: UiFramework_1.UiFramework.translate("snapModeField.nearest"), value: core_frontend_1.SnapMode.Nearest, iconName: "snaps-nearest" },
+        { label: UiFramework_1.UiFramework.translate("snapModeField.origin"), value: core_frontend_1.SnapMode.Origin, iconName: "snaps-origin" },
+        { label: UiFramework_1.UiFramework.translate("snapModeField.midpoint"), value: core_frontend_1.SnapMode.MidPoint, iconName: "snaps-midpoint" },
+        { label: UiFramework_1.UiFramework.translate("snapModeField.bisector"), value: core_frontend_1.SnapMode.Bisector, iconName: "snaps-bisector" },
+    ], []);
     /** Return icon class name for a specific snapMode. */
-    getSnapModeIconNameFromMode(snapMode) {
-        for (const mode of this._snapModeFieldArray) {
+    const getSnapModeIconNameFromMode = React.useCallback(function (snapMode) {
+        for (const mode of snapModes) {
             if (mode.value === snapMode)
                 return mode.iconName;
         }
@@ -51,25 +75,10 @@ class SnapModeFieldComponent extends React.Component {
             return "snaps-multione";
         /* istanbul ignore next */
         return "placeholder";
-    }
-    /** Standard React render method. */
-    render() {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: `icon-${this.getSnapModeIconNameFromMode(this.props.snapMode)}`, title: this._title, label: this._title, popup: React.createElement(appui_layout_react_1.SnapModePanel, { title: this._title }, this.getSnapEntries()) })));
-    }
-    /** Return array of SnapRow elements, one for each support snap mode. This array will populate the pop-up used
-      * to select a SnapMode.
-      */
-    getSnapEntries() {
-        return this._snapModeFieldArray.map((item, index) => {
-            return (React.createElement(appui_layout_react_1.Snap, { key: `SM_${index}`, onClick: () => this._handleSnapModeFieldClick(item.value), isActive: (this.props.snapMode & item.value) === item.value, icon: React.createElement("i", { className: `icon icon-${item.iconName}` }) }, item.label));
-        });
-    }
+    }, [snapModes]);
+    const title = UiFramework_1.UiFramework.translate("snapModeField.snapMode");
+    return (React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { iconSpec: getIconFromIconName(getSnapModeIconNameFromMode(props.snapMode)), title: title, label: title, popup: React.createElement(appui_layout_react_1.SnapModePanel, { title: title }, snapModes.map((item, index) => React.createElement(appui_layout_react_1.Snap, { key: `SM_${index}`, onClick: () => UiFramework_1.UiFramework.setAccudrawSnapMode(item.value), isActive: (props.snapMode & item.value) === item.value, icon: React.createElement(core_react_1.Icon, { className: `icon`, iconSpec: getIconFromIconName(item.iconName) }) }, item.label))) }));
 }
-// Used by Redux to map dispatch functions to props entry. This requires SnapModeFieldProps interface above to include a setSnapMode entry */
-const mapDispatch = {
-    setSnapMode: state_1.ConfigurableUiActions.setSnapMode,
-};
 /** Function used by Redux to map state data in Redux store to props that are used to render this component. */
 function mapStateToProps(state) {
     const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
@@ -85,5 +94,5 @@ function mapStateToProps(state) {
  * This Field React component is Redux connected.
  * @public
  */ // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.SnapModeField = (0, react_redux_1.connect)(mapStateToProps, mapDispatch)(SnapModeFieldComponent);
+exports.SnapModeField = (0, react_redux_1.connect)(mapStateToProps)(SnapModeFieldComponent);
 //# sourceMappingURL=SnapMode.js.map