cx 24.0.2 → 24.2.0

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() {
@@ -39,7 +40,7 @@ export class TextField extends Field {
             icon: undefined,
             trim: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -51,6 +52,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 +97,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")}
+            onClick={(e) => this.onChange(e.target.value, "enter")}
          >
-            {Icon.render(data.icon, { className: CSS.element(baseClass, "icon") })}
+            {iconVDOM}
          </div>
       );
 
@@ -141,7 +143,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}
@@ -163,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)}
@@ -197,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) {
@@ -222,6 +224,7 @@ class Input extends VDOM.Component {
    }
 
    componentWillUnmount() {
+      if (this.input == getActiveElement()) this.onChange(this.input.value, "blur");
       tooltipParentWillUnmount(this.props.instance);
    }
 
@@ -231,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:
@@ -243,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";
@@ -261,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/UploadButton.d.ts

@@ -1,34 +1,34 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface UploadButtonProps extends FieldProps {
-   /** Text description. */
-   text?: Cx.StringProp;
-
-   url?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
-   baseClass?: string;
-
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean;
-
-   method?: string;
-   uploadInProgressText?: string;
-
-   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
-   abortOnDestroy?: boolean;
-
-   /** Defines file types that are accepted for upload. */
-   accept?: Cx.StringProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
-   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-}
-
-export class UploadButton extends Cx.Widget<UploadButtonProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface UploadButtonProps extends FieldProps {
+   /** Text description. */
+   text?: Cx.StringProp;
+
+   url?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
+   baseClass?: string;
+
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: boolean;
+
+   method?: string;
+   uploadInProgressText?: string;
+
+   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
+   abortOnDestroy?: boolean;
+
+   /** Defines file types that are accepted for upload. */
+   accept?: Cx.StringProp;
+
+   /** Name of the icon to be put on the left side of the button. */
+   icon?: Cx.StringProp;
+
+   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
+   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
+   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
+   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
+}
+
+export class UploadButton extends Cx.Widget<UploadButtonProps> {}

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

@@ -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. */

package/src/widgets/overlay/Dropdown.d.ts

@@ -7,6 +7,7 @@ export interface DropdownProps extends OverlayProps {
 
    offset?: number;
    matchWidth?: boolean;
+   matchMaxWidth?: boolean;
    placementOrder?: string;
    constrain?: boolean;
    positioning?: string;