cx 24.0.2 → 24.2.0

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

@@ -1,88 +1,87 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
 
 interface MonthFieldProps extends FieldProps {
-   
    /** Selected month. This should be a Date object or a valid date string consumable by Date.parse function. */
-   value?: Cx.Prop< string | Date >,
-   
+   value?: Cx.Prop<string | Date>;
+
    /** Set to `true` to allow range select. */
-   range?: Cx.BooleanProp,
+   range?: Cx.BooleanProp;
 
-   /** 
+   /**
     * Start of the selected month range. This should be a Date object or a valid date string consumable by Date.parse function.
     * Used only if `range` is set to `true`.
     */
-   from?: Cx.Prop< string | Date >,
+   from?: Cx.Prop<string | Date>;
 
-   /** 
+   /**
     * End of the selected month range. This should be a Date object or a valid date string consumable by Date.parse function.
-    * Used only if `range` is set to `true`. 
+    * Used only if `range` is set to `true`.
     */
-   to?: Cx.Prop< string | Date >,
+   to?: Cx.Prop<string | Date>;
 
    /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp,
+   readOnly?: Cx.BooleanProp;
 
    /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp,
+   enabled?: Cx.BooleanProp;
 
    /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp,
+   placeholder?: Cx.StringProp;
 
    /** Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   minValue?: Cx.Prop< string | Date >,
+   minValue?: Cx.Prop<string | Date>;
 
    /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp,
+   minExclusive?: Cx.BooleanProp;
 
    /** Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function. */
-   maxValue?: Cx.Prop< string | Date >,
-   
+   maxValue?: Cx.Prop<string | Date>;
+
    /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp,
+   maxExclusive?: Cx.BooleanProp;
 
    /** String representing culture. Default is `en` */
-   culture?: string,
+   culture?: string;
 
-   /** 
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. 
-    * Default value is `false`. 
+   /**
+    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
+    * Default value is `false`.
     */
-   hideClear?: boolean,
+   hideClear?: boolean;
 
    /** Base CSS class to be applied on the field. Defaults to `monthfield`. */
-   baseClass?: string,
+   baseClass?: string;
 
    /** Maximum value error text. */
-   maxValueErrorText?: string,
+   maxValueErrorText?: string;
 
    /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string,
+   maxExclusiveErrorText?: string;
 
    /** Minimum value error text. */
-   minValueErrorText?: string,
+   minValueErrorText?: string;
 
    /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string,
+   minExclusiveErrorText?: string;
 
    /** Invalid input error text. */
-   inputErrorText?: string,
+   inputErrorText?: string;
 
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: string,
+   /** Name or configuration of the icon to be put on the left side of the input.  */
+   icon?: Cx.StringProp | Cx.Record;
 
-   /** 
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. 
-    * Default value is `true`. 
+   /**
+    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
+    * Default value is `true`.
     */
-   showClear?: boolean,
+   showClear?: boolean;
 
    /**
     * Set to `true` to display the clear button even if `required` is set. Default is `false`.
     */
-   alwaysShowClear?: boolean,
-   
+   alwaysShowClear?: boolean;
+
    /** The function that will be used to convert Date objects before writing data to the store.
     * Default implementation is Date.toISOString.
     * See also Culture.setDefaultDateEncoding.

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() {
@@ -63,7 +64,7 @@ export class MonthField extends Field {
             maxExclusive: undefined,
             icon: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -163,6 +164,7 @@ export class MonthField extends Field {
             }}
             label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
             help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            icon={this.renderIcon(context, instance, "icon")}
          />
       );
    }
@@ -261,7 +263,7 @@ class MonthInput extends VDOM.Component {
    }
 
    render() {
-      var { instance, label, help, data } = this.props;
+      var { instance, label, help, data, icon: iconVDOM } = this.props;
       var { widget, state } = instance;
       var { CSS, baseClass, suppressErrorsUntilVisited } = widget;
 
@@ -294,12 +296,8 @@ class MonthInput extends VDOM.Component {
             );
       }
 
-      if (data.icon) {
-         icon = (
-            <div className={CSS.element(baseClass, "left-icon")}>
-               {Icon.render(data.icon, { className: CSS.element(baseClass, "icon") })}
-            </div>
-         );
+      if (iconVDOM) {
+         icon = <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
       }
 
       var dropdown = false;
@@ -325,7 +323,7 @@ class MonthInput extends VDOM.Component {
                   icon: !!icon,
                   empty: empty && !data.placeholder,
                   error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               })
+               }),
             )}
             style={data.style}
             onMouseDown={this.onMouseDown.bind(this)}
@@ -345,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);
@@ -400,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:
@@ -432,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) {
@@ -487,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.d.ts

@@ -51,8 +51,8 @@ interface NumberFieldProps extends FieldProps {
    /** Round values to the nearest tick. Default is `true`. */
    snapToIncrement?: boolean;
 
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: string;
+   /** Name or configuration of the icon to be put on the left side of the input.  */
+   icon?: Cx.StringProp | Cx.Record;
 
    /** Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `true`. */
    showClear?: boolean;

package/src/widgets/form/NumberField.js

@@ -11,12 +11,12 @@ import {
    tooltipParentDidMount,
 } from "../overlay/tooltip-ops";
 import { stopPropagation } from "../../util/eventCallbacks";
-import { Icon } from "../Icon";
 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";
@@ -46,7 +46,7 @@ export class NumberField extends Field {
             scale: undefined,
             offset: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -110,6 +110,7 @@ export class NumberField extends Field {
             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")}
          />
       );
    }
@@ -151,15 +152,11 @@ class Input extends VDOM.Component {
    }
 
    render() {
-      let { data, instance, label, help } = this.props;
+      let { data, instance, label, help, icon: iconVDOM } = this.props;
       let { widget, state } = instance;
       let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
 
-      let icon = data.icon && (
-         <div className={CSS.element(baseClass, "left-icon")}>
-            {Icon.render(data.icon, { className: CSS.element(baseClass, "icon") })}
-         </div>
-      );
+      let icon = iconVDOM && <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
 
       let insideButton;
       if (!data.readOnly && !data.disabled) {
@@ -190,7 +187,7 @@ class Input extends VDOM.Component {
                   icon: !!icon,
                   empty: empty && !data.placeholder,
                   error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               })
+               }),
             )}
             style={data.style}
             onMouseDown={stopPropagation}
@@ -252,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);
    }
 
@@ -413,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 &&
@@ -430,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/Select.d.ts

@@ -1,73 +1,69 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
 
 interface SelectProps extends FieldProps {
-
    /** Select value. */
-   value?: Cx.Prop<number | string>,
+   value?: Cx.Prop<number | string>;
 
    /** Value when no selection is made. Default is `undefined` */
-   emptyValue?: any,
+   emptyValue?: any;
 
    /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp,
+   enabled?: Cx.BooleanProp;
 
    /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp,
-   
-   /** 
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. Default value is `false`. 
-    * Note, the `placeholder` needs to be specified for the clear button to render. 
+   placeholder?: Cx.StringProp;
+
+   /**
+    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. Default value is `false`.
+    * Note, the `placeholder` needs to be specified for the clear button to render.
     */
-   hideClear?: boolean,
-   
+   hideClear?: boolean;
+
    /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `true`. 
-    * Note, the `placeholder` needs to be specified for the clear button to render. 
+    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `true`.
+    * Note, the `placeholder` needs to be specified for the clear button to render.
     */
-   showClear?: boolean,
+   showClear?: boolean;
 
    /**
     * Set to `true` to display the clear button even if `required` is set. Default is `false`.
     */
-   alwaysShowClear?: boolean,
-   
+   alwaysShowClear?: boolean;
+
    /** Base CSS class to be applied to the element. Defaults to `select`. */
-   baseClass?: string,
+   baseClass?: string;
 
    /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean,
+   multiple?: boolean;
 
-   /** 
-    * Convert values before selection. 
-    * Useful for converting strings into numbers. Default is `true`. 
+   /**
+    * Convert values before selection.
+    * Useful for converting strings into numbers. Default is `true`.
     */
-   convertValues?: boolean,
-   
+   convertValues?: boolean;
+
    /** String value used to indicate a `null` entry */
-   nullString?: string,
-   
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: string
+   nullString?: string;
 
+   /** Name or configuration of the icon to be put on the left side of the input.  */
+   icon?: Cx.StringProp | Cx.Record;
 }
 
 export class Select extends Cx.Widget<SelectProps> {}
 
 interface OptionProps extends Cx.HtmlElementProps {
-   
    /** Value property. */
-   value?: Cx.StringProp,
+   value?: Cx.StringProp;
 
    /** Defaults to `false`. Set to `true` to disable the field. */
-   disabled?: Cx.BooleanProp,
+   disabled?: Cx.BooleanProp;
 
    /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp,
+   enabled?: Cx.BooleanProp;
 
    /** Defaults to `false`. Set to `true` to select the the option. */
-   selected?: Cx.BooleanProp,
-
+   selected?: Cx.BooleanProp;
 }
 
 export class Option extends Cx.Widget<OptionProps> {}

package/src/widgets/form/Select.js

@@ -3,7 +3,6 @@ import { HtmlElement } from "../HtmlElement";
 import { Field, getFieldTooltip } from "./Field";
 import {
    tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
    tooltipMouseMove,
    tooltipMouseLeave,
    tooltipParentDidMount,
@@ -11,7 +10,6 @@ import {
 import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
 import DropdownIcon from "../icons/drop-down";
 import ClearIcon from "../icons/clear";
-import { Icon } from "../Icon";
 import { Localization } from "../../ui/Localization";
 import { isString } from "../../util/isString";
 import { isDefined } from "../../util/isDefined";
@@ -29,7 +27,7 @@ export class Select extends Field {
             placeholder: undefined,
             icon: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -48,6 +46,7 @@ export class Select extends Field {
             select={(v) => this.select(v, 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")}
          >
             {this.renderChildren(context, instance)}
          </SelectComponent>
@@ -95,15 +94,11 @@ class SelectComponent extends VDOM.Component {
    }
 
    render() {
-      let { multiple, select, instance, label, help } = this.props;
+      let { multiple, select, instance, label, help, icon: iconVDOM } = this.props;
       let { data, widget, state } = instance;
       let { CSS, baseClass } = widget;
 
-      let icon = data.icon && (
-         <div className={CSS.element(baseClass, "left-icon")}>
-            {Icon.render(data.icon, { className: CSS.element(baseClass, "icon") })}
-         </div>
-      );
+      let icon = iconVDOM && <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
 
       let insideButton,
          readOnly = data.disabled || data.readOnly;
@@ -148,11 +143,11 @@ class SelectComponent extends VDOM.Component {
                data.classNames,
                CSS.state({
                   visited: state.visited,
-                  icon: data.icon,
+                  icon: !!iconVDOM,
                   focus: this.state.focus,
                   error: state.visited && data.error,
                   empty: data.empty && !data.placeholder,
-               })
+               }),
             )}
             style={data.style}
             onMouseDown={stopPropagation}
@@ -252,7 +247,7 @@ export class Option extends HtmlElement {
             selected: undefined,
             text: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 

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.d.ts

@@ -63,8 +63,8 @@ export interface TextFieldProps extends FieldProps {
    /** Regular expression used to validate the user's input. */
    validationRegExp?: RegExp;
 
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: Cx.StringProp;
+   /** Name or configuration of the icon to be put on the left side of the input.  */
+   icon?: Cx.StringProp | Cx.Record;
 
    /** If trackFocus is set, this value will be set when the field receives or loses focus. */
    focused?: Cx.BooleanProp;