cx 24.0.3 → 24.3.0

package/src/ui/selection/PropertySelection.js

@@ -1,9 +1,7 @@
-import {Selection} from './Selection';
+import { Selection } from './Selection';
 
 export class PropertySelection extends Selection {
-
-   selectMultiple(store, records, indexes, {toggle, add} = {}) {
-
+   selectMultiple(store, records, indexes, { toggle, add } = {}) {
       if (this.toggle)
          toggle = true;
 

package/src/ui/selection/Selection.d.ts

@@ -24,4 +24,4 @@ export class Selection extends Component {
    isInstanceSelected(instance: Instance): boolean;
 }
 
-export class SimpleSelection extends Selection {}
+export class SimpleSelection extends Selection { }

package/src/widgets/form/ColorField.js

@@ -21,6 +21,7 @@ import DropdownIcon from "../icons/drop-down";
 import ClearIcon from "../icons/clear";
 import { Localization } from "../../ui/Localization";
 import { isDefined } from "../../util/isDefined";
+import { getActiveElement } from "../../util/getActiveElement";
 
 export class ColorField extends Field {
    declareData() {
@@ -219,8 +220,8 @@ class ColorInput 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")}
                onKeyDown={(e) => this.onKeyDown(e)}
                onBlur={(e) => {
                   this.onBlur(e);
@@ -274,7 +275,7 @@ class ColorInput 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:
@@ -304,7 +305,7 @@ class ColorInput extends VDOM.Component {
          this.setState({
             focus: false,
          });
-      this.onChange(e, "blur");
+      this.onChange(e.target.value, "blur");
    }
 
    closeDropdown(e, callback) {
@@ -352,6 +353,9 @@ class ColorInput extends VDOM.Component {
    }
 
    componentWillUnmount() {
+      if (this.input == getActiveElement()) {
+         this.onChange(this.input.value, "blur");
+      }
       tooltipParentWillUnmount(this.props.instance);
    }
 
@@ -365,23 +369,24 @@ class ColorInput extends VDOM.Component {
       e.preventDefault();
    }
 
-   onChange(e, eventType) {
+   onChange(inputValue, eventType) {
       let { instance, data } = this.props;
       let { widget } = instance;
 
-      if (eventType == "blur") instance.setState({ visited: true });
+      if (eventType == "blur") {
+         instance.setState({ visited: true });
+      }
 
-      let text = e.target.value;
       let isValid;
       try {
-         parseColor(text);
+         parseColor(inputValue);
          isValid = true;
       } catch (e) {
          isValid = false;
       }
 
       if (eventType == "blur" || eventType == "enter") {
-         let value = text || widget.emptyValue;
+         let value = inputValue || widget.emptyValue;
          if (isValid && value !== data.value) instance.set("value", value);
 
          instance.setState({

package/src/widgets/form/DateTimeField.js

@@ -26,6 +26,7 @@ import { stopPropagation } from "../../util/eventCallbacks";
 import { Format } from "../../util/Format";
 import { TimeList } from "./TimeList";
 import { autoFocus } from "../autoFocus";
+import { getActiveElement } from "../../util";
 
 export class DateTimeField extends Field {
    declareData() {
@@ -362,8 +363,8 @@ class DateTimeInput 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")}
                onKeyDown={(e) => this.onKeyDown(e)}
                onBlur={(e) => {
                   this.onBlur(e);
@@ -421,7 +422,7 @@ class DateTimeInput extends VDOM.Component {
 
       switch (e.keyCode) {
          case KeyCode.enter:
-            this.onChange(e, "enter");
+            this.onChange(e.target.value, "enter");
             break;
 
          case KeyCode.esc:
@@ -453,7 +454,7 @@ class DateTimeInput extends VDOM.Component {
          this.setState({
             focus: false,
          });
-      this.onChange(e, "blur");
+      this.onChange(e.target.value, "blur");
    }
 
    closeDropdown(e, callback) {
@@ -509,10 +510,13 @@ class DateTimeInput extends VDOM.Component {
    }
 
    componentWillUnmount() {
+      if (this.input == getActiveElement()) {
+         this.onChange(this.input.value, "blur");
+      }
       tooltipParentWillUnmount(this.props.instance);
    }
 
-   onChange(e, eventType) {
+   onChange(inputValue, eventType) {
       let { instance, data } = this.props;
       let { widget } = instance;
 
@@ -522,7 +526,7 @@ class DateTimeInput extends VDOM.Component {
 
       if (eventType == "enter") instance.setState({ visited: true });
 
-      this.setValue(e.target.value, data.value);
+      this.setValue(inputValue, data.value);
    }
 
    setValue(text, baseValue) {

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

@@ -27,6 +27,7 @@ import {
 } from "../overlay/tooltip-ops";
 import { Field, getFieldTooltip } from "./Field";
 import { MonthPicker } from "./MonthPicker";
+import { getActiveElement } from "../../util/getActiveElement";
 
 export class MonthField extends Field {
    declareData() {
@@ -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/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);
       }
    }

package/src/widgets/form/TextField.js

@@ -15,6 +15,7 @@ import { Localization } from "../../ui/Localization";
 import ClearIcon from "../icons/clear";
 import { autoFocus } from "../autoFocus";
 import { isString } from "../../util/isString";
+import { getActiveElement } from "../../util/getActiveElement";
 
 export class TextField extends Field {
    init() {
@@ -104,7 +105,7 @@ class Input extends VDOM.Component {
          <div
             className={CSS.element(baseClass, "left-icon")}
             onMouseDown={preventDefault}
-            onClick={(e) => this.onChange(e, "enter")}
+            onClick={(e) => this.onChange(e.target.value, "enter")}
          >
             {iconVDOM}
          </div>
@@ -164,8 +165,8 @@ class Input extends VDOM.Component {
                {...data.inputAttrs}
                onMouseMove={this.onMouseMove.bind(this)}
                onMouseLeave={this.onMouseLeave.bind(this)}
-               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={this.onKeyDown.bind(this)}
                onFocus={this.onFocus.bind(this)}
                onBlur={this.onBlur.bind(this)}
@@ -198,7 +199,7 @@ class Input extends VDOM.Component {
          });
          this.props.instance.set("focused", false);
       }
-      this.onChange(e, "blur");
+      this.onChange(e.target.value, "blur");
    }
 
    onClearClick(e) {
@@ -223,6 +224,7 @@ class Input extends VDOM.Component {
    }
 
    componentWillUnmount() {
+      if (this.input == getActiveElement()) this.onChange(this.input.value, "blur");
       tooltipParentWillUnmount(this.props.instance);
    }
 
@@ -232,7 +234,7 @@ class Input extends VDOM.Component {
 
       switch (e.keyCode) {
          case KeyCode.enter:
-            this.onChange(e, "enter");
+            this.onChange(e.target.value, "enter");
             break;
 
          case KeyCode.left:
@@ -244,13 +246,13 @@ class Input extends VDOM.Component {
 
    UNSAFE_componentWillReceiveProps(props) {
       let { data } = props;
-      //the second check is required for debouncing, sometimes the value in the store lags after the input
-      //and update may be caused by some other property, i.e. visited
+      // The second check is required for debouncing, sometimes the value in the store lags after the input
+      // and update may be caused by some other property, i.e. visited
       if (data.value != this.input.value && data.value != this.props.data.value) this.input.value = data.value || "";
       tooltipParentWillReceiveProps(this.input, ...getFieldTooltip(props.instance));
    }
 
-   onChange(e, change) {
+   onChange(textValue, change) {
       let { instance, data } = this.props;
 
       let immediate = change == "blur" || change == "enter";
@@ -262,7 +264,7 @@ class Input extends VDOM.Component {
       let { widget } = instance;
 
       if (widget.reactOn.indexOf(change) != -1) {
-         let text = this.trimmed(e.target.value);
+         let text = this.trimmed(textValue);
          if (data.maxLength != null && text.length > data.maxLength) {
             text = text.substring(0, data.maxLength);
             this.input.value = text;

package/src/widgets/form/index.js

@@ -25,5 +25,4 @@ export * from './DateTimeField';
 export * from './DateField';
 export * from './TimeField';
 export * from './Validator';
-
-
+export * from './Label';

package/src/widgets/grid/Grid.d.ts

@@ -54,11 +54,11 @@ interface GridColumnDropEvent extends DragEvent {
 
 interface GridGroupingKey {
    [key: string]:
-   | Prop<any>
-   | {
-      value: Prop<any>;
-      direction: SortDirection;
-   };
+      | Prop<any>
+      | {
+           value: Prop<any>;
+           direction: SortDirection;
+        };
 }
 
 type GridColumnAlignment = "left" | "right" | "center";
@@ -298,6 +298,9 @@ interface GridProps<T = unknown> extends StyledContainerProps {
    /** Parameters that affect filtering. */
    filterParams?: StructuredProp;
 
+   /** Callback function to be executed when a row is right-clicked.  */
+   onRowContextMenu?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
+
    /** Callback to create a filter function for given filter params. */
    onCreateFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
 
@@ -316,7 +319,7 @@ interface GridProps<T = unknown> extends StyledContainerProps {
          sortField?: string;
          sortDirection?: string;
       },
-      instance?: Instance
+      instance?: Instance,
    ) => FetchRecordsResult | Promise<FetchRecordsResult>;
 
    /** Callback function to be executed when a row is double-clicked. */
@@ -349,7 +352,7 @@ interface GridProps<T = unknown> extends StyledContainerProps {
    /** Callback to create a function that can be used to check whether a record is selectable. */
    onCreateIsRecordSelectable?: (
       params: any,
-      instance: Instance
+      instance: Instance,
    ) => (record: T, options?: { range?: boolean; toggle?: boolean }) => boolean;
 
    /** Parameters whose change will cause scroll to be reset. */
@@ -404,4 +407,4 @@ interface GridCellEditInfo<T> extends GridCellInfo {
    newData: T;
 }
 
-export class Grid<T = unknown> extends Widget<GridProps<T>> { }
+export class Grid<T = unknown> extends Widget<GridProps<T>> {}