cx 25.6.1 → 25.6.3

package/dist/widgets.css

@@ -2519,6 +2519,11 @@ th.cxe-calendar-display {
   padding: 0 0.5em;
   color: lightgray;
 }
+.cxb-monthpicker th.cxs-unselectable {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
 .cxb-monthpicker .cxe-monthpicker-year {
   font-size: 120%;
   color: gray;

package/dist/widgets.js

@@ -1813,6 +1813,7 @@ var Sandbox = /*#__PURE__*/ (function (_PureContainer) {
 				key: data.key,
 				recordName: this.recordName,
 				immutable: this.immutable,
+				sealed: this.sealed,
 			});
 			instance.clearChildrenCache();
 		}
@@ -1822,6 +1823,7 @@ var Sandbox = /*#__PURE__*/ (function (_PureContainer) {
 })(PureContainer);
 Sandbox.prototype.recordName = "$page";
 Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
 Widget.alias("sandbox", Sandbox);
 
 var CxCredit = /*#__PURE__*/ (function (_HtmlElement) {
@@ -8161,7 +8163,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
 			widget = instance.widget;
 		e.stopPropagation();
 		if (data.disabled) return;
-		if (!validationCheck$1(date, data)) return;
+		if (!validationCheck(date, data)) return;
 		if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
 		if (widget.partial) {
 			var mixed = parseDateInvariant(data.value);
@@ -8191,7 +8193,7 @@ Calendar.prototype.todayButtonText = "Today";
 Calendar.prototype.startWithMonday = false;
 Calendar.prototype.focusable = true;
 Localization.registerPrototype("cx/widgets/Calendar", Calendar);
-var validationCheck$1 = function validationCheck(date, data, disabledDaysOfWeek) {
+var validationCheck = function validationCheck(date, data, disabledDaysOfWeek) {
 	if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive)) return false;
 	if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive)) return false;
 	if (disabledDaysOfWeek && disabledDaysOfWeek.includes(date.getDay())) return false;
@@ -8514,7 +8516,7 @@ var CalendarCmp = /*#__PURE__*/ (function (_VDOM$Component) {
 			var days = [];
 			for (var i = 0; i < 7; i++) {
 				var dayInfo = (data.dayData && data.dayData[date.toDateString()]) || empty;
-				var unselectable = !validationCheck$1(date, data, disabledDaysOfWeek);
+				var unselectable = !validationCheck(date, data, disabledDaysOfWeek);
 				var classNames = CSS.expand(
 					CSS.element(baseClass, "day", {
 						outside: month != date.getMonth(),
@@ -10811,8 +10813,8 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
 	_proto.init = function init() {
 		_Field.prototype.init.call(this);
 	};
-	_proto.prepareData = function prepareData(context, _ref) {
-		var data = _ref.data;
+	_proto.prepareData = function prepareData(context, instance) {
+		var data = instance.data;
 		data.stateMods = {
 			disabled: data.disabled,
 		};
@@ -10828,6 +10830,13 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
 		if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
 		if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
 		if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
+		if (this.onCreateIsMonthDateSelectable) {
+			instance.isMonthDateSelectable = instance.invoke(
+				"onCreateIsMonthDateSelectable",
+				data.validationParams,
+				instance,
+			);
+		}
 		_Field.prototype.prepareData.apply(this, arguments);
 	};
 	_proto.validate = function validate(context, instance) {
@@ -10864,10 +10873,12 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
 	};
 	_proto.handleSelect = function handleSelect(e, instance, date1, date2) {
 		var data = instance.data,
-			widget = instance.widget;
+			widget = instance.widget,
+			isMonthDateSelectable = instance.isMonthDateSelectable;
 		var 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;
 		if (this.range) {
 			instance.set("from", encode(date1));
@@ -10894,7 +10905,7 @@ MonthPicker.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
 MonthPicker.prototype.inclusiveTo = false;
 Localization.registerPrototype("cx/widgets/MonthPicker", MonthPicker);
 Widget.alias("month-picker", MonthPicker);
-var validationCheck = function validationCheck(date, data) {
+var dateSelectableCheck = function 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;
 	return true;
@@ -11153,11 +11164,11 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (this.props.onFocusOut) this.props.onFocusOut();
 	};
 	_proto2.getCursorDates = function getCursorDates(cursor) {
-		var _ref2 = cursor || this.state,
-			cursorMonth = _ref2.cursorMonth,
-			cursorYear = _ref2.cursorYear,
-			cursorQuarter = _ref2.cursorQuarter,
-			column = _ref2.column;
+		var _ref = cursor || this.state,
+			cursorMonth = _ref.cursorMonth,
+			cursorYear = _ref.cursorYear,
+			cursorQuarter = _ref.cursorQuarter,
+			column = _ref.column;
 		switch (column) {
 			case "M":
 				return [new Date(cursorYear, cursorMonth - 1, 1), new Date(cursorYear, cursorMonth, 1)];
@@ -11240,7 +11251,8 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var _this3 = this;
 		var instance = this.props.instance;
 		var data = instance.data,
-			widget = instance.widget;
+			widget = instance.widget,
+			isMonthDateSelectable = instance.isMonthDateSelectable;
 		var CSS = widget.CSS,
 			baseClass = widget.baseClass,
 			startYear = widget.startYear,
@@ -11279,30 +11291,50 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var monthNames = Culture.getDateTimeCulture().getMonthNames("short");
 		var showCursor = this.state.hover || this.state.focused;
 		for (var y = start; y <= end; y++) {
+			var selectableMonths = 4095;
+			// Loop through the months in a year to check if all months are unselectable
+			for (var 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
+			var unselectableYear = selectableMonths === 0;
 			var rows = [];
 			for (var q = 0; q < 4; q++) {
 				var row = [];
-				if (q == 0)
+				if (q == 0) {
 					row.push(
 						/*#__PURE__*/ jsx(
 							"th",
 							{
 								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,
 								children: y,
 							},
 							"year",
 						),
 					);
-				for (var i = 0; i < 3; i++) {
-					var m = q * 3 + i + 1;
-					var unselectable = !validationCheck(new Date(y, m - 1, 1), data);
+				}
+				for (var _i = 0; _i < 3; _i++) {
+					var m = q * 3 + _i + 1;
+					var unselectableMonth = (selectableMonths & (1 << (m - 1))) === 0;
 					var mno = y * 12 + m - 1;
 					var handle = true; //isTouchDevice(); //mno === from || mno === to - 1;
 					row.push(
@@ -11314,14 +11346,14 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 										showCursor && this.state.column == "M" && y == this.state.cursorYear && m == this.state.cursorMonth,
 									handle: handle,
 									selected: mno >= from && mno < to,
-									unselectable: 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,
 								children: monthNames[m - 1].substr(0, 3),
 							},
@@ -11329,7 +11361,16 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 						),
 					);
 				}
-				if (!hideQuarters)
+				if (!hideQuarters) {
+					var unselectableQuarter = true;
+					var _start = q * 3;
+					for (var _i2 = _start; _i2 < _start + 3; _i2++) {
+						if ((selectableMonths & (1 << _i2)) !== 0) {
+							// found a selectable month in a quarter
+							unselectableQuarter = false;
+							break;
+						}
+					}
 					row.push(
 						/*#__PURE__*/ jsx(
 							"th",
@@ -11340,16 +11381,18 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_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,
 								children: "Q" + (q + 1),
 							},
 							"q" + q,
 						),
 					);
+				}
 				rows.push(row);
 			}
 			years.push(rows);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "25.6.1",
+   "version": "25.6.3",
    "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/LineGraph.d.ts

@@ -87,6 +87,15 @@ interface LineGraphProps extends Cx.WidgetProps {
 
    /** Set to true to avoid forcing the vertical axis to accommodate y0 values. */
    hiddenBase?: boolean;
+
+   /** Set to `true` to draw smoothed lines between data points using cubic Bézier curve.
+    * When enabled, the graph uses control points calculated from neighboring values to create smooth transitions between data points. */
+   smooth?: boolean;
+
+   /** Controls the intensity of the smoothing effect applied to Bézier curves when `smooth` is enabled.
+    * Accepts a number between `0` (straight lines) and `0.4` (maximum smoothing).
+    * Values outside this range are automatically clamped. Default value is `0.05`. */
+   smoothingRatio?: number;
 }
 
 export class LineGraph extends Cx.Widget<LineGraphProps> {}

package/src/charts/LineGraph.js

@@ -27,6 +27,8 @@ export class LineGraph extends Widget {
          active: true,
          stack: undefined,
          stacked: undefined,
+         smooth: undefined,
+         smoothingRatio: undefined,
       });
    }
 
@@ -35,6 +37,11 @@ export class LineGraph extends Widget {
 
       if (data.name && !data.colorName) data.colorName = data.name;
 
+      if (data.smooth && data.smoothingRatio != null) {
+         if (data.smoothingRatio < 0) data.smoothingRatio = 0;
+         if (data.smoothingRatio > 0.4) data.smoothingRatio = 0.4;
+      }
+
       super.prepareData(context, instance);
    }
 
@@ -161,13 +168,18 @@ export class LineGraph extends Widget {
       };
 
       let line, area;
+      const r = data.smoothingRatio;
 
+      let linePath = "";
       if (data.line) {
-         let linePath = "";
          lineSpans.forEach((span) => {
             span.forEach((p, i) => {
-               linePath += i == 0 ? " M " : " L ";
-               linePath += p.x + " " + p.y;
+               linePath +=
+                  i == 0
+                     ? `M ${p.x} ${p.y}`
+                     : !data.smooth || span.length < 2
+                       ? `L ${p.x} ${p.y}`
+                       : this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r);
             });
          });
 
@@ -185,13 +197,35 @@ export class LineGraph extends Widget {
          lineSpans.forEach((span) => {
             let closePath = "";
             span.forEach((p, i) => {
-               areaPath += i == 0 ? " M " : " L ";
-               areaPath += p.x + " " + p.y;
-               if (data.area) closePath = `L ${p.x} ${p.y0} ` + closePath;
+               let segment = "";
+               if (i == 0) {
+                  segment = `M ${p.x} ${p.y}`;
+
+                  // closing point
+                  closePath =
+                     !data.smooth || span.length < 2
+                        ? `L ${p.x} ${p.y0}`
+                        : this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0");
+               } else {
+                  if (!data.smooth) {
+                     segment = `L ${p.x} ${p.y}`;
+                     closePath = `L ${p.x} ${p.y0}` + closePath;
+                  } else {
+                     segment = this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r, "y");
+
+                     // closing point
+                     if (i < span.length - 1)
+                        closePath = this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0") + closePath;
+                  }
+               }
+               areaPath += segment;
             });
+
+            areaPath += `L ${span[span.length - 1].x} ${span[span.length - 1].y0}`;
             areaPath += closePath;
-            areaPath += `L ${span[0].x} ${span[0].y}`;
+            areaPath += "Z";
          });
+
          area = (
             <path
                className={this.CSS.element(this.baseClass, "area", stateMods)}
@@ -208,6 +242,39 @@ export class LineGraph extends Widget {
          </g>
       );
    }
+
+   getCurvedPathSegment(p, points, i1, i2, j1, j2, r, yField = "y") {
+      const [sx, sy] = this.getControlPoint({ cp: points[i1], pp: points[i2], r, np: p, yField });
+      const [ex, ey] = this.getControlPoint({ cp: p, pp: points[j1], np: points[j2], r, reverse: true, yField });
+
+      return `C ${sx} ${sy}, ${ex} ${ey}, ${p.x} ${p[yField]}`;
+   }
+
+   getControlPoint({ cp, pp, np, r, reverse, yField = "y" }) {
+      // When 'current' is the first or last point of the array 'previous' or 'next' don't exist. Replace with 'current'.
+      const p = pp || cp;
+      const n = np || cp;
+
+      // Properties of the opposed-line
+      let { angle, length } = this.getLineInfo(p.x, p[yField], n.x, n[yField]);
+      // If it is end-control-point, add PI to the angle to go backward
+      angle = angle + (reverse ? Math.PI : 0);
+      length = length * r;
+      // The control point position is relative to the current point
+      const x = cp.x + Math.cos(angle) * length;
+      const y = cp[yField] + Math.sin(angle) * length;
+      return [x, y];
+   }
+
+   getLineInfo(p1x, p1y, p2x, p2y) {
+      const lengthX = p2x - p1x;
+      const lengthY = p2y - p1y;
+
+      return {
+         length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+         angle: Math.atan2(lengthY, lengthX),
+      };
+   }
 }
 
 LineGraph.prototype.xAxis = "x";
@@ -227,4 +294,7 @@ LineGraph.prototype.legendShape = "rect";
 LineGraph.prototype.stack = "stack";
 LineGraph.prototype.hiddenBase = false;
 
+LineGraph.prototype.smooth = false;
+LineGraph.prototype.smoothingRatio = 0.05;
+
 Widget.alias("line-graph", LineGraph);

package/src/data/ExposedValueView.d.ts

@@ -1,19 +1,19 @@
-import {View, ViewConfig} from './View';
-
-import { Binding } from './Binding';
-
-interface ExposedValueViewConfig extends ViewConfig {
-   containerBinding: Binding;
-   recordName?: string;
-   immutable?: boolean;
-}
-
-export class ExposedValueView extends View {
-   constructor(config?: ExposedValueViewConfig);
-
-   setKey(key: string);
-
-   getKey(): string;
-
-   setStore(store: View);
-}
+import { View, ViewConfig } from "./View";
+
+import { Binding } from "./Binding";
+
+interface ExposedValueViewConfig extends ViewConfig {
+   containerBinding: Binding;
+   recordName?: string;
+   immutable?: boolean;
+}
+
+export class ExposedValueView extends View {
+   constructor(config?: ExposedValueViewConfig);
+
+   setKey(key: string);
+
+   getKey(): string;
+
+   setStore(store: View);
+}

package/src/widgets/Sandbox.d.ts

@@ -1,16 +1,18 @@
-import * as Cx from "../core";
-
-interface SandboxProps extends Cx.PureContainerProps {
-   storage: Cx.Prop<Cx.Record>;
-
-   /* Cx.StringProp doesn't work for unknown reason */
-   key?: any;
-
-   accessKey?: Cx.StringProp;
-
-   recordName?: Cx.RecordAlias;
-   recordAlias?: Cx.RecordAlias;
-   immutable?: Cx.BooleanProp;
-}
-
-export class Sandbox extends Cx.Widget<SandboxProps> {}
+import * as Cx from "../core";
+
+interface SandboxProps extends Cx.PureContainerProps {
+   storage: Cx.Prop<Cx.Record>;
+
+   /* Cx.StringProp doesn't work for unknown reason */
+   key?: any;
+
+   accessKey?: Cx.StringProp;
+
+   recordName?: Cx.RecordAlias;
+   recordAlias?: Cx.RecordAlias;
+
+   immutable?: boolean;
+   sealed?: boolean;
+}
+
+export class Sandbox extends Cx.Widget<SandboxProps> {}

package/src/widgets/Sandbox.js

@@ -1,63 +1,65 @@
-import { Widget } from "../ui/Widget";
-import { PureContainer } from "../ui/PureContainer";
-import { Binding } from "../data/Binding";
-import { ExposedValueView } from "../data/ExposedValueView";
-
-export class Sandbox extends PureContainer {
-   init() {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.accessKey) this.key = this.accessKey;
-
-      this.storageBinding = Binding.get(this.storage);
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.store = new ExposedValueView({
-         store: instance.parentStore,
-         containerBinding: this.storageBinding,
-         key: null,
-         recordName: this.recordName,
-         immutable: this.immutable,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance) {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            storage: undefined,
-            key: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, instance) {
-      var { store, data } = instance;
-      if (store.getKey() !== data.key) {
-         //when navigating to a page using the same widget tree as the previous page
-         //everything needs to be reinstantiated, e.g. user/1 => user/2
-         instance.store = new ExposedValueView({
-            store: store,
-            containerBinding: this.storageBinding,
-            key: data.key,
-            recordName: this.recordName,
-            immutable: this.immutable,
-         });
-         instance.clearChildrenCache();
-      }
-      super.prepareData(context, instance);
-   }
-}
-
-Sandbox.prototype.recordName = "$page";
-Sandbox.prototype.immutable = false;
-
-Widget.alias("sandbox", Sandbox);
+import { Widget } from "../ui/Widget";
+import { PureContainer } from "../ui/PureContainer";
+import { Binding } from "../data/Binding";
+import { ExposedValueView } from "../data/ExposedValueView";
+
+export class Sandbox extends PureContainer {
+   init() {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.accessKey) this.key = this.accessKey;
+
+      this.storageBinding = Binding.get(this.storage);
+
+      super.init();
+   }
+
+   initInstance(context, instance) {
+      instance.store = new ExposedValueView({
+         store: instance.parentStore,
+         containerBinding: this.storageBinding,
+         key: null,
+         recordName: this.recordName,
+         immutable: this.immutable,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance) {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            storage: undefined,
+            key: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context, instance) {
+      var { store, data } = instance;
+      if (store.getKey() !== data.key) {
+         //when navigating to a page using the same widget tree as the previous page
+         //everything needs to be reinstantiated, e.g. user/1 => user/2
+         instance.store = new ExposedValueView({
+            store: store,
+            containerBinding: this.storageBinding,
+            key: data.key,
+            recordName: this.recordName,
+            immutable: this.immutable,
+            sealed: this.sealed,
+         });
+         instance.clearChildrenCache();
+      }
+      super.prepareData(context, instance);
+   }
+}
+
+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> {}