@itwin/appui-react 4.0.0-dev.12 → 4.0.0-dev.14

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

@@ -1,38 +1,38 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-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.
- * @public
- */
-interface SelectionScopeFieldProps extends CommonProps {
-    activeSelectionScope: string;
-    availableSelectionScopes: PresentationSelectionScope[];
-}
-/**
- * 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.
- * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents
- * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated
- * 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;
-}
-/**
- * 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 {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+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.
+ * @public
+ */
+interface SelectionScopeFieldProps extends CommonProps {
+    activeSelectionScope: string;
+    availableSelectionScopes: PresentationSelectionScope[];
+}
+/**
+ * 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.
+ * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents
+ * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated
+ * 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;
+}
+/**
+ * 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 {};
 //# sourceMappingURL=SelectionScope.d.ts.map

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

@@ -1,64 +1,64 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./SelectionScope.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { connect } from "react-redux";
-import { FooterIndicator } from "@itwin/appui-layout-react";
-import { Select } from "@itwin/itwinui-react";
-import { UiFramework } from "../UiFramework";
-/**
- * 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.
- * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents
- * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated
- * in the Redux state.
- * @public
- */
-class SelectionScopeFieldComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._label = UiFramework.translate("selectionScopeField.label");
-        this._toolTip = UiFramework.translate("selectionScopeField.toolTip");
-        this._scopeOptions = [];
-        this._updateSelectValue = (newValue) => {
-            // istanbul ignore else
-            if (newValue) {
-                UiFramework.setActiveSelectionScope(newValue);
-            }
-        };
-        this._scopeOptions = this.props.availableSelectionScopes.map((scope) => {
-            const label = !!scope.label ? scope.label : UiFramework.translate(`selectionScopeLabels.${scope.id}`);
-            return { value: scope.id, label };
-        });
-    }
-    render() {
-        return (React.createElement(FooterIndicator, { className: classnames("uifw-statusFields-selectionScope", this.props.className), style: this.props.style },
-            React.createElement("label", { className: "uifw-statusFields-selectionScope-label" },
-                this._label,
-                ":"),
-            React.createElement(Select, { className: "uifw-statusFields-selectionScope-selector", value: this.props.activeSelectionScope, options: this._scopeOptions, onChange: this._updateSelectValue, "data-testid": "components-selectionScope-selector", title: this._toolTip, size: "small" })));
-    }
-}
-/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
-function mapStateToProps(state) {
-    const frameworkState = state[UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
-    /* istanbul ignore next */
-    if (!frameworkState)
-        return undefined;
-    return { activeSelectionScope: frameworkState.sessionState.activeSelectionScope, availableSelectionScopes: frameworkState.sessionState.availableSelectionScopes };
-}
-// we declare the variable and export that rather than using export default.
-/**
- * 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
- */ // eslint-disable-next-line @typescript-eslint/naming-convention
-export const SelectionScopeField = connect(mapStateToProps)(SelectionScopeFieldComponent);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SelectionScope.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { connect } from "react-redux";
+import { FooterIndicator } from "@itwin/appui-layout-react";
+import { Select } from "@itwin/itwinui-react";
+import { UiFramework } from "../UiFramework";
+/**
+ * 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.
+ * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents
+ * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated
+ * in the Redux state.
+ * @public
+ */
+class SelectionScopeFieldComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._label = UiFramework.translate("selectionScopeField.label");
+        this._toolTip = UiFramework.translate("selectionScopeField.toolTip");
+        this._scopeOptions = [];
+        this._updateSelectValue = (newValue) => {
+            // istanbul ignore else
+            if (newValue) {
+                UiFramework.setActiveSelectionScope(newValue);
+            }
+        };
+        this._scopeOptions = this.props.availableSelectionScopes.map((scope) => {
+            const label = !!scope.label ? scope.label : UiFramework.translate(`selectionScopeLabels.${scope.id}`);
+            return { value: scope.id, label };
+        });
+    }
+    render() {
+        return (React.createElement(FooterIndicator, { className: classnames("uifw-statusFields-selectionScope", this.props.className), style: this.props.style },
+            React.createElement("label", { className: "uifw-statusFields-selectionScope-label" },
+                this._label,
+                ":"),
+            React.createElement(Select, { className: "uifw-statusFields-selectionScope-selector", value: this.props.activeSelectionScope, options: this._scopeOptions, onChange: this._updateSelectValue, "data-testid": "components-selectionScope-selector", title: this._toolTip, size: "small" })));
+    }
+}
+/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
+function mapStateToProps(state) {
+    const frameworkState = state[UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { activeSelectionScope: frameworkState.sessionState.activeSelectionScope, availableSelectionScopes: frameworkState.sessionState.availableSelectionScopes };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * 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
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+export const SelectionScopeField = connect(mapStateToProps)(SelectionScopeFieldComponent);
 //# sourceMappingURL=SelectionScope.js.map

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

@@ -1,44 +1,44 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import * as React from "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 an IconSpec with a web component icon to replace the icons that we used to load from the webfont */
-    private getIconFromIconName;
-    /** 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;
-}
-/**
- * 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 {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import * as React from "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 an IconSpec with a web component icon to replace the icons that we used to load from the webfont */
+    private getIconFromIconName;
+    /** 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;
+}
+/**
+ * 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 {};
 //# sourceMappingURL=SnapMode.d.ts.map

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

@@ -1,124 +1,124 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module StatusBar
- */
-import * as React from "react";
-import { connect } from "react-redux";
-import { SnapMode } from "@itwin/core-frontend";
-import { Snap, SnapModePanel } from "@itwin/appui-layout-react";
-import { ConfigurableUiActions } from "../configurableui/state";
-import { UiFramework } from "../UiFramework";
-import { Icon } from "@itwin/core-react";
-import { StatusBarLabelIndicator } from "../statusbar/LabelIndicator";
-import { IconSpecUtilities } from "@itwin/appui-abstract";
-import snapModeKeypoint from "@bentley/icons-generic/icons/snaps.svg";
-import snapModeIntersection from "@bentley/icons-generic/icons/snaps-intersection.svg";
-import snapModeCenter from "@bentley/icons-generic/icons/snaps-center.svg";
-import snapModeNearest from "@bentley/icons-generic/icons/snaps-nearest.svg";
-import snapModeOrigin from "@bentley/icons-generic/icons/snaps-origin.svg";
-import snapModeMidpoint from "@bentley/icons-generic/icons/snaps-midpoint.svg";
-import snapModeBisector from "@bentley/icons-generic/icons/snaps-bisector.svg";
-/**
- * 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.translate("snapModeField.keypoint"), value: SnapMode.NearestKeypoint, iconName: "snaps" },
-            { label: UiFramework.translate("snapModeField.intersection"), value: SnapMode.Intersection, iconName: "snaps-intersection" },
-            { label: UiFramework.translate("snapModeField.center"), value: SnapMode.Center, iconName: "snaps-center" },
-            { label: UiFramework.translate("snapModeField.nearest"), value: SnapMode.Nearest, iconName: "snaps-nearest" },
-            { label: UiFramework.translate("snapModeField.origin"), value: SnapMode.Origin, iconName: "snaps-origin" },
-            { label: UiFramework.translate("snapModeField.midpoint"), value: SnapMode.MidPoint, iconName: "snaps-midpoint" },
-            { label: UiFramework.translate("snapModeField.bisector"), value: SnapMode.Bisector, iconName: "snaps-bisector" },
-        ];
-        this._title = 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);
-        };
-    }
-    /** Return icon class name for a specific snapMode. */
-    getSnapModeIconNameFromMode(snapMode) {
-        for (const mode of this._snapModeFieldArray) {
-            if (mode.value === snapMode)
-                return mode.iconName;
-        }
-        /* istanbul ignore else */
-        if (snapMode > 0)
-            return "snaps-multione";
-        /* istanbul ignore next */
-        return "placeholder";
-    }
-    /** Standard React render method. */
-    render() {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(StatusBarLabelIndicator, { iconSpec: `${this.getIconFromIconName(`${this.getSnapModeIconNameFromMode(this.props.snapMode)}`)}`, title: this._title, label: this._title, popup: React.createElement(SnapModePanel, { title: this._title }, this.getSnapEntries()) })));
-    }
-    /** Return an IconSpec with a web component icon to replace the icons that we used to load from the webfont */
-    getIconFromIconName(iconName) {
-        let iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeKeypoint);
-        switch (iconName) {
-            case "snaps":
-                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeKeypoint);
-                break;
-            case "snaps-intersection":
-                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeIntersection);
-                break;
-            case "snaps-center":
-                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeCenter);
-                break;
-            case "snaps-nearest":
-                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeNearest);
-                break;
-            case "snaps-origin":
-                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeOrigin);
-                break;
-            case "snaps-midpoint":
-                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeMidpoint);
-                break;
-            case "snaps-bisector":
-                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeBisector);
-                break;
-        }
-        return iconSpec;
-    }
-    /** 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) => {
-            const iconSpec = this.getIconFromIconName(item.iconName);
-            return (React.createElement(Snap, { key: `SM_${index}`, onClick: () => this._handleSnapModeFieldClick(item.value), isActive: (this.props.snapMode & item.value) === item.value, icon: React.createElement(Icon, { className: `icon`, iconSpec: iconSpec }) }, 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: 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.frameworkStateKey]; // since app sets up key, don't hard-code name
-    /* istanbul ignore next */
-    if (!frameworkState)
-        return undefined;
-    return { snapMode: frameworkState.configurableUiState.snapMode };
-}
-// we declare the variable and export that rather than using export default.
-/**
- * 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
- */ // eslint-disable-next-line @typescript-eslint/naming-convention
-export const SnapModeField = connect(mapStateToProps, mapDispatch)(SnapModeFieldComponent);
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import * as React from "react";
+import { connect } from "react-redux";
+import { SnapMode } from "@itwin/core-frontend";
+import { Snap, SnapModePanel } from "@itwin/appui-layout-react";
+import { ConfigurableUiActions } from "../configurableui/state";
+import { UiFramework } from "../UiFramework";
+import { Icon } from "@itwin/core-react";
+import { StatusBarLabelIndicator } from "../statusbar/LabelIndicator";
+import { IconSpecUtilities } from "@itwin/appui-abstract";
+import snapModeKeypoint from "@bentley/icons-generic/icons/snaps.svg";
+import snapModeIntersection from "@bentley/icons-generic/icons/snaps-intersection.svg";
+import snapModeCenter from "@bentley/icons-generic/icons/snaps-center.svg";
+import snapModeNearest from "@bentley/icons-generic/icons/snaps-nearest.svg";
+import snapModeOrigin from "@bentley/icons-generic/icons/snaps-origin.svg";
+import snapModeMidpoint from "@bentley/icons-generic/icons/snaps-midpoint.svg";
+import snapModeBisector from "@bentley/icons-generic/icons/snaps-bisector.svg";
+/**
+ * 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.translate("snapModeField.keypoint"), value: SnapMode.NearestKeypoint, iconName: "snaps" },
+            { label: UiFramework.translate("snapModeField.intersection"), value: SnapMode.Intersection, iconName: "snaps-intersection" },
+            { label: UiFramework.translate("snapModeField.center"), value: SnapMode.Center, iconName: "snaps-center" },
+            { label: UiFramework.translate("snapModeField.nearest"), value: SnapMode.Nearest, iconName: "snaps-nearest" },
+            { label: UiFramework.translate("snapModeField.origin"), value: SnapMode.Origin, iconName: "snaps-origin" },
+            { label: UiFramework.translate("snapModeField.midpoint"), value: SnapMode.MidPoint, iconName: "snaps-midpoint" },
+            { label: UiFramework.translate("snapModeField.bisector"), value: SnapMode.Bisector, iconName: "snaps-bisector" },
+        ];
+        this._title = 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);
+        };
+    }
+    /** Return icon class name for a specific snapMode. */
+    getSnapModeIconNameFromMode(snapMode) {
+        for (const mode of this._snapModeFieldArray) {
+            if (mode.value === snapMode)
+                return mode.iconName;
+        }
+        /* istanbul ignore else */
+        if (snapMode > 0)
+            return "snaps-multione";
+        /* istanbul ignore next */
+        return "placeholder";
+    }
+    /** Standard React render method. */
+    render() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(StatusBarLabelIndicator, { iconSpec: `${this.getIconFromIconName(`${this.getSnapModeIconNameFromMode(this.props.snapMode)}`)}`, title: this._title, label: this._title, popup: React.createElement(SnapModePanel, { title: this._title }, this.getSnapEntries()) })));
+    }
+    /** Return an IconSpec with a web component icon to replace the icons that we used to load from the webfont */
+    getIconFromIconName(iconName) {
+        let iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeKeypoint);
+        switch (iconName) {
+            case "snaps":
+                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeKeypoint);
+                break;
+            case "snaps-intersection":
+                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeIntersection);
+                break;
+            case "snaps-center":
+                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeCenter);
+                break;
+            case "snaps-nearest":
+                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeNearest);
+                break;
+            case "snaps-origin":
+                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeOrigin);
+                break;
+            case "snaps-midpoint":
+                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeMidpoint);
+                break;
+            case "snaps-bisector":
+                iconSpec = IconSpecUtilities.createWebComponentIconSpec(snapModeBisector);
+                break;
+        }
+        return iconSpec;
+    }
+    /** 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) => {
+            const iconSpec = this.getIconFromIconName(item.iconName);
+            return (React.createElement(Snap, { key: `SM_${index}`, onClick: () => this._handleSnapModeFieldClick(item.value), isActive: (this.props.snapMode & item.value) === item.value, icon: React.createElement(Icon, { className: `icon`, iconSpec: iconSpec }) }, 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: 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.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { snapMode: frameworkState.configurableUiState.snapMode };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * 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
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+export const SnapModeField = connect(mapStateToProps, mapDispatch)(SnapModeFieldComponent);
 //# sourceMappingURL=SnapMode.js.map

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

@@ -1,31 +1,31 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./ViewAttributes.scss";
-import * as React from "react";
-import { ViewFlagProps } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-interface ViewAttributesStatusFieldState {
-    viewFlags: ViewFlagProps;
-    cameraOn: boolean;
-    target: HTMLElement | null;
-}
-/** Widget for showing Checkboxes for View Attributes
- * @beta
- */
-export declare class ViewAttributesStatusField extends React.Component<CommonProps, ViewAttributesStatusFieldState> {
-    private _title;
-    constructor(props: CommonProps);
-    componentDidMount(): void;
-    private updateState;
-    private _handleViewFlagClick;
-    private _handleToggleCamera;
-    private stylizeName;
-    private getViewFlagItem;
-    private getFlagState;
-    private getToggleCameraItem;
-    private getViewFlags;
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./ViewAttributes.scss";
+import * as React from "react";
+import { ViewFlagProps } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+interface ViewAttributesStatusFieldState {
+    viewFlags: ViewFlagProps;
+    cameraOn: boolean;
+    target: HTMLElement | null;
+}
+/** Widget for showing Checkboxes for View Attributes
+ * @beta
+ */
+export declare class ViewAttributesStatusField extends React.Component<CommonProps, ViewAttributesStatusFieldState> {
+    private _title;
+    constructor(props: CommonProps);
+    componentDidMount(): void;
+    private updateState;
+    private _handleViewFlagClick;
+    private _handleToggleCamera;
+    private stylizeName;
+    private getViewFlagItem;
+    private getFlagState;
+    private getToggleCameraItem;
+    private getViewFlags;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=ViewAttributes.d.ts.map