cx 26.4.3 → 26.5.1

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
@@ -9153,7 +9154,11 @@ class LookupComponent extends VDOM.Component {
 				text = this.getPlaceholder(data.placeholder);
 			}
 		} else {
-			text = !data.empty ? data.text || this.getPlaceholder() : this.getPlaceholder(data.placeholder);
+			let content = !data.empty ? data.text || this.getPlaceholder() : this.getPlaceholder(data.placeholder);
+			text = jsx("span", {
+				className: CSS.element(baseClass, "text"),
+				children: content,
+			});
 		}
 		let states = {
 			visited: state.visited,
@@ -13160,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;
@@ -13181,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,
@@ -13310,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() {
@@ -13347,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);
@@ -13404,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;
@@ -13415,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);
@@ -13477,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) => {
@@ -13538,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", {
@@ -13577,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,
 							);
@@ -13606,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",
+					),
 			],
 		});
 	}
@@ -18582,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.3",
+  "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": {

package/src/charts/RangeMarker.scss

@@ -1,4 +1,7 @@
 @use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./variables" as *;
 
 @mixin cx-rangemarker($name: "rangemarker", $besm: $cx-besm, $range-marker-color: $cx-default-range-marker-color) {
    $block: map.get($besm, block);

package/src/charts/axis/Axis.tsx

@@ -74,6 +74,14 @@ export interface AxisConfig extends BoundedObjectConfig {
    /** Set to true to hide the axis labels. */
    hideLabels?: boolean;
 
+   /**
+    * Set to `true` to drop a boundary (first/last) label, together with its tick,
+    * when the label would not fit within the chart and get clipped at the edge.
+    * Minor ticks are unaffected. Only affects horizontal axes. Defaults to `false`,
+    * except on `TimeAxis` where it defaults to `true`.
+    */
+   hideClippedLabels?: boolean;
+
    /** Set to true to hide the axis line. */
    hideLine?: boolean;
 
@@ -131,6 +139,7 @@ export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
    declare inverted: boolean;
    declare hidden: boolean;
    declare hideLabels: boolean;
+   declare hideClippedLabels: boolean;
    declare hideTicks: boolean;
    declare hideLine: boolean;
    declare tickSize: number;
@@ -185,6 +194,7 @@ export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
          {
             anchors: undefined,
             hideLabels: undefined,
+            hideClippedLabels: undefined,
             hideLine: undefined,
             hideTicks: undefined,
             labelRotation: undefined,
@@ -259,10 +269,27 @@ export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
       var t: string[] = [];
       if (!!size && !data.hideLabels) {
          var ticks = calculator.getTicks([size]);
+
+         // A boundary label is dropped when it would be clipped at the chart edge.
+         // How far a label reaches toward an edge depends only on its text anchor
+         // and minLabelDistance, so it is resolved once here rather than per tick.
+         // Chart bounds (parentRect) are used rather than axis bounds, since an
+         // axis can be inset within its chart and one Svg may host several charts.
+         let chartBounds = instance.parentRect;
+         let clipBoundaryLabels = !this.vertical && !!data.hideClippedLabels && !!chartBounds;
+         let reach = minLabelDistance * 0.8;
+         let leftReach = data.labelAnchor == "end" ? reach : data.labelAnchor == "middle" ? reach / 2 : 0;
+         let rightReach = data.labelAnchor == "start" ? reach : data.labelAnchor == "middle" ? reach / 2 : 0;
+
          ticks.forEach((serie: any[], si: number) => {
             serie.forEach((v: any, i: number) => {
                var s = calculator.map(v);
 
+               // Drop this boundary label (and its major tick) if it would be
+               // clipped at the chart edge; minor ticks render separately and stay.
+               let clipped =
+                  clipBoundaryLabels && (s + rightReach > chartBounds.r || s - leftReach < chartBounds.l);
+
                if (this.secondary) {
                   x1 = this.vertical ? bounds.r + tickOffset : s;
                   y1 = this.vertical ? s : bounds.t - tickOffset;
@@ -275,7 +302,9 @@ export class Axis extends BoundedObject<AxisConfig, AxisInstance> {
                   y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
                }
 
-               if (!this.useGridlineTicks) t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+               if (!this.useGridlineTicks && !clipped) t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+
+               if (clipped) return;
 
                var x, y;
                let labelOffset =
@@ -422,6 +451,7 @@ Axis.prototype.secondary = false;
 Axis.prototype.inverted = false;
 Axis.prototype.hidden = false;
 Axis.prototype.hideLabels = false;
+Axis.prototype.hideClippedLabels = false;
 Axis.prototype.hideTicks = false;
 Axis.prototype.hideLine = false;
 

package/src/charts/axis/TimeAxis.tsx

@@ -212,6 +212,7 @@ TimeAxis.prototype.minLabelDistance = 60;
 TimeAxis.prototype.minTickDistance = 60;
 TimeAxis.prototype.minTickUnit = "second";
 TimeAxis.prototype.useLabelDistanceFormatOverrides = false;
+TimeAxis.prototype.hideClippedLabels = true;
 TimeAxis.prototype.minLabelDistanceFormatOverrideDefaults = {
   [TimeFormats.fullDateAndTime]: 150,
   [TimeFormats.shortMonthDate]: 90,

package/src/charts/index.scss

@@ -14,6 +14,7 @@
 @use "Marker";
 @use "MarkerLine";
 @use "Range";
+@use "RangeMarker";
 @use "Swimlane";
 @use "Swimlanes";
 

package/src/data/AugmentedViewBase.ts

@@ -19,11 +19,12 @@ export class AugmentedViewBase<D = any> extends View<D> {
       let parentStoreData = this.store.getData();
       let result = this.getBaseData(parentStoreData);
       this.embedAugmentData(result, parentStoreData);
-      this.cache.result = result;
-      this.cache.parentStoreData = parentStoreData;
-      this.cache.version = this.meta.version;
+      if (this.sealed) {
+         this.cache.result = result;
+         this.cache.version = this.meta.version;
+      }
       this.meta = this.store.meta;
-      return this.cache.result;
+      return result;
    }
 
    protected getBaseData(parentStoreData: any): any {