cx 24.6.3 → 24.6.5

package/dist/widgets.js

@@ -107,6 +107,7 @@ import {
 	monthStart,
 	zeroTime,
 	sameDate,
+	parseDateInvariant,
 	dateDiff,
 	upperBoundCheck,
 	lowerBoundCheck,
@@ -141,45 +142,41 @@ import { HtmlElement as HtmlElement$1 } from "cx/widgets";
 import { parseStyle as parseStyle$1 } from "cx/src/util/parseStyle";
 
 function _extends() {
-	_extends = Object.assign
-		? Object.assign.bind()
-		: function (target) {
-				for (var i = 1; i < arguments.length; i++) {
-					var source = arguments[i];
-					for (var key in source) {
-						if (Object.prototype.hasOwnProperty.call(source, key)) {
-							target[key] = source[key];
-						}
+	return (
+		(_extends = Object.assign
+			? Object.assign.bind()
+			: function (n) {
+					for (var e = 1; e < arguments.length; e++) {
+						var t = arguments[e];
+						for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
 					}
-				}
-				return target;
-			};
-	return _extends.apply(this, arguments);
-}
-function _inheritsLoose(subClass, superClass) {
-	subClass.prototype = Object.create(superClass.prototype);
-	subClass.prototype.constructor = subClass;
-	_setPrototypeOf(subClass, superClass);
+					return n;
+				}),
+		_extends.apply(null, arguments)
+	);
 }
-function _setPrototypeOf(o, p) {
-	_setPrototypeOf = Object.setPrototypeOf
-		? Object.setPrototypeOf.bind()
-		: function _setPrototypeOf(o, p) {
-				o.__proto__ = p;
-				return o;
-			};
-	return _setPrototypeOf(o, p);
+function _inheritsLoose(t, o) {
+	(t.prototype = Object.create(o.prototype)), (t.prototype.constructor = t), _setPrototypeOf(t, o);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-	if (source == null) return {};
-	var target = {};
-	for (var key in source) {
-		if (Object.prototype.hasOwnProperty.call(source, key)) {
-			if (excluded.indexOf(key) >= 0) continue;
-			target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+	if (null == r) return {};
+	var t = {};
+	for (var n in r)
+		if ({}.hasOwnProperty.call(r, n)) {
+			if (e.includes(n)) continue;
+			t[n] = r[n];
 		}
-	}
-	return target;
+	return t;
+}
+function _setPrototypeOf(t, e) {
+	return (
+		(_setPrototypeOf = Object.setPrototypeOf
+			? Object.setPrototypeOf.bind()
+			: function (t, e) {
+					return (t.__proto__ = e), t;
+				}),
+		_setPrototypeOf(t, e)
+	);
 }
 
 var impl$1 = false;
@@ -2267,16 +2264,16 @@ function captureMouseOrTouch2(e, _ref2) {
 				e.preventDefault();
 			});
 		};
-		var end = function end(e) {
+		var _end = function end(e) {
 			batchUpdates(function () {
 				el.removeEventListener("touchmove", move);
-				el.removeEventListener("touchend", end);
+				el.removeEventListener("touchend", _end);
 				if (onMouseUp) onMouseUp(e);
 				e.preventDefault();
 			});
 		};
 		el.addEventListener("touchmove", move);
-		el.addEventListener("touchend", end);
+		el.addEventListener("touchend", _end);
 		e.stopPropagation();
 	} else
 		captureMouse2(e, {
@@ -2717,7 +2714,7 @@ function notifyDragMove(e, captureData) {
 		}
 		if (scrollY || scrollX) {
 			if (!scrollTimer) {
-				var cb = function cb() {
+				var _cb = function cb() {
 					if (scrollY) {
 						var current = vscrollParent.scrollTop;
 						var next = Math.min(
@@ -2734,9 +2731,9 @@ function notifyDragMove(e, captureData) {
 						); //60 FPS
 						hscrollParent.scrollLeft = _next;
 					}
-					scrollTimer = requestAnimationFrame(cb);
+					scrollTimer = requestAnimationFrame(_cb);
 				};
-				scrollTimer = requestAnimationFrame(cb);
+				scrollTimer = requestAnimationFrame(_cb);
 			}
 		} else {
 			clearScrollTimer();
@@ -7096,6 +7093,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 		this.onChange(e.target.value, "blur");
 	};
 	_proto2.onClearClick = function onClearClick(e) {
+		this.input.value = ""; // prevent onChange call with old text value on blur or component unmount
 		this.props.instance.set("value", this.props.instance.widget.emptyValue, {
 			immediate: true,
 		});
@@ -7993,14 +7991,14 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
 			disabled: data.disabled,
 		};
 		if (data.value) {
-			var d = new Date(data.value);
+			var d = parseDateInvariant(data.value);
 			if (!isNaN(d.getTime())) {
 				data.date = zeroTime(d);
 			}
 		}
-		if (data.refDate) data.refDate = zeroTime(new Date(data.refDate));
-		if (data.maxValue) data.maxValue = zeroTime(new Date(data.maxValue));
-		if (data.minValue) data.minValue = zeroTime(new Date(data.minValue));
+		if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
+		if (data.maxValue) data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
+		if (data.minValue) data.minValue = zeroTime(parseDateInvariant(data.minValue));
 		_Field.prototype.prepareData.apply(this, arguments);
 	};
 	_proto.validate = function validate(context, instance) {
@@ -8025,7 +8023,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
 				if (widget.disabledDaysOfWeek.includes(data.date.getDay())) data.error = this.disabledDaysOfWeekErrorText;
 			}
 			if (data.dayData) {
-				var date = new Date(data.value);
+				var date = parseDateInvariant(data.value);
 				var info = data.dayData[date.toDateString()];
 				if (info && info.disabled) data.error = this.disabledDaysOfWeekErrorText;
 			}
@@ -8053,7 +8051,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
 		if (!validationCheck$1(date, data)) return;
 		if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
 		if (widget.partial) {
-			var mixed = new Date(data.value);
+			var mixed = parseDateInvariant(data.value);
 			if (data.value && !isNaN(mixed)) {
 				mixed.setFullYear(date.getFullYear());
 				mixed.setMonth(date.getMonth());
@@ -10705,14 +10703,14 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
 		data.stateMods = {
 			disabled: data.disabled,
 		};
-		if (!this.range && data.value) data.date = monthStart(new Date(data.value));
+		if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
 		if (this.range) {
-			if (data.from) data.from = monthStart(new Date(data.from));
-			if (data.to) data.to = monthStart(new Date(data.to));
+			if (data.from) data.from = monthStart(parseDateInvariant(data.from));
+			if (data.to) data.to = monthStart(parseDateInvariant(data.to));
 		}
-		if (data.refDate) data.refDate = monthStart(new Date(data.refDate));
-		if (data.maxValue) data.maxValue = monthStart(new Date(data.maxValue));
-		if (data.minValue) data.minValue = monthStart(new Date(data.minValue));
+		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));
 		_Field.prototype.prepareData.apply(this, arguments);
 	};
 	_proto.validate = function validate(context, instance) {
@@ -11989,20 +11987,20 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
 			month: "short",
 		};
 		if (!this.range && data.value) {
-			data.date = new Date(data.value);
+			data.date = parseDateInvariant(data.value);
 			data.formatted = this.culture.format(data.date, formatOptions);
 		} else if (this.range && data.from && data.to) {
-			data.from = new Date(data.from);
-			data.to = new Date(data.to);
+			data.from = parseDateInvariant(data.from);
+			data.to = parseDateInvariant(data.to);
 			data.to.setDate(data.to.getDate() - 1);
 			var fromStr = this.culture.format(data.from, formatOptions);
 			var toStr = this.culture.format(data.to, formatOptions);
 			if (fromStr != toStr) data.formatted = fromStr + " - " + toStr;
 			else data.formatted = fromStr;
 		}
-		if (data.refDate) data.refDate = monthStart(new Date(data.refDate));
-		if (data.maxValue) data.maxValue = monthStart(new Date(data.maxValue));
-		if (data.minValue) data.minValue = monthStart(new Date(data.minValue));
+		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));
 		instance.lastDropdown = context.lastDropdown;
 	};
 	_proto.validateRequired = function validateRequired(context, instance) {
@@ -13867,7 +13865,7 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 	_proto2.scrollTo = function scrollTo() {
 		var _this4 = this;
 		var size = this.props.size;
-		var callback = function callback() {
+		var _callback = function callback() {
 			if (!_this4.scrolling) return;
 			var x = (_this4.index * _this4.state.wheelHeight) / size;
 			var delta = Math.round(x - _this4.scrollEl.scrollTop);
@@ -13879,11 +13877,11 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			delta = Math.abs(delta) / 10;
 			if (delta < 1) delta = 1;
 			_this4.scrollEl.scrollTop += sign * delta;
-			requestAnimationFrame(callback);
+			requestAnimationFrame(_callback);
 		};
 		if (!this.scrolling) {
 			this.scrolling = true;
-			requestAnimationFrame(callback);
+			requestAnimationFrame(_callback);
 		}
 	};
 	return WheelComponent;
@@ -13931,7 +13929,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 	function DateTimePickerComponent(props) {
 		var _this;
 		_this = _VDOM$Component.call(this, props) || this;
-		var date = props.data.value ? new Date(props.data.value) : new Date();
+		var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
 		if (isNaN(date.getTime())) date = new Date();
 		_this.state = {
 			date: date,
@@ -13958,7 +13956,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 	_inheritsLoose(DateTimePickerComponent, _VDOM$Component);
 	var _proto2 = DateTimePickerComponent.prototype;
 	_proto2.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
-		var date = props.data.value ? new Date(props.data.value) : new Date();
+		var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
 		if (isNaN(date.getTime())) date = new Date();
 		this.setState({
 			date: date,
@@ -14482,7 +14480,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
 	_proto.prepareData = function prepareData(context, instance) {
 		var data = instance.data;
 		if (data.value) {
-			var date = new Date(data.value);
+			var date = parseDateInvariant(data.value);
+			//  let date = new Date(data.value);
+
 			if (isNaN(date.getTime())) data.formatted = String(data.value);
 			else {
 				// handle utc edge cases
@@ -14491,9 +14491,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
 			}
 			data.date = date;
 		} else data.formatted = "";
-		if (data.refDate) data.refDate = zeroTime(new Date(data.refDate));
-		if (data.maxValue) data.maxValue = new Date(data.maxValue);
-		if (data.minValue) data.minValue = new Date(data.minValue);
+		if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
+		if (data.maxValue) data.maxValue = parseDateInvariant(data.maxValue);
+		if (data.minValue) data.minValue = parseDateInvariant(data.minValue);
 		if (this.segment == "date") {
 			if (data.minValue) data.minValue = zeroTime(data.minValue);
 			if (data.maxValue) data.maxValue = zeroTime(data.maxValue);
@@ -14953,7 +14953,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			inputError: isNaN(date) && widget.inputErrorText,
 		});
 		if (!isNaN(date)) {
-			var mixed = new Date(baseValue);
+			var mixed = parseDateInvariant(baseValue);
 			if (date && baseValue && !isNaN(mixed) && widget.partial) {
 				switch (widget.segment) {
 					case "date":

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.6.3",
+   "version": "24.6.5",
    "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/Legend.js

@@ -1,151 +1,151 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { PureContainer } from "../ui/PureContainer";
-import { getShape } from "./shapes";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-import { withHoverSync } from "../ui/HoverSync";
-
-export class Legend extends HtmlElement {
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         vertical: this.vertical,
-      });
-      super.prepareData(context, instance);
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         shape: undefined,
-      });
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "shapeSize":
-         case "svgSize":
-         case "shape":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   explore(context, instance) {
-      if (!context.legends) context.legends = {};
-
-      instance.legends = context.legends;
-
-      context.addLegendEntry = (legendName, entry) => {
-         if (!legendName) return;
-
-         //case when all legends are scoped and new entry is added outside the scope
-         if (!context.legends) return;
-
-         let legend = context.legends[legendName];
-         if (!legend)
-            legend = context.legends[legendName] = {
-               entries: [],
-               names: {},
-            };
-
-         if (!legend.names[entry.name]) {
-            legend.entries.push(entry);
-            legend.names[entry.name] = entry;
-         }
-      };
-
-      super.explore(context, instance);
-   }
-
-   renderChildren(context, instance) {
-      const CSS = this.CSS;
-
-      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
-         list;
-
-      if (isArray(entries) && entries.length > 0) {
-         list = (
-            <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
-               {entries.map((e, i) =>
-                  withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
-                     <div
-                        key={i}
-                        className={CSS.element(this.baseClass, "entry", {
-                           "color-root": true,
-                           hover,
-                           disabled: e.disabled,
-                           selected: e.selected,
-                        })}
-                        onClick={e.onClick}
-                        onMouseMove={onMouseMove}
-                        onMouseLeave={onMouseLeave}
-                     >
-                        {this.renderShape(e, instance.data.shape)}
-                        {e.name}
-                     </div>
-                  )),
-               )}
-            </div>
-         );
-      }
-
-      return [list, super.renderChildren(context, instance)];
-   }
-
-   renderShape(entry, legendEntriesShape) {
-      const className = this.CSS.element(this.baseClass, "shape", {
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      const shape = getShape(legendEntriesShape || entry.shape || "square");
-
-      return (
-         <svg
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-               marginTop: `${-this.svgSize / 2}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
-               style: entry.style,
-               className: className,
-            })}
-         </svg>
-      );
-   }
-}
-
-Legend.prototype.name = "legend";
-Legend.prototype.baseClass = "legend";
-Legend.prototype.vertical = false;
-Legend.prototype.memoize = false;
-Legend.prototype.shapeSize = 18;
-Legend.prototype.shape = null;
-Legend.prototype.svgSize = 20;
-
-Widget.alias("legend", Legend);
-
-Legend.Scope = class extends PureContainer {
-   explore(context, instance) {
-      context.push("legends", (instance.legends = {}));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("legends");
-   }
-
-   prepare(context, instance) {
-      context.push("legends", instance.legends);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("legends");
-   }
-};
-
-export const LegendScope = Legend.Scope;
+import { Widget, VDOM } from "../ui/Widget";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { PureContainer } from "../ui/PureContainer";
+import { getShape } from "./shapes";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+import { withHoverSync } from "../ui/HoverSync";
+
+export class Legend extends HtmlElement {
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = Object.assign(data.stateMods || {}, {
+         vertical: this.vertical,
+      });
+      super.prepareData(context, instance);
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         shape: undefined,
+      });
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "shapeSize":
+         case "svgSize":
+         case "shape":
+            return false;
+
+         default:
+            return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   explore(context, instance) {
+      if (!context.legends) context.legends = {};
+
+      instance.legends = context.legends;
+
+      context.addLegendEntry = (legendName, entry) => {
+         if (!legendName) return;
+
+         //case when all legends are scoped and new entry is added outside the scope
+         if (!context.legends) return;
+
+         let legend = context.legends[legendName];
+         if (!legend)
+            legend = context.legends[legendName] = {
+               entries: [],
+               names: {},
+            };
+
+         if (!legend.names[entry.name]) {
+            legend.entries.push(entry);
+            legend.names[entry.name] = entry;
+         }
+      };
+
+      super.explore(context, instance);
+   }
+
+   renderChildren(context, instance) {
+      const CSS = this.CSS;
+
+      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
+         list;
+
+      if (isArray(entries) && entries.length > 0) {
+         list = (
+            <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
+               {entries.map((e, i) =>
+                  withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
+                     <div
+                        key={i}
+                        className={CSS.element(this.baseClass, "entry", {
+                           "color-root": true,
+                           hover,
+                           disabled: e.disabled,
+                           selected: e.selected,
+                        })}
+                        onClick={e.onClick}
+                        onMouseMove={onMouseMove}
+                        onMouseLeave={onMouseLeave}
+                     >
+                        {this.renderShape(e, instance.data.shape)}
+                        {e.name}
+                     </div>
+                  )),
+               )}
+            </div>
+         );
+      }
+
+      return [list, super.renderChildren(context, instance)];
+   }
+
+   renderShape(entry, legendEntriesShape) {
+      const className = this.CSS.element(this.baseClass, "shape", {
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      const shape = getShape(legendEntriesShape || entry.shape || "square");
+
+      return (
+         <svg
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+               marginTop: `${-this.svgSize / 2}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
+               style: entry.style,
+               className: className,
+            })}
+         </svg>
+      );
+   }
+}
+
+Legend.prototype.name = "legend";
+Legend.prototype.baseClass = "legend";
+Legend.prototype.vertical = false;
+Legend.prototype.memoize = false;
+Legend.prototype.shapeSize = 18;
+Legend.prototype.shape = null;
+Legend.prototype.svgSize = 20;
+
+Widget.alias("legend", Legend);
+
+Legend.Scope = class extends PureContainer {
+   explore(context, instance) {
+      context.push("legends", (instance.legends = {}));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      context.pop("legends");
+   }
+
+   prepare(context, instance) {
+      context.push("legends", instance.legends);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("legends");
+   }
+};
+
+export const LegendScope = Legend.Scope;