cx 22.4.1 → 22.5.0

package/src/widgets/List.js

@@ -235,21 +235,23 @@ class ListComponent extends VDOM.Component {
       if (widget.autoFocus) FocusManager.focus(this.el);
 
       if (widget.onScroll) {
-         this.unsubscribeScroll = addEventListenerWithOptions(this.el, "scroll", event => {
-            instance.invoke("onScroll", event, instance);
-         }, { passive: true });
+         this.unsubscribeScroll = addEventListenerWithOptions(
+            this.el,
+            "scroll",
+            (event) => {
+               instance.invoke("onScroll", event, instance);
+            },
+            { passive: true }
+         );
       }
 
       this.componentDidUpdate();
    }
 
    UNSAFE_componentWillReceiveProps(props) {
-      if (this.state.focused && props.instance.widget.selectMode)
-         this.showCursor(true, props.items);
-      else if (this.state.cursor >= props.items.length)
-         this.moveCursor(props.items.length - 1);
-      else if (this.state.focused && this.state.cursor < 0)
-         this.moveCursor(0);
+      if (this.state.focused && props.instance.widget.selectMode) this.showCursor(true, props.items);
+      else if (this.state.cursor >= props.items.length) this.moveCursor(props.items.length - 1);
+      else if (this.state.focused && this.state.cursor < 0) this.moveCursor(0);
    }
 
    componentWillUnmount() {
@@ -268,7 +270,7 @@ class ListComponent extends VDOM.Component {
          select: true,
          selectOptions: {
             toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey
+            add: e.ctrlKey && e.shiftKey,
          },
          selectRange: e.shiftKey,
       });
@@ -284,7 +286,7 @@ class ListComponent extends VDOM.Component {
          select: true,
          selectOptions: {
             toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey
+            add: e.ctrlKey && e.shiftKey,
          },
          selectRange: e.shiftKey,
       });
@@ -388,7 +390,7 @@ class ListComponent extends VDOM.Component {
       let selectedRowSelector = `.${CSS.element(baseClass, "item")}.${CSS.state("selected")}`;
       let firstSelectedRow = this.el.querySelector(selectedRowSelector);
       if (firstSelectedRow != this.selectedEl) {
-         if (firstSelectedRow) scrollElementIntoView(firstSelectedRow);
+         if (firstSelectedRow) scrollElementIntoView(firstSelectedRow, true, false, 0, this.el);
          this.selectedEl = firstSelectedRow;
       }
    }
@@ -422,7 +424,7 @@ class ListComponent extends VDOM.Component {
                }
             });
          }
-      })
+      });
    }
 
    selectRange(from, to, options) {
@@ -515,7 +517,7 @@ class ListComponent extends VDOM.Component {
                select: true,
                selectOptions: {
                   toggle: e.ctrlKey && !e.shiftKey,
-                  add: e.ctrlKey && e.shiftKey
+                  add: e.ctrlKey && e.shiftKey,
                },
                selectRange: e.shiftKey,
             });

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

@@ -51,7 +51,10 @@ interface CalendarProps extends FieldProps {
    todayButtonText?: string;
 
    /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
-   disabledDaysOfWeek?: number[]
+   disabledDaysOfWeek?: number[];
+
+   /** Set to true to show weeks starting from Monday. */
+   startWithMonday?: boolean;
 }
 
 export class Calendar extends Cx.Widget<CalendarProps> {}

package/src/widgets/form/Calendar.js

@@ -34,15 +34,14 @@ export class Calendar extends Field {
             minExclusive: undefined,
             maxValue: undefined,
             maxExclusive: undefined,
-            focusable: undefined
+            focusable: undefined,
          },
          ...arguments
       );
    }
 
    init() {
-      if (this.unfocusable)
-         this.focusable = false;
+      if (this.unfocusable) this.focusable = false;
 
       super.init();
    }
@@ -127,18 +126,18 @@ export class Calendar extends Field {
    }
 }
 
-   Calendar.prototype.baseClass = "calendar";
-   Calendar.prototype.highlightToday = true;
-   Calendar.prototype.maxValueErrorText = "Select a date not after {0:d}.";
-   Calendar.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
-   Calendar.prototype.minValueErrorText = "Select a date not before {0:d}.";
-   Calendar.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
-   Calendar.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
-   Calendar.prototype.suppressErrorsUntilVisited = false;
-   Calendar.prototype.showTodayButton = false;
-   Calendar.prototype.todayButtonText = "Today";
-   Calendar.prototype.startWithMonday = false;
-   Calendar.prototype.focusable = true;
+Calendar.prototype.baseClass = "calendar";
+Calendar.prototype.highlightToday = true;
+Calendar.prototype.maxValueErrorText = "Select a date not after {0:d}.";
+Calendar.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
+Calendar.prototype.minValueErrorText = "Select a date not before {0:d}.";
+Calendar.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
+Calendar.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
+Calendar.prototype.suppressErrorsUntilVisited = false;
+Calendar.prototype.showTodayButton = false;
+Calendar.prototype.todayButtonText = "Today";
+Calendar.prototype.startWithMonday = false;
+Calendar.prototype.focusable = true;
 
 Localization.registerPrototype("cx/widgets/Calendar", Calendar);
 
@@ -175,13 +174,18 @@ export class CalendarCmp extends VDOM.Component {
    getPage(refDate) {
       refDate = monthStart(refDate); //make a copy
 
+      let startWithMonday = this.props.instance.widget.startWithMonday;
+
+      let startDay = startWithMonday ? 1 : 0;
       let startDate = new Date(refDate);
-      startDate.setDate(1 - startDate.getDay());
+      while (startDate.getDay() != startDay) startDate.setDate(startDate.getDate() - 1);
 
       let endDate = new Date(refDate);
       endDate.setMonth(refDate.getMonth() + 1);
       endDate.setDate(endDate.getDate() - 1);
-      endDate.setDate(endDate.getDate() + 6 - endDate.getDay());
+
+      let endDay = startWithMonday ? 0 : 6;
+      while (endDate.getDay() != endDay) endDate.setDate(endDate.getDate() + 1);
 
       return {
          refDate,
@@ -373,19 +377,15 @@ export class CalendarCmp extends VDOM.Component {
       let { data, widget } = this.props.instance;
       let { CSS, baseClass, disabledDaysOfWeek, startWithMonday } = widget;
 
-      let refDate = this.state.refDate;
+      let { refDate, startDate, endDate } = this.getPage(this.state.refDate);
 
       let month = refDate.getMonth();
       let year = refDate.getFullYear();
-
-      let startDate = new Date(year, month, 1);
-      startDate.setDate(1 - startDate.getDay() + (startWithMonday ? 1 : 0));
-
       let weeks = [];
       let date = startDate;
 
       let today = zeroTime(new Date());
-      while (date < refDate || date.getMonth() == month) {
+      while (date >= startDate && date <= endDate) {
          let days = [];
          for (let i = 0; i < 7; i++) {
             let unselectable = !validationCheck(date, data, disabledDaysOfWeek);

package/src/widgets/form/TextField.js

@@ -37,7 +37,7 @@ export class TextField extends Field {
             minLength: undefined,
             maxLength: undefined,
             icon: undefined,
-            trim: undefined
+            trim: undefined,
          },
          ...arguments
       );
@@ -269,7 +269,7 @@ class Input extends VDOM.Component {
 
          let value = text || widget.emptyValue;
          if (!instance.set("value", value, { immediate })) {
-            if (text != this.trimmed(this.input.value)) this.input.value = text;
+            if (text != this.input.value && immediate) this.input.value = text;
          } else {
             if (value) instance.setState({ visited: true });
          }
@@ -277,8 +277,7 @@ class Input extends VDOM.Component {
    }
 
    trimmed(value) {
-      if (this.props.data.trim && isString(value))
-         return value.trim();
+      if (this.props.data.trim && isString(value)) return value.trim();
       return value;
    }
 }

package/src/widgets/grid/Grid.js

@@ -907,7 +907,7 @@ export class Grid extends Widget {
       let data = store.getData();
       let skip = 0;
 
-      let { header } = instance;
+      let { header, state } = instance;
       let rowStyle = {};
 
       let lines = [];
@@ -921,7 +921,7 @@ export class Grid extends Widget {
 
             let v,
                c = ci.widget,
-               colSpan,
+               colSpan = 1,
                pad,
                cls = "",
                style = null;
@@ -934,7 +934,6 @@ export class Grid extends Widget {
                empty = false;
                cls = CSS.expand(c.footer.class(data)) || "";
                style = parseStyle(c.footer.style(data));
-
                if (c.footer.expand) {
                   colSpan = 1;
                   for (
@@ -959,6 +958,16 @@ export class Grid extends Widget {
 
             if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
 
+            // apply column width to footers too, but only if colSpan == 1,
+            //  otherwise set 1px so that the footer is not participating in the layout
+
+            let maxWidth = 1;
+            if (colSpan == 1) maxWidth = state.colWidth[c.uniqueColumnId];
+            style = {
+               ...style,
+               maxWidth,
+            };
+
             return (
                <td key={i} className={cls} colSpan={colSpan} style={style}>
                   {v}
@@ -2475,7 +2484,7 @@ class GridComponent extends VDOM.Component {
             if (!futureState.cellEdit && wasCellEditing) {
                //If cell editing is in progress, moving the cursor may cause that the cell editor is unmounted before
                //the blur event which may cause data loss for components which do not have reactOn=change set, e.g. NumberField.
-               unfocusElement();
+               unfocusElement(null, false);
                let record = this.getRecordAt(prevState.cursor);
                if ((!this.cellEditorValid || cancelEdit) && this.cellEditUndoData)
                   record.store.set(widget.recordName, this.cellEditUndoData);

package/src/widgets/grid/GridRow.js

@@ -119,7 +119,7 @@ export class GridRowComponent extends VDOM.Component {
             e.stopPropagation();
 
             //close context menu
-            unfocusElement(e.target);
+            unfocusElement(e.target, false);
          }
       }
 
@@ -134,7 +134,7 @@ export class GridRowComponent extends VDOM.Component {
          selectRange: e.shiftKey,
          selectOptions: {
             toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey
+            add: e.ctrlKey && e.shiftKey,
          },
          cellIndex: this.getCellIndex(e),
       });
@@ -190,7 +190,7 @@ export class GridRowComponent extends VDOM.Component {
          selectRange: e.shiftKey,
          selectOptions: {
             toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey
+            add: e.ctrlKey && e.shiftKey,
          },
          cellIndex: this.getCellIndex(e),
       });

package/src/widgets/nav/Link.d.ts

@@ -1,6 +1,9 @@
+import * as React from "react";
 import * as Cx from "../../core";
+import { Instance } from "../../ui/Instance";
+import { LinkButtonProps } from "./LinkButton";
 
-interface LinkProps extends Cx.HtmlElementProps {
+interface LinkProps extends LinkButtonProps {
    /** Set to `true` to disable the link. */
    disabled?: Cx.BooleanProp;
 
@@ -17,6 +20,7 @@ interface LinkProps extends Cx.HtmlElementProps {
 
    activeClass?: Cx.ClassProp;
    activeStyle?: Cx.StyleProp;
+   onClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
 }
 
 export class Link extends Cx.Widget<LinkProps> {}

package/src/widgets/nav/LinkButton.d.ts

@@ -1,7 +1,7 @@
 import * as Cx from "../../core";
 import { ButtonProps } from "../Button";
 
-interface LinkButtonProps extends ButtonProps {
+export interface LinkButtonProps extends ButtonProps {
    /** Url to the link's target location. Should start with `~/` or `#/` for pushState/hash based navigation. */
    href?: Cx.StringProp;