cx 25.6.2 → 25.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "25.6.2",
+   "version": "25.7.0",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/Marker.d.ts

@@ -3,7 +3,7 @@ import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
 
 interface MarkerProps extends BoundedObjectProps {
    /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>;
+   x?: Cx.Prop<string | number | Date>;
 
    /** The `y` value binding or expression. */
    y?: Cx.Prop<string | number>;

package/src/charts/MarkerLine.d.ts

@@ -1,58 +1,56 @@
-import * as Cx from '../core';
-import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
+import * as Cx from "../core";
+import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
 
 interface MarkerLineProps extends BoundedObjectProps {
-   
    /** The `x1` value binding or expression. */
-   x1?: Cx.NumberProp,
+   x1?: Cx.Prop<number | string | Date>;
 
    /** The `y1` value binding or expression. */
-   y1?: Cx.NumberProp,
+   y1?: Cx.NumberProp;
 
    /** The `x2` value binding or expression. */
-   x2?: Cx.NumberProp,
+   x2?: Cx.Prop<number | string | Date>;
 
    /** The `y2` value binding or expression. */
-   y2?: Cx.NumberProp,
+   y2?: Cx.NumberProp;
 
    /** Used to indicate if the data should affect axis span. */
-   affectsAxes?: Cx.BooleanProp,
+   affectsAxes?: Cx.BooleanProp;
 
    /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp,
+   colorIndex?: Cx.NumberProp;
 
    /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp,
+   active?: Cx.BooleanProp;
 
    /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp,
+   name?: Cx.StringProp;
 
    /** Name of the legend to be used. Default is `legend`. */
-   legend?: Cx.StringProp,
+   legend?: Cx.StringProp;
 
    /** Shared `x1` and `x2` value binding or expression. */
-   x?: Cx.NumberProp,
+   x?: Cx.Prop<number | string | Date>;
 
    /** Shared `y1` and `y2` value binding or expression. */
-   y?: Cx.NumberProp,
+   y?: Cx.NumberProp;
 
-   /** 
-    * Name of the horizontal axis. The value should match one of the horizontal axes set 
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`. 
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
     */
-   xAxis?: string,
-   
-   /** 
+   xAxis?: string;
+
+   /**
     * Name of the vertical axis. The value should match one of the vertical axes set
-    *  in the axes configuration if the parent Chart component. Default value is y. 
+    *  in the axes configuration if the parent Chart component. Default value is y.
     */
-   yAxis?: string,
-   
-   /** Base CSS class to be applied to the element. Defaults to `markerline`. */
-   baseClass?: string,
+   yAxis?: string;
 
-   legendAction?: string
+   /** Base CSS class to be applied to the element. Defaults to `markerline`. */
+   baseClass?: string;
 
+   legendAction?: string;
 }
 
-export class MarkerLine extends Cx.Widget<MarkerLineProps> {}
+export class MarkerLine extends Cx.Widget<MarkerLineProps> {}

package/src/data/ExposedValueView.d.ts

@@ -1,6 +1,6 @@
-import {View, ViewConfig} from './View';
+import { View, ViewConfig } from "./View";
 
-import { Binding } from './Binding';
+import { Binding } from "./Binding";
 
 interface ExposedValueViewConfig extends ViewConfig {
    containerBinding: Binding;

package/src/util/isFunction.d.ts

@@ -1 +1 @@
-export function isFunction(f: any): f is function;
+export function isFunction(f: any): f is Function;

package/src/widgets/Sandbox.d.ts

@@ -10,7 +10,9 @@ interface SandboxProps extends Cx.PureContainerProps {
 
    recordName?: Cx.RecordAlias;
    recordAlias?: Cx.RecordAlias;
-   immutable?: Cx.BooleanProp;
+
+   immutable?: boolean;
+   sealed?: boolean;
 }
 
 export class Sandbox extends Cx.Widget<SandboxProps> {}

package/src/widgets/Sandbox.js

@@ -50,6 +50,7 @@ export class Sandbox extends PureContainer {
             key: data.key,
             recordName: this.recordName,
             immutable: this.immutable,
+            sealed: this.sealed,
          });
          instance.clearChildrenCache();
       }
@@ -59,5 +60,6 @@ export class Sandbox extends PureContainer {
 
 Sandbox.prototype.recordName = "$page";
 Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
 
 Widget.alias("sandbox", Sandbox);

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

@@ -84,6 +84,14 @@ interface MonthPickerProps extends FieldProps {
     * When true, the quarters section will not render.
     */
    hideQuarters?: boolean;
+
+   /**
+    * Callback to create a function that determines if a date is selectable.
+    * Return `false` on factory method to disable specific month, quarter or a whole year.
+    *
+    * Note: Use the `onValidate` callback for validation purposes.
+    */
+   onCreateIsMonthDateSelectable?: (validationParams: Cx.Config, instance: Instance) => (monthDate: Date) => boolean;
 }
 
 export class MonthPicker extends Cx.Widget<MonthPickerProps> {}

package/src/widgets/form/MonthPicker.js

@@ -68,7 +68,8 @@ export class MonthPicker extends Field {
       super.init();
    }
 
-   prepareData(context, { data }) {
+   prepareData(context, instance) {
+      let { data } = instance;
       data.stateMods = {
          disabled: data.disabled,
       };
@@ -91,6 +92,14 @@ export class MonthPicker extends Field {
 
       if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
 
+      if (this.onCreateIsMonthDateSelectable) {
+         instance.isMonthDateSelectable = instance.invoke(
+            "onCreateIsMonthDateSelectable",
+            data.validationParams,
+            instance,
+         );
+      }
+
       super.prepareData(...arguments);
    }
 
@@ -129,12 +138,13 @@ export class MonthPicker extends Field {
    }
 
    handleSelect(e, instance, date1, date2) {
-      let { data, widget } = instance;
+      let { data, widget, isMonthDateSelectable } = instance;
       let encode = widget.encoding || Culture.getDefaultDateEncoding();
 
       if (data.disabled) return;
 
-      if (!validationCheck(date1, data)) return;
+      if (isMonthDateSelectable && !isMonthDateSelectable(date1)) return;
+      if (!dateSelectableCheck(date1, data)) return;
 
       if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date1, date2) === false) return;
 
@@ -167,7 +177,7 @@ Localization.registerPrototype("cx/widgets/MonthPicker", MonthPicker);
 
 Widget.alias("month-picker", MonthPicker);
 
-const validationCheck = (date, data) => {
+const dateSelectableCheck = (date, data) => {
    if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive)) return false;
 
    if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive)) return false;
@@ -429,7 +439,7 @@ export class MonthPickerComponent extends VDOM.Component {
 
    render() {
       let { instance } = this.props;
-      let { data, widget } = instance;
+      let { data, widget, isMonthDateSelectable } = instance;
       let { CSS, baseClass, startYear, endYear, hideQuarters } = widget;
 
       let years = [];
@@ -464,29 +474,48 @@ export class MonthPickerComponent extends VDOM.Component {
       let showCursor = this.state.hover || this.state.focused;
 
       for (let y = start; y <= end; y++) {
+         let selectableMonths = 0b111111111111;
+         // Loop through the months in a year to check if all months are unselectable
+         for (let i = 0; i < 12; i++) {
+            if (
+               (isMonthDateSelectable && !isMonthDateSelectable(new Date(y, i, 1))) ||
+               !dateSelectableCheck(new Date(y, i, 1), data)
+            ) {
+               // Set month as unselectable at specified bit
+               selectableMonths &= ~(1 << i);
+            }
+         }
+
+         // All bits are 0 - all months are unselectable
+         const unselectableYear = selectableMonths === 0;
+
          let rows = [];
          for (let q = 0; q < 4; q++) {
             let row = [];
-            if (q == 0)
+            if (q == 0) {
                row.push(
                   <th
                      key="year"
                      rowSpan={4}
                      data-point={`Y-${y}`}
-                     className={CSS.element(baseClass, "year", {
-                        cursor: showCursor && this.state.column == "Y" && y == this.state.cursorYear,
-                     })}
-                     onMouseEnter={this.handleMouseEnter}
-                     onMouseDown={this.handleMouseDown}
-                     onMouseUp={this.handleMouseUp}
+                     className={CSS.expand(
+                        CSS.element(baseClass, "year", {
+                           cursor: showCursor && this.state.column == "Y" && y == this.state.cursorYear,
+                        }),
+                        CSS.state({ unselectable: unselectableYear }),
+                     )}
+                     onMouseEnter={unselectableYear ? null : this.handleMouseEnter}
+                     onMouseDown={unselectableYear ? null : this.handleMouseDown}
+                     onMouseUp={unselectableYear ? null : this.handleMouseUp}
                   >
                      {y}
                   </th>,
                );
+            }
 
             for (let i = 0; i < 3; i++) {
                let m = q * 3 + i + 1;
-               let unselectable = !validationCheck(new Date(y, m - 1, 1), data);
+               const unselectableMonth = (selectableMonths & (1 << (m - 1))) === 0;
                let mno = y * 12 + m - 1;
                let handle = true; //isTouchDevice(); //mno === from || mno === to - 1;
                row.push(
@@ -500,14 +529,14 @@ export class MonthPickerComponent extends VDOM.Component {
                            m == this.state.cursorMonth,
                         handle,
                         selected: mno >= from && mno < to,
-                        unselectable,
+                        unselectable: unselectableMonth,
                      })}
                      data-point={`Y-${y}-M-${m}`}
-                     onMouseEnter={unselectable ? null : this.handleMouseEnter}
-                     onMouseDown={unselectable ? null : this.handleMouseDown}
-                     onMouseUp={unselectable ? null : this.handleMouseUp}
-                     onTouchStart={unselectable ? null : this.handleMouseDown}
-                     onTouchMove={unselectable ? null : this.handleTouchMove}
+                     onMouseEnter={unselectableMonth ? null : this.handleMouseEnter}
+                     onMouseDown={unselectableMonth ? null : this.handleMouseDown}
+                     onMouseUp={unselectableMonth ? null : this.handleMouseUp}
+                     onTouchStart={unselectableMonth ? null : this.handleMouseDown}
+                     onTouchMove={unselectableMonth ? null : this.handleTouchMove}
                      onTouchEnd={this.handleMouseUp}
                   >
                      {monthNames[m - 1].substr(0, 3)}
@@ -515,7 +544,17 @@ export class MonthPickerComponent extends VDOM.Component {
                );
             }
 
-            if (!hideQuarters)
+            if (!hideQuarters) {
+               let unselectableQuarter = true;
+               const start = q * 3;
+               for (let i = start; i < start + 3; i++) {
+                  if ((selectableMonths & (1 << i)) !== 0) {
+                     // found a selectable month in a quarter
+                     unselectableQuarter = false;
+                     break;
+                  }
+               }
+
                row.push(
                   <th
                      key={`q${q}`}
@@ -525,15 +564,18 @@ export class MonthPickerComponent extends VDOM.Component {
                            this.state.column == "Q" &&
                            y == this.state.cursorYear &&
                            q == this.state.cursorQuarter,
+                        unselectable: unselectableQuarter,
                      })}
                      data-point={`Y-${y}-Q-${q}`}
-                     onMouseEnter={this.handleMouseEnter}
-                     onMouseDown={this.handleMouseDown}
-                     onMouseUp={this.handleMouseUp}
+                     onMouseEnter={unselectableQuarter ? null : this.handleMouseEnter}
+                     onMouseDown={unselectableQuarter ? null : this.handleMouseDown}
+                     onMouseUp={unselectableQuarter ? null : this.handleMouseUp}
                   >
                      {`Q${q + 1}`}
                   </th>,
                );
+            }
+
             rows.push(row);
          }
          years.push(rows);

package/src/widgets/form/MonthPicker.scss

@@ -57,6 +57,10 @@
          color: lightgray;
       }
 
+      th.#{$state}unselectable {
+         @include cx-add-state-rules($cx-list-item, disabled);
+      }
+
       .#{$element}#{$name}-year {
          font-size: 120%;
          color: gray;

package/src/widgets/grid/Grid.js

@@ -102,6 +102,7 @@ export class Grid extends Container {
          colWidth: {},
          lockedColWidth: {},
          dimensionsVersion: 0,
+         disableDefaultSort: false
       };
       instance.v = 0;
       if (this.infinite)
@@ -182,16 +183,16 @@ export class Grid extends Container {
                   value: isDefined(c.aggregateValue)
                      ? c.aggregateValue
                      : isDefined(c.value)
-                       ? c.value
-                       : c.aggregateField
-                         ? { bind: this.recordName + "." + c.aggregateField }
-                         : null,
+                        ? c.value
+                        : c.aggregateField
+                           ? { bind: this.recordName + "." + c.aggregateField }
+                           : null,
                   weight:
                      c.weight != null
                         ? c.weight
                         : c.weightField && {
-                             bind: this.recordName + "." + c.weightField,
-                          },
+                           bind: this.recordName + "." + c.weightField,
+                        },
                   type: c.aggregate,
                };
             } else if (c.footer && !showFooter) {
@@ -295,7 +296,8 @@ export class Grid extends Container {
          data.sorters = [sorter];
       }
 
-      if (!isNonEmptyArray(data.sorters) && this.defaultSortField) {
+      let skipDefaultSorting = this.clearableSort && instance.state.disableDefaultSort;
+      if (!skipDefaultSorting && !isNonEmptyArray(data.sorters) && this.defaultSortField) {
          let sorter = {
             field: this.defaultSortField,
             direction: this.defaultSortDirection || "ASC",
@@ -553,9 +555,8 @@ export class Grid extends Container {
                let initialPosition = getCursorPos(e);
                resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
                resizeOverlayEl.style.width = `${initialWidth}px`;
-               resizeOverlayEl.style.left = `${
-                  headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
-               }px`;
+               resizeOverlayEl.style.left = `${headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
+                  }px`;
                gridEl.appendChild(resizeOverlayEl);
                captureMouse2(e, {
                   onMouseMove: (e) => {
@@ -817,7 +818,7 @@ export class Grid extends Container {
                   widget: () => <div className={CSS.element(baseClass, "col-header-drag-clone")}>{data.text}</div>,
                },
             },
-            () => {},
+            () => { },
          );
       }
    }
@@ -852,19 +853,22 @@ export class Grid extends Container {
             if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC")) direction = "DESC";
             else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC"))
                direction = "ASC";
-            else direction = null;
+            else {
+               direction = null;
+               instance.state.disableDefaultSort = true;
+            }
          }
 
          let sorters = direction
             ? [
-                 {
-                    field,
-                    direction,
-                    value,
-                    comparer,
-                    sortOptions,
-                 },
-              ]
+               {
+                  field,
+                  direction,
+                  value,
+                  comparer,
+                  sortOptions,
+               },
+            ]
             : null;
 
          if (sorters == null) field = null;
@@ -1315,8 +1319,8 @@ class GridComponent extends VDOM.Component {
                   style={
                      this.rowHeight > 0
                         ? {
-                             height: this.rowHeight + 1,
-                          }
+                           height: this.rowHeight + 1,
+                        }
                         : null
                   }
                >
@@ -2598,6 +2602,7 @@ class GridComponent extends VDOM.Component {
                instance.buffer.totalRecordCount = 0;
                instance.buffer.page = 1;
                this.prevFetchRecordsState = null;
+               this.loading = false;
             }
          }
 
@@ -2726,7 +2731,7 @@ class GridComponent extends VDOM.Component {
                            hscroll = true;
                            item =
                               item.firstChild.children[
-                                 this.state.cursorCellIndex - this.props.instance.fixedColumnCount
+                              this.state.cursorCellIndex - this.props.instance.fixedColumnCount
                               ];
                         } else {
                            let fixedItem = this.dom.fixedTable.querySelector(`tbody[data-record-key="${record.key}"]`);