cx 24.0.3 → 24.2.1

package/src/widgets/form/DateTimePicker.js

@@ -5,6 +5,7 @@ import { WheelComponent } from "./Wheel";
 import { oneFocusOut, offFocusOut } from "../../ui/FocusManager";
 
 import { enableCultureSensitiveFormatting } from "../../ui/Format";
+import { parseDateInvariant } from "../../util";
 enableCultureSensitiveFormatting();
 
 export class DateTimePicker extends Widget {
@@ -37,7 +38,7 @@ DateTimePicker.prototype.showSeconds = false;
 class DateTimePickerComponent extends VDOM.Component {
    constructor(props) {
       super(props);
-      let date = props.data.value ? new Date(props.data.value) : new Date();
+      let date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
       if (isNaN(date.getTime())) date = new Date();
       this.state = {
          date: date,
@@ -67,7 +68,7 @@ class DateTimePickerComponent extends VDOM.Component {
    }
 
    UNSAFE_componentWillReceiveProps(props) {
-      let date = props.data.value ? new Date(props.data.value) : new Date();
+      let date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
       if (isNaN(date.getTime())) date = new Date();
       this.setState({ date });
    }
@@ -160,7 +161,7 @@ class DateTimePickerComponent extends VDOM.Component {
                         (state) => ({
                            date: this.setDateComponent(this.state.date, "year", newIndex + 1970),
                         }),
-                        this.handleChange
+                        this.handleChange,
                      );
                   }}
                   onPipeKeyDown={(kd) => {
@@ -186,7 +187,7 @@ class DateTimePickerComponent extends VDOM.Component {
                         (state) => ({
                            date: this.setDateComponent(this.state.date, "month", newIndex),
                         }),
-                        this.handleChange
+                        this.handleChange,
                      );
                   }}
                   onPipeKeyDown={(kd) => {
@@ -214,7 +215,7 @@ class DateTimePickerComponent extends VDOM.Component {
                         (state) => ({
                            date: this.setDateComponent(this.state.date, "date", newIndex + 1),
                         }),
-                        this.handleChange
+                        this.handleChange,
                      );
                   }}
                   onPipeKeyDown={(kd) => {
@@ -240,7 +241,7 @@ class DateTimePickerComponent extends VDOM.Component {
                         (state) => ({
                            date: this.setDateComponent(this.state.date, "hours", newIndex),
                         }),
-                        this.handleChange
+                        this.handleChange,
                      );
                   }}
                   onPipeKeyDown={(kd) => {
@@ -266,7 +267,7 @@ class DateTimePickerComponent extends VDOM.Component {
                         (state) => ({
                            date: this.setDateComponent(this.state.date, "minutes", newIndex),
                         }),
-                        this.handleChange
+                        this.handleChange,
                      );
                   }}
                   onPipeKeyDown={(kd) => {
@@ -292,7 +293,7 @@ class DateTimePickerComponent extends VDOM.Component {
                         (state) => ({
                            date: this.setDateComponent(this.state.date, "seconds", newIndex),
                         }),
-                        this.handleChange
+                        this.handleChange,
                      );
                   }}
                   onPipeKeyDown={(kd) => {

package/src/widgets/form/Label.js

@@ -1,88 +1,88 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { FocusManager } from "../../ui/FocusManager";
-import { isArray } from "../../util/isArray";
-import { coalesce } from "../../util/coalesce";
-
-export class Label extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         required: undefined,
-         disabled: undefined,
-         htmlFor: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         disabled: data.disabled,
-      };
-      data._disabled = data.disabled;
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
-
-      data.disabled = data.stateMods.disabled = coalesce(
-         context.parentStrict ? context.parentDisabled : null,
-         data._disabled,
-         context.parentDisabled
-      );
-
-      data.asterisk = context.parentAsterisk || this.asterisk;
-
-      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
-         instance.markShouldUpdate(context);
-         this.prepareCSS(context, instance);
-      }
-
-      super.explore(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "asterisk":
-         case "required":
-            return false;
-      }
-      return super.isValidHtmlAttribute(attrName);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-
-      if (data.htmlFor) {
-         props.htmlFor = data.htmlFor;
-
-         if (!props.onClick)
-            props.onClick = () => {
-               //additional focus for LookupFields which are not input based
-               let el = document.getElementById(instance.data.htmlFor);
-               if (el) FocusManager.focusFirst(el);
-            };
-      }
-
-      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
-
-      if (data.required && data.asterisk) {
-         if (!isArray(props.children)) props.children = [props.children];
-         props.children.push(" ");
-         props.children.push(
-            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
-               *
-            </span>
-         );
-      }
-   }
-}
-
-Label.prototype.baseClass = "label";
-Label.prototype.tag = "label";
-Label.prototype.asterisk = false;
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { FocusManager } from "../../ui/FocusManager";
+import { isArray } from "../../util/isArray";
+import { coalesce } from "../../util/coalesce";
+
+export class Label extends HtmlElement {
+   declareData() {
+      super.declareData(...arguments, {
+         required: undefined,
+         disabled: undefined,
+         htmlFor: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         disabled: data.disabled,
+      };
+      data._disabled = data.disabled;
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      let { data } = instance;
+
+      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
+
+      data.disabled = data.stateMods.disabled = coalesce(
+         context.parentStrict ? context.parentDisabled : null,
+         data._disabled,
+         context.parentDisabled
+      );
+
+      data.asterisk = context.parentAsterisk || this.asterisk;
+
+      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
+         instance.markShouldUpdate(context);
+         this.prepareCSS(context, instance);
+      }
+
+      super.explore(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "asterisk":
+         case "required":
+            return false;
+      }
+      return super.isValidHtmlAttribute(attrName);
+   }
+
+   attachProps(context, instance, props) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+
+      if (data.htmlFor) {
+         props.htmlFor = data.htmlFor;
+
+         if (!props.onClick)
+            props.onClick = () => {
+               //additional focus for LookupFields which are not input based
+               let el = document.getElementById(instance.data.htmlFor);
+               if (el) FocusManager.focusFirst(el);
+            };
+      }
+
+      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
+
+      if (data.required && data.asterisk) {
+         if (!isArray(props.children)) props.children = [props.children];
+         props.children.push(" ");
+         props.children.push(
+            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
+               *
+            </span>
+         );
+      }
+   }
+}
+
+Label.prototype.baseClass = "label";
+Label.prototype.tag = "label";
+Label.prototype.asterisk = false;

package/src/widgets/form/LookupField.d.ts

@@ -8,7 +8,7 @@ export interface LookupBinding {
    key?: boolean;
 }
 
-interface LookupFieldProps extends FieldProps {
+interface LookupFieldProps<T = unknown> extends FieldProps {
    /** Defaults to `false`. Set to `true` to enable multiple selection. */
    multiple?: Cx.BooleanProp;
 
@@ -31,7 +31,7 @@ interface LookupFieldProps extends FieldProps {
    placeholder?: Cx.StringProp;
 
    /** A list of available options. */
-   options?: Cx.RecordsProp;
+   options?: Cx.Prop<T[]>;
 
    /**
     * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
@@ -128,10 +128,9 @@ interface LookupFieldProps extends FieldProps {
    icon?: Cx.StringProp | Cx.Record;
 
    /** Query function. */
-   onQuery?: (
-      query: string | { query: string; page: number; pageSize: number },
-      instance: Instance,
-   ) => Cx.Record[] | Promise<Cx.Record>;
+   onQuery?:
+      | string
+      | ((query: string | { query: string; page: number; pageSize: number }, instance: Instance) => T[] | Promise<T[]>);
 
    /** Set to true to sort dropdown options. */
    sort?: boolean;
@@ -165,10 +164,10 @@ interface LookupFieldProps extends FieldProps {
    filterParams?: Cx.StructuredProp;
 
    /** Callback to create a filter function for given filter params. */
-   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
+   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
 
    /** Used in multiple selection lookups in combination with records, to construct the display text out of multiple fields or when additional formatting is needed. */
-   onGetRecordDisplayText?: (record: any, instance?: Instance) => string;
+   onGetRecordDisplayText?: (record: T, instance?: Instance) => string;
 }
 
-export class LookupField extends Cx.Widget<LookupFieldProps> {}
+export class LookupField<T = unknown> extends Cx.Widget<LookupFieldProps<T>> {}

package/src/widgets/form/MonthField.js

@@ -13,7 +13,6 @@ import { stopPropagation } from "../../util/eventCallbacks";
 import { isDefined } from "../../util/isDefined";
 import { isTouchDevice } from "../../util/isTouchDevice";
 import { isTouchEvent } from "../../util/isTouchEvent";
-import { Icon } from "../Icon";
 import { autoFocus } from "../autoFocus";
 import ClearIcon from "../icons/clear";
 import DropdownIcon from "../icons/drop-down";
@@ -27,6 +26,8 @@ import {
 } from "../overlay/tooltip-ops";
 import { Field, getFieldTooltip } from "./Field";
 import { MonthPicker } from "./MonthPicker";
+import { getActiveElement } from "../../util/getActiveElement";
+import { parseDateInvariant } from "../../util";
 
 export class MonthField extends Field {
    declareData() {
@@ -92,11 +93,11 @@ export class MonthField extends Field {
       };
 
       if (!this.range && data.value) {
-         data.date = new Date(data.value);
+         data.date = parseDateInvariant(data.value);
          data.formatted = this.culture.format(data.date, formatOptions);
       } else if (this.range && data.from && data.to) {
-         data.from = new Date(data.from);
-         data.to = new Date(data.to);
+         data.from = parseDateInvariant(data.from);
+         data.to = parseDateInvariant(data.to);
          data.to.setDate(data.to.getDate() - 1);
          let fromStr = this.culture.format(data.from, formatOptions);
          let toStr = this.culture.format(data.to, formatOptions);
@@ -104,11 +105,11 @@ export class MonthField extends Field {
          else data.formatted = fromStr;
       }
 
-      if (data.refDate) data.refDate = monthStart(new Date(data.refDate));
+      if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
 
-      if (data.maxValue) data.maxValue = monthStart(new Date(data.maxValue));
+      if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
 
-      if (data.minValue) data.minValue = monthStart(new Date(data.minValue));
+      if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
 
       instance.lastDropdown = context.lastDropdown;
    }
@@ -342,8 +343,8 @@ class MonthInput extends VDOM.Component {
                readOnly={data.readOnly}
                tabIndex={data.tabIndex}
                placeholder={data.placeholder}
-               onInput={(e) => this.onChange(e, "input")}
-               onChange={(e) => this.onChange(e, "change")}
+               onInput={(e) => this.onChange(e.target.value, "input")}
+               onChange={(e) => this.onChange(e.target.value, "change")}
                onKeyDown={(e) => this.onKeyDown(e)}
                onBlur={(e) => {
                   this.onBlur(e);
@@ -397,7 +398,7 @@ class MonthInput extends VDOM.Component {
       switch (e.keyCode) {
          case KeyCode.enter:
             e.stopPropagation();
-            this.onChange(e, "enter");
+            this.onChange(e.target.value, "enter");
             break;
 
          case KeyCode.esc:
@@ -429,7 +430,7 @@ class MonthInput extends VDOM.Component {
          this.setState({
             focus: false,
          });
-      this.onChange(e, "blur");
+      this.onChange(e.target.value, "blur");
    }
 
    closeDropdown(e, callback) {
@@ -484,16 +485,19 @@ class MonthInput extends VDOM.Component {
    }
 
    componentWillUnmount() {
+      if (this.input == getActiveElement()) {
+         this.onChange(this.input.value, "blur");
+      }
       tooltipParentWillUnmount(this.props.instance);
    }
 
-   onChange(e, eventType) {
+   onChange(inputValue, eventType) {
       var { instance } = this.props;
       var { widget } = instance;
 
       if (widget.reactOn.indexOf(eventType) == -1) return;
 
-      var parts = e.target.value.split("-");
+      var parts = inputValue.split("-");
       var date1 = widget.parseDate(parts[0]);
       var date2 = widget.parseDate(parts[1]) || date1;
 

package/src/widgets/form/MonthPicker.js

@@ -26,6 +26,7 @@ import { isTouchEvent } from "../../util/isTouchEvent";
 import { getCursorPos } from "../overlay/captureMouse";
 
 import { enableCultureSensitiveFormatting } from "../../ui/Format";
+import { parseDateInvariant } from "../../util";
 enableCultureSensitiveFormatting();
 
 export class MonthPicker extends Field {
@@ -59,7 +60,7 @@ export class MonthPicker extends Field {
             maxValue: undefined,
             maxExclusive: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -72,19 +73,19 @@ export class MonthPicker extends Field {
          disabled: data.disabled,
       };
 
-      if (!this.range && data.value) data.date = monthStart(new Date(data.value));
+      if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
 
       if (this.range) {
-         if (data.from) data.from = monthStart(new Date(data.from));
+         if (data.from) data.from = monthStart(parseDateInvariant(data.from));
 
-         if (data.to) data.to = monthStart(new Date(data.to));
+         if (data.to) data.to = monthStart(parseDateInvariant(data.to));
       }
 
-      if (data.refDate) data.refDate = monthStart(new Date(data.refDate));
+      if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
 
-      if (data.maxValue) data.maxValue = monthStart(new Date(data.maxValue));
+      if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
 
-      if (data.minValue) data.minValue = monthStart(new Date(data.minValue));
+      if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
 
       super.prepareData(...arguments);
    }
@@ -272,7 +273,7 @@ export class MonthPickerComponent extends VDOM.Component {
                      cursorQuarter: (cursorQuarter + 3) % 4,
                      cursorYear: cursorQuarter == 0 ? cursorYear - 1 : cursorYear,
                   },
-                  { ensureVisible: true }
+                  { ensureVisible: true },
                );
             else if (column == "M")
                if (cursorMonth > 3) this.moveCursor(e, { cursorMonth: cursorMonth - 3 }, { ensureVisible: true });
@@ -280,7 +281,7 @@ export class MonthPickerComponent extends VDOM.Component {
                   this.moveCursor(
                      e,
                      { cursorMonth: cursorMonth + 9, cursorYear: cursorYear - 1 },
-                     { ensureVisible: true }
+                     { ensureVisible: true },
                   );
             break;
 
@@ -293,7 +294,7 @@ export class MonthPickerComponent extends VDOM.Component {
                      cursorQuarter: (cursorQuarter + 1) % 4,
                      cursorYear: cursorQuarter == 3 ? cursorYear + 1 : cursorYear,
                   },
-                  { ensureVisible: true }
+                  { ensureVisible: true },
                );
             else if (column == "M")
                if (cursorMonth < 10) this.moveCursor(e, { cursorMonth: cursorMonth + 3 }, { ensureVisible: true });
@@ -301,7 +302,7 @@ export class MonthPickerComponent extends VDOM.Component {
                   this.moveCursor(
                      e,
                      { cursorMonth: cursorMonth - 9, cursorYear: cursorYear + 1 },
-                     { ensureVisible: true }
+                     { ensureVisible: true },
                   );
             break;
 
@@ -470,7 +471,7 @@ export class MonthPickerComponent extends VDOM.Component {
                      onMouseUp={this.handleMouseUp}
                   >
                      {y}
-                  </th>
+                  </th>,
                );
 
             for (let i = 0; i < 3; i++) {
@@ -500,7 +501,7 @@ export class MonthPickerComponent extends VDOM.Component {
                      onTouchEnd={this.handleMouseUp}
                   >
                      {monthNames[m - 1].substr(0, 3)}
-                  </td>
+                  </td>,
                );
             }
             row.push(
@@ -519,7 +520,7 @@ export class MonthPickerComponent extends VDOM.Component {
                   onMouseUp={this.handleMouseUp}
                >
                   {`Q${q + 1}`}
-               </th>
+               </th>,
             );
             rows.push(row);
          }
@@ -568,7 +569,7 @@ export class MonthPickerComponent extends VDOM.Component {
       let visibleItems = ceil5(Math.ceil(this.dom.el.offsetHeight / this.state.yearHeight));
       let start = Math.max(
          startYear,
-         startYear + floor5(Math.floor(this.dom.el.scrollTop / this.state.yearHeight)) - visibleItems
+         startYear + floor5(Math.floor(this.dom.el.scrollTop / this.state.yearHeight)) - visibleItems,
       );
       if (start != this.state.start && start + bufferSize <= endYear) {
          this.setState({
@@ -606,7 +607,7 @@ export class MonthPickerComponent extends VDOM.Component {
             this.dom.el.scrollTop =
                (this.state.cursorYear - startYear + yearCount / 2) * this.state.yearHeight -
                this.dom.el.offsetHeight / 2;
-         }
+         },
       );
    }
 

package/src/widgets/form/NumberField.js

@@ -16,6 +16,7 @@ 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";
@@ -248,6 +249,9 @@ class Input extends VDOM.Component {
    }
 
    componentWillUnmount() {
+      if (this.input == getActiveElement()) {
+         this.onChange({ target: { value: this.input.value } }, "blur");
+      }
       tooltipParentWillUnmount(this.props.instance);
    }
 
@@ -409,12 +413,12 @@ class Input extends VDOM.Component {
          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
+         // 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 in character is zero or dot (decimal separator) skip processing it
+         // 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
          if (
             change == "change" &&
             this.input.selectionStart == this.input.selectionEnd &&
@@ -426,7 +430,7 @@ class Input extends VDOM.Component {
             return;
 
          if (change != "blur") {
-            //format, but keep the correct cursor position
+            // 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);

package/src/widgets/form/TextArea.js

@@ -11,6 +11,7 @@ import {
 import { stopPropagation } from "../../util/eventCallbacks";
 import { KeyCode } from "../../util/KeyCode";
 import { autoFocus } from "../autoFocus";
+import { getActiveElement } from "../../util/getActiveElement";
 
 export class TextArea extends TextField {
    declareData() {
@@ -93,10 +94,10 @@ class Input extends VDOM.Component {
                tabIndex={data.tabIndex}
                placeholder={data.placeholder}
                {...data.inputAttrs}
-               onInput={(e) => this.onChange(e, "input")}
-               onChange={(e) => this.onChange(e, "change")}
+               onInput={(e) => this.onChange(e.target.value, "input")}
+               onChange={(e) => this.onChange(e.target.value, "change")}
                onBlur={(e) => {
-                  this.onChange(e, "blur");
+                  this.onChange(e.target.value, "blur");
                }}
                onFocus={(e) => this.onFocus()}
                onClick={stopPropagation}
@@ -111,6 +112,9 @@ class Input extends VDOM.Component {
    }
 
    componentWillUnmount() {
+      if (this.input == getActiveElement()) {
+         this.onChange(this.input.value, "blur");
+      }
       tooltipParentWillUnmount(this.props.instance);
    }
 
@@ -144,7 +148,7 @@ class Input extends VDOM.Component {
       tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(instance));
    }
 
-   onChange(e, change) {
+   onChange(inputValue, change) {
       let { instance, data } = this.props;
       let { widget } = instance;
 
@@ -158,12 +162,12 @@ class Input extends VDOM.Component {
 
       if (data.required) {
          instance.setState({
-            empty: !e.target.value,
+            empty: !inputValue,
          });
       }
 
       if (instance.widget.reactOn.indexOf(change) != -1) {
-         let value = e.target.value || widget.emptyValue;
+         let value = inputValue || widget.emptyValue;
          instance.set("value", value);
       }
    }