cx 26.4.4 → 26.5.1

package/dist/ui.js

@@ -15,12 +15,12 @@ import {
 	ZoomIntoPropertyView,
 	setGetExpressionCacheCallback,
 	setGetStringTemplateCacheCallback,
+	StringTemplate,
 	SubscribableView,
 	Store,
 	NestedDataView,
 	Grouper,
 	getComparer,
-	StringTemplate,
 } from "cx/data";
 export { computable, createAccessorModelProxy, createModel } from "cx/data";
 import {
@@ -53,7 +53,9 @@ import {
 	Format as Format$1,
 	resolveMinMaxFractionDigits,
 	parseDateInvariant,
+	dayBefore,
 	setGetFormatCacheCallback,
+	dateQuarter,
 	TraversalStack,
 	reverseSlice,
 	appDataFlag,
@@ -1902,6 +1904,31 @@ class ZIndexManager {
 }
 
 const Format = Format$1;
+// The `quarter` formatter renders a calendar quarter via a string-template
+// pattern with `{q}` (quarter number), `{yyyy}` and `{yy}` (year) placeholders.
+// Placeholders are case-insensitive (`{Q}`, `{YYYY}`, `{YY}` work too). It lives
+// here rather than in util/Format because it depends on StringTemplate from the
+// data layer, which util/ cannot import. It is registered eagerly since it does
+// not depend on culture settings.
+Format$1.registerFactory("quarter", (fmt, pattern, mode) => {
+	let exclusive = mode === "exclusive" || mode === "ex" || mode === "e";
+	let template = StringTemplate.get(pattern || "Q{q} {yyyy}");
+	return (value) => {
+		let date = parseDateInvariant(value);
+		if (exclusive) date = dayBefore(date);
+		let q = dateQuarter(date);
+		let yyyy = date.getFullYear();
+		let yy = String(yyyy % 100).padStart(2, "0");
+		return template({
+			q,
+			Q: q,
+			yyyy,
+			YYYY: yyyy,
+			yy,
+			YY: yy,
+		});
+	};
+});
 let cultureSensitiveFormatsRegistered = false;
 function resolveNumberFormattingFlags(flags) {
 	if (!flags) return null;
@@ -1966,6 +1993,11 @@ function enableCultureSensitiveFormatting() {
 		let formatter = culture.getFormatter(format);
 		return (value) => formatter.format(parseDateInvariant(value));
 	});
+	Format$1.registerFactory(["dayBefore", "daybefore"], (fmt, format = "yyyyMd hhmm") => {
+		let culture = Culture.getDateTimeCulture();
+		let formatter = culture.getFormatter(format);
+		return (value) => formatter.format(dayBefore(parseDateInvariant(value)));
+	});
 	setGetFormatCacheCallback(() => {
 		let cache = getCurrentCultureCache();
 		if (!cache.formatCache) cache.formatCache = {};

package/dist/util.js

@@ -156,6 +156,22 @@ function overrideParseDateInvariant(newImpl) {
 	impl = newImpl;
 }
 
+/**
+ * Returns a new `Date` representing the calendar day before the given date,
+ * keeping the same time of day. Month and year boundaries are handled
+ * automatically. The input is not mutated.
+ *
+ * Useful for displaying the exclusive end of a date range as an inclusive
+ * value, e.g. a period ending at `2021-01-01` shown as `Dec 2020`.
+ * @param date
+ * @returns {Date}
+ */
+function dayBefore(date) {
+	let result = new Date(date.getTime());
+	result.setDate(result.getDate() - 1);
+	return result;
+}
+
 const defaultFormatter = (v) => v.toString();
 let formatFactory = {
 	string: function () {
@@ -225,6 +241,10 @@ let formatFactory = {
 		let time = formatFactory.time();
 		return (value) => date(value) + " " + time(value);
 	},
+	dayBefore: function () {
+		let datetime = formatFactory.datetime();
+		return (value) => datetime(dayBefore(parseDateInvariant(value)));
+	},
 	ellipsis: function (part0, length, where) {
 		length = Number(length);
 		if (!(length > 3)) length = 10;
@@ -288,6 +308,7 @@ formatFactory.ps = formatFactory.percentageSign;
 formatFactory.d = formatFactory.date;
 formatFactory.t = formatFactory.time;
 formatFactory.dt = formatFactory.datetime;
+formatFactory.daybefore = formatFactory.dayBefore;
 formatFactory.zeropad = formatFactory.zeroPad;
 formatFactory.leftpad = formatFactory.leftPad;
 formatFactory.capitalize = formatFactory.capitalize;
@@ -715,6 +736,15 @@ function dateDiff(d1, d2) {
 	return d1.getTime() - d2.getTime();
 }
 
+/**
+ * Returns the calendar quarter (1-4) the given date falls in.
+ * @param date
+ * @returns {number}
+ */
+function dateQuarter(date) {
+	return Math.floor(date.getMonth() / 3) + 1;
+}
+
 /**
  * Zeros out time for the given Date object. E.g. for date object representing Wed Apr 19 2017 14:31:51 GMT+0200
  * returns Wed Apr 19 2017 00:00:00 GMT+0200.
@@ -1575,6 +1605,8 @@ export {
 	coalesce,
 	createComponentFactory,
 	dateDiff,
+	dateQuarter,
+	dayBefore,
 	debounce,
 	debug,
 	deprecatedFlag,

package/dist/widgets.js

@@ -6708,6 +6708,7 @@ class Field extends PureContainerBase {
 		data._readOnly = data.readOnly;
 		data._viewMode = data.mode === "view" || data.viewMode;
 		data._tabOnEnterKey = data.tabOnEnterKey;
+		data._visited = data.visited;
 		data.validationValue = this.getValidationValue(data);
 		instance.parentDisabled = context.parentDisabled;
 		instance.parentReadOnly = context.parentReadOnly;
@@ -6745,7 +6746,7 @@ class Field extends PureContainerBase {
 			data._tabOnEnterKey,
 			context.parentTabOnEnterKey,
 		);
-		data.visited = coalesce(context.parentStrict ? context.parentVisited : null, data.visited, context.parentVisited);
+		data.visited = coalesce(context.parentStrict ? context.parentVisited : null, data._visited, context.parentVisited);
 		if (!data.error && !data.disabled && !data.viewMode) this.validate(context, instance);
 		if (data.visited && !state?.visited) {
 			//feels hacky but it should be ok since we're in the middle of a new render cycle
@@ -13164,6 +13165,9 @@ class Wheel extends PureContainerBase {
 Wheel.prototype.baseClass = "wheel";
 Wheel.prototype.size = 3;
 Wheel.prototype.styled = true;
+/** A cyclic wheel renders its option list this many times, leaving scroll
+ * headroom on both sides of the centre copy. */
+const WHEEL_BUFFER_COPIES = 3;
 class WheelComponent extends VDOM.Component {
 	index;
 	wheelEl;
@@ -13185,28 +13189,34 @@ class WheelComponent extends VDOM.Component {
 	wheelRef;
 	scrollRef;
 	render() {
-		let { size, children, CSS, baseClass, active, className, style, onMouseDown } = this.props;
+		let { size, children, CSS, baseClass, active, className, style, onMouseDown, cycle } = this.props;
 		let optionClass = CSS.element(baseClass, "option");
 		let dummyClass = CSS.element(baseClass, "option", {
 			dummy: true,
 		});
+		// A cyclic wheel repeats the option list so it can scroll past either end.
+		let options = children;
+		if (cycle) {
+			options = [];
+			for (let i = 0; i < WHEEL_BUFFER_COPIES; i++) options.push(...children);
+		}
 		let tpad = [],
 			bpad = [];
 		for (let i = 0; i < (size - 1) / 2; i++) {
 			tpad.push({
 				key: -1 - i,
-				child: children[0],
+				child: options[0],
 				cls: dummyClass,
 			});
 			bpad.push({
 				key: -100 - i,
-				child: children[0],
+				child: options[0],
 				cls: dummyClass,
 			});
 		}
 		let displayedOptions = [
 			...tpad,
-			...children.map((c, i) => ({
+			...options.map((c, i) => ({
 				key: i,
 				child: c,
 				cls: optionClass,
@@ -13314,7 +13324,19 @@ class WheelComponent extends VDOM.Component {
 		if (this.props.onPipeKeyDown) this.props.onPipeKeyDown(this.onKeyDown);
 	}
 	UNSAFE_componentWillReceiveProps(props) {
-		this.index = props.index || 0;
+		let newIndex = props.index || 0;
+		// A cyclic wheel renders the option list several times, so the same value
+		// appears in several copies. Snap to the copy nearest the wheel's current
+		// position rather than the one `props.index` names — a wrap then scrolls
+		// one item into the adjacent (identical) copy with no jump, instead of
+		// animating all the way back to the centre copy.
+		if (props.cycle) {
+			let period = props.children.length;
+			let value = ((newIndex % period) + period) % period;
+			newIndex = value + period * Math.round((this.index - value) / period);
+			newIndex = Math.max(0, Math.min(period * WHEEL_BUFFER_COPIES - 1, newIndex));
+		}
+		this.index = newIndex;
 		this.scrollTo();
 	}
 	componentWillUnmount() {
@@ -13351,8 +13373,9 @@ class WheelComponent extends VDOM.Component {
 		}
 	}
 	select(newIndex) {
-		let { children } = this.props;
-		newIndex = Math.max(0, Math.min(children.length - 1, newIndex));
+		let { children, cycle } = this.props;
+		let length = children.length * (cycle ? WHEEL_BUFFER_COPIES : 1);
+		newIndex = Math.max(0, Math.min(length - 1, newIndex));
 		if (this.index !== newIndex) {
 			this.index = newIndex;
 			this.props.onChange(newIndex);
@@ -13408,6 +13431,24 @@ DateTimePicker.prototype.size = 3;
 DateTimePicker.prototype.autoFocus = false;
 DateTimePicker.prototype.segment = "datetime";
 DateTimePicker.prototype.showSeconds = false;
+// Builds the option spans for a numeric wheel — one zero-padded span per value.
+// Pass the result to a WheelComponent with `cycle` set to make it scroll
+// endlessly; centre the current value by passing `index = value + range`.
+function buildNumberWheel(range, startAt) {
+	return Array.from(
+		{
+			length: range,
+		},
+		(_, j) =>
+			jsx(
+				"span",
+				{
+					children: String(j + startAt).padStart(2, "0"),
+				},
+				j,
+			),
+	);
+}
 class DateTimePickerComponent extends VDOM.Component {
 	el;
 	keyDownPipes;
@@ -13419,6 +13460,7 @@ class DateTimePickerComponent extends VDOM.Component {
 			date: date,
 			activeWheel: null,
 		};
+		this.century = (date.getFullYear() / 100) | 0;
 		let { widget } = props.instance;
 		let pickerWidget = widget;
 		this.handleChange = this.handleChange.bind(this);
@@ -13481,56 +13523,37 @@ class DateTimePickerComponent extends VDOM.Component {
 		let date = this.state.date;
 		let culture = Culture.getDateTimeCulture();
 		let monthNames = culture.getMonthNames("short");
-		let years = [];
-		for (let y = 1970; y <= 2050; y++)
-			years.push(
-				jsx(
-					"span",
-					{
-						children: y,
-					},
-					y,
-				),
-			);
-		let days = [];
-		let start = new Date(date.getFullYear(), date.getMonth(), 1);
-		while (start.getMonth() === date.getMonth()) {
-			let day = start.getDate();
-			days.push(
-				jsx(
-					"span",
-					{
-						children: day < 10 ? "0" + day : day,
-					},
-					day,
-				),
-			);
-			start.setDate(start.getDate() + 1);
-		}
-		let hours = [];
-		for (let h = 0; h < 24; h++) {
-			hours.push(
-				jsx(
-					"span",
-					{
-						children: h < 10 ? "0" + h : h,
-					},
-					h,
-				),
-			);
-		}
-		let minutes = [];
-		for (let m = 0; m < 60; m++) {
-			minutes.push(
-				jsx(
-					"span",
-					{
-						children: m < 10 ? "0" + m : m,
-					},
-					m,
-				),
-			);
+		// Years: a window spanning the current century, rebuilt when it changes.
+		let currentCentury = (date.getFullYear() / 100) | 0;
+		if (!this.years || this.century !== currentCentury) {
+			this.century = currentCentury;
+			this.firstYear = currentCentury * 100 - 3;
+			let lastYear = (currentCentury + 1) * 100 + 5;
+			this.years = [];
+			for (let y = this.firstYear; y <= lastYear; y++)
+				this.years.push(
+					jsx(
+						"span",
+						{
+							children: y,
+						},
+						y,
+					),
+				);
 		}
+		let years = this.years;
+		// Day/hour/minute wheels use a 3x buffer (see buildNumberWheel). The day
+		// buffer depends on the month length, so it is rebuilt when that changes.
+		const numberOfDaysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+		if (!this.days || this.numberOfDaysInMonth !== numberOfDaysInMonth) {
+			this.numberOfDaysInMonth = numberOfDaysInMonth;
+			this.days = buildNumberWheel(numberOfDaysInMonth, 1);
+		}
+		let days = this.days;
+		if (!this.hours) this.hours = buildNumberWheel(24, 0);
+		let hours = this.hours;
+		if (!this.minutes) this.minutes = buildNumberWheel(60, 0);
+		let minutes = this.minutes;
 		return jsxs("div", {
 			tabIndex: 0,
 			ref: (el) => {
@@ -13542,30 +13565,34 @@ class DateTimePickerComponent extends VDOM.Component {
 			onKeyDown: this.onKeyDown,
 			children: [
 				this.wheels.year &&
-					jsx(WheelComponent, {
-						size: size,
-						CSS: CSS,
-						active: this.state.activeWheel === "year",
-						baseClass: baseClass + "-wheel",
-						index: date.getFullYear() - 1970,
-						onChange: (newIndex) => {
-							this.setState(
-								(state) => ({
-									date: this.setDateComponent(this.state.date, "year", newIndex + 1970),
-								}),
-								this.handleChange,
-							);
-						},
-						onPipeKeyDown: (kd) => {
-							this.keyDownPipes["year"] = kd;
-						},
-						onMouseDown: () => {
-							this.setState({
-								activeWheel: "year",
-							});
+					jsx(
+						WheelComponent,
+						{
+							size: size,
+							CSS: CSS,
+							active: this.state.activeWheel === "year",
+							baseClass: baseClass + "-wheel",
+							index: date.getFullYear() - this.firstYear,
+							onChange: (newIndex) => {
+								this.setState(
+									(state) => ({
+										date: this.setDateComponent(state.date, "year", newIndex + this.firstYear),
+									}),
+									this.handleChange,
+								);
+							},
+							onPipeKeyDown: (kd) => {
+								this.keyDownPipes["year"] = kd;
+							},
+							onMouseDown: () => {
+								this.setState({
+									activeWheel: "year",
+								});
+							},
+							children: years,
 						},
-						children: years,
-					}),
+						`years-${this.century}`,
+					),
 				this.wheels.year &&
 					this.wheels.month &&
 					jsx("span", {
@@ -13581,7 +13608,7 @@ class DateTimePickerComponent extends VDOM.Component {
 						onChange: (newIndex) => {
 							this.setState(
 								(state) => ({
-									date: this.setDateComponent(this.state.date, "month", newIndex),
+									date: this.setDateComponent(state.date, "month", newIndex),
 								}),
 								this.handleChange,
 							);
@@ -13610,120 +13637,144 @@ class DateTimePickerComponent extends VDOM.Component {
 						children: "-",
 					}),
 				this.wheels.date &&
-					jsx(WheelComponent, {
-						size: size,
-						CSS: CSS,
-						active: this.state.activeWheel === "date",
-						baseClass: baseClass + "-wheel",
-						index: date.getDate() - 1,
-						onChange: (newIndex) => {
-							this.setState(
-								(state) => ({
-									date: this.setDateComponent(this.state.date, "date", newIndex + 1),
-								}),
-								this.handleChange,
-							);
-						},
-						onPipeKeyDown: (kd) => {
-							this.keyDownPipes["date"] = kd;
-						},
-						onMouseDown: () => {
-							this.setState({
-								activeWheel: "date",
-							});
+					jsx(
+						WheelComponent,
+						{
+							size: size,
+							CSS: CSS,
+							cycle: true,
+							active: this.state.activeWheel === "date",
+							baseClass: baseClass + "-wheel",
+							index: date.getDate() - 1 + this.numberOfDaysInMonth,
+							onChange: (rawIndex) => {
+								let day = rawIndex % this.numberOfDaysInMonth;
+								this.setState(
+									(state) => ({
+										date: this.setDateComponent(state.date, "date", day + 1),
+									}),
+									this.handleChange,
+								);
+							},
+							onPipeKeyDown: (kd) => {
+								this.keyDownPipes["date"] = kd;
+							},
+							onMouseDown: () => {
+								this.setState({
+									activeWheel: "date",
+								});
+							},
+							children: days,
 						},
-						children: days,
-					}),
+						"date",
+					),
 				this.wheels.hours &&
 					this.wheels.year &&
 					jsx("span", {
 						className: CSS.element(baseClass, "spacer"),
 					}),
 				this.wheels.hours &&
-					jsx(WheelComponent, {
-						size: size,
-						CSS: CSS,
-						active: this.state.activeWheel === "hours",
-						baseClass: baseClass + "-wheel",
-						index: date.getHours(),
-						onChange: (newIndex) => {
-							this.setState(
-								(state) => ({
-									date: this.setDateComponent(this.state.date, "hours", newIndex),
-								}),
-								this.handleChange,
-							);
-						},
-						onPipeKeyDown: (kd) => {
-							this.keyDownPipes["hours"] = kd;
-						},
-						onMouseDown: () => {
-							this.setState({
-								activeWheel: "hours",
-							});
+					jsx(
+						WheelComponent,
+						{
+							size: size,
+							CSS: CSS,
+							cycle: true,
+							active: this.state.activeWheel === "hours",
+							baseClass: baseClass + "-wheel",
+							index: date.getHours() + 24,
+							onChange: (rawIndex) => {
+								let hour = rawIndex % 24;
+								this.setState(
+									(state) => ({
+										date: this.setDateComponent(state.date, "hours", hour),
+									}),
+									this.handleChange,
+								);
+							},
+							onPipeKeyDown: (kd) => {
+								this.keyDownPipes["hours"] = kd;
+							},
+							onMouseDown: () => {
+								this.setState({
+									activeWheel: "hours",
+								});
+							},
+							children: hours,
 						},
-						children: hours,
-					}),
+						"hours",
+					),
 				this.wheels.hours &&
 					this.wheels.minutes &&
 					jsx("span", {
 						children: ":",
 					}),
 				this.wheels.minutes &&
-					jsx(WheelComponent, {
-						size: size,
-						CSS: CSS,
-						baseClass: baseClass + "-wheel",
-						active: this.state.activeWheel === "minutes",
-						index: date.getMinutes(),
-						onChange: (newIndex) => {
-							this.setState(
-								(state) => ({
-									date: this.setDateComponent(this.state.date, "minutes", newIndex),
-								}),
-								this.handleChange,
-							);
-						},
-						onPipeKeyDown: (kd) => {
-							this.keyDownPipes["minutes"] = kd;
-						},
-						onMouseDown: () => {
-							this.setState({
-								activeWheel: "minutes",
-							});
+					jsx(
+						WheelComponent,
+						{
+							size: size,
+							CSS: CSS,
+							cycle: true,
+							baseClass: baseClass + "-wheel",
+							active: this.state.activeWheel === "minutes",
+							index: date.getMinutes() + 60,
+							onChange: (rawIndex) => {
+								let minute = rawIndex % 60;
+								this.setState(
+									(state) => ({
+										date: this.setDateComponent(state.date, "minutes", minute),
+									}),
+									this.handleChange,
+								);
+							},
+							onPipeKeyDown: (kd) => {
+								this.keyDownPipes["minutes"] = kd;
+							},
+							onMouseDown: () => {
+								this.setState({
+									activeWheel: "minutes",
+								});
+							},
+							children: minutes,
 						},
-						children: minutes,
-					}),
+						"minutes",
+					),
 				this.wheels.minutes &&
 					this.wheels.seconds &&
 					jsx("span", {
 						children: ":",
 					}),
 				this.wheels.seconds &&
-					jsx(WheelComponent, {
-						size: size,
-						CSS: CSS,
-						baseClass: baseClass + "-wheel",
-						active: this.state.activeWheel === "seconds",
-						index: date.getSeconds(),
-						onChange: (newIndex) => {
-							this.setState(
-								(state) => ({
-									date: this.setDateComponent(this.state.date, "seconds", newIndex),
-								}),
-								this.handleChange,
-							);
-						},
-						onPipeKeyDown: (kd) => {
-							this.keyDownPipes["seconds"] = kd;
-						},
-						onMouseDown: () => {
-							this.setState({
-								activeWheel: "seconds",
-							});
+					jsx(
+						WheelComponent,
+						{
+							size: size,
+							CSS: CSS,
+							cycle: true,
+							baseClass: baseClass + "-wheel",
+							active: this.state.activeWheel === "seconds",
+							index: date.getSeconds() + 60,
+							onChange: (rawIndex) => {
+								let second = rawIndex % 60;
+								this.setState(
+									(state) => ({
+										date: this.setDateComponent(state.date, "seconds", second),
+									}),
+									this.handleChange,
+								);
+							},
+							onPipeKeyDown: (kd) => {
+								this.keyDownPipes["seconds"] = kd;
+							},
+							onMouseDown: () => {
+								this.setState({
+									activeWheel: "seconds",
+								});
+							},
+							children: minutes,
 						},
-						children: minutes,
-					}),
+						"seconds",
+					),
 			],
 		});
 	}
@@ -18586,6 +18637,7 @@ export {
 	ValidationError,
 	ValidationGroup,
 	Validator,
+	WHEEL_BUFFER_COPIES,
 	Wheel,
 	WheelComponent,
 	Window,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.4.4",
+  "version": "26.5.1",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {