@itwin/appui-react 3.7.17 → 3.8.0

package/lib/esm/appui-react/accudraw/AccuDrawDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccuDrawDialog.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawDialog.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAelE;WACW;AACX,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC1E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,WAAW,CAAC,iBAAiB,CAAC,cAAc,EAAE,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,UAAU,CAAC,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACvE,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC;IACjG,MAAM,WAAW,GAAG,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAEzE,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EACzC,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,EAAE,EACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY;QAEtB,oBAAC,sBAAsB,IAAC,WAAW,EAAE,WAAW,GAAI,CACpC,CACnB,CAAC;AACJ,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 AccuDraw\r\n */\r\n\r\nimport \"./AccuDrawDialog.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, Orientation } from \"@itwin/core-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { ModelessDialog } from \"../dialog/ModelessDialog\";\r\nimport { AccuDrawFieldContainer } from \"./AccuDrawFieldContainer\";\r\n\r\n/** Properties for [[AccuDrawDialog]]\r\n * @beta */\r\nexport interface AccuDrawDialogProps extends CommonProps {\r\n  /** Indicates whether the dialog is open */\r\n  opened: boolean;\r\n  /** Unique id for the dialog */\r\n  dialogId: string;\r\n  /** Orientation of the fields */\r\n  orientation?: Orientation;\r\n  /** Callback for when the dialog closes */\r\n  onClose?: () => void;\r\n}\r\n\r\n/** Dialog displays [[AccuDrawFieldContainer]] for AccuDraw Ui\r\n * @beta */\r\nexport function AccuDrawDialog(props: AccuDrawDialogProps) {\r\n  const title = React.useRef(UiFramework.translate(\"accuDraw.dialogTitle\"));\r\n  const [opened, setOpened] = React.useState(props.opened);\r\n\r\n  const closeDialog = React.useCallback(() => {\r\n    setOpened(false);\r\n    props.onClose && props.onClose();\r\n  }, [props]);\r\n\r\n  const handleClose = React.useCallback(() => {\r\n    closeDialog();\r\n  }, [closeDialog]);\r\n\r\n  const handleEscape = React.useCallback(() => {\r\n    UiFramework.keyboardShortcuts.setFocusToHome();\r\n  }, []);\r\n\r\n  const classNames = classnames(\"uifw-accudraw-dialog\", props.className);\r\n  const orientation = (props.orientation !== undefined) ? props.orientation : Orientation.Vertical;\r\n  const dialogWidth = (orientation === Orientation.Horizontal) ? 500 : 250;\r\n\r\n  return (\r\n    <ModelessDialog\r\n      className={classNames} style={props.style}\r\n      title={title.current}\r\n      opened={opened}\r\n      dialogId={props.dialogId}\r\n      width={dialogWidth}\r\n      minHeight={75}\r\n      inset={false}\r\n      movable={true}\r\n      onClose={handleClose}\r\n      onEscape={handleEscape}\r\n    >\r\n      <AccuDrawFieldContainer orientation={orientation} />\r\n    </ModelessDialog >\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"AccuDrawDialog.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawDialog.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAelE;WACW;AACX,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC1E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,WAAW,CAAC,iBAAiB,CAAC,cAAc,EAAE,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,UAAU,CAAC,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACvE,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC;IACjG,MAAM,WAAW,GAAG,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAEzE,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EACzC,KAAK,EAAE,KAAK,CAAC,OAAO,EACpB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,EAAE,EACb,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY;QAEtB,oBAAC,sBAAsB,IAAC,WAAW,EAAE,WAAW,GAAI,CACpC,CACnB,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 AccuDraw\n */\n\nimport \"./AccuDrawDialog.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, Orientation } from \"@itwin/core-react\";\nimport { UiFramework } from \"../UiFramework\";\nimport { ModelessDialog } from \"../dialog/ModelessDialog\";\nimport { AccuDrawFieldContainer } from \"./AccuDrawFieldContainer\";\n\n/** Properties for [[AccuDrawDialog]]\n * @beta */\nexport interface AccuDrawDialogProps extends CommonProps {\n  /** Indicates whether the dialog is open */\n  opened: boolean;\n  /** Unique id for the dialog */\n  dialogId: string;\n  /** Orientation of the fields */\n  orientation?: Orientation;\n  /** Callback for when the dialog closes */\n  onClose?: () => void;\n}\n\n/** Dialog displays [[AccuDrawFieldContainer]] for AccuDraw Ui\n * @beta */\nexport function AccuDrawDialog(props: AccuDrawDialogProps) {\n  const title = React.useRef(UiFramework.translate(\"accuDraw.dialogTitle\"));\n  const [opened, setOpened] = React.useState(props.opened);\n\n  const closeDialog = React.useCallback(() => {\n    setOpened(false);\n    props.onClose && props.onClose();\n  }, [props]);\n\n  const handleClose = React.useCallback(() => {\n    closeDialog();\n  }, [closeDialog]);\n\n  const handleEscape = React.useCallback(() => {\n    UiFramework.keyboardShortcuts.setFocusToHome();\n  }, []);\n\n  const classNames = classnames(\"uifw-accudraw-dialog\", props.className);\n  const orientation = (props.orientation !== undefined) ? props.orientation : Orientation.Vertical;\n  const dialogWidth = (orientation === Orientation.Horizontal) ? 500 : 250;\n\n  return (\n    <ModelessDialog\n      className={classNames} style={props.style}\n      title={title.current}\n      opened={opened}\n      dialogId={props.dialogId}\n      width={dialogWidth}\n      minHeight={75}\n      inset={false}\n      movable={true}\n      onClose={handleClose}\n      onEscape={handleEscape}\n    >\n      <AccuDrawFieldContainer orientation={orientation} />\n    </ModelessDialog >\n  );\n}\n"]}

package/lib/esm/appui-react/accudraw/AccuDrawDialog.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.
-*--------------------------------------------------------------------------------------------*/
-.uifw-accudraw-dialog {
-  opacity: 0.90;
-
-  &:hover {
-    opacity: 1.00;
-  }
-
-  .core-dialog-container .core-dialog-area {
-    flex-grow: unset;
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.uifw-accudraw-dialog {
+  opacity: 0.90;
+
+  &:hover {
+    opacity: 1.00;
+  }
+
+  .core-dialog-container .core-dialog-area {
+    flex-grow: unset;
+  }
 }

package/lib/esm/appui-react/accudraw/AccuDrawFieldContainer.d.ts

@@ -1,20 +1,20 @@
-/** @packageDocumentation
- * @module AccuDraw
- */
-import "./AccuDrawFieldContainer.scss";
-import * as React from "react";
-import { CommonProps, Orientation, UiStateStorage } from "@itwin/core-react";
-/** Properties for [[AccuDrawFieldContainer]] component
- * @beta */
-export interface AccuDrawFieldContainerProps extends CommonProps {
-    /** Orientation of the fields */
-    orientation: Orientation;
-    /** Optional parameter for persistent UI settings. Defaults to LocalStateStorage. */
-    uiSettingsStorage?: UiStateStorage;
-    /** @internal */
-    showZOverride?: boolean;
-}
-/** AccuDraw Ui Field Container displays [[AccuDrawInputField]] for each field
- * @beta */
-export declare function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps): React.JSX.Element;
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import "./AccuDrawFieldContainer.scss";
+import * as React from "react";
+import { CommonProps, Orientation, UiStateStorage } from "@itwin/core-react";
+/** Properties for [[AccuDrawFieldContainer]] component
+ * @beta */
+export interface AccuDrawFieldContainerProps extends CommonProps {
+    /** Orientation of the fields */
+    orientation: Orientation;
+    /** Optional parameter for persistent UI settings. Defaults to LocalStateStorage. */
+    uiSettingsStorage?: UiStateStorage;
+    /** @internal */
+    showZOverride?: boolean;
+}
+/** AccuDraw Ui Field Container displays [[AccuDrawInputField]] for each field
+ * @beta */
+export declare function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps): React.JSX.Element;
 //# sourceMappingURL=AccuDrawFieldContainer.d.ts.map

package/lib/esm/appui-react/accudraw/AccuDrawFieldContainer.js

@@ -1,213 +1,213 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module AccuDraw
- */
-import "./AccuDrawFieldContainer.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { CompassMode, IModelApp, ItemField } from "@itwin/core-frontend";
-import { IconSpecUtilities } from "@itwin/appui-abstract";
-import { Orientation } from "@itwin/core-react";
-import { getCSSColorFromDef } from "@itwin/imodel-components-react";
-import { AccuDrawInputField } from "./AccuDrawInputField";
-import { FrameworkAccuDraw } from "./FrameworkAccuDraw";
-import angleIconSvg from "./angle.svg";
-import distanceIconSvg from "./distance.svg";
-import { UiFramework } from "../UiFramework";
-let AccuDrawContainerIndex = 0;
-function determineShowZ(vp) {
-    const showZ = (vp !== undefined) ? /* istanbul ignore next */ vp.view.is3d() : false;
-    return showZ;
-}
-const defaultXLabel = "X";
-const defaultYLabel = "Y";
-const defaultZLabel = "Z";
-const defaultAngleIcon = IconSpecUtilities.createWebComponentIconSpec(angleIconSvg);
-const defaultDistanceIcon = IconSpecUtilities.createWebComponentIconSpec(distanceIconSvg);
-/** AccuDraw Ui Field Container displays [[AccuDrawInputField]] for each field
- * @beta */
-export function AccuDrawFieldContainer(props) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { className, style, orientation, uiSettingsStorage, showZOverride, ...otherProps } = props;
-    const [containerIndex] = React.useState(() => ++AccuDrawContainerIndex);
-    const xInputRef = React.useRef(null);
-    const yInputRef = React.useRef(null);
-    const zInputRef = React.useRef(null);
-    const angleInputRef = React.useRef(null);
-    const distanceInputRef = React.useRef(null);
-    const focusField = React.useRef(undefined);
-    const [mode, setMode] = React.useState(CompassMode.Rectangular);
-    const [xLock, setXLock] = React.useState(false);
-    const [yLock, setYLock] = React.useState(false);
-    const [zLock, setZLock] = React.useState(false);
-    const [angleLock, setAngleLock] = React.useState(false);
-    const [distanceLock, setDistanceLock] = React.useState(false);
-    const [showZ, setShowZ] = React.useState(true);
-    const [xLabel, setXLabel] = React.useState(defaultXLabel);
-    const [yLabel, setYLabel] = React.useState(defaultYLabel);
-    const [zLabel, setZLabel] = React.useState(defaultZLabel);
-    const [angleLabel, setAngleLabel] = React.useState(undefined);
-    const [distanceLabel, setDistanceLabel] = React.useState(undefined);
-    const [xIcon, setXIcon] = React.useState(undefined);
-    const [yIcon, setYIcon] = React.useState(undefined);
-    const [zIcon, setZIcon] = React.useState(undefined);
-    const [angleIcon, setAngleIcon] = React.useState(defaultAngleIcon);
-    const [distanceIcon, setDistanceIcon] = React.useState(defaultDistanceIcon);
-    const [xStyle, setXStyle] = React.useState(undefined);
-    const [yStyle, setYStyle] = React.useState(undefined);
-    const [zStyle, setZStyle] = React.useState(undefined);
-    const [angleStyle, setAngleStyle] = React.useState(undefined);
-    const [distanceStyle, setDistanceStyle] = React.useState(undefined);
-    const getInputRef = (field) => {
-        let inputRef;
-        switch (field) {
-            case ItemField.X_Item:
-                inputRef = xInputRef;
-                break;
-            case ItemField.Y_Item:
-                inputRef = yInputRef;
-                break;
-            case ItemField.Z_Item:
-                inputRef = zInputRef;
-                break;
-            case ItemField.ANGLE_Item:
-                inputRef = angleInputRef;
-                break;
-            case ItemField.DIST_Item:
-                inputRef = distanceInputRef;
-                break;
-        }
-        return inputRef;
-    };
-    React.useEffect(() => {
-        setXLock(IModelApp.accuDraw.getFieldLock(ItemField.X_Item));
-        setYLock(IModelApp.accuDraw.getFieldLock(ItemField.Y_Item));
-        setZLock(IModelApp.accuDraw.getFieldLock(ItemField.Z_Item));
-        setAngleLock(IModelApp.accuDraw.getFieldLock(ItemField.ANGLE_Item));
-        setDistanceLock(IModelApp.accuDraw.getFieldLock(ItemField.DIST_Item));
-        const handleSetFieldLock = (args) => {
-            switch (args.field) {
-                case ItemField.X_Item:
-                    setXLock(args.lock);
-                    break;
-                case ItemField.Y_Item:
-                    setYLock(args.lock);
-                    break;
-                case ItemField.Z_Item:
-                    setZLock(args.lock);
-                    break;
-                case ItemField.ANGLE_Item:
-                    setAngleLock(args.lock);
-                    break;
-                case ItemField.DIST_Item:
-                    setDistanceLock(args.lock);
-                    break;
-            }
-        };
-        return FrameworkAccuDraw.onAccuDrawSetFieldLockEvent.addListener(handleSetFieldLock);
-    }, []);
-    const setFocusToField = React.useCallback((field) => {
-        const inputRef = getInputRef(field);
-        // istanbul ignore else
-        if (inputRef.current && document.activeElement !== inputRef.current) {
-            inputRef.current.focus();
-            inputRef.current.select();
-        }
-    }, []);
-    React.useEffect(() => {
-        const handleSetFieldFocus = (args) => {
-            focusField.current = args.field;
-            setFocusToField(focusField.current);
-        };
-        return FrameworkAccuDraw.onAccuDrawSetFieldFocusEvent.addListener(handleSetFieldFocus);
-    }, [setFocusToField]);
-    React.useEffect(() => {
-        const handleGrabInputFocus = () => {
-            // istanbul ignore else
-            if (focusField.current)
-                setFocusToField(focusField.current);
-        };
-        return FrameworkAccuDraw.onAccuDrawGrabInputFocusEvent.addListener(handleGrabInputFocus);
-    }, [setFocusToField]);
-    React.useEffect(() => {
-        setMode(IModelApp.accuDraw.compassMode);
-        const handleSetMode = (args) => {
-            setMode(args.mode);
-        };
-        return FrameworkAccuDraw.onAccuDrawSetCompassModeEvent.addListener(handleSetMode);
-    }, []);
-    const handleValueChanged = React.useCallback((field, stringValue) => {
-        FrameworkAccuDraw.setFieldValueFromUi(field, stringValue);
-    }, []);
-    const handleEscPressed = React.useCallback(() => {
-        UiFramework.keyboardShortcuts.setFocusToHome();
-    }, []);
-    React.useEffect(() => {
-        setShowZ(showZOverride || determineShowZ(IModelApp.viewManager.selectedView));
-        // istanbul ignore next
-        const handleSelectedViewportChanged = (args) => {
-            setShowZ(determineShowZ(args.current));
-        };
-        return IModelApp.viewManager.onSelectedViewportChanged.addListener(handleSelectedViewportChanged);
-    }, [showZOverride]);
-    React.useEffect(() => {
-        const createFieldStyle = (inStyle, backgroundColor, foregroundColor) => {
-            let fieldStyle;
-            let rgbaString = "";
-            if (inStyle || backgroundColor || foregroundColor) {
-                fieldStyle = inStyle ? inStyle : {};
-                if (backgroundColor) {
-                    rgbaString = typeof backgroundColor === "string" ? backgroundColor : getCSSColorFromDef(backgroundColor);
-                    fieldStyle = { ...fieldStyle, backgroundColor: rgbaString };
-                }
-                if (foregroundColor) {
-                    rgbaString = typeof foregroundColor === "string" ? foregroundColor : getCSSColorFromDef(foregroundColor);
-                    fieldStyle = { ...fieldStyle, color: rgbaString };
-                }
-            }
-            return fieldStyle;
-        };
-        const processAccuDrawUiSettings = (settings) => {
-            setXStyle(settings ? createFieldStyle(settings.xStyle, settings.xBackgroundColor, settings.xForegroundColor) : undefined);
-            setYStyle(settings ? createFieldStyle(settings.yStyle, settings.yBackgroundColor, settings.yForegroundColor) : undefined);
-            setZStyle(settings ? createFieldStyle(settings.zStyle, settings.zBackgroundColor, settings.zForegroundColor) : undefined);
-            setAngleStyle(settings ? createFieldStyle(settings.angleStyle, settings.angleBackgroundColor, settings.angleForegroundColor) : undefined);
-            setDistanceStyle(settings ? createFieldStyle(settings.distanceStyle, settings.distanceBackgroundColor, settings.distanceForegroundColor) : undefined);
-            setXLabel(settings && settings.xLabel !== undefined ? settings.xLabel : defaultXLabel);
-            setYLabel(settings && settings.yLabel !== undefined ? settings.yLabel : defaultYLabel);
-            setZLabel(settings && settings.zLabel !== undefined ? settings.zLabel : defaultZLabel);
-            setAngleLabel(settings && settings.angleLabel !== undefined ? settings.angleLabel : undefined);
-            setDistanceLabel(settings && settings.distanceLabel !== undefined ? settings.distanceLabel : undefined);
-            setXIcon(settings && settings.xIcon !== undefined ? settings.xIcon : undefined);
-            setYIcon(settings && settings.yIcon !== undefined ? settings.yIcon : undefined);
-            setZIcon(settings && settings.zIcon !== undefined ? settings.zIcon : undefined);
-            setAngleIcon(settings && settings.angleIcon !== undefined ? settings.angleIcon : defaultAngleIcon);
-            setDistanceIcon(settings && settings.distanceIcon !== undefined ? settings.distanceIcon : defaultDistanceIcon);
-        };
-        if (FrameworkAccuDraw.uiStateStorage)
-            processAccuDrawUiSettings(FrameworkAccuDraw.uiStateStorage);
-        // istanbul ignore next
-        const handleAccuDrawUiSettingsChanged = () => {
-            processAccuDrawUiSettings(FrameworkAccuDraw.uiStateStorage);
-        };
-        return FrameworkAccuDraw.onAccuDrawUiSettingsChangedEvent.addListener(handleAccuDrawUiSettingsChanged);
-    }, []);
-    const classNames = classnames("uifw-accudraw-field-container", (orientation === Orientation.Vertical) ? "uifw-accudraw-field-container-vertical" : "uifw-accudraw-field-container-horizontal", className);
-    const delay = 250;
-    const labelCentered = (xLabel !== undefined && xLabel.length === 1 && yLabel !== undefined && yLabel.length === 1 && zLabel !== undefined && zLabel.length === 1);
-    return (React.createElement("div", { className: classNames, style: style, ...otherProps },
-        mode === CompassMode.Rectangular &&
-            React.createElement(React.Fragment, null,
-                React.createElement(AccuDrawInputField, { ref: xInputRef, isLocked: xLock, className: "uifw-accudraw-x-value", style: xStyle, field: ItemField.X_Item, id: `uifw-accudraw-x-${containerIndex}`, "data-testid": "uifw-accudraw-x", label: xLabel, iconSpec: xIcon, labelCentered: labelCentered, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.X_Item, stringValue), onEscPressed: handleEscPressed }),
-                React.createElement(AccuDrawInputField, { ref: yInputRef, isLocked: yLock, className: "uifw-accudraw-y-value", style: yStyle, field: ItemField.Y_Item, id: `uifw-accudraw-y-${containerIndex}`, "data-testid": "uifw-accudraw-y", label: yLabel, iconSpec: yIcon, labelCentered: labelCentered, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.Y_Item, stringValue), onEscPressed: handleEscPressed }),
-                showZ &&
-                    React.createElement(AccuDrawInputField, { ref: zInputRef, isLocked: zLock, className: "uifw-accudraw-z-value", style: zStyle, field: ItemField.Z_Item, id: `uifw-accudraw-z-${containerIndex}`, "data-testid": "uifw-accudraw-z", label: zLabel, iconSpec: zIcon, labelCentered: labelCentered, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.Z_Item, stringValue), onEscPressed: handleEscPressed })),
-        mode === CompassMode.Polar &&
-            React.createElement(React.Fragment, null,
-                React.createElement(AccuDrawInputField, { ref: angleInputRef, isLocked: angleLock, className: "uifw-accudraw-angle-value", style: angleStyle, field: ItemField.ANGLE_Item, id: `uifw-accudraw-angle-${containerIndex}`, "data-testid": "uifw-accudraw-angle", label: angleLabel, iconSpec: angleIcon, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.ANGLE_Item, stringValue), onEscPressed: handleEscPressed }),
-                React.createElement(AccuDrawInputField, { ref: distanceInputRef, isLocked: distanceLock, className: "uifw-accudraw-distance-value", style: distanceStyle, field: ItemField.DIST_Item, id: `uifw-accudraw-distance-${containerIndex}`, "data-testid": "uifw-accudraw-distance", label: distanceLabel, iconSpec: distanceIcon, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.DIST_Item, stringValue), onEscPressed: handleEscPressed }))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import "./AccuDrawFieldContainer.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { CompassMode, IModelApp, ItemField } from "@itwin/core-frontend";
+import { IconSpecUtilities } from "@itwin/appui-abstract";
+import { Orientation } from "@itwin/core-react";
+import { getCSSColorFromDef } from "@itwin/imodel-components-react";
+import { AccuDrawInputField } from "./AccuDrawInputField";
+import { FrameworkAccuDraw } from "./FrameworkAccuDraw";
+import angleIconSvg from "./angle.svg";
+import distanceIconSvg from "./distance.svg";
+import { UiFramework } from "../UiFramework";
+let AccuDrawContainerIndex = 0;
+function determineShowZ(vp) {
+    const showZ = (vp !== undefined) ? /* istanbul ignore next */ vp.view.is3d() : false;
+    return showZ;
+}
+const defaultXLabel = "X";
+const defaultYLabel = "Y";
+const defaultZLabel = "Z";
+const defaultAngleIcon = IconSpecUtilities.createWebComponentIconSpec(angleIconSvg);
+const defaultDistanceIcon = IconSpecUtilities.createWebComponentIconSpec(distanceIconSvg);
+/** AccuDraw Ui Field Container displays [[AccuDrawInputField]] for each field
+ * @beta */
+export function AccuDrawFieldContainer(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { className, style, orientation, uiSettingsStorage, showZOverride, ...otherProps } = props;
+    const [containerIndex] = React.useState(() => ++AccuDrawContainerIndex);
+    const xInputRef = React.useRef(null);
+    const yInputRef = React.useRef(null);
+    const zInputRef = React.useRef(null);
+    const angleInputRef = React.useRef(null);
+    const distanceInputRef = React.useRef(null);
+    const focusField = React.useRef(undefined);
+    const [mode, setMode] = React.useState(CompassMode.Rectangular);
+    const [xLock, setXLock] = React.useState(false);
+    const [yLock, setYLock] = React.useState(false);
+    const [zLock, setZLock] = React.useState(false);
+    const [angleLock, setAngleLock] = React.useState(false);
+    const [distanceLock, setDistanceLock] = React.useState(false);
+    const [showZ, setShowZ] = React.useState(true);
+    const [xLabel, setXLabel] = React.useState(defaultXLabel);
+    const [yLabel, setYLabel] = React.useState(defaultYLabel);
+    const [zLabel, setZLabel] = React.useState(defaultZLabel);
+    const [angleLabel, setAngleLabel] = React.useState(undefined);
+    const [distanceLabel, setDistanceLabel] = React.useState(undefined);
+    const [xIcon, setXIcon] = React.useState(undefined);
+    const [yIcon, setYIcon] = React.useState(undefined);
+    const [zIcon, setZIcon] = React.useState(undefined);
+    const [angleIcon, setAngleIcon] = React.useState(defaultAngleIcon);
+    const [distanceIcon, setDistanceIcon] = React.useState(defaultDistanceIcon);
+    const [xStyle, setXStyle] = React.useState(undefined);
+    const [yStyle, setYStyle] = React.useState(undefined);
+    const [zStyle, setZStyle] = React.useState(undefined);
+    const [angleStyle, setAngleStyle] = React.useState(undefined);
+    const [distanceStyle, setDistanceStyle] = React.useState(undefined);
+    const getInputRef = (field) => {
+        let inputRef;
+        switch (field) {
+            case ItemField.X_Item:
+                inputRef = xInputRef;
+                break;
+            case ItemField.Y_Item:
+                inputRef = yInputRef;
+                break;
+            case ItemField.Z_Item:
+                inputRef = zInputRef;
+                break;
+            case ItemField.ANGLE_Item:
+                inputRef = angleInputRef;
+                break;
+            case ItemField.DIST_Item:
+                inputRef = distanceInputRef;
+                break;
+        }
+        return inputRef;
+    };
+    React.useEffect(() => {
+        setXLock(IModelApp.accuDraw.getFieldLock(ItemField.X_Item));
+        setYLock(IModelApp.accuDraw.getFieldLock(ItemField.Y_Item));
+        setZLock(IModelApp.accuDraw.getFieldLock(ItemField.Z_Item));
+        setAngleLock(IModelApp.accuDraw.getFieldLock(ItemField.ANGLE_Item));
+        setDistanceLock(IModelApp.accuDraw.getFieldLock(ItemField.DIST_Item));
+        const handleSetFieldLock = (args) => {
+            switch (args.field) {
+                case ItemField.X_Item:
+                    setXLock(args.lock);
+                    break;
+                case ItemField.Y_Item:
+                    setYLock(args.lock);
+                    break;
+                case ItemField.Z_Item:
+                    setZLock(args.lock);
+                    break;
+                case ItemField.ANGLE_Item:
+                    setAngleLock(args.lock);
+                    break;
+                case ItemField.DIST_Item:
+                    setDistanceLock(args.lock);
+                    break;
+            }
+        };
+        return FrameworkAccuDraw.onAccuDrawSetFieldLockEvent.addListener(handleSetFieldLock);
+    }, []);
+    const setFocusToField = React.useCallback((field) => {
+        const inputRef = getInputRef(field);
+        // istanbul ignore else
+        if (inputRef.current && document.activeElement !== inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, []);
+    React.useEffect(() => {
+        const handleSetFieldFocus = (args) => {
+            focusField.current = args.field;
+            setFocusToField(focusField.current);
+        };
+        return FrameworkAccuDraw.onAccuDrawSetFieldFocusEvent.addListener(handleSetFieldFocus);
+    }, [setFocusToField]);
+    React.useEffect(() => {
+        const handleGrabInputFocus = () => {
+            // istanbul ignore else
+            if (focusField.current)
+                setFocusToField(focusField.current);
+        };
+        return FrameworkAccuDraw.onAccuDrawGrabInputFocusEvent.addListener(handleGrabInputFocus);
+    }, [setFocusToField]);
+    React.useEffect(() => {
+        setMode(IModelApp.accuDraw.compassMode);
+        const handleSetMode = (args) => {
+            setMode(args.mode);
+        };
+        return FrameworkAccuDraw.onAccuDrawSetCompassModeEvent.addListener(handleSetMode);
+    }, []);
+    const handleValueChanged = React.useCallback((field, stringValue) => {
+        FrameworkAccuDraw.setFieldValueFromUi(field, stringValue);
+    }, []);
+    const handleEscPressed = React.useCallback(() => {
+        UiFramework.keyboardShortcuts.setFocusToHome();
+    }, []);
+    React.useEffect(() => {
+        setShowZ(showZOverride || determineShowZ(IModelApp.viewManager.selectedView));
+        // istanbul ignore next
+        const handleSelectedViewportChanged = (args) => {
+            setShowZ(determineShowZ(args.current));
+        };
+        return IModelApp.viewManager.onSelectedViewportChanged.addListener(handleSelectedViewportChanged);
+    }, [showZOverride]);
+    React.useEffect(() => {
+        const createFieldStyle = (inStyle, backgroundColor, foregroundColor) => {
+            let fieldStyle;
+            let rgbaString = "";
+            if (inStyle || backgroundColor || foregroundColor) {
+                fieldStyle = inStyle ? inStyle : {};
+                if (backgroundColor) {
+                    rgbaString = typeof backgroundColor === "string" ? backgroundColor : getCSSColorFromDef(backgroundColor);
+                    fieldStyle = { ...fieldStyle, backgroundColor: rgbaString };
+                }
+                if (foregroundColor) {
+                    rgbaString = typeof foregroundColor === "string" ? foregroundColor : getCSSColorFromDef(foregroundColor);
+                    fieldStyle = { ...fieldStyle, color: rgbaString };
+                }
+            }
+            return fieldStyle;
+        };
+        const processAccuDrawUiSettings = (settings) => {
+            setXStyle(settings ? createFieldStyle(settings.xStyle, settings.xBackgroundColor, settings.xForegroundColor) : undefined);
+            setYStyle(settings ? createFieldStyle(settings.yStyle, settings.yBackgroundColor, settings.yForegroundColor) : undefined);
+            setZStyle(settings ? createFieldStyle(settings.zStyle, settings.zBackgroundColor, settings.zForegroundColor) : undefined);
+            setAngleStyle(settings ? createFieldStyle(settings.angleStyle, settings.angleBackgroundColor, settings.angleForegroundColor) : undefined);
+            setDistanceStyle(settings ? createFieldStyle(settings.distanceStyle, settings.distanceBackgroundColor, settings.distanceForegroundColor) : undefined);
+            setXLabel(settings && settings.xLabel !== undefined ? settings.xLabel : defaultXLabel);
+            setYLabel(settings && settings.yLabel !== undefined ? settings.yLabel : defaultYLabel);
+            setZLabel(settings && settings.zLabel !== undefined ? settings.zLabel : defaultZLabel);
+            setAngleLabel(settings && settings.angleLabel !== undefined ? settings.angleLabel : undefined);
+            setDistanceLabel(settings && settings.distanceLabel !== undefined ? settings.distanceLabel : undefined);
+            setXIcon(settings && settings.xIcon !== undefined ? settings.xIcon : undefined);
+            setYIcon(settings && settings.yIcon !== undefined ? settings.yIcon : undefined);
+            setZIcon(settings && settings.zIcon !== undefined ? settings.zIcon : undefined);
+            setAngleIcon(settings && settings.angleIcon !== undefined ? settings.angleIcon : defaultAngleIcon);
+            setDistanceIcon(settings && settings.distanceIcon !== undefined ? settings.distanceIcon : defaultDistanceIcon);
+        };
+        if (FrameworkAccuDraw.uiStateStorage)
+            processAccuDrawUiSettings(FrameworkAccuDraw.uiStateStorage);
+        // istanbul ignore next
+        const handleAccuDrawUiSettingsChanged = () => {
+            processAccuDrawUiSettings(FrameworkAccuDraw.uiStateStorage);
+        };
+        return FrameworkAccuDraw.onAccuDrawUiSettingsChangedEvent.addListener(handleAccuDrawUiSettingsChanged);
+    }, []);
+    const classNames = classnames("uifw-accudraw-field-container", (orientation === Orientation.Vertical) ? "uifw-accudraw-field-container-vertical" : "uifw-accudraw-field-container-horizontal", className);
+    const delay = 250;
+    const labelCentered = (xLabel !== undefined && xLabel.length === 1 && yLabel !== undefined && yLabel.length === 1 && zLabel !== undefined && zLabel.length === 1);
+    return (React.createElement("div", { className: classNames, style: style, ...otherProps },
+        mode === CompassMode.Rectangular &&
+            React.createElement(React.Fragment, null,
+                React.createElement(AccuDrawInputField, { ref: xInputRef, isLocked: xLock, className: "uifw-accudraw-x-value", style: xStyle, field: ItemField.X_Item, id: `uifw-accudraw-x-${containerIndex}`, "data-testid": "uifw-accudraw-x", label: xLabel, iconSpec: xIcon, labelCentered: labelCentered, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.X_Item, stringValue), onEscPressed: handleEscPressed }),
+                React.createElement(AccuDrawInputField, { ref: yInputRef, isLocked: yLock, className: "uifw-accudraw-y-value", style: yStyle, field: ItemField.Y_Item, id: `uifw-accudraw-y-${containerIndex}`, "data-testid": "uifw-accudraw-y", label: yLabel, iconSpec: yIcon, labelCentered: labelCentered, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.Y_Item, stringValue), onEscPressed: handleEscPressed }),
+                showZ &&
+                    React.createElement(AccuDrawInputField, { ref: zInputRef, isLocked: zLock, className: "uifw-accudraw-z-value", style: zStyle, field: ItemField.Z_Item, id: `uifw-accudraw-z-${containerIndex}`, "data-testid": "uifw-accudraw-z", label: zLabel, iconSpec: zIcon, labelCentered: labelCentered, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.Z_Item, stringValue), onEscPressed: handleEscPressed })),
+        mode === CompassMode.Polar &&
+            React.createElement(React.Fragment, null,
+                React.createElement(AccuDrawInputField, { ref: angleInputRef, isLocked: angleLock, className: "uifw-accudraw-angle-value", style: angleStyle, field: ItemField.ANGLE_Item, id: `uifw-accudraw-angle-${containerIndex}`, "data-testid": "uifw-accudraw-angle", label: angleLabel, iconSpec: angleIcon, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.ANGLE_Item, stringValue), onEscPressed: handleEscPressed }),
+                React.createElement(AccuDrawInputField, { ref: distanceInputRef, isLocked: distanceLock, className: "uifw-accudraw-distance-value", style: distanceStyle, field: ItemField.DIST_Item, id: `uifw-accudraw-distance-${containerIndex}`, "data-testid": "uifw-accudraw-distance", label: distanceLabel, iconSpec: distanceIcon, valueChangedDelay: delay, onValueChanged: (stringValue) => handleValueChanged(ItemField.DIST_Item, stringValue), onEscPressed: handleEscPressed }))));
+}
 //# sourceMappingURL=AccuDrawFieldContainer.js.map