@adaptabletools/adaptable 23.0.5-canary.1 → 23.0.6

package/src/Utilities/Helpers/PlusMinusHelper.js

@@ -1,5 +1,12 @@
+import { eventMatchesKeyboardShortcut } from '@infinite-table/infinite-react';
 const DEFAULT_INCREMENT_KEY = '+';
 const DEFAULT_DECREMENT_KEY = '-';
+const MODIFIER_TOKENS = new Set(['cmd', 'meta', 'ctrl', 'control', 'alt', 'shift']);
+const MODIFIER_ALIASES = { control: 'ctrl', meta: 'cmd' };
+const KEY_ALIASES = { esc: 'escape' };
+function isPlusMinusCombination(trigger) {
+    return trigger.length > 1;
+}
 export function resolvePlusMinusTriggerKeysForNudge(nudge, globalOptions) {
     const incrementKey = nudge.IncrementKey?.trim() || plusMinusIncrementKeyFromOptionsOnly(globalOptions);
     const decrementKey = nudge.DecrementKey?.trim() || plusMinusDecrementKeyFromOptionsOnly(globalOptions);
@@ -7,25 +14,32 @@ export function resolvePlusMinusTriggerKeysForNudge(nudge, globalOptions) {
 }
 export function plusMinusResolvedKeysConflict(nudge, globalOptions) {
     const { incrementKey, decrementKey } = resolvePlusMinusTriggerKeysForNudge(nudge, globalOptions);
-    if (incrementKey === decrementKey) {
-        return true;
-    }
-    if (incrementKey.length === 1 && decrementKey.length === 1) {
-        return incrementKey.toLowerCase() === decrementKey.toLowerCase();
+    const normalizedIncrement = normalizePlusMinusTrigger(incrementKey);
+    const normalizedDecrement = normalizePlusMinusTrigger(decrementKey);
+    if (!normalizedIncrement || !normalizedDecrement) {
+        return false;
     }
-    return false;
+    return normalizedIncrement === normalizedDecrement;
 }
-export function plusMinusKeyMatches(actualKey, configuredKey) {
-    if (!configuredKey) {
+export function plusMinusEventMatchesTrigger(event, configuredKey) {
+    const trigger = (configuredKey ?? '').trim();
+    if (!trigger) {
         return false;
     }
-    if (actualKey === configuredKey) {
-        return true;
+    const pressedKey = event?.key;
+    if (!pressedKey) {
+        return false;
     }
-    if (configuredKey.length === 1 && actualKey.length === 1) {
-        return actualKey.toLowerCase() === configuredKey.toLowerCase();
+    if (!isPlusMinusCombination(trigger)) {
+        return pressedKey.length === 1 && pressedKey.toLowerCase() === trigger.toLowerCase();
     }
-    return false;
+    return eventMatchesKeyboardShortcut({
+        key: pressedKey,
+        metaKey: !!event.metaKey,
+        altKey: !!event.altKey,
+        ctrlKey: !!event.ctrlKey,
+        shiftKey: !!event.shiftKey,
+    }, trigger);
 }
 export function plusMinusIncrementKeyFromOptionsOnly(globalOptions) {
     return globalOptions?.incrementKey?.trim() || DEFAULT_INCREMENT_KEY;
@@ -33,24 +47,165 @@ export function plusMinusIncrementKeyFromOptionsOnly(globalOptions) {
 export function plusMinusDecrementKeyFromOptionsOnly(globalOptions) {
     return globalOptions?.decrementKey?.trim() || DEFAULT_DECREMENT_KEY;
 }
+export function normalizePlusMinusTrigger(trigger) {
+    const value = (trigger ?? '').trim();
+    if (!value) {
+        return '';
+    }
+    if (!isPlusMinusCombination(value)) {
+        return value.toLowerCase();
+    }
+    const parts = value
+        .split('+')
+        .map((part) => part.trim().toLowerCase())
+        .filter(Boolean);
+    const modifiers = [];
+    const keys = [];
+    for (const part of parts) {
+        if (MODIFIER_TOKENS.has(part)) {
+            modifiers.push(MODIFIER_ALIASES[part] ?? part);
+        }
+        else {
+            keys.push(KEY_ALIASES[part] ?? part);
+        }
+    }
+    modifiers.sort();
+    return [...modifiers, ...keys].join('+');
+}
 export function plusMinusTriggerSameAsBaseline(candidate, baseline) {
-    return plusMinusKeyMatches(candidate, baseline) && plusMinusKeyMatches(baseline, candidate);
+    return normalizePlusMinusTrigger(candidate) === normalizePlusMinusTrigger(baseline);
+}
+const MODIFIER_KEY_NAMES = new Set([
+    'Shift',
+    'Control',
+    'Alt',
+    'Meta',
+    'OS',
+    'AltGraph',
+    'CapsLock',
+    'NumLock',
+    'ScrollLock',
+    'Hyper',
+    'Super',
+    'Fn',
+    'FnLock',
+    'Dead',
+]);
+function activeModifierTokens(event) {
+    const tokens = [];
+    if (event.ctrlKey) {
+        tokens.push('ctrl');
+    }
+    if (event.altKey) {
+        tokens.push('alt');
+    }
+    if (event.metaKey) {
+        tokens.push('cmd');
+    }
+    if (event.shiftKey) {
+        tokens.push('shift');
+    }
+    return tokens;
+}
+export function capturePlusMinusTriggerFromEvent(event) {
+    const key = event?.key;
+    const modifiers = activeModifierTokens(event);
+    if (!key || MODIFIER_KEY_NAMES.has(key)) {
+        return { kind: 'pending', modifiers };
+    }
+    const isPrintable = key.length === 1;
+    const keyPart = isPrintable ? key.toLowerCase() : key;
+    if (!modifiers.length) {
+        return { kind: 'captured', trigger: keyPart };
+    }
+    const shiftOnly = modifiers.length === 1 && modifiers[0] === 'shift';
+    const isLetter = isPrintable && /^[a-z]$/.test(keyPart);
+    if (isPrintable && shiftOnly && !isLetter) {
+        return { kind: 'captured', trigger: keyPart };
+    }
+    if (keyPart.includes('+')) {
+        return { kind: 'invalid', reason: 'This key cannot be combined with modifiers.' };
+    }
+    return { kind: 'captured', trigger: [...modifiers, keyPart].join('+') };
+}
+const KEY_DISPLAY_LABELS = {
+    ctrl: 'Ctrl',
+    cmd: 'Cmd',
+    alt: 'Alt',
+    shift: 'Shift',
+    enter: 'Enter',
+    escape: 'Esc',
+    esc: 'Esc',
+    tab: 'Tab',
+    space: 'Space',
+    backspace: 'Backspace',
+    delete: 'Delete',
+    insert: 'Insert',
+    arrowup: '↑',
+    arrowdown: '↓',
+    arrowleft: '←',
+    arrowright: '→',
+    pageup: 'Page Up',
+    pagedown: 'Page Down',
+    home: 'Home',
+    end: 'End',
+};
+export function plusMinusKeyLabel(token) {
+    const value = (token ?? '').trim();
+    if (!value) {
+        return '';
+    }
+    const lower = value.toLowerCase();
+    if (KEY_DISPLAY_LABELS[lower]) {
+        return KEY_DISPLAY_LABELS[lower];
+    }
+    if (value.length === 1) {
+        return value;
+    }
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+export function plusMinusTriggerDisplayParts(trigger) {
+    const value = (trigger ?? '').trim();
+    if (!value) {
+        return [];
+    }
+    if (!isPlusMinusCombination(value)) {
+        return [plusMinusKeyLabel(value)];
+    }
+    return value
+        .split('+')
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .map(plusMinusKeyLabel);
 }
 function addConfiguredKeyToLookup(lookup, configuredKey) {
-    if (!configuredKey) {
+    const trigger = (configuredKey ?? '').trim();
+    if (!trigger) {
         return;
     }
-    if (configuredKey.length === 1) {
-        lookup.singleCharLower.add(configuredKey.toLowerCase());
+    if (!isPlusMinusCombination(trigger)) {
+        lookup.effectiveKeysLower.add(trigger.toLowerCase());
+        return;
     }
-    else {
-        lookup.exactKeys.add(configuredKey);
+    const parts = trigger
+        .split('+')
+        .map((part) => part.trim().toLowerCase())
+        .filter(Boolean);
+    for (const part of parts) {
+        if (MODIFIER_TOKENS.has(part)) {
+            continue;
+        }
+        if (part === '*') {
+            lookup.matchAnyKey = true;
+            continue;
+        }
+        lookup.effectiveKeysLower.add(KEY_ALIASES[part] ?? part);
     }
 }
 export function buildPlusMinusTriggerKeyLookup(nudges, globalOptions) {
     const lookup = {
-        singleCharLower: new Set(),
-        exactKeys: new Set(),
+        effectiveKeysLower: new Set(),
+        matchAnyKey: false,
     };
     for (const nudge of nudges) {
         const { incrementKey, decrementKey } = resolvePlusMinusTriggerKeysForNudge(nudge, globalOptions);
@@ -60,11 +215,11 @@ export function buildPlusMinusTriggerKeyLookup(nudges, globalOptions) {
     return lookup;
 }
 export function plusMinusKeyCouldTrigger(keyEventString, lookup) {
+    if (lookup.matchAnyKey) {
+        return true;
+    }
     if (!keyEventString) {
         return false;
     }
-    if (keyEventString.length === 1) {
-        return lookup.singleCharLower.has(keyEventString.toLowerCase());
-    }
-    return lookup.exactKeys.has(keyEventString);
+    return lookup.effectiveKeysLower.has(keyEventString.toLowerCase());
 }

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -16,9 +16,9 @@ import { Box } from '../../../../components/Flex';
 export const AdaptablePopup = (props) => {
     const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    const wizardOptions = adaptable.adaptableOptions.wizardOptions;
     const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
     const menuItems = useMenuItems();
-    const isWindowModal = settingsPanelOptions.popupType === 'window';
     const modalContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.modalContainer, props.api.internalApi.buildBaseContext());
     let friendlyName = null;
     let isStandalone = false;
@@ -54,6 +54,10 @@ export const AdaptablePopup = (props) => {
         activeItem = moduleInfo.ModuleName;
         moduleViewContent = (_jsx(AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }
+    const effectivePopupType = isStandalone
+        ? wizardOptions?.popupType ?? settingsPanelOptions.popupType
+        : settingsPanelOptions.popupType;
+    const isWindowModal = effectivePopupType === 'window';
     const baseClassName = 'ab-Adaptable-Popup';
     const className = join(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isStandalone ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
     return (_jsx(PopupContext.Provider, { value: {

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -11,17 +11,21 @@ const WindowDialog = (props) => {
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    const wizardOptions = adaptable.adaptableOptions.wizardOptions;
     let popupSettings = useSelector((state) => state?.Internal?.SettingsPanel?.[settingsPanelOptionsKey]);
     const handleWindowSettings = (settings) => {
         dispatch(SettingsPanelSet(settingsPanelOptionsKey, settings));
     };
     if (!popupSettings) {
         const size = isActionModule
-            ? getActionPanelSize()
+            ? wizardOptions?.size ?? getActionPanelSize()
             : settingsPanelOptions.size ?? getSettingsPanelSize();
+        const position = isActionModule
+            ? wizardOptions?.position ?? getMiddlePosition(size)
+            : settingsPanelOptions.position ?? getMiddlePosition(size);
         popupSettings = {
-            size: size,
-            position: settingsPanelOptions.position ?? getMiddlePosition(size),
+            size,
+            position,
         };
     }
     const windowModalProps = {

package/src/View/Components/Popups/Utilities.d.ts

@@ -13,6 +13,17 @@ export declare const getSettingsPanelSize: () => {
     height: number;
     width: number;
 };
+/**
+ * Default size for the One Page Wizard when it renders as a window (i.e.
+ * `wizardOptions.popupType === 'window'` and the user has not provided an
+ * explicit `wizardOptions.size`). Mirrors the historical modal sizing of
+ * 90vh tall and 90vw wide, capped at 1200px wide so the wizard stays
+ * readable on very large monitors.
+ */
+export declare const getWizardSize: () => {
+    height: number;
+    width: number;
+};
 export declare const getWindowPopupSize: () => {
     height: number;
     width: number;

package/src/View/Components/Popups/Utilities.js

@@ -23,6 +23,14 @@ export const getSettingsPanelSize = () => {
         width: clamp(width * 0.9, 0, 800),
     };
 };
+export const getWizardSize = () => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    return {
+        height: height * 0.9,
+        width: clamp(width * 0.9, 0, 1200),
+    };
+};
 export const getWindowPopupSize = () => {
     return getSettingsPanelSize();
 };

package/src/View/PlusMinus/Wizard/KeyComboCaptureInput.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface KeyComboCaptureInputProps {
+    /** Resolved trigger to display when not recording (e.g. `+` or `shift+Enter`). */
+    value: string;
+    /** When true, `value` comes from the default/global setting (shown as a hint). */
+    isUsingDefault?: boolean;
+    /** Hint shown when there is no value and the field is not recording. */
+    placeholder?: string;
+    disabled?: boolean;
+    'data-name'?: string;
+    /** Called with a complete, valid trigger once the user records one. */
+    onCapture: (trigger: string) => void;
+    /** Reset back to the default/global trigger (clears the per-nudge override). */
+    onReset?: () => void;
+    /**
+     * Optional validation run on a captured trigger before committing.
+     * Return an error message to reject the capture (e.g. increment/decrement clash).
+     */
+    validateCapture?: (trigger: string) => string | undefined;
+}
+/**
+ * VS Code-style keyboard shortcut recorder. While focused the field shows the
+ * current value and a "Hit Enter to edit" hint; pressing Enter enters edit mode
+ * (the value is cleared) where the next key press / combination is detected from
+ * the event. A valid press is persisted and edit mode ends; incomplete
+ * (modifier-only) and unrepresentable presses are rejected, and an optional
+ * `validateCapture` guards against clashes. The revert button restores the
+ * default once a custom value has been set.
+ */
+export declare const KeyComboCaptureInput: React.FunctionComponent<KeyComboCaptureInputProps>;

package/src/View/PlusMinus/Wizard/KeyComboCaptureInput.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../../lib/utils';
+import { Box, Flex } from '../../../components/Flex';
+import SimpleButton from '../../../components/SimpleButton';
+import { capturePlusMinusTriggerFromEvent, plusMinusKeyLabel, plusMinusTriggerDisplayParts, } from '../../../Utilities/Helpers/PlusMinusHelper';
+import { targetOwn } from '../../../components/twUtils';
+const Kbd = ({ children }) => (_jsx(Box, { as: "kbd", className: "twa:px-2 twa:py-[2px] twa:rounded-standard twa:bg-primary twa:text-2 twa:leading-none twa:font-medium twa:whitespace-nowrap", children: children }));
+const renderTokens = (tokens) => tokens.map((token, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Box, { className: "twa:opacity-50 twa:text-2", children: "+" }) : null, _jsx(Kbd, { children: token })] }, `${token}-${index}`)));
+export const KeyComboCaptureInput = (props) => {
+    const { value, isUsingDefault, placeholder, disabled, onCapture, onReset, validateCapture } = props;
+    const ref = React.useRef(null);
+    const [focused, setFocused] = React.useState(false);
+    const [editing, setEditing] = React.useState(false);
+    const [pendingModifiers, setPendingModifiers] = React.useState([]);
+    const [staged, setStaged] = React.useState(undefined);
+    const [error, setError] = React.useState(undefined);
+    const stopEditing = React.useCallback(() => {
+        setEditing(false);
+        setPendingModifiers([]);
+        setStaged(undefined);
+    }, []);
+    const handleKeyDown = (event) => {
+        if (disabled) {
+            return;
+        }
+        if (!editing) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                event.stopPropagation();
+                setError(undefined);
+                setPendingModifiers([]);
+                setStaged(undefined);
+                setEditing(true);
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            setError(undefined);
+            stopEditing();
+            return;
+        }
+        if (event.key === 'Tab') {
+            if (staged && !validateCapture?.(staged)) {
+                onCapture(staged);
+            }
+            stopEditing();
+            setError(undefined);
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const noModifiers = !event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey;
+        if (event.key === 'Enter' && noModifiers) {
+            if (!staged) {
+                return;
+            }
+            const validationError = validateCapture?.(staged);
+            if (validationError) {
+                setError(validationError);
+                return;
+            }
+            const confirmed = staged;
+            setError(undefined);
+            stopEditing();
+            onCapture(confirmed);
+            return;
+        }
+        const result = capturePlusMinusTriggerFromEvent({
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey,
+        });
+        if (result.kind === 'pending') {
+            setPendingModifiers(result.modifiers);
+            setError(undefined);
+            return;
+        }
+        if (result.kind === 'invalid') {
+            setPendingModifiers([]);
+            setStaged(undefined);
+            setError(result.reason);
+            return;
+        }
+        const validationError = validateCapture?.(result.trigger);
+        if (validationError) {
+            setPendingModifiers([]);
+            setStaged(undefined);
+            setError(validationError);
+            return;
+        }
+        setPendingModifiers([]);
+        setError(undefined);
+        setStaged(result.trigger);
+    };
+    const handleReset = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setError(undefined);
+        stopEditing();
+        onReset?.();
+    };
+    const handleEnterEdit = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setError(undefined);
+        setPendingModifiers([]);
+        setStaged(undefined);
+        setEditing(true);
+        ref.current?.focus();
+    };
+    const valueParts = plusMinusTriggerDisplayParts(value);
+    let content;
+    if (editing) {
+        if (staged) {
+            content = (_jsx(Flex, { className: "twa:items-center twa:gap-1", children: renderTokens(plusMinusTriggerDisplayParts(staged)) }));
+        }
+        else if (pendingModifiers.length) {
+            content = (_jsxs(Flex, { className: "twa:items-center twa:gap-1", children: [renderTokens(pendingModifiers.map(plusMinusKeyLabel)), _jsx(Box, { className: "twa:opacity-50 twa:text-2", children: "+ \u2026" })] }));
+        }
+        else {
+            content = _jsx(Box, { className: "twa:opacity-60 twa:text-2", children: "Press a key combination\u2026" });
+        }
+    }
+    else if (valueParts.length) {
+        content = (_jsxs(Flex, { className: "twa:items-center twa:gap-1", children: [renderTokens(valueParts), isUsingDefault ? (_jsx(Box, { className: "twa:opacity-60 twa:text-2 twa:ml-1", children: "(default)" })) : null] }));
+    }
+    else {
+        content = _jsx(Box, { className: "twa:opacity-60 twa:text-2", children: placeholder ?? 'Hit Enter to edit' });
+    }
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:max-w-[300px] twa:w-full", children: [_jsxs(Flex, { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, "data-name": props['data-name'], "aria-label": "Record keyboard shortcut", onFocus: () => {
+                    if (!disabled) {
+                        setFocused(true);
+                    }
+                }, onBlur: (event) => {
+                    if (ref.current && event.relatedTarget && ref.current.contains(event.relatedTarget)) {
+                        return;
+                    }
+                    if (editing && staged && !validateCapture?.(staged)) {
+                        onCapture(staged);
+                    }
+                    setFocused(false);
+                    stopEditing();
+                    setError(undefined);
+                }, onClick: () => ref.current?.focus(), onKeyDown: handleKeyDown, className: cn('twa:min-h-input twa:rounded-input twa:px-2 twa:items-center twa:gap-2 twa:w-full', 'twa:border-input twa:border', targetOwn.focusWithinOutline, disabled
+                    ? 'twa:opacity-60 twa:cursor-not-allowed'
+                    : 'twa:cursor-pointer twa:bg-input-background', editing ? 'twa:border-accent' : '', error ? 'twa:border-destructive' : ''), children: [_jsx(Flex, { className: "twa:flex-1 twa:flex-wrap twa:items-center twa:gap-1 twa:py-1", children: content }), !disabled && !editing ? (onReset && !isUsingDefault ? (_jsx(SimpleButton, { variant: "text", icon: "undo", tooltip: "Revert to default", "data-name": "plus-minus-reset-key", tabIndex: -1, onMouseDown: handleReset, onKeyDown: (event) => {
+                            if (event.key === 'Enter') {
+                                handleReset(event);
+                                ref.current?.focus();
+                            }
+                        } })) : (_jsx(SimpleButton, { variant: "text", icon: "edit", tooltip: "Edit keyboard shortcut", "data-name": "plus-minus-edit-key", tabIndex: -1, onMouseDown: handleEnterEdit, onKeyDown: (event) => {
+                            if (event.key === 'Enter') {
+                                handleEnterEdit(event);
+                            }
+                        } }))) : null] }), _jsx(Box, { "data-name": error ? 'key-capture-error' : 'key-capture-hint', className: cn('twa:text-2', error ? 'twa:text-destructive' : 'twa:opacity-60', !focused && !error ? 'twa:invisible' : ''), children: error ? error : editing ? 'ENTER to confirm, ESCAPE to cancel' : 'Hit Enter to edit' })] }));
+};

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -5,7 +5,8 @@ import { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/One
 import { Tag } from '../../../components/Tag';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
-import { plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/PlusMinusHelper';
+import { normalizePlusMinusTrigger, plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/PlusMinusHelper';
+import { KeyComboCaptureInput } from './KeyComboCaptureInput';
 export const PlusMinusSettingsSummary = () => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const { incrementKey, decrementKey } = resolvePlusMinusTriggerKeysForNudge(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {});
@@ -36,42 +37,35 @@ export const PlusMinusSettingsWizardSection = (props) => {
     const pmOpts = api.optionsApi.getEditOptions().plusMinusOptions ?? {};
     const incrementBaseline = plusMinusIncrementKeyFromOptionsOnly(pmOpts);
     const decrementBaseline = plusMinusDecrementKeyFromOptionsOnly(pmOpts);
-    const [incrementEdit, setIncrementEdit] = React.useState(undefined);
-    const [decrementEdit, setDecrementEdit] = React.useState(undefined);
-    React.useEffect(() => {
-        setIncrementEdit(undefined);
-        setDecrementEdit(undefined);
-    }, [data.Uuid]);
-    const incrementDisplayValue = incrementEdit !== undefined
-        ? incrementEdit
-        : data.IncrementKey?.trim()
-            ? (data.IncrementKey ?? '').trim()
-            : incrementBaseline;
-    const decrementDisplayValue = decrementEdit !== undefined
-        ? decrementEdit
-        : data.DecrementKey?.trim()
-            ? (data.DecrementKey ?? '').trim()
-            : decrementBaseline;
-    const commitIncrementKey = React.useCallback((raw) => {
-        const trimmed = raw.trim();
-        const next = trimmed === '' || plusMinusTriggerSameAsBaseline(trimmed, incrementBaseline)
-            ? undefined
-            : trimmed;
-        const prev = data.IncrementKey?.trim() || undefined;
-        if (next !== prev) {
-            props.onChange({ ...data, IncrementKey: next });
-        }
+    const incrementUsingDefault = !data.IncrementKey?.trim();
+    const decrementUsingDefault = !data.DecrementKey?.trim();
+    const incrementDisplayValue = incrementUsingDefault
+        ? incrementBaseline
+        : (data.IncrementKey ?? '').trim();
+    const decrementDisplayValue = decrementUsingDefault
+        ? decrementBaseline
+        : (data.DecrementKey ?? '').trim();
+    const commitIncrementKey = React.useCallback((trigger) => {
+        const next = plusMinusTriggerSameAsBaseline(trigger, incrementBaseline) ? undefined : trigger;
+        props.onChange({ ...data, IncrementKey: next });
     }, [data, incrementBaseline, props.onChange]);
-    const commitDecrementKey = React.useCallback((raw) => {
-        const trimmed = raw.trim();
-        const next = trimmed === '' || plusMinusTriggerSameAsBaseline(trimmed, decrementBaseline)
-            ? undefined
-            : trimmed;
-        const prev = data.DecrementKey?.trim() || undefined;
-        if (next !== prev) {
-            props.onChange({ ...data, DecrementKey: next });
-        }
+    const commitDecrementKey = React.useCallback((trigger) => {
+        const next = plusMinusTriggerSameAsBaseline(trigger, decrementBaseline) ? undefined : trigger;
+        props.onChange({ ...data, DecrementKey: next });
     }, [data, decrementBaseline, props.onChange]);
+    const resetIncrementKey = React.useCallback(() => {
+        props.onChange({ ...data, IncrementKey: undefined });
+    }, [data, props.onChange]);
+    const resetDecrementKey = React.useCallback(() => {
+        props.onChange({ ...data, DecrementKey: undefined });
+    }, [data, props.onChange]);
+    const SAME_KEYS_MESSAGE = 'Increment and decrement keys cannot be the same.';
+    const validateIncrementCapture = React.useCallback((trigger) => normalizePlusMinusTrigger(trigger) === normalizePlusMinusTrigger(decrementDisplayValue)
+        ? SAME_KEYS_MESSAGE
+        : undefined, [decrementDisplayValue]);
+    const validateDecrementCapture = React.useCallback((trigger) => normalizePlusMinusTrigger(trigger) === normalizePlusMinusTrigger(incrementDisplayValue)
+        ? SAME_KEYS_MESSAGE
+        : undefined, [incrementDisplayValue]);
     const handleNameChange = (event) => {
         props.onChange({
             ...data,
@@ -85,29 +79,5 @@ export const PlusMinusSettingsWizardSection = (props) => {
             NudgeValue: isNaN(newValue) ? '' : newValue,
         });
     };
-    const handleIncrementKeyFocus = () => {
-        setIncrementEdit(data.IncrementKey?.trim() ? (data.IncrementKey ?? '').trim() : incrementBaseline);
-    };
-    const handleIncrementKeyChange = (event) => {
-        const raw = event.target.value;
-        setIncrementEdit(raw);
-        commitIncrementKey(raw);
-    };
-    const handleIncrementKeyBlur = (event) => {
-        commitIncrementKey(event.target.value);
-        setIncrementEdit(undefined);
-    };
-    const handleDecrementKeyFocus = () => {
-        setDecrementEdit(data.DecrementKey?.trim() ? (data.DecrementKey ?? '').trim() : decrementBaseline);
-    };
-    const handleDecrementKeyChange = (event) => {
-        const raw = event.target.value;
-        setDecrementEdit(raw);
-        commitDecrementKey(raw);
-    };
-    const handleDecrementKeyBlur = (event) => {
-        commitDecrementKey(event.target.value);
-        setDecrementEdit(undefined);
-    };
-    return (_jsx(Box, { "data-name": "plus-minus-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Plus/Minus Nudge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "plus-minus-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Nudge Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Amount added to or subtracted from the cell value when Plus/Minus is used" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "nudge-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Trigger Keys" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard keys that trigger increment and decrement" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Increment key" }), _jsx(Input, { "data-name": "plus-minus-increment-key", className: "twa:max-w-[300px] twa:w-full", onBlur: handleIncrementKeyBlur, onChange: handleIncrementKeyChange, onFocus: handleIncrementKeyFocus, value: incrementDisplayValue })] }), _jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Decrement key" }), _jsx(Input, { "data-name": "plus-minus-decrement-key", className: "twa:max-w-[300px] twa:w-full", onBlur: handleDecrementKeyBlur, onChange: handleDecrementKeyChange, onFocus: handleDecrementKeyFocus, value: decrementDisplayValue })] })] }) })] })] }) }));
+    return (_jsx(Box, { "data-name": "plus-minus-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Plus / Minus Nudge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "plus-minus-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Nudge Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Amount added to or subtracted from the cell value when Plus / Minus is used" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "nudge-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Trigger Keys" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Click a field and press the keys that should trigger increment / decrement." })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Increment key" }), _jsx(KeyComboCaptureInput, { "data-name": "plus-minus-increment-key", value: incrementDisplayValue, isUsingDefault: incrementUsingDefault, onCapture: commitIncrementKey, onReset: resetIncrementKey, validateCapture: validateIncrementCapture })] }), _jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Decrement key" }), _jsx(KeyComboCaptureInput, { "data-name": "plus-minus-decrement-key", value: decrementDisplayValue, isUsingDefault: decrementUsingDefault, onCapture: commitDecrementKey, onReset: resetDecrementKey, validateCapture: validateDecrementCapture })] })] }) })] })] }) }));
 };