cx 24.11.4 → 25.1.0

package/dist/ui.js

@@ -43,6 +43,7 @@ import {
 	closestParent,
 	Format as Format$1,
 	resolveMinMaxFractionDigits,
+	parseDateInvariant,
 	setGetFormatCacheCallback,
 	isNonEmptyArray,
 	debug,
@@ -1591,7 +1592,7 @@ function enableCultureSensitiveFormatting() {
 		var culture = Culture.getDateTimeCulture();
 		var formatter = culture.getFormatter(format);
 		return function (value) {
-			return formatter.format(new Date(value));
+			return formatter.format(parseDateInvariant(value));
 		};
 	});
 	Format$1.registerFactory(["time", "t"], function (fmt, format) {
@@ -1601,7 +1602,7 @@ function enableCultureSensitiveFormatting() {
 		var culture = Culture.getDateTimeCulture();
 		var formatter = culture.getFormatter(format);
 		return function (value) {
-			return formatter.format(new Date(value));
+			return formatter.format(parseDateInvariant(value));
 		};
 	});
 	Format$1.registerFactory(["datetime", "dt"], function (fmt, format) {
@@ -1611,7 +1612,7 @@ function enableCultureSensitiveFormatting() {
 		var culture = Culture.getDateTimeCulture();
 		var formatter = culture.getFormatter(format);
 		return function (value) {
-			return formatter.format(new Date(value));
+			return formatter.format(parseDateInvariant(value));
 		};
 	});
 	setGetFormatCacheCallback(function () {
@@ -3024,7 +3025,7 @@ var HoverSync = /*#__PURE__*/ (function (_PureContainer) {
 			report: function report(channel, hoverId, active) {
 				var ch = channels[channel];
 				if (!ch) return;
-				var state = active && hoverId;
+				var state = active && hoverId != null;
 				if (ch.state !== state && (ch.state === hoverId || active)) {
 					ch.state = state;
 					ch.subscribers.notify(state);

package/dist/util.js

@@ -125,6 +125,25 @@ function capitalize(str) {
 	return str.charAt(0).toUpperCase() + str.substring(1);
 }
 
+// This module addresses a common issue when handling date strings in the format "yyyy-MM-dd" usually returned by backends.
+// In time zones earlier than UTC, creating a Date object from such a string can result in the date being shifted one day earlier.
+// This happens because "yyyy-MM-dd" is interpreted as a UTC date at 00:00, and when the browser displays it in local time, it adjusts backward.
+// To resolve this, the default implementation (`defaultInvariantParseDate`) appends " 00:00" to the date string,
+// explicitly indicating local time. Custom parsing logic can also be registered dynamically using `registerInvariantParseDateImpl`
+// to accommodate other formats or requirements.
+function defaultParseDateInvariant(input) {
+	if (typeof input == "string" && input.length == 10 && input[4] == "-" && input[7] == "-")
+		return new Date(input + " 00:00");
+	return new Date(input);
+}
+var impl = defaultParseDateInvariant;
+function parseDateInvariant(input) {
+	return impl(input);
+}
+function overrideParseDateInvariant(newImpl) {
+	impl = newImpl;
+}
+
 //Culture dependent formatters are defined in the ui package.
 
 var defaultFormatter = function defaultFormatter(v) {
@@ -202,13 +221,13 @@ var formatFactory = {
 	},
 	date: function date() {
 		return function (value) {
-			var date = new Date(value);
+			var date = parseDateInvariant(value);
 			return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear();
 		};
 	},
 	time: function time() {
 		return function (value) {
-			var date = new Date(value);
+			var date = parseDateInvariant(value);
 			var h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
 			var m = date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
 			return h + ":" + m;
@@ -799,7 +818,7 @@ function sameDate(d1, d2) {
 
 //https://stackoverflow.com/questions/17415579/how-to-iso-8601-format-a-date-with-timezone-offset-in-javascript
 
-function pad(num) {
+function pad$1(num) {
 	var norm = Math.floor(Math.abs(num));
 	return (norm < 10 ? "0" : "") + norm;
 }
@@ -809,22 +828,30 @@ function encodeDateWithTimezoneOffset(date) {
 	return (
 		date.getFullYear() +
 		"-" +
-		pad(date.getMonth() + 1) +
+		pad$1(date.getMonth() + 1) +
 		"-" +
-		pad(date.getDate()) +
+		pad$1(date.getDate()) +
 		"T" +
-		pad(date.getHours()) +
+		pad$1(date.getHours()) +
 		":" +
-		pad(date.getMinutes()) +
+		pad$1(date.getMinutes()) +
 		":" +
-		pad(date.getSeconds()) +
+		pad$1(date.getSeconds()) +
 		dif +
-		pad(tzo / 60) +
+		pad$1(tzo / 60) +
 		":" +
-		pad(tzo % 60)
+		pad$1(tzo % 60)
 	);
 }
 
+function pad(num) {
+	var norm = Math.floor(Math.abs(num));
+	return (norm < 10 ? "0" : "") + norm;
+}
+function encodeDate(date) {
+	return date.getFullYear() + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate());
+}
+
 function hue2rgb(p, q, t) {
 	if (t < 0) t += 1;
 	if (t > 1) t -= 1;
@@ -1515,6 +1542,7 @@ export {
 	destroyFlag,
 	dummyCallback,
 	enableTouchEventDetection,
+	encodeDate,
 	encodeDateWithTimezoneOffset,
 	escapeSpecialRegexCharacters,
 	expandFatArrows,
@@ -1560,7 +1588,9 @@ export {
 	monthStart,
 	now,
 	onIdleCallback,
+	overrideParseDateInvariant,
 	parseColor,
+	parseDateInvariant,
 	parseHexColor,
 	parseHslColor,
 	parseRgbColor,

package/dist/widgets.js

@@ -107,6 +107,7 @@ import {
 	monthStart,
 	zeroTime,
 	sameDate,
+	parseDateInvariant,
 	dateDiff,
 	upperBoundCheck,
 	lowerBoundCheck,
@@ -8088,14 +8089,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) {
@@ -8120,7 +8121,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;
 			}
@@ -8148,7 +8149,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());
@@ -10800,14 +10801,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) {
@@ -12084,20 +12085,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) {
@@ -14026,7 +14027,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,
@@ -14053,7 +14054,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,
@@ -14577,7 +14578,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
@@ -14586,9 +14589,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);
@@ -15048,7 +15051,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":
@@ -15332,11 +15335,11 @@ var GridRowComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			widget = instance.widget;
 		var CSS = widget.CSS;
 		var move, up, keyDown, leave;
-		if (dragSource || data.hoverId) {
+		if (dragSource || data.hoverId != null) {
 			move = this.onMouseMove;
 			up = ddMouseUp;
 		}
-		if (data.hoverId) {
+		if (data.hoverId != null) {
 			leave = this.onMouseLeave;
 		}
 		if (widget.onRowClick) keyDown = this.onKeyDown;
@@ -16004,13 +16007,13 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 			onMouseDown: function onMouseDown(e) {
 				if (e.buttons != 1) return;
 				var resizeOverlayEl = document.createElement("div");
-				var headerTBody = e.target.parentElement.parentElement.parentElement;
+				var gridEl = e.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
 				var uniqueColId = e.currentTarget.dataset.uniqueColId;
-				var headerCell = findFirstChild(headerTBody, function (el) {
+
+				// if we use fixed columns, rhs resizer of the last fixed column is within regular columns header tbody
+				var headerCell = findFirstChild(gridEl, function (el) {
 					return el.tagName == "TH" && el.dataset && el.dataset.uniqueColId == uniqueColId;
 				});
-				var scrollAreaEl = headerTBody.parentElement.parentElement;
-				var gridEl = scrollAreaEl.parentElement;
 				var initialWidth = headerCell.offsetWidth;
 				var initialPosition = getCursorPos(e);
 				resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");

package/package.json

@@ -1,32 +1,32 @@
-{
-   "name": "cx",
-   "version": "24.11.4",
-   "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",
-   "scripts": {
-      "build": "node build/index"
-   },
-   "author": "Codaxy",
-   "license": "MIT",
-   "bugs": {
-      "url": "https://github.com/codaxy/cxjs"
-   },
-   "homepage": "https://cxjs.io",
-   "dependencies": {
-      "intl-io": "^0.4.3",
-      "route-parser": "^0.0.5"
-   },
-   "peerDependencies": {
-      "@types/react": "*",
-      "react": "*",
-      "react-dom": "*"
-   },
-   "repository": {
-      "type": "git",
-      "url": "git@github.com:codaxy/cxjs.git"
-   },
-   "devDependencies": {
-      "react-test-renderer": "^18.3.1"
-   }
-}
+{
+   "name": "cx",
+   "version": "25.1.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",
+   "scripts": {
+      "build": "node build/index"
+   },
+   "author": "Codaxy",
+   "license": "MIT",
+   "bugs": {
+      "url": "https://github.com/codaxy/cxjs"
+   },
+   "homepage": "https://cxjs.io",
+   "dependencies": {
+      "intl-io": "^0.4.3",
+      "route-parser": "^0.0.5"
+   },
+   "peerDependencies": {
+      "@types/react": "*",
+      "react": "*",
+      "react-dom": "*"
+   },
+   "repository": {
+      "type": "git",
+      "url": "git@github.com:codaxy/cxjs.git"
+   },
+   "devDependencies": {
+      "react-test-renderer": "^18.3.1"
+   }
+}