cx 26.4.0 → 26.4.2

package/src/widgets/form/NumberField.tsx

@@ -1,653 +1,653 @@
-/** @jsxImportSource react */
-
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip, FieldInstance, FieldConfig } from "./Field";
-import { Format } from "../../ui/Format";
-import { Culture } from "../../ui/Culture";
-import type { RenderingContext } from "../../ui/RenderingContext";
-import type { Instance } from "../../ui/Instance";
-import { StringTemplate } from "../../data/StringTemplate";
-import {
-  tooltipParentWillReceiveProps,
-  tooltipParentWillUnmount,
-  tooltipMouseMove,
-  tooltipMouseLeave,
-  tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
-import { Localization } from "../../ui/Localization";
-import ClearIcon from "../icons/clear";
-import { isString } from "../../util/isString";
-import { isNumber } from "../../util/isNumber";
-import { isDefined } from "../../util/isDefined";
-import { getActiveElement } from "../../util/getActiveElement";
-
-import { enableCultureSensitiveFormatting } from "../../ui/Format";
-import { KeyCode } from "../../util/KeyCode";
-import { autoFocus } from "../autoFocus";
-import { Prop, NumberProp, StringProp, BooleanProp } from "../../ui/Prop";
-
-enableCultureSensitiveFormatting();
-
-export interface NumberFieldConfig extends FieldConfig {
-  value?: NumberProp;
-  readOnly?: BooleanProp;
-  enabled?: BooleanProp;
-  placeholder?: StringProp;
-  format?: StringProp;
-  minValue?: NumberProp;
-  minExclusive?: BooleanProp;
-  maxValue?: NumberProp;
-  maxExclusive?: BooleanProp;
-  constrain?: BooleanProp;
-  incrementPercentage?: NumberProp;
-  increment?: NumberProp;
-  step?: number;
-  baseClass?: string;
-  snapToIncrement?: boolean;
-  showClear?: boolean;
-  hideClear?: boolean;
-  alwaysShowClear?: boolean;
-  reactOn?: string;
-  inputType?: "text" | "password";
-  maxValueErrorText?: string;
-  maxExclusiveErrorText?: string;
-  minValueErrorText?: string;
-  minExclusiveErrorText?: string;
-  inputErrorText?: string;
-  scale?: number;
-  offset?: number;
-
-  /** Custom validation function. */
-  onValidate?:
-    | string
-    | ((
-        value: number,
-        instance: Instance,
-        validationParams: Record<string, unknown>,
-      ) => unknown);
-
-  /** If `trackFocus` is set, this value will be set when the field receives or loses focus. */
-  focused?: BooleanProp;
-}
-
-export class NumberField<
-  Config extends NumberFieldConfig = NumberFieldConfig,
-> extends Field<Config> {
-  declare public baseClass: string;
-  declare public reactOn: string;
-  declare public format: string;
-  declare public inputType: string;
-  declare public incrementPercentage: number;
-  declare public increment?: number;
-  declare public scale: number;
-  declare public offset: number;
-  declare public step?: number;
-  declare public hideClear?: boolean;
-  declare public showClear?: boolean;
-  declare public alwaysShowClear?: boolean;
-  declare public snapToIncrement?: boolean;
-  declare public onParseInput?:
-    | string
-    | ((value: string, instance: Instance) => number | undefined);
-  declare public minValueErrorText: string;
-  declare public maxValueErrorText: string;
-  declare public minExclusiveErrorText: string;
-  declare public maxExclusiveErrorText: string;
-  declare public inputErrorText?: string;
-
-  declareData(...args: Record<string, unknown>[]): void {
-    super.declareData(
-      {
-        value: this.emptyValue,
-        disabled: undefined,
-        readOnly: undefined,
-        enabled: undefined,
-        placeholder: undefined,
-        required: undefined,
-        format: undefined,
-        minValue: undefined,
-        maxValue: undefined,
-        constrain: undefined,
-        minExclusive: undefined,
-        maxExclusive: undefined,
-        incrementPercentage: undefined,
-        increment: undefined,
-        icon: undefined,
-        scale: undefined,
-        offset: undefined,
-        focused: undefined,
-      },
-      ...args,
-    );
-  }
-
-  init(): void {
-    if (isDefined(this.step)) this.increment = this.step;
-
-    if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
-
-    if (this.alwaysShowClear) this.showClear = true;
-
-    super.init();
-  }
-
-  prepareData(
-    context: RenderingContext,
-    instance: FieldInstance<NumberField>,
-  ): void {
-    let { data, state, cached } = instance;
-    data.formatted = Format.value(data.value, data.format);
-
-    if (!cached.data || data.value != cached.data.value)
-      state.empty = data.value == null;
-
-    super.prepareData(context, instance);
-  }
-
-  formatValue(
-    context: RenderingContext,
-    { data }: FieldInstance<NumberField>,
-  ): string | number | undefined {
-    return data.formatted;
-  }
-
-  parseValue(value: string, instance: FieldInstance<NumberField>): number {
-    if (this.onParseInput) {
-      let result = instance.invoke("onParseInput", value, instance);
-      if (result !== undefined) return result;
-    }
-    return Culture.getNumberCulture().parse(value);
-  }
-
-  validate(
-    context: RenderingContext,
-    instance: FieldInstance<NumberField>,
-  ): void {
-    super.validate(context, instance);
-
-    let { data } = instance;
-    if (isNumber(data.value) && !data.error) {
-      if (isNumber(data.minValue)) {
-        if (data.value < data.minValue)
-          data.error = StringTemplate.format(
-            this.minValueErrorText,
-            Format.value(data.minValue, data.format),
-          );
-        else if (data.value == data.minValue && data.minExclusive)
-          data.error = StringTemplate.format(
-            this.minExclusiveErrorText,
-            Format.value(data.minValue, data.format),
-          );
-      }
-
-      if (isNumber(data.maxValue)) {
-        if (data.value > data.maxValue)
-          data.error = StringTemplate.format(
-            this.maxValueErrorText,
-            Format.value(data.maxValue, data.format),
-          );
-        else if (data.value == data.maxValue && data.maxExclusive)
-          data.error = StringTemplate.format(
-            this.maxExclusiveErrorText,
-            Format.value(data.maxValue, data.format),
-          );
-      }
-    }
-  }
-
-  renderInput(
-    context: RenderingContext,
-    instance: FieldInstance<NumberField>,
-    key: string,
-  ): React.ReactNode {
-    return (
-      <Input
-        key={key}
-        data={instance.data}
-        instance={instance}
-        label={
-          this.labelPlacement &&
-          getContent(this.renderLabel(context, instance, "label"))
-        }
-        help={
-          this.helpPlacement &&
-          getContent(this.renderHelp(context, instance, "help"))
-        }
-        icon={this.renderIcon(context, instance, "icon")}
-      />
-    );
-  }
-
-  validateRequired(
-    context: RenderingContext,
-    instance: FieldInstance<NumberField>,
-  ): string | undefined {
-    return instance.state.empty && this.requiredText;
-  }
-}
-
-NumberField.prototype.baseClass = "numberfield";
-NumberField.prototype.reactOn = "enter blur";
-NumberField.prototype.format = "n";
-NumberField.prototype.inputType = "text";
-
-NumberField.prototype.maxValueErrorText = "Enter {0} or less.";
-NumberField.prototype.maxExclusiveErrorText = "Enter a number less than {0}.";
-NumberField.prototype.minValueErrorText = "Enter {0} or more.";
-NumberField.prototype.minExclusiveErrorText =
-  "Enter a number greater than {0}.";
-NumberField.prototype.inputErrorText = "Invalid number entered.";
-NumberField.prototype.suppressErrorsUntilVisited = true;
-
-NumberField.prototype.incrementPercentage = 0.1;
-NumberField.prototype.scale = 1;
-NumberField.prototype.offset = 0;
-NumberField.prototype.snapToIncrement = true;
-NumberField.prototype.icon = null;
-NumberField.prototype.showClear = false;
-NumberField.prototype.alwaysShowClear = false;
-
-Widget.alias("numberfield", NumberField);
-Localization.registerPrototype("cx/widgets/NumberField", NumberField);
-
-interface InputProps {
-  instance: FieldInstance<NumberField>;
-  data: Record<string, any>;
-  label?: React.ReactNode;
-  help?: React.ReactNode;
-  icon?: React.ReactNode;
-}
-
-interface InputState {
-  focus: boolean;
-}
-
-class Input extends VDOM.Component<InputProps, InputState> {
-  input?: HTMLInputElement;
-  unsubscribeOnWheel?: () => void;
-
-  constructor(props: InputProps) {
-    super(props);
-    this.state = {
-      focus: false,
-    };
-  }
-
-  render(): React.ReactNode {
-    let { data, instance, label, help, icon: iconVDOM } = this.props;
-    let { widget, state } = instance;
-    let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-    let icon = iconVDOM && (
-      <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>
-    );
-
-    let insideButton;
-    if (!data.readOnly && !data.disabled) {
-      if (
-        widget.showClear &&
-        (((widget.alwaysShowClear || !data.required) && !data.empty) ||
-          instance.state.inputError)
-      )
-        insideButton = (
-          <div
-            className={CSS.element(baseClass, "clear")}
-            onMouseDown={(e) => e.preventDefault()}
-            onClick={(e) => this.onClearClick(e)}
-          >
-            <ClearIcon className={CSS.element(baseClass, "icon")} />
-          </div>
-        );
-    }
-
-    let empty = this.input ? !this.input.value : data.empty;
-
-    return (
-      <div
-        className={CSS.expand(
-          data.classNames,
-          CSS.state({
-            visited: state.visited,
-            focus: this.state.focus,
-            icon: !!icon,
-            empty: empty && !data.placeholder,
-            error:
-              data.error &&
-              (state.visited || !suppressErrorsUntilVisited || !empty),
-          }),
-        )}
-        style={data.style}
-        onMouseDown={stopPropagation}
-        onTouchStart={stopPropagation}
-      >
-        <input
-          id={data.id}
-          type={widget.inputType}
-          className={CSS.expand(
-            CSS.element(baseClass, "input"),
-            data.inputClass,
-          )}
-          defaultValue={data.formatted}
-          ref={(el: HTMLInputElement | null) => {
-            this.input = el || undefined;
-          }}
-          style={data.inputStyle}
-          disabled={data.disabled}
-          readOnly={data.readOnly}
-          tabIndex={data.tabIndex}
-          placeholder={data.placeholder}
-          {...data.inputAttrs}
-          onMouseMove={(e: React.MouseEvent<HTMLInputElement>) =>
-            tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))
-          }
-          onMouseLeave={(e: React.MouseEvent<HTMLInputElement>) =>
-            tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))
-          }
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            this.onChange(e, "change")
-          }
-          onKeyDown={this.onKeyDown.bind(this)}
-          onBlur={(e: React.FocusEvent<HTMLInputElement>) => this.onBlur(e)}
-          onFocus={(e: React.FocusEvent<HTMLInputElement>) => this.onFocus()}
-          onClick={stopPropagation}
-        />
-        {insideButton}
-        {icon}
-        {label}
-        {help}
-      </div>
-    );
-  }
-
-  UNSAFE_componentWillReceiveProps(props: InputProps): void {
-    let { data, state } = props.instance;
-    if (this.props.data.formatted != data.formatted && !state.inputError) {
-      this.input!.value = props.data.formatted || "";
-      props.instance.setState({
-        inputError: false,
-      });
-    }
-    tooltipParentWillReceiveProps(
-      this.input!,
-      ...getFieldTooltip(props.instance),
-    );
-  }
-
-  componentDidMount(): void {
-    tooltipParentDidMount(this.input!, ...getFieldTooltip(this.props.instance));
-    autoFocus(this.input, this);
-    let { widget } = this.props.instance;
-    if (widget.reactOn.indexOf("wheel") !== -1) {
-      this.unsubscribeOnWheel = addEventListenerWithOptions(
-        this.input!,
-        "wheel",
-        (e) => {
-          this.onChange(e as unknown as React.WheelEvent<HTMLInputElement>, "wheel");
-        },
-        { passive: false },
-      );
-    }
-  }
-
-  componentDidUpdate(): void {
-    autoFocus(this.input, this);
-  }
-
-  componentWillUnmount(): void {
-    if (
-      this.input == getActiveElement() &&
-      this.input.value != this.props.data.formatted
-    ) {
-      this.onChange(
-        { currentTarget: this.input } as React.SyntheticEvent<HTMLInputElement>,
-        "blur",
-      );
-    }
-    tooltipParentWillUnmount(this.props.instance);
-    this.unsubscribeOnWheel?.();
-  }
-
-  getPreCursorDigits(
-    text: string,
-    cursor: number,
-    decimalSeparator: string,
-  ): string {
-    let res = "";
-    for (let i = 0; i < cursor; i++) {
-      if ("0" <= text[i] && text[i] <= "9") res += text[i];
-      else if (text[i] == decimalSeparator) res += ".";
-      else if (text[i] == "-") res += "-";
-    }
-    return res;
-  }
-
-  getLengthWithoutSuffix(text: string, decimalSeparator: string): number {
-    let l = text.length;
-    while (l > 0) {
-      if ("0" <= text[l - 1] && text[l - 1] <= "9") break;
-      if (text[l - 1] == decimalSeparator) break;
-      l--;
-    }
-    return l;
-  }
-
-  getDecimalSeparator(format: string): string | null {
-    let text = Format.value(0.11111111, format);
-    for (let i = text.length - 1; i >= 0; i--) {
-      if ("0" <= text[i] && text[i] <= "9") continue;
-      if (text[i] == "," || text[i] == ".") return text[i];
-      break;
-    }
-    return null;
-  }
-
-  updateCursorPosition(preCursorText: string | undefined): void {
-    if (isString(preCursorText)) {
-      let cursor = 0;
-      let preCursor = 0;
-      let text = this.input!.value || "";
-      while (preCursor < preCursorText.length && cursor < text.length) {
-        if (text[cursor] == preCursorText[preCursor]) {
-          cursor++;
-          preCursor++;
-        } else {
-          cursor++;
-        }
-      }
-      this.input!.setSelectionRange(cursor, cursor);
-    }
-  }
-
-  calculateIncrement(value: number, strength: number): number {
-    if (value == 0) return 0.1;
-    let absValue = Math.abs(value * strength);
-    let log10 = Math.floor(Math.log10(absValue) + 0.001);
-    let size = Math.pow(10, log10);
-    if (absValue / size > 4.999) return 5 * size;
-    if (absValue / size > 1.999) return 2 * size;
-    return size;
-  }
-
-  onClearClick(e: React.MouseEvent): void {
-    this.input!.value = "";
-    let { instance } = this.props;
-    instance.set("value", instance.widget.emptyValue, { immediate: true });
-  }
-
-  onKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {
-    let { instance } = this.props;
-    if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-    switch (e.keyCode) {
-      case KeyCode.enter:
-        this.onChange(e, "enter");
-        break;
-
-      case KeyCode.left:
-      case KeyCode.right:
-        e.stopPropagation();
-        break;
-    }
-  }
-
-  onChange(
-    e:
-      | React.SyntheticEvent<HTMLInputElement>
-      | React.WheelEvent<HTMLInputElement>,
-    change: string,
-  ): void {
-    let { instance, data } = this.props;
-    let { widget } = instance;
-    let inputValue = e.currentTarget.value;
-
-    if (data.required) {
-      instance.setState({
-        empty: !inputValue,
-      });
-    }
-
-    if (change == "blur" && this.state.focus) {
-      this.setState({
-        focus: false,
-      });
-    }
-
-    let immediate = change == "blur" || change == "enter";
-
-    if (
-      (widget.reactOn.indexOf(change) == -1 && !immediate) ||
-      data.disabled ||
-      data.readOnly
-    )
-      return;
-
-    if (immediate) instance.setState({ visited: true });
-
-    let value = null;
-
-    if (inputValue) {
-      let displayValue = widget.parseValue(inputValue, instance);
-      if (isNaN(displayValue)) {
-        instance.setState({
-          inputError: instance.widget.inputErrorText,
-        });
-        return;
-      }
-
-      value = displayValue * data.scale + data.offset;
-
-      if (change == "wheel") {
-        e.preventDefault();
-        let increment =
-          data.increment != null
-            ? data.increment
-            : this.calculateIncrement(value, data.incrementPercentage);
-        let deltaY = (e as React.WheelEvent<HTMLInputElement>).deltaY;
-        value = value + (deltaY < 0 ? increment : -increment);
-        if (widget.snapToIncrement) {
-          value = Math.round(value / increment) * increment;
-        }
-
-        if (data.minValue != null) {
-          if (data.minExclusive) {
-            if (value <= data.minValue) return;
-          } else {
-            value = Math.max(value, data.minValue);
-          }
-        }
-
-        if (data.maxValue != null) {
-          if (data.maxExclusive) {
-            if (value >= data.maxValue) return;
-          } else {
-            value = Math.min(value, data.maxValue);
-          }
-        }
-      }
-
-      if (data.constrain) {
-        if (data.minValue != null) {
-          if (value < data.minValue) {
-            value = data.minValue;
-          }
-        }
-
-        if (data.maxValue != null) {
-          if (value > data.maxValue) {
-            value = data.maxValue;
-          }
-        }
-      }
-
-      let fmt = data.format;
-      let decimalSeparator =
-        this.getDecimalSeparator(fmt) || Format.value(1.1, "n;1")[1];
-
-      let formatted = Format.value(value, fmt);
-      // Re-parse to avoid differences between formatted value and value in the store
-
-      value = widget.parseValue(formatted, instance) * data.scale + data.offset;
-
-      // Allow users to type numbers like 100.0003 or -0.05 without interruptions
-      // If the last typed character is zero or dot (decimal separator), skip processing it
-      let selectionEnd = this.input!.selectionEnd;
-      if (
-        change == "change" &&
-        this.input!.selectionStart == selectionEnd &&
-        selectionEnd != null &&
-        selectionEnd >=
-          this.getLengthWithoutSuffix(this.input!.value, decimalSeparator) &&
-        (inputValue[selectionEnd - 1] == decimalSeparator ||
-          (inputValue.indexOf(decimalSeparator) >= 0 &&
-            inputValue[selectionEnd - 1] == "0") ||
-          (selectionEnd == 2 && inputValue[0] === "-" && inputValue[1] === "0"))
-      )
-        return;
-
-      if (change != "blur") {
-        // Format, but keep the correct cursor position
-        let preCursorText = this.getPreCursorDigits(
-          this.input!.value,
-          this.input!.selectionStart!,
-          decimalSeparator,
-        );
-        this.input!.value = formatted;
-        this.updateCursorPosition(preCursorText);
-      } else {
-        this.input!.value = formatted;
-      }
-    }
-
-    instance.set("value", value, { immediate });
-
-    instance.setState({
-      inputError: false,
-      visited: true,
-    });
-  }
-
-  onFocus(): void {
-    let { instance } = this.props;
-    let { widget } = instance;
-    if (widget.trackFocus) {
-      this.setState({
-        focus: true,
-      });
-      instance.set("focused", true);
-    }
-  }
-
-  onBlur(e: React.FocusEvent<HTMLInputElement>): void {
-    let { instance } = this.props;
-    let { widget } = instance;
-    this.onChange(e, "blur");
-    if (widget.trackFocus && this.state.focus) {
-      this.setState({
-        focus: false,
-      });
-      instance.set("focused", false);
-    }
-  }
-}
+/** @jsxImportSource react */
+
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Field, getFieldTooltip, FieldInstance, FieldConfig } from "./Field";
+import { Format } from "../../ui/Format";
+import { Culture } from "../../ui/Culture";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { StringTemplate } from "../../data/StringTemplate";
+import {
+  tooltipParentWillReceiveProps,
+  tooltipParentWillUnmount,
+  tooltipMouseMove,
+  tooltipMouseLeave,
+  tooltipParentDidMount,
+} from "../overlay/tooltip-ops";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { Localization } from "../../ui/Localization";
+import ClearIcon from "../icons/clear";
+import { isString } from "../../util/isString";
+import { isNumber } from "../../util/isNumber";
+import { isDefined } from "../../util/isDefined";
+import { getActiveElement } from "../../util/getActiveElement";
+
+import { enableCultureSensitiveFormatting } from "../../ui/Format";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import { Prop, NumberProp, StringProp, BooleanProp } from "../../ui/Prop";
+
+enableCultureSensitiveFormatting();
+
+export interface NumberFieldConfig extends FieldConfig {
+  value?: NumberProp;
+  readOnly?: BooleanProp;
+  enabled?: BooleanProp;
+  placeholder?: StringProp;
+  format?: StringProp;
+  minValue?: NumberProp;
+  minExclusive?: BooleanProp;
+  maxValue?: NumberProp;
+  maxExclusive?: BooleanProp;
+  constrain?: BooleanProp;
+  incrementPercentage?: NumberProp;
+  increment?: NumberProp;
+  step?: number;
+  baseClass?: string;
+  snapToIncrement?: boolean;
+  showClear?: boolean;
+  hideClear?: boolean;
+  alwaysShowClear?: boolean;
+  reactOn?: string;
+  inputType?: "text" | "password";
+  maxValueErrorText?: string;
+  maxExclusiveErrorText?: string;
+  minValueErrorText?: string;
+  minExclusiveErrorText?: string;
+  inputErrorText?: string;
+  scale?: number;
+  offset?: number;
+
+  /** Custom validation function. */
+  onValidate?:
+    | string
+    | ((
+        value: number,
+        instance: Instance,
+        validationParams: Record<string, unknown>,
+      ) => unknown);
+
+  /** If `trackFocus` is set, this value will be set when the field receives or loses focus. */
+  focused?: BooleanProp;
+}
+
+export class NumberField<
+  Config extends NumberFieldConfig = NumberFieldConfig,
+> extends Field<Config> {
+  declare public baseClass: string;
+  declare public reactOn: string;
+  declare public format: string;
+  declare public inputType: string;
+  declare public incrementPercentage: number;
+  declare public increment?: number;
+  declare public scale: number;
+  declare public offset: number;
+  declare public step?: number;
+  declare public hideClear?: boolean;
+  declare public showClear?: boolean;
+  declare public alwaysShowClear?: boolean;
+  declare public snapToIncrement?: boolean;
+  declare public onParseInput?:
+    | string
+    | ((value: string, instance: Instance) => number | undefined);
+  declare public minValueErrorText: string;
+  declare public maxValueErrorText: string;
+  declare public minExclusiveErrorText: string;
+  declare public maxExclusiveErrorText: string;
+  declare public inputErrorText?: string;
+
+  declareData(...args: Record<string, unknown>[]): void {
+    super.declareData(
+      {
+        value: this.emptyValue,
+        disabled: undefined,
+        readOnly: undefined,
+        enabled: undefined,
+        placeholder: undefined,
+        required: undefined,
+        format: undefined,
+        minValue: undefined,
+        maxValue: undefined,
+        constrain: undefined,
+        minExclusive: undefined,
+        maxExclusive: undefined,
+        incrementPercentage: undefined,
+        increment: undefined,
+        icon: undefined,
+        scale: undefined,
+        offset: undefined,
+        focused: undefined,
+      },
+      ...args,
+    );
+  }
+
+  init(): void {
+    if (isDefined(this.step)) this.increment = this.step;
+
+    if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
+
+    if (this.alwaysShowClear) this.showClear = true;
+
+    super.init();
+  }
+
+  prepareData(
+    context: RenderingContext,
+    instance: FieldInstance<NumberField>,
+  ): void {
+    let { data, state, cached } = instance;
+    data.formatted = Format.value(data.value, data.format);
+
+    if (!cached.data || data.value != cached.data.value)
+      state.empty = data.value == null;
+
+    super.prepareData(context, instance);
+  }
+
+  formatValue(
+    context: RenderingContext,
+    { data }: FieldInstance<NumberField>,
+  ): string | number | undefined {
+    return data.formatted;
+  }
+
+  parseValue(value: string, instance: FieldInstance<NumberField>): number {
+    if (this.onParseInput) {
+      let result = instance.invoke("onParseInput", value, instance);
+      if (result !== undefined) return result;
+    }
+    return Culture.getNumberCulture().parse(value);
+  }
+
+  validate(
+    context: RenderingContext,
+    instance: FieldInstance<NumberField>,
+  ): void {
+    super.validate(context, instance);
+
+    let { data } = instance;
+    if (isNumber(data.value) && !data.error) {
+      if (isNumber(data.minValue)) {
+        if (data.value < data.minValue)
+          data.error = StringTemplate.format(
+            this.minValueErrorText,
+            Format.value(data.minValue, data.format),
+          );
+        else if (data.value == data.minValue && data.minExclusive)
+          data.error = StringTemplate.format(
+            this.minExclusiveErrorText,
+            Format.value(data.minValue, data.format),
+          );
+      }
+
+      if (isNumber(data.maxValue)) {
+        if (data.value > data.maxValue)
+          data.error = StringTemplate.format(
+            this.maxValueErrorText,
+            Format.value(data.maxValue, data.format),
+          );
+        else if (data.value == data.maxValue && data.maxExclusive)
+          data.error = StringTemplate.format(
+            this.maxExclusiveErrorText,
+            Format.value(data.maxValue, data.format),
+          );
+      }
+    }
+  }
+
+  renderInput(
+    context: RenderingContext,
+    instance: FieldInstance<NumberField>,
+    key: string,
+  ): React.ReactNode {
+    return (
+      <Input
+        key={key}
+        data={instance.data}
+        instance={instance}
+        label={
+          this.labelPlacement &&
+          getContent(this.renderLabel(context, instance, "label"))
+        }
+        help={
+          this.helpPlacement &&
+          getContent(this.renderHelp(context, instance, "help"))
+        }
+        icon={this.renderIcon(context, instance, "icon")}
+      />
+    );
+  }
+
+  validateRequired(
+    context: RenderingContext,
+    instance: FieldInstance<NumberField>,
+  ): string | undefined {
+    return instance.state.empty && this.requiredText;
+  }
+}
+
+NumberField.prototype.baseClass = "numberfield";
+NumberField.prototype.reactOn = "enter blur";
+NumberField.prototype.format = "n";
+NumberField.prototype.inputType = "text";
+
+NumberField.prototype.maxValueErrorText = "Enter {0} or less.";
+NumberField.prototype.maxExclusiveErrorText = "Enter a number less than {0}.";
+NumberField.prototype.minValueErrorText = "Enter {0} or more.";
+NumberField.prototype.minExclusiveErrorText =
+  "Enter a number greater than {0}.";
+NumberField.prototype.inputErrorText = "Invalid number entered.";
+NumberField.prototype.suppressErrorsUntilVisited = true;
+
+NumberField.prototype.incrementPercentage = 0.1;
+NumberField.prototype.scale = 1;
+NumberField.prototype.offset = 0;
+NumberField.prototype.snapToIncrement = true;
+NumberField.prototype.icon = null;
+NumberField.prototype.showClear = false;
+NumberField.prototype.alwaysShowClear = false;
+
+Widget.alias("numberfield", NumberField);
+Localization.registerPrototype("cx/widgets/NumberField", NumberField);
+
+interface InputProps {
+  instance: FieldInstance<NumberField>;
+  data: Record<string, any>;
+  label?: React.ReactNode;
+  help?: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+interface InputState {
+  focus: boolean;
+}
+
+class Input extends VDOM.Component<InputProps, InputState> {
+  input?: HTMLInputElement;
+  unsubscribeOnWheel?: () => void;
+
+  constructor(props: InputProps) {
+    super(props);
+    this.state = {
+      focus: false,
+    };
+  }
+
+  render(): React.ReactNode {
+    let { data, instance, label, help, icon: iconVDOM } = this.props;
+    let { widget, state } = instance;
+    let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+
+    let icon = iconVDOM && (
+      <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>
+    );
+
+    let insideButton;
+    if (!data.readOnly && !data.disabled) {
+      if (
+        widget.showClear &&
+        (((widget.alwaysShowClear || !data.required) && !data.empty) ||
+          instance.state.inputError)
+      )
+        insideButton = (
+          <div
+            className={CSS.element(baseClass, "clear")}
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={(e) => this.onClearClick(e)}
+          >
+            <ClearIcon className={CSS.element(baseClass, "icon")} />
+          </div>
+        );
+    }
+
+    let empty = this.input ? !this.input.value : data.empty;
+
+    return (
+      <div
+        className={CSS.expand(
+          data.classNames,
+          CSS.state({
+            visited: state.visited,
+            focus: this.state.focus,
+            icon: !!icon,
+            empty: empty && !data.placeholder,
+            error:
+              data.error &&
+              (state.visited || !suppressErrorsUntilVisited || !empty),
+          }),
+        )}
+        style={data.style}
+        onMouseDown={stopPropagation}
+        onTouchStart={stopPropagation}
+      >
+        <input
+          id={data.id}
+          type={widget.inputType}
+          className={CSS.expand(
+            CSS.element(baseClass, "input"),
+            data.inputClass,
+          )}
+          defaultValue={data.formatted}
+          ref={(el: HTMLInputElement | null) => {
+            this.input = el || undefined;
+          }}
+          style={data.inputStyle}
+          disabled={data.disabled}
+          readOnly={data.readOnly}
+          tabIndex={data.tabIndex}
+          placeholder={data.placeholder}
+          {...data.inputAttrs}
+          onMouseMove={(e: React.MouseEvent<HTMLInputElement>) =>
+            tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))
+          }
+          onMouseLeave={(e: React.MouseEvent<HTMLInputElement>) =>
+            tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance))
+          }
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            this.onChange(e, "change")
+          }
+          onKeyDown={this.onKeyDown.bind(this)}
+          onBlur={(e: React.FocusEvent<HTMLInputElement>) => this.onBlur(e)}
+          onFocus={(e: React.FocusEvent<HTMLInputElement>) => this.onFocus()}
+          onClick={stopPropagation}
+        />
+        {insideButton}
+        {icon}
+        {label}
+        {help}
+      </div>
+    );
+  }
+
+  UNSAFE_componentWillReceiveProps(props: InputProps): void {
+    let { data, state } = props.instance;
+    if (this.props.data.formatted != data.formatted && !state.inputError) {
+      this.input!.value = props.data.formatted || "";
+      props.instance.setState({
+        inputError: false,
+      });
+    }
+    tooltipParentWillReceiveProps(
+      this.input!,
+      ...getFieldTooltip(props.instance),
+    );
+  }
+
+  componentDidMount(): void {
+    tooltipParentDidMount(this.input!, ...getFieldTooltip(this.props.instance));
+    autoFocus(this.input, this);
+    let { widget } = this.props.instance;
+    if (widget.reactOn.indexOf("wheel") !== -1) {
+      this.unsubscribeOnWheel = addEventListenerWithOptions(
+        this.input!,
+        "wheel",
+        (e) => {
+          this.onChange(e as unknown as React.WheelEvent<HTMLInputElement>, "wheel");
+        },
+        { passive: false },
+      );
+    }
+  }
+
+  componentDidUpdate(): void {
+    autoFocus(this.input, this);
+  }
+
+  componentWillUnmount(): void {
+    if (
+      this.input == getActiveElement() &&
+      this.input.value != this.props.data.formatted
+    ) {
+      this.onChange(
+        { currentTarget: this.input } as React.SyntheticEvent<HTMLInputElement>,
+        "blur",
+      );
+    }
+    tooltipParentWillUnmount(this.props.instance);
+    this.unsubscribeOnWheel?.();
+  }
+
+  getPreCursorDigits(
+    text: string,
+    cursor: number,
+    decimalSeparator: string,
+  ): string {
+    let res = "";
+    for (let i = 0; i < cursor; i++) {
+      if ("0" <= text[i] && text[i] <= "9") res += text[i];
+      else if (text[i] == decimalSeparator) res += ".";
+      else if (text[i] == "-") res += "-";
+    }
+    return res;
+  }
+
+  getLengthWithoutSuffix(text: string, decimalSeparator: string): number {
+    let l = text.length;
+    while (l > 0) {
+      if ("0" <= text[l - 1] && text[l - 1] <= "9") break;
+      if (text[l - 1] == decimalSeparator) break;
+      l--;
+    }
+    return l;
+  }
+
+  getDecimalSeparator(format: string): string | null {
+    let text = Format.value(0.11111111, format);
+    for (let i = text.length - 1; i >= 0; i--) {
+      if ("0" <= text[i] && text[i] <= "9") continue;
+      if (text[i] == "," || text[i] == ".") return text[i];
+      break;
+    }
+    return null;
+  }
+
+  updateCursorPosition(preCursorText: string | undefined): void {
+    if (isString(preCursorText)) {
+      let cursor = 0;
+      let preCursor = 0;
+      let text = this.input!.value || "";
+      while (preCursor < preCursorText.length && cursor < text.length) {
+        if (text[cursor] == preCursorText[preCursor]) {
+          cursor++;
+          preCursor++;
+        } else {
+          cursor++;
+        }
+      }
+      this.input!.setSelectionRange(cursor, cursor);
+    }
+  }
+
+  calculateIncrement(value: number, strength: number): number {
+    if (value == 0) return 0.1;
+    let absValue = Math.abs(value * strength);
+    let log10 = Math.floor(Math.log10(absValue) + 0.001);
+    let size = Math.pow(10, log10);
+    if (absValue / size > 4.999) return 5 * size;
+    if (absValue / size > 1.999) return 2 * size;
+    return size;
+  }
+
+  onClearClick(e: React.MouseEvent): void {
+    this.input!.value = "";
+    let { instance } = this.props;
+    instance.set("value", instance.widget.emptyValue, { immediate: true });
+  }
+
+  onKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {
+    let { instance } = this.props;
+    if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+    switch (e.keyCode) {
+      case KeyCode.enter:
+        this.onChange(e, "enter");
+        break;
+
+      case KeyCode.left:
+      case KeyCode.right:
+        e.stopPropagation();
+        break;
+    }
+  }
+
+  onChange(
+    e:
+      | React.SyntheticEvent<HTMLInputElement>
+      | React.WheelEvent<HTMLInputElement>,
+    change: string,
+  ): void {
+    let { instance, data } = this.props;
+    let { widget } = instance;
+    let inputValue = e.currentTarget.value;
+
+    if (data.required) {
+      instance.setState({
+        empty: !inputValue,
+      });
+    }
+
+    if (change == "blur" && this.state.focus) {
+      this.setState({
+        focus: false,
+      });
+    }
+
+    let immediate = change == "blur" || change == "enter";
+
+    if (
+      (widget.reactOn.indexOf(change) == -1 && !immediate) ||
+      data.disabled ||
+      data.readOnly
+    )
+      return;
+
+    if (immediate) instance.setState({ visited: true });
+
+    let value = null;
+
+    if (inputValue) {
+      let displayValue = widget.parseValue(inputValue, instance);
+      if (isNaN(displayValue)) {
+        instance.setState({
+          inputError: instance.widget.inputErrorText,
+        });
+        return;
+      }
+
+      value = displayValue * data.scale + data.offset;
+
+      if (change == "wheel") {
+        e.preventDefault();
+        let increment =
+          data.increment != null
+            ? data.increment
+            : this.calculateIncrement(value, data.incrementPercentage);
+        let deltaY = (e as React.WheelEvent<HTMLInputElement>).deltaY;
+        value = value + (deltaY < 0 ? increment : -increment);
+        if (widget.snapToIncrement) {
+          value = Math.round(value / increment) * increment;
+        }
+
+        if (data.minValue != null) {
+          if (data.minExclusive) {
+            if (value <= data.minValue) return;
+          } else {
+            value = Math.max(value, data.minValue);
+          }
+        }
+
+        if (data.maxValue != null) {
+          if (data.maxExclusive) {
+            if (value >= data.maxValue) return;
+          } else {
+            value = Math.min(value, data.maxValue);
+          }
+        }
+      }
+
+      if (data.constrain) {
+        if (data.minValue != null) {
+          if (value < data.minValue) {
+            value = data.minValue;
+          }
+        }
+
+        if (data.maxValue != null) {
+          if (value > data.maxValue) {
+            value = data.maxValue;
+          }
+        }
+      }
+
+      let fmt = data.format;
+      let decimalSeparator =
+        this.getDecimalSeparator(fmt) || Format.value(1.1, "n;1")[1];
+
+      let formatted = Format.value(value, fmt);
+      // Re-parse to avoid differences between formatted value and value in the store
+
+      value = widget.parseValue(formatted, instance) * data.scale + data.offset;
+
+      // Allow users to type numbers like 100.0003 or -0.05 without interruptions
+      // If the last typed character is zero or dot (decimal separator), skip processing it
+      let selectionEnd = this.input!.selectionEnd;
+      if (
+        change == "change" &&
+        this.input!.selectionStart == selectionEnd &&
+        selectionEnd != null &&
+        selectionEnd >=
+          this.getLengthWithoutSuffix(this.input!.value, decimalSeparator) &&
+        (inputValue[selectionEnd - 1] == decimalSeparator ||
+          (inputValue.indexOf(decimalSeparator) >= 0 &&
+            inputValue[selectionEnd - 1] == "0") ||
+          (selectionEnd == 2 && inputValue[0] === "-" && inputValue[1] === "0"))
+      )
+        return;
+
+      if (change != "blur") {
+        // Format, but keep the correct cursor position
+        let preCursorText = this.getPreCursorDigits(
+          this.input!.value,
+          this.input!.selectionStart!,
+          decimalSeparator,
+        );
+        this.input!.value = formatted;
+        this.updateCursorPosition(preCursorText);
+      } else {
+        this.input!.value = formatted;
+      }
+    }
+
+    instance.set("value", value, { immediate });
+
+    instance.setState({
+      inputError: false,
+      visited: true,
+    });
+  }
+
+  onFocus(): void {
+    let { instance } = this.props;
+    let { widget } = instance;
+    if (widget.trackFocus) {
+      this.setState({
+        focus: true,
+      });
+      instance.set("focused", true);
+    }
+  }
+
+  onBlur(e: React.FocusEvent<HTMLInputElement>): void {
+    let { instance } = this.props;
+    let { widget } = instance;
+    this.onChange(e, "blur");
+    if (widget.trackFocus && this.state.focus) {
+      this.setState({
+        focus: false,
+      });
+      instance.set("focused", false);
+    }
+  }
+}