Accudraw update fixes

common/api/appui-react.api.md

@@ -186,6 +186,7 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps): Reac
 
 // @public @deprecated
 export interface AccuDrawFieldContainerProps extends CommonProps {
+    isBearingAngle?: boolean;
     orientation: Orientation;
     // @internal (undocumented)
     showZOverride?: boolean;
@@ -206,16 +207,17 @@ export interface AccuDrawInputFieldProps extends CommonProps {
     // @deprecated
     iconSpec?: IconSpec;
     id: string;
+    isBearingAngle?: boolean;
     isLocked?: boolean;
     label?: string;
     labelCentered?: boolean;
     labelClassName?: string;
     labelStyle?: React_2.CSSProperties;
     onEnterPressed?: () => void;
     onEscPressed?: () => void;
+    onTabPressed?: (field: ItemField) => void;
     onValueChanged: (stringValue: string) => void;
     ref?: React_2.Ref<HTMLInputElement>;
-    valueChangedDelay?: number;
 }
 
 // @public
@@ -5345,7 +5347,7 @@ export function useUiStateStorageHandler(): UiStateStorage;
 // @alpha
 export function useWidget(): {
     state: WidgetState;
-    widgetLocation: "docked" | "popout" | "floating";
+    widgetLocation: "popout" | "floating" | "docked";
     setState: (widgetState: Omit<WidgetState, WidgetState.Floating>) => void;
 };
 

common/changes/@itwin/appui-react/accudraw_update_fixes_2024-12-13-20-55.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Accudraw input fields are now focused when the accudraw input field container becomes visible and when the compass mode changes. Fix : The focus does not change between X or Y when in polar mode. Now only updating input fields value when their state is dynamic. Made rectangular inputs color standard to iTwinUI. We can enter letters in the Bearing angle input field. Bearing angle input field automatically adds special characters to facilitate entering bearing angles. Removed the delay after typing in the input field, the visual update should be immediate. The Focus is now trapped in Accudraw input fields, when doing Tab. To focus out of these fields, the user must press Escape. Escape now unlocks all fields.     ",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

ui/appui-react/src/appui-react/accudraw/AccuDrawFieldContainer.tsx

@@ -22,7 +22,6 @@ import angleIconSvg from "./angle.svg";
 import distanceIconSvg from "./distance.svg";
 import { UiFramework } from "../UiFramework.js";
 import type { UiStateStorage } from "../uistate/UiStateStorage.js";
-import { useEnableColorlessAccuDrawInputFields } from "../preview/enable-colorless-accudraw-input-fields/useEnableColorlessAccuDrawInputFields.js";
 
 /** Properties for [[AccuDrawFieldContainer]] component
  * @public
@@ -36,6 +35,8 @@ export interface AccuDrawFieldContainerProps extends CommonProps {
   uiSettingsStorage?: UiStateStorage;
   /** @internal */
   showZOverride?: boolean;
+  /** Indicates whether the field is displaying a bearing angles. */
+  isBearingAngle?: boolean;
 }
 
 let AccuDrawContainerIndex = 0;
@@ -60,6 +61,7 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
     orientation,
     uiSettingsStorage,
     showZOverride,
+    isBearingAngle = false,
     ...otherProps
   } = props;
 
@@ -71,8 +73,6 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
   const distanceInputRef = React.useRef<HTMLInputElement>(null);
   const focusField = React.useRef<ItemField | undefined>(undefined);
   const [mode, setMode] = React.useState(() => IModelApp.accuDraw.compassMode);
-  const enableColorlessAccuDrawInputFields =
-    useEnableColorlessAccuDrawInputFields();
   const [xLock, setXLock] = React.useState(() =>
     IModelApp.accuDraw.getFieldLock(ItemField.X_Item)
   );
@@ -154,6 +154,13 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
     [getInputToFocus]
   );
 
+  React.useEffect(()=>{
+    // Set the focus to the first input field when the component is mounted and when the compass mode changes.
+    const itemToFocus = mode === CompassMode.Polar ? ItemField.DIST_Item : ItemField.X_Item;
+    IModelApp.accuDraw.setFocusItem(itemToFocus);
+    setFocusToField(itemToFocus);
+  },[mode, setFocusToField, getInputToFocus]);
+
   React.useEffect(() => {
     return FrameworkAccuDraw.onAccuDrawSetFieldLockEvent.addListener((args) => {
       switch (args.field) {
@@ -206,6 +213,28 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
     []
   );
 
+  const focusNextField = React.useCallback((field: ItemField) => {
+    switch (field) {
+      case ItemField.X_Item:
+        IModelApp.accuDraw.setFocusItem(ItemField.Y_Item);
+        break;
+      case ItemField.Y_Item:
+        showZ ?
+          IModelApp.accuDraw.setFocusItem(ItemField.Z_Item) :
+          IModelApp.accuDraw.setFocusItem(ItemField.X_Item);
+        break;
+      case ItemField.Z_Item:
+        IModelApp.accuDraw.setFocusItem(ItemField.X_Item);
+        break;
+      case ItemField.ANGLE_Item:
+        IModelApp.accuDraw.setFocusItem(ItemField.DIST_Item);
+        break;
+      case ItemField.DIST_Item:
+        IModelApp.accuDraw.setFocusItem(ItemField.ANGLE_Item);
+        break;
+    }
+  }, [showZ]);
+
   const handleEscPressed = React.useCallback(() => {
     UiFramework.keyboardShortcuts.setFocusToHome();
   }, []);
@@ -301,7 +330,6 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
     className
   );
 
-  const delay = 250;
   const labelCentered =
     xLabel !== undefined &&
     xLabel.length === 1 &&
@@ -317,11 +345,6 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
           <AccuDrawInputField
             ref={xInputRef}
             isLocked={xLock}
-            className={
-              enableColorlessAccuDrawInputFields
-                ? undefined
-                : "uifw-accudraw-x-value"
-            }
             style={xStyle}
             field={ItemField.X_Item}
             id={`uifw-accudraw-x-${containerIndex}`}
@@ -331,20 +354,15 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
             iconSpec={uiSettings?.xIcon}
             icon={uiSettings?.xIconNode}
             labelCentered={labelCentered}
-            valueChangedDelay={delay}
             onValueChanged={(stringValue) =>
               handleValueChanged(ItemField.X_Item, stringValue)
             }
             onEscPressed={handleEscPressed}
+            onTabPressed={focusNextField}
           />
           <AccuDrawInputField
             ref={yInputRef}
             isLocked={yLock}
-            className={
-              enableColorlessAccuDrawInputFields
-                ? undefined
-                : "uifw-accudraw-y-value"
-            }
             style={yStyle}
             field={ItemField.Y_Item}
             id={`uifw-accudraw-y-${containerIndex}`}
@@ -354,21 +372,16 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
             iconSpec={uiSettings?.yIcon}
             icon={uiSettings?.yIconNode}
             labelCentered={labelCentered}
-            valueChangedDelay={delay}
             onValueChanged={(stringValue) =>
               handleValueChanged(ItemField.Y_Item, stringValue)
             }
             onEscPressed={handleEscPressed}
+            onTabPressed={focusNextField}
           />
           {showZ && (
             <AccuDrawInputField
               ref={zInputRef}
               isLocked={zLock}
-              className={
-                enableColorlessAccuDrawInputFields
-                  ? undefined
-                  : "uifw-accudraw-z-value"
-              }
               style={zStyle}
               field={ItemField.Z_Item}
               id={`uifw-accudraw-z-${containerIndex}`}
@@ -378,11 +391,11 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
               iconSpec={uiSettings?.zIcon}
               icon={uiSettings?.zIconNode}
               labelCentered={labelCentered}
-              valueChangedDelay={delay}
               onValueChanged={(stringValue) =>
                 handleValueChanged(ItemField.Z_Item, stringValue)
               }
               onEscPressed={handleEscPressed}
+              onTabPressed={focusNextField}
             />
           )}
         </>
@@ -392,7 +405,6 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
           <AccuDrawInputField
             ref={distanceInputRef}
             isLocked={distanceLock}
-            className="uifw-accudraw-distance-value"
             style={distanceStyle}
             field={ItemField.DIST_Item}
             id={`uifw-accudraw-distance-${containerIndex}`}
@@ -401,16 +413,16 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             iconSpec={uiSettings?.distanceIcon ?? distanceIconSvg}
             icon={uiSettings?.distanceIconNode}
-            valueChangedDelay={delay}
             onValueChanged={(stringValue) =>
               handleValueChanged(ItemField.DIST_Item, stringValue)
             }
             onEscPressed={handleEscPressed}
+            onTabPressed={focusNextField}
           />
           <AccuDrawInputField
             ref={angleInputRef}
             isLocked={angleLock}
-            className="uifw-accudraw-angle-value"
+            isBearingAngle={isBearingAngle}
             style={angleStyle}
             field={ItemField.ANGLE_Item}
             id={`uifw-accudraw-angle-${containerIndex}`}
@@ -419,11 +431,11 @@ export function AccuDrawFieldContainer(props: AccuDrawFieldContainerProps) {
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             iconSpec={uiSettings?.angleIcon ?? angleIconSvg}
             icon={uiSettings?.angleIconNode}
-            valueChangedDelay={delay}
             onValueChanged={(stringValue) =>
               handleValueChanged(ItemField.ANGLE_Item, stringValue)
             }
             onEscPressed={handleEscPressed}
+            onTabPressed={focusNextField}
           />
         </>
       )}

ui/appui-react/src/appui-react/accudraw/AccuDrawInputField.scss

@@ -39,18 +39,3 @@
   width: 22px;
   @include uicore-centered;
 }
-
-.uifw-accudraw-x-value {
-  background-color: var(--iui-color-background-negative-hover);
-  color: var(--iui-color-white);
-}
-
-.uifw-accudraw-y-value {
-  background-color: var(--iui-color-background-positive-hover);
-  color: var(--iui-color-white);
-}
-
-.uifw-accudraw-z-value {
-  background-color: var(--iui-color-background-accent-hover);
-  color: var(--iui-color-white);
-}