cx 26.2.1 → 26.2.3

package/dist/widgets.js

@@ -53,6 +53,9 @@ export {
 	DetachedScope,
 	GroupAdapter,
 	IsolatedScope,
+	LabelsLeftLayout,
+	LabelsTopLayout,
+	LabelsTopLayoutCell,
 	PrivateStore,
 	PureContainer,
 	Repeater,
@@ -63,7 +66,7 @@ export {
 	TreeAdapter,
 	Widget,
 } from "cx/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import {
 	isTouchEvent,
 	isUndefined,
@@ -1280,11 +1283,12 @@ class List extends StyledContainerBase {
 					},
 				};
 			}
-			return g;
-		});
-		normalized.forEach((g) => {
-			if (g.header) g.header = Widget.create(g.header);
-			if (g.footer) g.footer = Widget.create(g.footer);
+			// Clone to avoid mutating the original config
+			return {
+				...g,
+				header: g.header ? Widget.create(g.header) : undefined,
+				footer: g.footer ? Widget.create(g.footer) : undefined,
+			};
 		});
 		this.adapter.groupBy(normalized);
 		this.update();
@@ -2689,6 +2693,7 @@ class OverlayInstance extends Instance {
 	onBeforeDismiss;
 }
 class OverlayBase extends ContainerBase {
+	static configureOverlayContainer;
 	init() {
 		if (this.center) this.centerX = this.centerY = this.center;
 		super.init();
@@ -2745,20 +2750,38 @@ class OverlayBase extends ContainerBase {
 		context.pop("parentPositionChangeEvent");
 	}
 	render(context, instance, key) {
-		return jsx(
-			OverlayComponent,
-			{
-				instance: instance,
-				subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
-				parentEl: context.options.parentEl,
-				children: this.renderContents(context, instance),
-			},
-			key,
-		);
+		if (this.needsBeacon)
+			return jsx(
+				OverlayBeacon,
+				{
+					childrenFactory: (beaconEl) =>
+						jsx(OverlayComponent, {
+							beaconEl: beaconEl,
+							instance: instance,
+							subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
+							parentEl: context.options.parentEl,
+							children: this.renderContents(context, instance),
+						}),
+				},
+				key,
+			);
+		return jsx(OverlayComponent, {
+			beaconEl: null,
+			instance: instance,
+			subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
+			parentEl: context.options.parentEl,
+			children: this.renderContents(context, instance),
+		});
 	}
 	renderContents(context, instance) {
 		return this.renderChildren(context, instance);
 	}
+	getConfigureOverlayContainerContext(instance, initiatingEvent) {
+		return {
+			initiatingEvent,
+			relatedElement: instance?.beaconEl,
+		};
+	}
 	overlayDidMount(instance, component) {
 		let { el } = component;
 		if (this.centerX) if (!el.style.left) el.style.left = `${(window.innerWidth - el.offsetWidth) / 2}px`;
@@ -2786,17 +2809,19 @@ class OverlayBase extends ContainerBase {
 	getOverlayContainer() {
 		return document.body;
 	}
-	containerFactory() {
+	containerFactory(instance, initiatingEvent) {
 		let el = document.createElement("div");
 		let container = this.getOverlayContainer();
 		container.appendChild(el);
 		el.style.position = "absolute";
 		if (this.containerStyle) Object.assign(el.style, parseStyle(this.containerStyle));
+		if (OverlayBase.configureOverlayContainer)
+			OverlayBase.configureOverlayContainer(el, this.getConfigureOverlayContainerContext(instance, initiatingEvent));
 		return el;
 	}
 	open(storeOrInstance, options) {
 		if (!this.initialized) this.init();
-		let el = this.containerFactory();
+		let el = this.containerFactory(undefined, options?.initiatingEvent);
 		el.style.display = "hidden";
 		let beforeDismiss = null;
 		let stop;
@@ -2867,6 +2892,7 @@ OverlayBase.prototype.focusable = false;
 OverlayBase.prototype.containerStyle = undefined;
 OverlayBase.prototype.dismissOnPopState = false;
 OverlayBase.prototype.closeOnEscape = false;
+OverlayBase.prototype.needsBeacon = false;
 class Overlay extends OverlayBase {}
 Widget.alias("overlay", Overlay);
 //TODO: all el related logic should be moved here
@@ -2912,13 +2938,13 @@ class OverlayComponent extends VDOM.Component {
 		let { widget } = instance;
 		if (widget.inline || parentEl) return this.renderOverlay();
 		if (!this.containerEl) {
-			this.ownedEl = widget.containerFactory();
+			instance.beaconEl = this.props.beaconEl;
+			this.ownedEl = widget.containerFactory(instance);
 			this.ownedEl.style.display = "hidden";
 			this.containerEl = this.ownedEl;
 		}
-		if (VDOM.DOM.createPortal) return VDOM.DOM.createPortal(this.renderOverlay(), this.containerEl);
-		//rendered in componentDidUpdate if portals are not supported
-		return null;
+		// content is rendered in componentDidUpdate if portals are not supported
+		return VDOM.DOM.createPortal ? VDOM.DOM.createPortal(this.renderOverlay(), this.containerEl) : null;
 	}
 	renderOverlay() {
 		let { widget, data } = this.props.instance;
@@ -3300,6 +3326,30 @@ class OverlayComponent extends VDOM.Component {
 		this.overlayDidUpdate();
 	}
 }
+class OverlayBeacon extends VDOM.Component {
+	el;
+	render() {
+		return jsxs(Fragment, {
+			children: [
+				jsx("div", {
+					ref: (el) => {
+						this.el = el;
+					},
+					style: {
+						position: "absolute",
+						display: "none",
+					},
+				}),
+				this.state?.children,
+			],
+		});
+	}
+	componentDidMount() {
+		this.setState({
+			children: this.props.childrenFactory(this.el),
+		});
+	}
+}
 
 class DropdownInstance extends OverlayInstance {
 	mousePosition;
@@ -3794,6 +3844,12 @@ class DropdownBase extends OverlayBase {
 		}
 		return super.getOverlayContainer();
 	}
+	getConfigureOverlayContainerContext(instance) {
+		return {
+			...super.getConfigureOverlayContainerContext(),
+			relatedElement: instance?.relatedElement ?? this.relatedElement,
+		};
+	}
 }
 DropdownBase.prototype.offset = 0;
 DropdownBase.prototype.baseClass = "dropdown";
@@ -3940,6 +3996,9 @@ class TooltipBase extends DropdownBase {
 		if (!isNonEmptyArray(this.items) && !data.title && !data.text) return false;
 		return super.checkVisible(context, instance, data);
 	}
+	open(storeOrInstance, options) {
+		return super.open(storeOrInstance, options);
+	}
 }
 TooltipBase.prototype.baseClass = "tooltip";
 TooltipBase.prototype.offset = 8;
@@ -4196,17 +4255,22 @@ class Window extends OverlayBase {
 	render(context, instance, key) {
 		var header = this.renderHeader(context, instance, "header");
 		var footer = this.renderFooter(context, instance, "footer");
-		return jsx(
-			WindowComponent,
-			{
-				instance: instance,
-				header: header,
-				footer: footer,
-				subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
-				children: this.renderContents(context, instance),
-			},
-			key,
-		);
+		return jsx(OverlayBeacon, {
+			childrenFactory: (beaconEl) =>
+				jsx(
+					WindowComponent,
+					{
+						beaconEl: beaconEl,
+						instance: instance,
+						header: header,
+						footer: footer,
+						subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
+						parentEl: context.options.parentEl,
+						children: this.renderContents(context, instance),
+					},
+					key,
+				),
+		});
 	}
 }
 Window.prototype.baseClass = "window";
@@ -4216,6 +4280,7 @@ Window.prototype.fixed = false;
 Window.prototype.autoFocus = true;
 Window.prototype.focusable = true;
 Window.prototype.pad = true;
+Window.prototype.needsBeacon = true;
 Widget.alias("window", Window);
 Localization.registerPrototype("cx/widgets/Window", Window);
 class WindowComponent extends OverlayComponent {
@@ -4287,7 +4352,7 @@ class WindowComponent extends OverlayComponent {
 	onFocusIn() {
 		super.onFocusIn();
 		if (!this.state.active) {
-			if (this.containerEl.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
+			if (this.containerEl?.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
 			this.setState({
 				active: true,
 			});
@@ -4360,7 +4425,9 @@ class MsgBox {
 					}),
 				}),
 			);
-			w.open(opts.store);
+			w.open(opts.store, {
+				initiatingEvent: opts.initiatingEvent,
+			});
 		});
 	}
 	static yesNo(options) {
@@ -4413,7 +4480,9 @@ class MsgBox {
 					}),
 				}),
 			);
-			w.open(opts.store);
+			w.open(opts.store, {
+				initiatingEvent: opts.initiatingEvent,
+			});
 		});
 	}
 }
@@ -4473,9 +4542,11 @@ class Toast extends OverlayBase {
 		el.classList.remove(this.CSS.state("live"));
 		if (component.timeoutTimer) clearTimeout(component.timeoutTimer);
 	}
-	containerFactory() {
+	containerFactory(instance, initiatingEvent) {
 		let el = document.createElement("div");
 		el.className = this.CSS.element("toaster", "item");
+		if (OverlayBase.configureOverlayContainer)
+			OverlayBase.configureOverlayContainer(el, this.getConfigureOverlayContainerContext(instance, initiatingEvent));
 		let placement = this.placement || "top";
 		let toaster = getToaster(placement);
 		toaster.el.className = this.CSS.block("toaster", null, {
@@ -4503,6 +4574,7 @@ Toast.prototype.animate = true;
 Toast.prototype.baseClass = "toast";
 Toast.prototype.placement = "top";
 Toast.prototype.destroyDelay = 300;
+Toast.prototype.needsBeacon = true;
 
 class ContextMenu extends Dropdown {
 	constructor(config) {
@@ -4518,6 +4590,7 @@ ContextMenu.prototype.offset = 0;
 ContextMenu.prototype.autoFocus = true;
 ContextMenu.prototype.autoFocusFirstChild = false;
 ContextMenu.prototype.focusable = true;
+Localization.registerPrototype("cx/widgets/ContextMenu", ContextMenu);
 const openContextMenu = (e, content, storeOrInstance, options) => {
 	e.preventDefault();
 	e.stopPropagation();
@@ -6430,13 +6503,13 @@ class Field extends PureContainerBase {
 		super.init();
 	}
 	initComponents(_context, instance) {
-		if (this.validationMode == "tooltip" && isUndefined(this.errorTooltip)) {
+		if (this.validationMode == "tooltip" && (isUndefined(this.errorTooltip) || isObject(this.errorTooltip))) {
 			this.errorTooltip = {
 				text: {
 					bind: "$error",
 				},
 				mod: "error",
-				...(this.errorTooltip || {}),
+				...this.errorTooltip,
 			};
 		}
 		if (isUndefined(this.help)) {
@@ -6943,13 +7016,13 @@ let Input$2 = class Input extends VDOM.Component {
 			});
 	}
 	onBlur(e) {
+		this.onChange(e.target.value, "blur");
 		if (this.state.focus) {
 			this.setState({
 				focus: false,
 			});
 			this.props.instance.set("focused", false);
 		}
-		this.onChange(e.target.value, "blur");
 	}
 	onClearClick(_e) {
 		if (this.input) this.input.value = ""; // prevent onChange call with old text value on blur or component unmount
@@ -7051,6 +7124,7 @@ var SquareIcon = registerIcon(
 					width: "40",
 					height: "40",
 					fill: "currentColor",
+					shapeRendering: "crispEdges",
 				}),
 			},
 			key,
@@ -8905,35 +8979,38 @@ class LookupComponent extends VDOM.Component {
 			let readOnly = data.disabled || data.readOnly;
 			if (isNonEmptyArray(data.records)) {
 				let valueTextFormatter = widget.onGetRecordDisplayText ?? ((record) => record[widget.valueTextField]);
-				text = data.records.map((v, i) =>
-					jsxs(
-						"div",
-						{
-							className: CSS.element(baseClass, "tag", {
-								readonly: readOnly,
-							}),
-							children: [
-								jsx("span", {
-									className: CSS.element(baseClass, "tag-value"),
-									children: valueTextFormatter(v, instance),
+				text = jsx("div", {
+					className: CSS.element(baseClass, "tags"),
+					children: data.records.map((v, i) =>
+						jsxs(
+							"div",
+							{
+								className: CSS.element(baseClass, "tag", {
+									readonly: readOnly,
 								}),
-								!readOnly &&
-									jsx("div", {
-										className: CSS.element(baseClass, "tag-clear"),
-										onMouseDown: (e) => {
-											e.preventDefault();
-											e.stopPropagation();
-										},
-										onClick: (e) => this.onClearClick(e, v),
-										children: jsx(ClearIcon, {
-											className: CSS.element(baseClass, "icon"),
-										}),
+								children: [
+									jsx("span", {
+										className: CSS.element(baseClass, "tag-value"),
+										children: valueTextFormatter(v, instance),
 									}),
-							],
-						},
-						i,
+									!readOnly &&
+										jsx("div", {
+											className: CSS.element(baseClass, "tag-clear"),
+											onMouseDown: (e) => {
+												e.preventDefault();
+												e.stopPropagation();
+											},
+											onClick: (e) => this.onClearClick(e, v),
+											children: jsx(ClearIcon, {
+												className: CSS.element(baseClass, "icon"),
+											}),
+										}),
+								],
+							},
+							i,
+						),
 					),
-				);
+				});
 			} else {
 				text = this.getPlaceholder(data.placeholder);
 			}
@@ -9432,6 +9509,7 @@ class NumberField extends Field {
 				icon: undefined,
 				scale: undefined,
 				offset: undefined,
+				focused: undefined,
 			},
 			...args,
 		);
@@ -9514,6 +9592,7 @@ Widget.alias("numberfield", NumberField);
 Localization.registerPrototype("cx/widgets/NumberField", NumberField);
 let Input$1 = class Input extends VDOM.Component {
 	input;
+	unsubscribeOnWheel;
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -9579,13 +9658,8 @@ let Input$1 = class Input extends VDOM.Component {
 					onMouseLeave: (e) => tooltipMouseLeave$1(e, ...getFieldTooltip(this.props.instance)),
 					onChange: (e) => this.onChange(e, "change"),
 					onKeyDown: this.onKeyDown.bind(this),
-					onBlur: (e) => {
-						this.onChange(e, "blur");
-					},
+					onBlur: (e) => this.onBlur(e),
 					onFocus: (e) => this.onFocus(),
-					onWheel: (e) => {
-						this.onChange(e, "wheel");
-					},
 					onClick: stopPropagation,
 				}),
 				insideButton,
@@ -9608,6 +9682,19 @@ let Input$1 = class Input extends VDOM.Component {
 	componentDidMount() {
 		tooltipParentDidMount$1(this.input, ...getFieldTooltip(this.props.instance));
 		autoFocus(this.input, this);
+		let { widget } = this.props.instance;
+		if (widget.reactOn.indexOf("wheel") !== -1) {
+			this.unsubscribeOnWheel = addEventListenerWithOptions(
+				this.input,
+				"wheel",
+				(e) => {
+					this.onChange(e, "wheel");
+				},
+				{
+					passive: false,
+				},
+			);
+		}
 	}
 	componentDidUpdate() {
 		autoFocus(this.input, this);
@@ -9622,6 +9709,7 @@ let Input$1 = class Input extends VDOM.Component {
 			);
 		}
 		tooltipParentWillUnmount$1(this.props.instance);
+		this.unsubscribeOnWheel?.();
 	}
 	getPreCursorDigits(text, cursor, decimalSeparator) {
 		let res = "";
@@ -9803,6 +9891,18 @@ let Input$1 = class Input extends VDOM.Component {
 			this.setState({
 				focus: true,
 			});
+			instance.set("focused", true);
+		}
+	}
+	onBlur(e) {
+		let { instance } = this.props;
+		let { widget } = instance;
+		this.onChange(e, "blur");
+		if (widget.trackFocus && this.state.focus) {
+			this.setState({
+				focus: false,
+			});
+			instance.set("focused", false);
 		}
 	}
 };
@@ -10180,7 +10280,7 @@ class MonthPicker extends Field {
 MonthPicker.prototype.baseClass = "monthpicker";
 MonthPicker.prototype.range = false;
 MonthPicker.prototype.startYear = 1980;
-MonthPicker.prototype.endYear = 2030;
+MonthPicker.prototype.endYear = 2050;
 MonthPicker.prototype.bufferSize = 15;
 MonthPicker.prototype.hideQuarters = false;
 // Localization
@@ -10241,7 +10341,7 @@ class MonthPickerComponent extends VDOM.Component {
 		return cursor;
 	}
 	moveCursor(e, data, options = {}) {
-		e.preventDefault();
+		//e.preventDefault();
 		e.stopPropagation();
 		if ("cursorYear" in data && data.cursorYear !== undefined) {
 			let { startYear, endYear } = this.props.instance.widget;
@@ -10254,12 +10354,25 @@ class MonthPickerComponent extends VDOM.Component {
 				let tbody = this.dom.table?.children?.[index];
 				if (tbody) scrollElementIntoView(tbody);
 			}
+			if (options.select) {
+				let { instance } = this.props;
+				let { widget, data } = instance;
+				let [cursorFromDate, cursorToDate] = this.getCursorDates();
+				let originFromDate = cursorFromDate,
+					originToDate = cursorToDate;
+				if (widget.range) {
+					if (data.from) originFromDate = data.from;
+					if (data.to) originToDate = data.to;
+				}
+				widget.handleSelect(e, instance, minDate(originFromDate, cursorFromDate), maxDate(originToDate, cursorToDate));
+			}
 		});
 	}
 	handleKeyPress(e) {
 		let { instance } = this.props;
 		let { widget } = this.props.instance;
 		let { cursorMonth, cursorYear, cursorQuarter, column } = this.state;
+		let select = widget.range && e.shiftKey;
 		switch (e.keyCode) {
 			case KeyCode.enter:
 				// if (widget.range && e.shiftKey && !this.dragStartDates) {
@@ -10273,47 +10386,90 @@ class MonthPickerComponent extends VDOM.Component {
 				break;
 			case KeyCode.left:
 				if (column == "Y")
-					this.moveCursor(e, {
-						cursorQuarter: 3,
-						cursorYear: cursorYear - 1,
-						column: "Q",
-					});
+					this.moveCursor(
+						e,
+						{
+							cursorQuarter: 3,
+							cursorYear: cursorYear - 1,
+							column: "Q",
+						},
+						{
+							select,
+						},
+					);
 				else if (column == "Q")
-					this.moveCursor(e, {
-						cursorMonth: cursorQuarter * 4,
-						column: "M",
-					});
+					this.moveCursor(
+						e,
+						{
+							cursorMonth: cursorQuarter * 4,
+							column: "M",
+						},
+						{
+							select,
+						},
+					);
 				else if (column == "M" && (cursorMonth - 1) % 3 == 0)
 					this.moveCursor(e, {
 						column: "Y",
 					});
 				else
-					this.moveCursor(e, {
-						cursorMonth: cursorMonth - 1,
-					});
+					this.moveCursor(
+						e,
+						{
+							cursorMonth: cursorMonth - 1,
+						},
+						{
+							select,
+						},
+					);
 				break;
 			case KeyCode.right:
 				if (column == "Y")
-					this.moveCursor(e, {
-						cursorMonth: 1,
-						column: "M",
-					});
+					this.moveCursor(
+						e,
+						{
+							cursorMonth: 1,
+							column: "M",
+						},
+						{
+							select,
+						},
+					);
 				else if (column == "Q")
-					this.moveCursor(e, {
-						column: "Y",
-						cursorYear: cursorQuarter == 3 ? cursorYear + 1 : cursorYear,
-					});
+					this.moveCursor(
+						e,
+						{
+							column: "Y",
+							cursorYear: cursorQuarter == 3 ? cursorYear + 1 : cursorYear,
+						},
+						{
+							select,
+						},
+					);
 				else if (column == "M" && (cursorMonth - 1) % 3 == 2)
-					this.moveCursor(e, {
-						column: "Q",
-						cursorQuarter: Math.floor((cursorMonth - 1) / 3),
-					});
+					this.moveCursor(
+						e,
+						{
+							column: "Q",
+							cursorQuarter: Math.floor((cursorMonth - 1) / 3),
+						},
+						{
+							select,
+						},
+					);
 				else
-					this.moveCursor(e, {
-						cursorMonth: cursorMonth + 1,
-					});
+					this.moveCursor(
+						e,
+						{
+							cursorMonth: cursorMonth + 1,
+						},
+						{
+							select,
+						},
+					);
 				break;
 			case KeyCode.up:
+				e.preventDefault(); // prevent scroll
 				if (column == "Y")
 					this.moveCursor(
 						e,
@@ -10322,6 +10478,7 @@ class MonthPickerComponent extends VDOM.Component {
 						},
 						{
 							ensureVisible: true,
+							select,
 						},
 					);
 				else if (column == "Q")
@@ -10333,6 +10490,7 @@ class MonthPickerComponent extends VDOM.Component {
 						},
 						{
 							ensureVisible: true,
+							select,
 						},
 					);
 				else if (column == "M")
@@ -10344,6 +10502,7 @@ class MonthPickerComponent extends VDOM.Component {
 							},
 							{
 								ensureVisible: true,
+								select,
 							},
 						);
 					else
@@ -10355,10 +10514,12 @@ class MonthPickerComponent extends VDOM.Component {
 							},
 							{
 								ensureVisible: true,
+								select,
 							},
 						);
 				break;
 			case KeyCode.down:
+				e.preventDefault(); // prevent scroll
 				if (column == "Y")
 					this.moveCursor(
 						e,
@@ -10367,6 +10528,7 @@ class MonthPickerComponent extends VDOM.Component {
 						},
 						{
 							ensureVisible: true,
+							select,
 						},
 					);
 				else if (column == "Q")
@@ -10378,6 +10540,7 @@ class MonthPickerComponent extends VDOM.Component {
 						},
 						{
 							ensureVisible: true,
+							select,
 						},
 					);
 				else if (column == "M")
@@ -10389,6 +10552,7 @@ class MonthPickerComponent extends VDOM.Component {
 							},
 							{
 								ensureVisible: true,
+								select,
 							},
 						);
 					else
@@ -10400,18 +10564,33 @@ class MonthPickerComponent extends VDOM.Component {
 							},
 							{
 								ensureVisible: true,
+								select,
 							},
 						);
 				break;
 			case KeyCode.pageUp:
-				this.moveCursor(e, {
-					cursorYear: this.state.cursorYear - 1,
-				});
+				this.moveCursor(
+					e,
+					{
+						cursorYear: this.state.cursorYear - 1,
+					},
+					{
+						ensureVisible: true,
+						select,
+					},
+				);
 				break;
 			case KeyCode.pageDown:
-				this.moveCursor(e, {
-					cursorYear: this.state.cursorYear + 1,
-				});
+				this.moveCursor(
+					e,
+					{
+						cursorYear: this.state.cursorYear + 1,
+					},
+					{
+						ensureVisible: true,
+						select,
+					},
+				);
 				break;
 			default:
 				if (widget.onKeyDown) instance.invoke("onKeyDown", e, instance);
@@ -10468,9 +10647,9 @@ class MonthPickerComponent extends VDOM.Component {
 		if (this.state.state == "drag") this.handleMouseUp(e);
 	}
 	handleMouseEnter(e) {
+		if (this.state.state != "drag") return;
 		let cursor = this.extractCursorInfo(e.target);
 		if (cursor) {
-			cursor.hover = !isTouchEvent();
 			this.moveCursor(e, cursor);
 		}
 	}
@@ -10480,7 +10659,9 @@ class MonthPickerComponent extends VDOM.Component {
 		if (!cursor) {
 			cursor = this.extractCursorInfo(e.currentTarget);
 			if (!cursor) return;
-			this.moveCursor(e, cursor);
+			this.moveCursor(e, cursor, {
+				select: !widget.range,
+			});
 		}
 		e.stopPropagation();
 		preventFocusOnTouch(e);
@@ -10545,7 +10726,7 @@ class MonthPickerComponent extends VDOM.Component {
 			}
 		}
 		let monthNames = Culture.getDateTimeCulture().getMonthNames("short");
-		let showCursor = this.state.hover || this.state.focused;
+		let showCursor = this.state.focused;
 		for (let y = start; y <= end; y++) {
 			let selectableMonths = 0b111111111111;
 			// Loop through the months in a year to check if all months are unselectable
@@ -10712,18 +10893,15 @@ class MonthPickerComponent extends VDOM.Component {
 			startYear,
 			startYear + floor5(Math.floor(this.dom.el.scrollTop / this.state.yearHeight)) - visibleItems,
 		);
-		if (start != this.state.start && start + bufferSize <= endYear) {
+		if (start != this.state.start) {
 			this.setState({
 				start,
-				end: start + 15,
+				end: Math.min(start + bufferSize, endYear),
 			});
 		}
 	}
 	handleMouseLeave(e) {
 		tooltipMouseLeave$1(e, ...getFieldTooltip(this.props.instance));
-		this.moveCursor(e, {
-			hover: false,
-		});
 	}
 	componentDidMount() {
 		//non-input, ok to focus on mobile
@@ -11390,6 +11568,7 @@ class MonthField extends Field {
 				data: instance.data,
 				instance: instance,
 				monthPicker: {
+					mod: "dropdown",
 					...this.monthPickerOptions,
 					value: this.value,
 					from: this.from,
@@ -11838,6 +12017,7 @@ class ColorInput extends VDOM.Component {
 			relatedElement: this.input,
 			items: {
 				type: ColorPicker,
+				mod: "dropdown",
 				...this.props.picker,
 				onColorClick: (e) => {
 					e.stopPropagation();
@@ -13784,6 +13964,7 @@ class DateTimeInput extends VDOM.Component {
 			},
 			onMouseDown: stopPropagation,
 			items: {
+				mod: "dropdown",
 				...pickerConfig,
 				...this.props.picker,
 				autoFocus: !dateTimeWidget.focusInputFirst,
@@ -14539,7 +14720,10 @@ class Grid extends ContainerBase {
 		if (instance.cached) delete instance.cached.rawData;
 	}
 	createRowTemplate(context, columnParams, instance, groupingData) {
-		var row = this.row || {};
+		// Clone row to avoid mutating the original config
+		var row = {
+			...this.row,
+		};
 		let columns = this.columns;
 		if (this.onGetColumns) {
 			let result = instance.invoke("onGetColumns", columnParams, instance);
@@ -14560,8 +14744,13 @@ class Grid extends ContainerBase {
 		for (let i = 0; i < 10; i++) {
 			let l = row["line" + i];
 			if (l) {
-				if (isArray(l.columns))
-					for (let c = 0; c < l.columns.length; c++) l.columns[c].uniqueColumnId = `l${i}-${l.columns[c].key || c}`;
+				if (isArray(l.columns)) {
+					// Clone columns to avoid mutating the original config
+					l.columns = l.columns.map((col, c) => ({
+						...col,
+						uniqueColumnId: `l${i}-${col.key || c}`,
+					}));
+				}
 				lines.push(l);
 			}
 		}
@@ -17635,7 +17824,13 @@ class TreeNode extends ContainerBase {
 					jsxs("div", {
 						className: CSS.element(baseClass, "handle"),
 						onClick: (e) => this.toggle(e, instance),
-						onMouseDown: !this.hideIcon ? stopPropagation : undefined,
+						onMouseDown:
+							!this.hideIcon && !data.leaf
+								? (e) => {
+										e.stopPropagation();
+										e.preventDefault();
+									}
+								: undefined,
 						children: [
 							!data.leaf &&
 								!data.hideArrow &&
@@ -17708,7 +17903,7 @@ class Pagination extends Widget {
 		for (let p = minPage - 1; p <= maxPage + 1; p++) {
 			pageBtns.push(
 				jsx(
-					"li",
+					"div",
 					{
 						className: CSS.element(baseClass, "page", {
 							active: page == p,
@@ -17729,7 +17924,7 @@ class Pagination extends Widget {
 			);
 		}
 		return jsx(
-			"ul",
+			"div",
 			{
 				className: data.classNames,
 				style: data.style,
@@ -18216,6 +18411,7 @@ export {
 	Option,
 	Overlay,
 	OverlayBase,
+	OverlayBeacon,
 	OverlayComponent,
 	OverlayInstance,
 	Pagination,