cx 24.0.1 → 24.0.3

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

@@ -63,7 +63,7 @@ export class MonthField extends Field {
             maxExclusive: undefined,
             icon: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -163,6 +163,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 +262,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 +295,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 +322,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)}

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,7 +11,6 @@ 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";
@@ -46,7 +45,7 @@ export class NumberField extends Field {
             scale: undefined,
             offset: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -110,6 +109,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 +151,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 +186,7 @@ class Input extends VDOM.Component {
                   icon: !!icon,
                   empty: empty && !data.placeholder,
                   error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               })
+               }),
             )}
             style={data.style}
             onMouseDown={stopPropagation}

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/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;

package/src/widgets/form/TextField.js

@@ -39,7 +39,7 @@ export class TextField extends Field {
             icon: undefined,
             trim: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -51,6 +51,7 @@ export class TextField extends Field {
             data={instance.data}
             label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
             help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
+            icon={this.renderIcon(context, instance, "icon")}
          />
       );
    }
@@ -95,17 +96,17 @@ class Input extends VDOM.Component {
    }
 
    render() {
-      let { instance, data, label, help } = this.props;
+      let { instance, data, label, help, icon: iconVDOM } = this.props;
       let { widget, state } = instance;
       let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
 
-      let icon = data.icon && (
+      let icon = iconVDOM && (
          <div
             className={CSS.element(baseClass, "left-icon")}
             onMouseDown={preventDefault}
             onClick={(e) => this.onChange(e, "enter")}
          >
-            {Icon.render(data.icon, { className: CSS.element(baseClass, "icon") })}
+            {iconVDOM}
          </div>
       );
 
@@ -141,7 +142,7 @@ class Input extends VDOM.Component {
                   clear: insideButton != null,
                   empty: empty && !data.placeholder,
                   error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
-               })
+               }),
             )}
             style={data.style}
             onMouseDown={stopPropagation}

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";
@@ -385,6 +385,9 @@ interface GridProps<T = unknown> extends StyledContainerProps {
 
    /** Callback to create a function that can be used to check whether a record is draggable. */
    onCreateIsRecordDraggable?: (params: any, instance: Instance) => (record: T) => boolean;
+
+   /** Callback function to get grid component and instance references on component init. */
+   onRef?: string | ((element: any, instance: Instance) => void);
 }
 
 interface GridCellInfo {
@@ -401,4 +404,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>> { }