cx 26.4.4 → 26.6.0

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
@@ -8676,6 +8677,19 @@ class LookupField extends Field {
 			}
 		}
 		instance.lastDropdown = context.lastDropdown;
+		if (this.validateOptionExists && isArray(data.options) && !this.isEmpty(data)) {
+			let invalid = this.multiple
+				? isArray(data.values) && data.records.length < data.values.length
+				: !data.options.some(($option) =>
+						areKeysEqual(
+							getOptionKey(this.keyBindings, {
+								$option,
+							}),
+							data.selectedKeys[0],
+						),
+					);
+			if (invalid) data.error = this.invalidOptionText;
+		}
 		super.prepareData(context, instance);
 	}
 	renderInput(context, instance, key) {
@@ -8741,6 +8755,8 @@ LookupField.prototype.hideSearchField = false;
 LookupField.prototype.minOptionsForSearchField = 7;
 LookupField.prototype.loadingText = "Loading...";
 LookupField.prototype.queryErrorText = "Error occurred while querying for lookup data.";
+LookupField.prototype.validateOptionExists = false;
+LookupField.prototype.invalidOptionText = "The selected option is no longer available.";
 LookupField.prototype.noResultsText = "No results found.";
 LookupField.prototype.optionIdField = "id";
 LookupField.prototype.optionTextField = "text";
@@ -13164,6 +13180,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 +13204,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 +13339,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 +13388,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 +13446,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 +13475,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 +13538,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 +13580,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 +13623,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 +13652,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",
+					),
 			],
 		});
 	}
@@ -15549,12 +15615,13 @@ class Grid extends ContainerBase {
 	renderGroupHeader(context, instance, g, level, group, i, store, fixedColumns) {
 		let { CSS, baseClass } = this;
 		let data = store.getData();
+		let resetRowNumbers = g.resetRowNumbers ? "reset-row-numbers" : null;
 		if (g.caption) {
 			let caption = g.caption(data);
 			return jsx(
 				"tbody",
 				{
-					className: CSS.element(baseClass, "group-caption", ["level-" + level]),
+					className: CSS.element(baseClass, "group-caption", ["level-" + level, resetRowNumbers]),
 					"data-group-key": group.$key,
 					"data-group-element": `group-caption-${level}`,
 					children: jsx("tr", {
@@ -15645,7 +15712,7 @@ class Grid extends ContainerBase {
 			return jsx(
 				"tbody",
 				{
-					className: CSS.element(baseClass, "group-caption", ["level-" + level]),
+					className: CSS.element(baseClass, "group-caption", ["level-" + level, resetRowNumbers]),
 					"data-group-key": group.$key,
 					"data-group-element": `group-caption-${level}`,
 					children: lines,
@@ -18586,6 +18653,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.6.0",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/charts/BarGraph.scss

@@ -1,31 +1,31 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-bar {
-      stroke-width: $cx-default-chart-shape-stroke-width;
-      fill: $cx-default-chart-shape-fill-color;
-      stroke: $cx-default-chart-shape-stroke-color;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: $cx-default-chart-selected-stroke-width;
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/BarGraph")) {
-   @include cx-bargraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-bargraph($name: "bargraph", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$element}#{$name}-bar {
+      stroke-width: $cx-default-chart-shape-stroke-width;
+      fill: $cx-default-chart-shape-fill-color;
+      stroke: $cx-default-chart-shape-stroke-color;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: $cx-default-chart-selected-stroke-width;
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/BarGraph")) {
+   @include cx-bargraph();
+}