@itwin/appui-react 5.3.1 → 5.4.0

package/lib/appui-react/statusfields/toolassistance/ToolAssistanceField.js

@@ -6,452 +6,382 @@
  * @module Notification
  */
 import { Logger, ProcessDetector } from "@itwin/core-bentley";
-import { IModelApp, ToolAssistanceImage, ToolAssistanceInputMethod, } from "@itwin/core-frontend";
-import { FillCentered, Icon, UiStateEntry } from "@itwin/core-react";
+import { ToolAssistanceImage, ToolAssistanceInputMethod, } from "@itwin/core-frontend";
+import { FillCentered, Icon } from "@itwin/core-react";
 import { Button, Tabs, ToggleSwitch } from "@itwin/itwinui-react";
 import classnames from "classnames";
 import * as React from "react";
 import { UiFramework } from "../../UiFramework.js";
-import { CursorPrompt } from "../../cursor/cursorprompt/CursorPrompt.js";
+import { useCursorPrompt } from "../../cursor/cursorprompt/CursorPrompt.js";
 import { MessageManager } from "../../messages/MessageManager.js";
 import { UiStateStorageContext } from "../../uistate/useUiStateStorage.js";
 import "./ToolAssistanceField.scss";
-import { SvgClose, SvgPin } from "@itwin/itwinui-icons-react";
+import { SvgAdd, SvgClose, SvgCursorClick, SvgGestureOneFingerDrag, SvgGestureOneFingerTap, SvgGestureOneFingerTapDouble, SvgGesturePinch, SvgGestureTwoFingerDrag, SvgGestureTwoFingerTap, SvgMouseClickLeft, SvgMouseClickRight, SvgMouseClickWheel, SvgPin, } from "@itwin/itwinui-icons-react";
 import { ToolAssistanceDialog } from "../../layout/footer/tool-assistance/Dialog.js";
 import { ToolAssistanceInstruction as NZ_ToolAssistanceInstruction } from "../../layout/footer/tool-assistance/Instruction.js";
 import { ToolAssistanceItem } from "../../layout/footer/tool-assistance/Item.js";
 import { ToolAssistanceSeparator } from "../../layout/footer/tool-assistance/Separator.js";
 import { StatusBarDialog } from "../../statusbar/dialog/Dialog.js";
-import acceptPointIcon from "./accept-point.svg";
-import cursorClickIcon from "./cursor-click.svg";
-import oneTouchDragIcon from "./gesture-one-finger-drag.svg";
-import oneTouchDoubleTapIcon from "./gesture-one-finger-tap-double.svg";
-import oneTouchTapIcon from "./gesture-one-finger-tap.svg";
-import twoTouchPinchIcon from "./gesture-pinch.svg";
-import twoTouchDragIcon from "./gesture-two-finger-drag.svg";
-import twoTouchTapIcon from "./gesture-two-finger-tap.svg";
-import clickLeftDragIcon from "./mouse-click-left-drag.svg";
-import clickLeftIcon from "./mouse-click-left.svg";
-import clickRightDragIcon from "./mouse-click-right-drag.svg";
-import clickRightIcon from "./mouse-click-right.svg";
-import clickMouseWheelDragIcon from "./mouse-click-wheel-drag.svg";
-import mouseWheelClickIcon from "./mouse-click-wheel.svg";
-import touchCursorDragIcon from "./touch-cursor-pan.svg";
-import touchCursorTapIcon from "./touch-cursor-point.svg";
 import { StatusBarPopover } from "../../statusbar/popup/StatusBarPopover.js";
 import { UiStateStorageStatus, } from "../../uistate/UiStateStorage.js";
-import { LocalStateStorage } from "../../uistate/LocalStateStorage.js";
+import { SvgTouchCursorPoint } from "../../icons/SvgTouchCursorPoint.js";
+import { SvgTouchCursorPan } from "../../icons/SvgTouchCursorPan.js";
+import { SvgMouseClickLeftDrag } from "../../icons/SvgMouseClickLeftDrag.js";
+import { SvgMouseClickRightDrag } from "../../icons/SvgMouseClickRightDrag.js";
+import { SvgMouseClickWheelDrag } from "../../icons/SvgMouseClickWheelDrag.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+import { useActiveTool } from "../../hooks/useActiveTool.js";
+const toolAssistanceKey = "ToolAssistance";
+const showPromptAtCursorKey = "showPromptAtCursor";
+const mouseTouchTabIndexKey = "mouseTouchTabIndex";
 /** Tool Assistance Field React component.
  * @public
  * @note Tool assistance field will only display 30 characters in the status bar. Any additional text will be hidden. The full text will always be shown in the opened popover.
  */
-export class ToolAssistanceField extends React.Component {
-    constructor(p) {
-        super(p);
-        this._indicator = React.createRef();
-        this._isMounted = false;
-        this._handleToolAssistanceChangedEvent = (args) => {
-            let showMouseTouchTabs = false;
-            let showMouseInstructions = false;
-            let showTouchInstructions = false;
-            if (args.instructions && args.instructions.sections) {
-                const hasMouseInstructions = args.instructions.sections.some((section) => {
-                    return section.instructions.some((instruction) => this._isMouseInstruction(instruction));
-                });
-                const hasTouchInstructions = args.instructions.sections.some((section) => {
-                    return section.instructions.some((instruction) => this._isTouchInstruction(instruction));
-                });
-                if (this.state.includeMouseInstructions &&
-                    this.state.includeTouchInstructions &&
-                    hasMouseInstructions &&
-                    hasTouchInstructions) {
-                    showMouseTouchTabs = true;
-                    showMouseInstructions = this.state.mouseTouchTabIndex === 0;
-                    showTouchInstructions = this.state.mouseTouchTabIndex === 1;
-                }
-                else {
-                    if (this.state.includeMouseInstructions && hasMouseInstructions)
-                        showMouseInstructions = true;
-                    else if (this.state.includeTouchInstructions && hasTouchInstructions)
-                        showTouchInstructions = true;
-                }
-            }
-            if (this._isMounted)
-                this.setState({
-                    instructions: args.instructions,
-                    showMouseTouchTabs,
-                    showMouseInstructions,
-                    showTouchInstructions,
-                }, () => {
-                    this._showCursorPrompt();
-                });
-        };
-        this._isBothInstruction = (instruction) => {
-            return (instruction.inputMethod === undefined ||
-                instruction.inputMethod === ToolAssistanceInputMethod.Both);
-        };
-        this._isMouseInstruction = (instruction) => instruction.inputMethod === ToolAssistanceInputMethod.Mouse;
-        this._isTouchInstruction = (instruction) => instruction.inputMethod === ToolAssistanceInputMethod.Touch;
-        this._handleToolIconChangedEvent = (args) => {
-            if (this._isMounted)
-                this.setState({
-                    toolIconSpec: args.iconSpec,
-                }, () => {
-                    this._showCursorPrompt();
-                });
-        };
-        this._handleMouseTouchTab = async (index) => {
-            const showMouseInstructions = index === 0;
-            const showTouchInstructions = index === 1;
-            if (this._isMounted)
-                this.setState({
-                    mouseTouchTabIndex: index,
-                    showMouseInstructions,
-                    showTouchInstructions,
-                }, async () => {
-                    await this._mouseTouchTabIndexSetting.saveSetting(this._uiSettingsStorage);
-                });
-        };
-        this._onPromptAtCursorChange = async (e) => {
-            if (this._isMounted)
-                this.setState({
-                    showPromptAtCursor: e.target.checked,
-                }, async () => {
-                    await this._showPromptAtCursorSetting.saveSetting(this._uiSettingsStorage);
-                });
-        };
-        this._handlePinButtonClick = () => {
-            if (this._isMounted)
-                this.setState({ isPinned: true });
-        };
-        this._handleCloseButtonClick = () => {
-            this.setIsOpen(false);
-        };
-        const mobile = ProcessDetector.isMobileBrowser;
-        this.state = {
+export function ToolAssistanceField(props) {
+    const { includePromptAtCursor = true, cursorPromptTimeout = 5000, fadeOutCursorPrompt = true, defaultPromptAtCursor = false, uiStateStorage: uiStateStorageProp, promptAtContent = false, } = props;
+    const uiStateStorageCtx = React.useContext(UiStateStorageContext);
+    const uiStateStorage = uiStateStorageProp ?? uiStateStorageCtx;
+    const { translate } = useTranslation();
+    const activeTool = useActiveTool();
+    const [state, setState] = React.useState(() => {
+        return {
             instructions: undefined,
             toolIconSpec: "",
-            showPromptAtCursor: p.defaultPromptAtCursor,
-            includeMouseInstructions: !mobile,
-            includeTouchInstructions: true,
-            showMouseTouchTabs: false,
-            showMouseInstructions: false,
-            showTouchInstructions: false,
+            showPromptAtCursor: defaultPromptAtCursor,
             mouseTouchTabIndex: 0,
             isPinned: false,
             isOpen: false,
         };
-        this._uiSettingsStorage = new LocalStateStorage();
-        this._cursorPrompt = new CursorPrompt();
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        this._showPromptAtCursorSetting = new UiStateEntry(ToolAssistanceField._toolAssistanceKey, ToolAssistanceField._showPromptAtCursorKey, () => this.state.showPromptAtCursor);
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        this._mouseTouchTabIndexSetting = new UiStateEntry(ToolAssistanceField._toolAssistanceKey, ToolAssistanceField._mouseTouchTabIndexKey, () => this.state.mouseTouchTabIndex);
-    }
-    async componentDidMount() {
-        this._isMounted = true;
-        MessageManager.onToolAssistanceChangedEvent.addListener(this._handleToolAssistanceChangedEvent);
-        UiFramework.frontstages.onToolIconChangedEvent.addListener(this._handleToolIconChangedEvent);
-        if (this.props.uiStateStorage)
-            this._uiSettingsStorage = this.props.uiStateStorage;
-        else if (this.context)
-            this._uiSettingsStorage = this.context;
-        await this.restoreSettings();
-    }
-    /** @internal */
-    componentDidUpdate() {
-        if (!this.state.showPromptAtCursor)
-            this._cursorPrompt.close(this.props.fadeOutCursorPrompt);
-    }
-    componentWillUnmount() {
-        this._isMounted = false;
-        this._cursorPrompt.close(this.props.fadeOutCursorPrompt);
-        MessageManager.onToolAssistanceChangedEvent.removeListener(this._handleToolAssistanceChangedEvent);
-        UiFramework.frontstages.onToolIconChangedEvent.removeListener(this._handleToolIconChangedEvent);
-    }
-    async restoreSettings() {
-        let getShowPromptAtCursor;
-        if (this.props.includePromptAtCursor) {
-            getShowPromptAtCursor = this._showPromptAtCursorSetting.getSetting(this._uiSettingsStorage);
-        }
-        const getMouseTouchTabIndex = this._mouseTouchTabIndexSetting.getSetting(this._uiSettingsStorage);
-        const [showPromptAtCursorResult, mouseTouchTabIndexResult] = await Promise.all([getShowPromptAtCursor, getMouseTouchTabIndex]);
-        if (showPromptAtCursorResult !== undefined &&
-            showPromptAtCursorResult.status === UiStateStorageStatus.Success) {
-            if (this._isMounted)
-                this.setState({ showPromptAtCursor: showPromptAtCursorResult.setting });
-        }
-        if (mouseTouchTabIndexResult.status === UiStateStorageStatus.Success) {
-            if (this._isMounted)
-                this.setState({ mouseTouchTabIndex: mouseTouchTabIndexResult.setting });
-        }
-    }
-    _showCursorPrompt() {
-        const instruction = this.state.instructions?.mainInstruction.text;
-        if (!this.state.showPromptAtCursor || !instruction) {
-            this._cursorPrompt.close(this.props.fadeOutCursorPrompt);
-            return;
-        }
-        this._cursorPrompt.open({
-            timeout: this.props.cursorPromptTimeout,
-            fadeout: this.props.fadeOutCursorPrompt,
-            iconSpec: this.state.toolIconSpec,
-            instruction,
-            promptAtContent: this.props.promptAtContent ?? false,
-        });
-    }
-    _sectionHasDisplayableInstructions(section) {
-        const displayableInstructions = this._getDisplayableInstructions(section);
-        return displayableInstructions.length > 0;
-    }
-    _getDisplayableInstructions(section) {
-        const displayableInstructions = section.instructions.filter((instruction) => {
-            return (this._isBothInstruction(instruction) ||
-                (this.state.showMouseInstructions &&
-                    this._isMouseInstruction(instruction)) ||
-                (this.state.showTouchInstructions &&
-                    this._isTouchInstruction(instruction)));
-        });
-        return displayableInstructions;
-    }
-    render() {
-        const { instructions } = this.state;
-        const dialogTitle = IModelApp.toolAdmin.activeTool
-            ? IModelApp.toolAdmin.activeTool.flyover
-            : UiFramework.translate("toolAssistance.title");
-        const mouseLabel = UiFramework.translate("toolAssistance.mouse");
-        const touchLabel = UiFramework.translate("toolAssistance.touch");
-        let prompt = "";
-        let tooltip = "";
-        let toolIcon;
-        let dialogContent;
-        if (instructions) {
-            prompt = instructions.mainInstruction.text;
-            // eslint-disable-next-line @typescript-eslint/no-deprecated
-            toolIcon = React.createElement(Icon, { iconSpec: this.state.toolIconSpec });
-            let displayableSections;
-            if (instructions.sections) {
-                displayableSections = instructions.sections.filter((section) => this._sectionHasDisplayableInstructions(section));
-            }
-            dialogContent = (React.createElement("div", null,
-                this.state.showMouseTouchTabs && (React.createElement(Tabs.Wrapper, { type: "pill", value: String(this.state.mouseTouchTabIndex) },
-                    React.createElement(Tabs.TabList, { className: "uifw-toolAssistance-tabs" }, [mouseLabel, touchLabel].map((label, index) => (React.createElement(Tabs.Tab, { key: index, className: "uifw-tab", value: String(index), label: label, onClick: async () => this._handleMouseTouchTab(index) })))))),
-                React.createElement("div", { className: "uifw-toolAssistance-content" },
-                    React.createElement(NZ_ToolAssistanceInstruction, { key: "main", image: ToolAssistanceField.getInstructionImage(instructions.mainInstruction), text: instructions.mainInstruction.text, isNew: instructions.mainInstruction.isNew }),
-                    displayableSections &&
-                        displayableSections.map((section, index1) => {
-                            return (React.createElement(React.Fragment, { key: index1.toString() },
-                                React.createElement(ToolAssistanceSeparator, { key: index1.toString() }, section.label),
-                                this._getDisplayableInstructions(section).map((instruction, index2) => {
-                                    return (React.createElement(NZ_ToolAssistanceInstruction, { key: `${index1.toString()}-${index2.toString()}`, image: ToolAssistanceField.getInstructionImage(instruction), text: instruction.text, isNew: instruction.isNew }));
-                                })));
-                        }),
-                    this.props.includePromptAtCursor && (React.createElement(React.Fragment, null,
-                        React.createElement(ToolAssistanceSeparator, { key: "prompt-sep" }),
-                        React.createElement(ToolAssistanceItem, { key: "prompt-item" },
-                            React.createElement(ToggleSwitch, { label: UiFramework.translate("toolAssistance.promptAtCursor"), labelPosition: "right", checked: this.state.showPromptAtCursor, onChange: this._onPromptAtCursorChange })))))));
-        }
-        if (prompt)
-            tooltip = prompt;
-        if (IModelApp.toolAdmin.activeTool)
-            tooltip = `${IModelApp.toolAdmin.activeTool.flyover} > ${tooltip}  `;
-        if (tooltip) {
-            const lineBreak = "\u000d\u000a";
-            tooltip = tooltip + lineBreak;
-        }
-        tooltip += UiFramework.translate("toolAssistance.moreInfo");
-        return (React.createElement(StatusBarPopover, { visible: this.state.isOpen, onVisibleChange: (visible) => {
-                this.setIsOpen(visible);
-            }, closeOnOutsideClick: !this.state.isPinned, content: React.createElement(ToolAssistanceDialog, { buttons: React.createElement(React.Fragment, null,
-                    !this.state.isPinned && (React.createElement(StatusBarDialog.TitleBarButton, { onClick: this._handlePinButtonClick, title: UiFramework.translate("toolAssistance.pin") },
-                        React.createElement(SvgPin, null))),
-                    this.state.isPinned && (React.createElement(StatusBarDialog.TitleBarButton, { onClick: this._handleCloseButtonClick, title: UiFramework.translate("dialog.close") },
-                        React.createElement(SvgClose, null)))), title: dialogTitle }, dialogContent) },
-            React.createElement(Button, { styleType: "borderless", startIcon: React.createElement(React.Fragment, null, toolIcon), className: classnames("uifw-statusFields-toolAssistance-toolAssistanceField", this.props.className), title: tooltip, style: this.props.style, ref: this._indicator, labelProps: { className: "prompt" } },
-                prompt,
-                React.createElement(StatusBarPopover.ExpandIndicator, null))));
-    }
-    setIsOpen(isOpen) {
+    });
+    const { showPromptAtCursor, toolIconSpec, mouseTouchTabIndex, instructions } = state;
+    const mainInstruction = state.instructions?.mainInstruction.text;
+    const { open } = useCursorPrompt({
+        show: showPromptAtCursor,
+        timeout: cursorPromptTimeout,
+        iconSpec: toolIconSpec,
+        instruction: mainInstruction,
+        fadeOut: fadeOutCursorPrompt,
+        promptAtContent,
+    });
+    const setIsOpen = (isOpen) => {
         let newState = {
             isOpen,
         };
-        if (!isOpen && this.state.isPinned && this._isMounted) {
+        if (!isOpen && state.isPinned) {
             newState = { ...newState, ...{ isPinned: false } };
         }
-        this.setState(newState);
-    }
-    /** @internal */
-    static getInstructionImage(instruction) {
-        let image;
-        if ((typeof instruction.image === "string" ||
-            instruction.image !== ToolAssistanceImage.Keyboard) &&
-            instruction.keyboardInfo) {
-            if (instruction.keyboardInfo.keys.length === 1 &&
-                !instruction.keyboardInfo.bottomKeys) {
-                const key = instruction.keyboardInfo.keys[0];
-                const rightImage = typeof instruction.image === "string" ? (React.createElement("div", { className: "uifw-toolassistance-icon-medium" },
-                    React.createElement(Icon, { iconSpec: instruction.image }))) : (this.getInstructionSvgImage(instruction, true));
-                image = (
-                // eslint-disable-next-line @typescript-eslint/no-deprecated
-                React.createElement(FillCentered, null,
-                    ToolAssistanceField.getKeyNode(key, 0, "uifw-toolassistance-key-modifier"),
-                    rightImage));
-            }
-            else {
-                Logger.logError(UiFramework.loggerCategory("ToolAssistanceField"), `getInstructionImage: Invalid keyboardInfo provided with image`);
-            }
+        setState((prev) => ({ ...prev, ...newState }));
+    };
+    const getDisplayableInstructions = (section) => {
+        const displayableInstructions = section.instructions.filter((instruction) => {
+            const includeMouseInstructions = showMouseTouchTabs
+                ? mouseTouchTabIndex === 0 && showMouseInstructions
+                : showMouseInstructions;
+            const includeTouchInstructions = showMouseTouchTabs
+                ? mouseTouchTabIndex === 1 && showTouchInstructions
+                : showTouchInstructions;
+            return (isBothInstruction(instruction) ||
+                (includeMouseInstructions && isMouseInstruction(instruction)) ||
+                (includeTouchInstructions && isTouchInstruction(instruction)));
+        });
+        return displayableInstructions;
+    };
+    React.useEffect(() => {
+        void (async () => {
+            const result = await uiStateStorage.getSetting(toolAssistanceKey, showPromptAtCursorKey);
+            if (result.status !== UiStateStorageStatus.Success)
+                return;
+            setState((prev) => ({
+                ...prev,
+                showPromptAtCursor: result.setting,
+            }));
+        })();
+    }, [uiStateStorage]);
+    React.useEffect(() => {
+        void (async () => {
+            const result = await uiStateStorage.getSetting(toolAssistanceKey, mouseTouchTabIndexKey);
+            if (result.status !== UiStateStorageStatus.Success)
+                return;
+            setState((prev) => ({
+                ...prev,
+                mouseTouchTabIndex: result.setting,
+            }));
+        })();
+    }, [uiStateStorage]);
+    React.useEffect(() => {
+        return MessageManager.onToolAssistanceChangedEvent.addListener((args) => {
+            setState((prev) => ({
+                ...prev,
+                instructions: args.instructions,
+            }));
+            open();
+        });
+    }, [open]);
+    React.useEffect(() => {
+        return UiFramework.frontstages.onToolIconChangedEvent.addListener((args) => {
+            setState((prev) => ({
+                ...prev,
+                toolIconSpec: args.iconSpec,
+            }));
+            open();
+        });
+    }, [open]);
+    const hasMouseInstructions = !!instructions?.sections?.some((section) => {
+        return section.instructions.some((instruction) => isMouseInstruction(instruction));
+    });
+    const hasTouchInstructions = !!instructions?.sections?.some((section) => {
+        return section.instructions.some((instruction) => isTouchInstruction(instruction));
+    });
+    const isMobileBrowser = React.useMemo(() => {
+        return ProcessDetector.isMobileBrowser;
+    }, []);
+    const showMouseInstructions = !isMobileBrowser && hasMouseInstructions;
+    const showTouchInstructions = hasTouchInstructions;
+    const showMouseTouchTabs = showMouseInstructions && showTouchInstructions;
+    const sectionInstructions = (instructions?.sections ?? [])
+        .map((section) => {
+        const displayableInstructions = getDisplayableInstructions(section);
+        return {
+            displayableInstructions,
+            section,
+        };
+    })
+        .filter((section) => {
+        return section.displayableInstructions.length > 0;
+    });
+    const prompt = instructions?.mainInstruction.text;
+    const tooltip = React.useMemo(() => {
+        const lineBreak = "\u000d\u000a";
+        const moreInfo = translate("toolAssistance.moreInfo");
+        const postfix = `${lineBreak}${moreInfo}`;
+        if (activeTool) {
+            return `${activeTool.flyover}${prompt ? ` > ${prompt}` : ""}${postfix}`;
         }
-        else if (typeof instruction.image === "string") {
-            if (instruction.image.length > 0) {
-                const svgSource = getWebComponentSource(instruction.image);
-                const className = svgSource !== undefined
-                    ? "uifw-toolassistance-svg"
-                    : "uifw-toolassistance-icon-large";
-                image = (React.createElement("div", { className: className },
-                    React.createElement(Icon, { iconSpec: svgSource ?? instruction.image })));
-            }
+        if (prompt) {
+            return `${prompt}${postfix}`;
         }
-        else if (instruction.image === ToolAssistanceImage.Keyboard) {
-            if (instruction.keyboardInfo) {
-                image = ToolAssistanceField.getInstructionKeyboardImage(instruction.keyboardInfo);
-            }
-            else {
-                Logger.logError(UiFramework.loggerCategory("ToolAssistanceField"), `getInstructionImage: ToolAssistanceImage.Keyboard specified but no keyboardInfo provided`);
-            }
+        return moreInfo;
+    }, [prompt, activeTool, translate]);
+    const dialogTitle = activeTool?.flyover ?? translate("toolAssistance.title");
+    const tabs = [
+        translate("toolAssistance.mouse"),
+        translate("toolAssistance.touch"),
+    ];
+    return (React.createElement(StatusBarPopover, { visible: state.isOpen, onVisibleChange: (visible) => {
+            setIsOpen(visible);
+        }, closeOnOutsideClick: !state.isPinned, content: React.createElement(ToolAssistanceDialog, { buttons: React.createElement(StatusBarDialog.TitleBarButton, { onClick: () => {
+                    if (state.isPinned) {
+                        setIsOpen(false);
+                        return;
+                    }
+                    setState((prev) => ({ ...prev, isPinned: true }));
+                }, title: translate(state.isPinned ? "dialog.close" : "toolAssistance.pin") }, state.isPinned ? React.createElement(SvgClose, null) : React.createElement(SvgPin, null)), title: dialogTitle },
+            React.createElement("div", null,
+                showMouseTouchTabs && (React.createElement(Tabs.Wrapper, { type: "pill", value: String(mouseTouchTabIndex) },
+                    React.createElement(Tabs.TabList, { className: "uifw-toolAssistance-tabs" }, tabs.map((tab, index) => (React.createElement(Tabs.Tab, { key: index, className: "uifw-tab", value: String(index), label: tab, onClick: async () => {
+                            setState((prev) => ({
+                                ...prev,
+                                mouseTouchTabIndex: index,
+                            }));
+                            void uiStateStorage.saveSetting(toolAssistanceKey, mouseTouchTabIndexKey, index);
+                        } })))))),
+                instructions ? (React.createElement("div", { className: "uifw-toolAssistance-content" },
+                    React.createElement(NZ_ToolAssistanceInstruction, { key: "main", image: React.createElement(InstructionImage, { instruction: instructions.mainInstruction }), text: instructions.mainInstruction.text, isNew: instructions.mainInstruction.isNew }),
+                    sectionInstructions.map((sectionInstruction, index) => {
+                        const { section, displayableInstructions } = sectionInstruction;
+                        return (React.createElement(React.Fragment, { key: index.toString() },
+                            React.createElement(ToolAssistanceSeparator, null, section.label),
+                            displayableInstructions.map((instruction, index1) => {
+                                return (React.createElement(NZ_ToolAssistanceInstruction, { key: `${index1.toString()}-${index.toString()}`, image: React.createElement(InstructionImage, { instruction: instruction }), text: instruction.text, isNew: instruction.isNew }));
+                            })));
+                    }),
+                    includePromptAtCursor && (React.createElement(React.Fragment, null,
+                        React.createElement(ToolAssistanceSeparator, { key: "prompt-sep" }),
+                        React.createElement(ToolAssistanceItem, { key: "prompt-item" },
+                            React.createElement(ToggleSwitch, { label: translate("toolAssistance.promptAtCursor"), labelPosition: "right", checked: state.showPromptAtCursor, onChange: (e) => {
+                                    const checked = e.target.checked;
+                                    setState((prev) => ({
+                                        ...prev,
+                                        showPromptAtCursor: checked,
+                                    }));
+                                    void uiStateStorage.saveSetting(toolAssistanceKey, showPromptAtCursorKey, checked);
+                                } })))))) : undefined)) },
+        React.createElement(Button, { styleType: "borderless", startIcon: instructions ? (
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            React.createElement(Icon, { iconSpec: state.toolIconSpec })) : (React.createElement(React.Fragment, null)), className: classnames("uifw-statusFields-toolAssistance-toolAssistanceField", props.className), title: tooltip, style: props.style, labelProps: { className: "prompt" } },
+            prompt,
+            React.createElement(StatusBarPopover.ExpandIndicator, null))));
+}
+function isBothInstruction(instruction) {
+    return (instruction.inputMethod === undefined ||
+        instruction.inputMethod === ToolAssistanceInputMethod.Both);
+}
+function isMouseInstruction(instruction) {
+    return instruction.inputMethod === ToolAssistanceInputMethod.Mouse;
+}
+function isTouchInstruction(instruction) {
+    return instruction.inputMethod === ToolAssistanceInputMethod.Touch;
+}
+function getWebComponentSource(iconSpec) {
+    if (iconSpec.startsWith("webSvg:") && iconSpec.length > 7) {
+        return iconSpec.slice(7);
+    }
+    return undefined;
+}
+function InstructionImage({ instruction, }) {
+    let image;
+    if ((typeof instruction.image === "string" ||
+        instruction.image !== ToolAssistanceImage.Keyboard) &&
+        instruction.keyboardInfo) {
+        if (instruction.keyboardInfo.keys.length === 1 &&
+            !instruction.keyboardInfo.bottomKeys) {
+            const key = instruction.keyboardInfo.keys[0];
+            const rightImage = typeof instruction.image === "string" ? (React.createElement("div", { className: "uifw-toolassistance-icon-medium" },
+                React.createElement(Icon, { iconSpec: instruction.image }))) : (React.createElement(InstructionSvgImage, { instruction: instruction, mediumSize: true }));
+            image = (
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            React.createElement(FillCentered, null,
+                React.createElement(KeyNode, { keyboardKey: key, className: "uifw-toolassistance-key-modifier" }),
+                rightImage));
         }
         else {
-            image = this.getInstructionSvgImage(instruction, false);
+            Logger.logError(UiFramework.loggerCategory("ToolAssistanceField"), `getInstructionImage: Invalid keyboardInfo provided with image`);
         }
-        return image;
     }
-    static getInstructionSvgImage(instruction, mediumSize) {
-        let image;
-        let className = mediumSize
-            ? "uifw-toolassistance-svg-medium"
-            : "uifw-toolassistance-svg";
-        if (typeof instruction.image !== "string" &&
-            instruction.image !== ToolAssistanceImage.Keyboard) {
-            const toolAssistanceImage = instruction.image;
-            let svgImage = "";
-            switch (toolAssistanceImage) {
-                case ToolAssistanceImage.AcceptPoint:
-                    svgImage = acceptPointIcon;
-                    break;
-                case ToolAssistanceImage.CursorClick:
-                    svgImage = cursorClickIcon;
-                    break;
-                case ToolAssistanceImage.LeftClick:
-                    svgImage = clickLeftIcon;
-                    break;
-                case ToolAssistanceImage.RightClick:
-                    svgImage = clickRightIcon;
-                    break;
-                case ToolAssistanceImage.MouseWheel:
-                    svgImage = mouseWheelClickIcon;
-                    break;
-                case ToolAssistanceImage.LeftClickDrag:
-                    svgImage = clickLeftDragIcon;
-                    className = mediumSize
-                        ? "uifw-toolassistance-svg-medium-wide"
-                        : "uifw-toolassistance-svg-wide";
-                    break;
-                case ToolAssistanceImage.RightClickDrag:
-                    svgImage = clickRightDragIcon;
-                    className = mediumSize
-                        ? "uifw-toolassistance-svg-medium-wide"
-                        : "uifw-toolassistance-svg-wide";
-                    break;
-                case ToolAssistanceImage.MouseWheelClickDrag:
-                    svgImage = clickMouseWheelDragIcon;
-                    className = mediumSize
-                        ? "uifw-toolassistance-svg-medium-wide"
-                        : "uifw-toolassistance-svg-wide";
-                    break;
-                case ToolAssistanceImage.OneTouchTap:
-                    svgImage = oneTouchTapIcon;
-                    break;
-                case ToolAssistanceImage.OneTouchDoubleTap:
-                    svgImage = oneTouchDoubleTapIcon;
-                    break;
-                case ToolAssistanceImage.OneTouchDrag:
-                    svgImage = oneTouchDragIcon;
-                    break;
-                case ToolAssistanceImage.TwoTouchTap:
-                    svgImage = twoTouchTapIcon;
-                    break;
-                case ToolAssistanceImage.TwoTouchDrag:
-                    svgImage = twoTouchDragIcon;
-                    break;
-                case ToolAssistanceImage.TwoTouchPinch:
-                    svgImage = twoTouchPinchIcon;
-                    break;
-                case ToolAssistanceImage.TouchCursorTap:
-                    svgImage = touchCursorTapIcon;
-                    break;
-                case ToolAssistanceImage.TouchCursorDrag:
-                    svgImage = touchCursorDragIcon;
-                    className = mediumSize
-                        ? "uifw-toolassistance-svg-medium-wide"
-                        : "uifw-toolassistance-svg-wide";
-                    break;
-            }
-            image = (React.createElement("div", { className: className }, svgImage && React.createElement(Icon, { iconSpec: svgImage })));
+    else if (typeof instruction.image === "string") {
+        if (instruction.image.length > 0) {
+            const svgSource = getWebComponentSource(instruction.image);
+            const className = svgSource !== undefined
+                ? "uifw-toolassistance-svg"
+                : "uifw-toolassistance-icon-large";
+            image = (React.createElement("div", { className: className },
+                React.createElement(Icon, { iconSpec: svgSource ?? instruction.image })));
         }
-        return image;
     }
-    static getInstructionKeyboardImage(keyboardInfo) {
-        let image;
-        if (keyboardInfo.bottomKeys !== undefined) {
-            image = (React.createElement("div", { className: "uifw-toolassistance-key-group" },
-                React.createElement("span", { className: "row1" }, keyboardInfo.keys.map((key, index1) => {
-                    return ToolAssistanceField.getKeyNode(key, index1, "uifw-toolassistance-key-small");
-                })),
-                React.createElement("br", null),
-                React.createElement("span", { className: "row2" }, keyboardInfo.bottomKeys.map((key, index2) => {
-                    return ToolAssistanceField.getKeyNode(key, index2, "uifw-toolassistance-key-small");
-                }))));
-        }
-        else if (keyboardInfo.keys.length === 2) {
-            image = (
-            // eslint-disable-next-line @typescript-eslint/no-deprecated
-            React.createElement(FillCentered, null, keyboardInfo.keys.map((key, index3) => {
-                let className = "uifw-toolassistance-key-medium";
-                if (key.length > 1)
-                    className = "uifw-toolassistance-key-modifier";
-                return ToolAssistanceField.getKeyNode(key, index3, className);
-            })));
-        }
-        else if (keyboardInfo.keys[0]) {
-            if (keyboardInfo.keys[0].length > 1)
-                image = ToolAssistanceField.getKeyNode(keyboardInfo.keys[0], 0, "uifw-toolassistance-key-large");
-            else
-                image = ToolAssistanceField.getKeyNode(keyboardInfo.keys[0], 0);
+    else if (instruction.image === ToolAssistanceImage.Keyboard) {
+        if (instruction.keyboardInfo) {
+            image = (React.createElement(InstructionKeyboardImage, { keyboardInfo: instruction.keyboardInfo }));
         }
         else {
-            Logger.logError(UiFramework.loggerCategory("ToolAssistanceField"), `ToolAssistanceImage.Keyboard specified but ToolAssistanceKeyboardInfo not valid`);
+            Logger.logError(UiFramework.loggerCategory("ToolAssistanceField"), `getInstructionImage: ToolAssistanceImage.Keyboard specified but no keyboardInfo provided`);
         }
-        return image;
     }
-    static getKeyNode(key, index, className) {
-        return (React.createElement("div", { key: index.toString(), className: classnames("uifw-toolassistance-key", className) },
-            React.createElement(FillCentered, null, key)));
+    else {
+        image = (React.createElement(InstructionSvgImage, { instruction: instruction, mediumSize: false }));
     }
+    return image;
 }
-/** @internal */
-ToolAssistanceField.contextType = UiStateStorageContext;
-ToolAssistanceField._toolAssistanceKey = "ToolAssistance";
-ToolAssistanceField._showPromptAtCursorKey = "showPromptAtCursor";
-ToolAssistanceField._mouseTouchTabIndexKey = "mouseTouchTabIndex";
-ToolAssistanceField.defaultProps = {
-    includePromptAtCursor: true,
-    cursorPromptTimeout: 5000,
-    fadeOutCursorPrompt: true,
-    defaultPromptAtCursor: false,
-};
-function getWebComponentSource(iconSpec) {
-    if (iconSpec.startsWith("webSvg:") && iconSpec.length > 7) {
-        return iconSpec.slice(7);
+function InstructionSvgImage({ instruction, mediumSize, }) {
+    let image;
+    let className = mediumSize
+        ? "uifw-toolassistance-svg-medium"
+        : "uifw-toolassistance-svg";
+    if (typeof instruction.image !== "string" &&
+        instruction.image !== ToolAssistanceImage.Keyboard) {
+        const toolAssistanceImage = instruction.image;
+        let svgImage;
+        switch (toolAssistanceImage) {
+            case ToolAssistanceImage.AcceptPoint:
+                svgImage = React.createElement(SvgAdd, null);
+                break;
+            case ToolAssistanceImage.CursorClick:
+                svgImage = React.createElement(SvgCursorClick, null);
+                break;
+            case ToolAssistanceImage.LeftClick:
+                svgImage = React.createElement(SvgMouseClickLeft, null);
+                break;
+            case ToolAssistanceImage.RightClick:
+                svgImage = React.createElement(SvgMouseClickRight, null);
+                break;
+            case ToolAssistanceImage.MouseWheel:
+                svgImage = React.createElement(SvgMouseClickWheel, null);
+                break;
+            case ToolAssistanceImage.LeftClickDrag:
+                svgImage = React.createElement(SvgMouseClickLeftDrag, null);
+                className = mediumSize
+                    ? "uifw-toolassistance-svg-medium-wide"
+                    : "uifw-toolassistance-svg-wide";
+                break;
+            case ToolAssistanceImage.RightClickDrag:
+                svgImage = React.createElement(SvgMouseClickRightDrag, null);
+                className = mediumSize
+                    ? "uifw-toolassistance-svg-medium-wide"
+                    : "uifw-toolassistance-svg-wide";
+                break;
+            case ToolAssistanceImage.MouseWheelClickDrag:
+                svgImage = React.createElement(SvgMouseClickWheelDrag, null);
+                className = mediumSize
+                    ? "uifw-toolassistance-svg-medium-wide"
+                    : "uifw-toolassistance-svg-wide";
+                break;
+            case ToolAssistanceImage.OneTouchTap:
+                svgImage = React.createElement(SvgGestureOneFingerTap, null);
+                break;
+            case ToolAssistanceImage.OneTouchDoubleTap:
+                svgImage = React.createElement(SvgGestureOneFingerTapDouble, null);
+                break;
+            case ToolAssistanceImage.OneTouchDrag:
+                svgImage = React.createElement(SvgGestureOneFingerDrag, null);
+                break;
+            case ToolAssistanceImage.TwoTouchTap:
+                svgImage = React.createElement(SvgGestureTwoFingerTap, null);
+                break;
+            case ToolAssistanceImage.TwoTouchDrag:
+                svgImage = React.createElement(SvgGestureTwoFingerDrag, null);
+                break;
+            case ToolAssistanceImage.TwoTouchPinch:
+                svgImage = React.createElement(SvgGesturePinch, null);
+                break;
+            case ToolAssistanceImage.TouchCursorTap:
+                svgImage = React.createElement(SvgTouchCursorPoint, null);
+                break;
+            case ToolAssistanceImage.TouchCursorDrag:
+                svgImage = React.createElement(SvgTouchCursorPan, null);
+                className = mediumSize
+                    ? "uifw-toolassistance-svg-medium-wide"
+                    : "uifw-toolassistance-svg-wide";
+                break;
+        }
+        image = (React.createElement("div", { className: className }, svgImage && React.createElement(Icon, { iconSpec: svgImage })));
     }
-    return undefined;
+    return image;
+}
+function InstructionKeyboardImage({ keyboardInfo, }) {
+    let image;
+    if (keyboardInfo.bottomKeys !== undefined) {
+        image = (React.createElement("div", { className: "uifw-toolassistance-key-group" },
+            React.createElement("span", { className: "row1" }, keyboardInfo.keys.map((key, index) => {
+                return (React.createElement(KeyNode, { key: index, keyboardKey: key, className: "uifw-toolassistance-key-small" }));
+            })),
+            React.createElement("br", null),
+            React.createElement("span", { className: "row2" }, keyboardInfo.bottomKeys.map((key, index) => {
+                return (React.createElement(KeyNode, { key: index, keyboardKey: key, className: "uifw-toolassistance-key-small" }));
+            }))));
+    }
+    else if (keyboardInfo.keys.length === 2) {
+        image = (
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        React.createElement(FillCentered, null, keyboardInfo.keys.map((key, index) => {
+            let className = "uifw-toolassistance-key-medium";
+            if (key.length > 1)
+                className = "uifw-toolassistance-key-modifier";
+            return (React.createElement(KeyNode, { key: index, keyboardKey: key, className: className }));
+        })));
+    }
+    else if (keyboardInfo.keys[0]) {
+        if (keyboardInfo.keys[0].length > 1)
+            image = (React.createElement(KeyNode, { keyboardKey: keyboardInfo.keys[0], className: "uifw-toolassistance-key-large" }));
+        else
+            image = React.createElement(KeyNode, { keyboardKey: keyboardInfo.keys[0] });
+    }
+    else {
+        Logger.logError(UiFramework.loggerCategory("ToolAssistanceField"), `ToolAssistanceImage.Keyboard specified but ToolAssistanceKeyboardInfo not valid`);
+    }
+    return image;
+}
+function KeyNode({ keyboardKey, className, }) {
+    return (React.createElement("div", { className: classnames("uifw-toolassistance-key", className) },
+        React.createElement(FillCentered, null, keyboardKey)));
 }
 //# sourceMappingURL=ToolAssistanceField.js.map