cx 26.0.12 → 26.0.13

package/dist/widgets.js

@@ -1,7 +1,7 @@
 import {
 	FocusManager,
 	Instance,
-	ContainerBase,
+	StyledContainerBase,
 	Url,
 	VDOM,
 	Widget,
@@ -9,7 +9,6 @@ import {
 	flattenProps,
 	preventFocus,
 	getContentArray,
-	StyledContainerBase,
 	GroupAdapter,
 	Selection,
 	getContent,
@@ -19,6 +18,7 @@ import {
 	batchUpdates,
 	oneFocusOut,
 	PureContainerBase,
+	ContainerBase,
 	ZIndexManager,
 	startAppLoop,
 	ResizeManager,
@@ -63,7 +63,7 @@ export {
 	TreeAdapter,
 	Widget,
 } from "cx/ui";
-import { jsx, jsxs as jsxs$1 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
 	isTouchEvent,
 	isUndefined,
@@ -83,6 +83,7 @@ import {
 	parseStyle,
 	getParentFrameBoundingClientRect,
 	getSearchQueryHighlighter,
+	isNonEmptyArray,
 	getTopLevelBoundingClientRect,
 	isObject,
 	Console,
@@ -97,7 +98,6 @@ import {
 	findFirst,
 	isFocusable,
 	closestParent,
-	isNonEmptyArray,
 	tooltipsFlag,
 	shallowEquals,
 	stopPropagation,
@@ -143,9 +143,16 @@ import {
 	getSelector,
 	enableFatArrowExpansion,
 } from "cx/data";
-import { jsx as jsx$1, jsxs } from "cx/jsx-runtime";
+import { jsx as jsx$1, jsxs as jsxs$1 } from "cx/jsx-runtime";
 import RouteMatcher from "route-parser";
 
+function autoFocus(el, component) {
+	let data = component.props.data || component.props.instance.data;
+	let autoFocusValue = el && data.autoFocus;
+	if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el);
+	component.autoFocusValue = autoFocusValue;
+}
+
 let impl$1 = false;
 function tooltipMouseMove$1(e, parentInstance, tooltip, options) {
 	if (impl$1 && tooltip) {
@@ -181,13 +188,6 @@ function wireTooltipOps(ops) {
 	impl$1 = ops;
 }
 
-function autoFocus(el, component) {
-	let data = component.props.data || component.props.instance.data;
-	let autoFocusValue = el && data.autoFocus;
-	if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el);
-	component.autoFocusValue = autoFocusValue;
-}
-
 const isDataAttribute = (attr) => (attr.indexOf("data-") === 0 ? attr.substring(5) : false);
 let urlAttributes = {
 	"a.href": true,
@@ -197,7 +197,7 @@ let urlAttributes = {
 class HtmlElementInstance extends Instance {
 	events;
 }
-class HtmlElement extends ContainerBase {
+class HtmlElement extends StyledContainerBase {
 	constructor(config) {
 		super(config);
 		if (isUndefined(this.jsxAttributes) && config)
@@ -360,7 +360,6 @@ class HtmlElement extends ContainerBase {
 	}
 }
 HtmlElement.prototype.tag = "div";
-HtmlElement.prototype.styled = true;
 class ContainerComponent extends VDOM.Component {
 	el = null;
 	constructor(props) {
@@ -541,6 +540,44 @@ function restoreDefaultIcons() {
 	};
 }
 
+registerIcon(
+	"calendar",
+	(props) => {
+		return jsxs("svg", {
+			...props,
+			viewBox: "0 0 32 32",
+			children: [
+				jsx("path", {
+					d: "M4 3h6m10 0h6",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+				}),
+				jsx("path", {
+					d: "M19 21h4v4h-4z",
+					fill: "currentColor",
+				}),
+				jsx("path", {
+					d: "M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5",
+					fill: "none",
+					stroke: "currentColor",
+				}),
+				jsx("path", {
+					fill: "currentColor",
+					d: "M10 8h10v2H10z",
+				}),
+				jsx("path", {
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					d: "M3 5h24v24H3z",
+				}),
+			],
+		});
+	},
+	true,
+);
+
 var CheckIcon = registerIcon(
 	"check",
 	(props) => {
@@ -573,6 +610,23 @@ var ClearIcon = registerIcon(
 	true,
 );
 
+registerIcon(
+	"close",
+	(props) => {
+		return jsx("svg", {
+			...props,
+			viewBox: "0 0 32 32",
+			children: jsx("path", {
+				fill: "currentColor",
+				strokeWidth: "1",
+				stroke: "currentColor",
+				d: "M17.8 16l9.84-9.84c.48-.48.48-1.2 0-1.68s-1.2-.48-1.68 0l-9.84 9.84L6.04 4.36c-.48-.48-1.2-.48-1.68 0s-.48 1.2 0 1.68L14.32 16l-9.96 9.96c-.48.48-.48 1.2 0 1.68s1.2.48 1.68 0L16 17.68l9.96 9.96c.48.48 1.2.48 1.68 0s.48-1.2 0-1.68L17.8 16z",
+			}),
+		});
+	},
+	true,
+);
+
 var DropdownIcon = registerIcon(
 	"drop-down",
 	(props) => {
@@ -590,6 +644,248 @@ var DropdownIcon = registerIcon(
 	true,
 );
 
+registerIcon(
+	"folder",
+	(props) => {
+		return jsx("svg", {
+			...props,
+			viewBox: "0 0 16 16",
+			children: jsx("path", {
+				d: "M1 5h13v9H1zm1 0h6L7 3H3z",
+				fill: "currentColor",
+				stroke: "none",
+			}),
+		});
+	},
+	true,
+);
+
+registerIcon(
+	"folder-open",
+	(props) => {
+		return jsxs("svg", {
+			...props,
+			viewBox: "0 0 16 16",
+			children: [
+				jsx("path", {
+					d: "M0 5v7l2.5-6H13V5zm1 0h6L6 3H2z",
+					fill: "currentColor",
+					stroke: "none",
+				}),
+				jsx("path", {
+					d: "M3 7h13l-3 7H0z",
+					fill: "currentColor",
+					stroke: "none",
+				}),
+			],
+		});
+	},
+	true,
+);
+
+registerIcon(
+	"menu",
+	(props) => {
+		return jsxs("svg", {
+			...props,
+			viewBox: "0 0 24 24",
+			children: [
+				jsx("path", {
+					d: "M0 0h24v24H0z",
+					fill: "none",
+				}),
+				jsx("path", {
+					d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
+					fill: "currentColor",
+				}),
+			],
+		});
+	},
+	true,
+);
+
+registerIcon(
+	"loading",
+	(props) => {
+		let style = {
+			animation: "linear infinite 0.5s cx-rotate",
+		};
+		if (props && props.style) Object.assign(style, props.style);
+		props = {
+			...props,
+			style,
+		};
+		return jsx("svg", {
+			...props,
+			viewBox: "0 0 50 50",
+			children: jsx("path", {
+				fill: "currentColor",
+				d: "M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z",
+			}),
+		});
+	},
+	true,
+);
+
+registerIcon(
+	"search",
+	(props) => {
+		return jsx("svg", {
+			...props,
+			viewBox: "0 0 32 32",
+			children: jsx("path", {
+				fill: "currentColor",
+				d: "M25.595 22.036l-5.26-5.075c.75-1.18 1.206-2.56 1.206-4.05 0-4.32-3.63-7.82-8.103-7.82-4.477 0-8.107 3.503-8.107 7.82 0 4.32 3.63 7.825 8.106 7.825 1.544 0 2.972-.44 4.198-1.162l5.26 5.074c.37.356.98.354 1.35 0l1.352-1.304c.37-.357.37-.947 0-1.304zm-12.16-3.91c-2.985 0-5.405-2.336-5.405-5.216 0-2.88 2.42-5.214 5.405-5.214 2.984 0 5.404 2.335 5.404 5.214 0 2.88-2.42 5.215-5.407 5.215z",
+			}),
+		});
+	},
+	true,
+);
+
+registerIcon(
+	"cx",
+	(props) => {
+		return jsx("svg", {
+			...props,
+			viewBox: "-347 249.7 48 48",
+			children: jsxs("g", {
+				children: [
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-337.1 273.16l-4.23-7.33h8.46z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-318.32 273.16l-4.23-7.33h8.46z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-337.53 273.43h-8.45l4.22-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-309.38 273.43h-8.46l4.23-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-332.4 265.03l-4.22-7.33h8.46z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-304.24 265.03l-4.23-7.33h8.45z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-322.97 265.03l-4.28-7.33h8.5z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-332.87 265.3h-8.46l4.23-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-323.45 265.3h-8.46l4.2-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-314.1 265.3h-8.45l4.23-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-308.9 273.16l-4.23-7.33h8.46z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-304.67 265.3h-8.46l4.23-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-314.1 281.57h-8.45l4.23-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-313.6 281.3l-4.24-7.33h8.46z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-318.32 289.43l-4.23-7.33h8.46z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-304.67 281.57h-8.46l4.23-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-308.9 289.43l-4.23-7.33h8.46z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-341.76 281.3l-4.22-7.33h8.45z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-332.87 281.57h-8.46l4.23-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-337.1 289.43l-4.23-7.33h8.46z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-327.68 289.43l-4.23-7.33h8.43z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						opacity: "0.7",
+						d: "M-328.16 289.7h-8.46l4.23-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-318.75 289.7h-8.5l4.28-7.33z",
+					}),
+					jsx("path", {
+						fill: "currentColor",
+						d: "M-300.02 289.7h-8.45l4.23-7.33z",
+					}),
+				],
+			}),
+		});
+	},
+	true,
+);
+
+registerIcon(
+	"file",
+	(props) => {
+		return jsxs("svg", {
+			...props,
+			viewBox: "0 0 16 16",
+			children: [
+				jsx("path", {
+					d: "M2 2h5v5h5v7H2z",
+					fill: "currentColor",
+					stroke: "none",
+				}),
+				jsx("path", {
+					d: "M8 2v4h4z",
+					fill: "currentColor",
+					stroke: "none",
+				}),
+			],
+		});
+	},
+	true,
+);
+
 class Icon extends Widget {
 	declareData(...args) {
 		super.declareData(...args, {
@@ -662,7 +958,7 @@ class Button extends HtmlElement {
 		super.attachProps(context, instance, props);
 		if (!this.focusOnMouseDown) {
 			props.onMouseDown = (e) => {
-				if (this.onMouseDown && instance.invoke("onMouseDown", e.nativeEvent, instance) === false) return;
+				if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
 				preventFocus(e);
 			};
 		}
@@ -1366,7 +1662,7 @@ class CxCredit extends HtmlElement {
 			mouseTrap: true,
 			title: "Credits",
 			items: jsx$1("cx", {
-				children: jsxs("div", {
+				children: jsxs$1("div", {
 					ws: true,
 					children: [
 						"User interface of this project is implemented using the CxJS framework. For more information about CxJS, please visit",
@@ -1510,7 +1806,7 @@ class Section extends ContainerBase {
 				children: getContent(components.footer.render(context)),
 			});
 		}
-		return jsxs$1(
+		return jsxs(
 			"section",
 			{
 				className: data.classNames,
@@ -1633,7 +1929,7 @@ class ProgressBar extends Widget {
 		let { text, value, disabled } = data;
 		let { CSS, baseClass } = widget;
 		if (!isNumber(value)) value = 0;
-		return jsxs$1(
+		return jsxs(
 			"div",
 			{
 				className: CSS.expand(
@@ -1985,6 +2281,66 @@ class HighlightedSearchText extends Widget {
 HighlightedSearchText.prototype.styled = true;
 HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
 
+class ReactElementWrapper extends ContainerBase {
+	init() {
+		// Collect all props to pass to the React component
+		this.props = {};
+		if (this.jsxAttributes) {
+			for (const attr of this.jsxAttributes) {
+				// Skip CxJS reserved attributes and children-related attributes
+				if (
+					attr === "componentType" ||
+					attr === "visible" ||
+					attr === "if" ||
+					attr === "controller" ||
+					attr === "jsxAttributes" ||
+					attr === "layout" ||
+					attr === "outerLayout" ||
+					attr === "putInto" ||
+					attr === "contentFor" ||
+					attr === "children" ||
+					attr === "items"
+				)
+					continue;
+				this.props[attr] = this[attr];
+			}
+		}
+		super.init();
+	}
+	initInstance(_context, _instance) {
+		let events;
+		if (!isNonEmptyArray(this.jsxAttributes)) return;
+		events = {};
+		for (let prop of this.jsxAttributes) {
+			let f = this[prop];
+			if (prop.startsWith("on") && isFunction(f)) events[prop] = (...args) => f.apply(_instance, args);
+		}
+	}
+	declareData(...args) {
+		super.declareData(
+			{
+				props: {
+					structured: true,
+				},
+			},
+			...args,
+		);
+	}
+	render(context, instance, key) {
+		const { data } = instance;
+		// Render CxJS children to React elements
+		let children = this.renderChildren(context, instance);
+		if (children && isArray(children) && children.length === 0) children = undefined;
+		const props = {
+			key,
+			...data.props,
+			...instance.events,
+			children,
+		};
+		return VDOM.createElement(this.componentType, props);
+	}
+}
+
 let dropZones = [];
 let dragStartedZones = null;
 let activeZone = null;
@@ -2544,7 +2900,7 @@ class OverlayComponent extends VDOM.Component {
 		});
 		let result = content;
 		if (widget.modal || widget.backdrop) {
-			result = jsxs$1(
+			result = jsxs(
 				"div",
 				{
 					ref: (el) => {
@@ -3926,7 +4282,7 @@ class MsgBox {
 			};
 			let w = Window.create(
 				jsx$1("cx", {
-					children: jsxs(Window, {
+					children: jsxs$1(Window, {
 						title: opts.title,
 						header: opts.header,
 						mod: "alert",
@@ -3971,7 +4327,7 @@ class MsgBox {
 			};
 			let w = Window.create(
 				jsx$1("cx", {
-					children: jsxs(Window, {
+					children: jsxs$1(Window, {
 						title: opts.title,
 						header: opts.header,
 						mod: "alert",
@@ -3983,7 +4339,7 @@ class MsgBox {
 						dismissOnPopState: true,
 						children: [
 							opts.message || opts.items || opts.children,
-							jsxs(FlexRow, {
+							jsxs$1(FlexRow, {
 								putInto: "footer",
 								direction: MsgBox.prototype.footerDirection,
 								justify: MsgBox.prototype.footerJustify,
@@ -4670,7 +5026,7 @@ let MenuItemComponent$1 = class MenuItemComponent extends VDOM.Component {
 				className: CSS.element(baseClass, "baseline"),
 				children: "\u00A0",
 			});
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: classNames,
 			style: data.style,
 			tabIndex: !data.disabled && (widget.dropdown || widget.onClick || widget.checked) ? 0 : undefined,
@@ -5243,7 +5599,10 @@ class MenuItemComponent extends VDOM.Component {
 
 class Submenu extends MenuItem {}
 
-class Scroller extends Container {
+class Scroller extends StyledContainerBase {
+	constructor(config) {
+		super(config);
+	}
 	init() {
 		if (!this.vertical) this.horizontal = true; //default
 		super.init();
@@ -5265,7 +5624,6 @@ class Scroller extends Container {
 		);
 	}
 }
-Scroller.prototype.styled = true;
 Scroller.prototype.baseClass = "scroller";
 class HScrollerComponent extends VDOM.Component {
 	unsubscribeResize;
@@ -5290,7 +5648,7 @@ class HScrollerComponent extends VDOM.Component {
 	render() {
 		let { data, children, widget } = this.props;
 		let { CSS, baseClass } = widget;
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(
 				data.classNames,
 				CSS.state({
@@ -5905,7 +6263,7 @@ class Field extends PureContainerBase {
 	renderWrap(context, instance, key, content) {
 		let { data } = instance;
 		let interactive = !data.viewMode && !data.disabled;
-		return jsxs$1(
+		return jsxs(
 			"div",
 			{
 				className: data.classNames,
@@ -6087,7 +6445,7 @@ let Input$2 = class Input extends VDOM.Component {
 			});
 		}
 		let empty = this.input ? !this.trimmed(this.input.value) : data.empty;
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(
 				data.classNames,
 				CSS.state({
@@ -6284,7 +6642,7 @@ class Checkbox extends Field {
 	}
 	renderWrap(context, instance, key, content) {
 		let { data } = instance;
-		return jsxs$1(
+		return jsxs(
 			"label",
 			{
 				className: data.classNames,
@@ -6426,7 +6784,7 @@ class CheckboxCmp extends VDOM.Component {
 		let check = false;
 		if (this.state.value == null && widget.indeterminate) check = "indeterminate";
 		else if (this.state.value) check = "check";
-		return jsxs$1(
+		return jsxs(
 			"span",
 			{
 				tabIndex: widget.unfocusable || data.disabled ? undefined : data.tabIndex || 0,
@@ -6516,7 +6874,7 @@ class Radio extends Field {
 	}
 	renderWrap(context, instance, key, content) {
 		var { data } = instance;
-		return jsxs$1(
+		return jsxs(
 			"label",
 			{
 				className: data.classNames,
@@ -6776,7 +7134,7 @@ class SelectComponent extends VDOM.Component {
 				children: data.placeholder,
 			});
 		}
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(
 				data.classNames,
 				CSS.state({
@@ -6791,7 +7149,7 @@ class SelectComponent extends VDOM.Component {
 			onMouseDown: stopPropagation,
 			onTouchStart: stopPropagation,
 			children: [
-				jsxs$1("select", {
+				jsxs("select", {
 					id: data.id,
 					ref: (el) => {
 						this.select = el;
@@ -6908,7 +7266,7 @@ Widget.alias("option", Option);
 var ForwardIcon = registerIcon(
 	"forward",
 	(props) => {
-		return jsxs$1("svg", {
+		return jsxs("svg", {
 			...props,
 			viewBox: "0 0 20 20",
 			children: [
@@ -7380,7 +7738,7 @@ class CalendarCmp extends VDOM.Component {
 				date.setDate(date.getDate() + 1);
 			}
 			weeks.push(
-				jsxs$1(
+				jsxs(
 					"tr",
 					{
 						className: CSS.element(baseClass, "week"),
@@ -7394,7 +7752,7 @@ class CalendarCmp extends VDOM.Component {
 		let monthNames = culture.getMonthNames("long");
 		let dayNames = culture.getWeekdayNames("short").map((x) => x.substr(0, 2));
 		if (startWithMonday) dayNames = [...dayNames.slice(1), dayNames[0]];
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: data.classNames,
 			tabIndex: data.disabled || !data.focusable ? null : data.tabIndex || 0,
 			onKeyDown: (e) => this.handleKeyPress(e),
@@ -7416,11 +7774,11 @@ class CalendarCmp extends VDOM.Component {
 			onBlur: (e) => this.handleBlur(e),
 			children: [
 				this.state.activeView == "calendar" &&
-					jsxs$1("table", {
+					jsxs("table", {
 						children: [
-							jsxs$1("thead", {
+							jsxs("thead", {
 								children: [
-									jsxs$1(
+									jsxs(
 										"tr",
 										{
 											className: CSS.element(baseClass, "header"),
@@ -7438,7 +7796,7 @@ class CalendarCmp extends VDOM.Component {
 														className: CSS.element(baseClass, "icon-prev-month"),
 													}),
 												}),
-												jsxs$1("th", {
+												jsxs("th", {
 													className: CSS.element(baseClass, "display"),
 													colSpan: 3,
 													children: [
@@ -7468,7 +7826,7 @@ class CalendarCmp extends VDOM.Component {
 										},
 										"h",
 									),
-									jsxs$1(
+									jsxs(
 										"tr",
 										{
 											className: CSS.element(baseClass, "day-names"),
@@ -7953,7 +8311,7 @@ class LookupComponent extends VDOM.Component {
 				"msg",
 			);
 		}
-		return jsxs$1(
+		return jsxs(
 			"div",
 			{
 				ref: (el) => {
@@ -8101,7 +8459,7 @@ class LookupComponent extends VDOM.Component {
 			if (isNonEmptyArray(data.records)) {
 				let valueTextFormatter = widget.onGetRecordDisplayText ?? ((record) => record[widget.valueTextField]);
 				text = data.records.map((v, i) =>
-					jsxs$1(
+					jsxs(
 						"div",
 						{
 							className: CSS.element(baseClass, "tag", {
@@ -8142,7 +8500,7 @@ class LookupComponent extends VDOM.Component {
 			empty: !data.placeholder && data.empty,
 			error: data.error && (state.visited || !suppressErrorsUntilVisited || !data.empty),
 		};
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(data.classNames, CSS.state(states)),
 			style: data.style,
 			onMouseDown: stopPropagation,
@@ -8737,7 +9095,7 @@ let Input$1 = class Input extends VDOM.Component {
 				});
 		}
 		let empty = this.input ? !this.input.value : data.empty;
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(
 				data.classNames,
 				CSS.state({
@@ -9044,7 +9402,7 @@ class Input extends VDOM.Component {
 		let { widget, data, state } = instance;
 		let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
 		let empty = this.input ? !this.input.value : data.empty;
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(
 				data.classNames,
 				CSS.state({
@@ -9840,7 +10198,7 @@ class MonthPickerComponent extends VDOM.Component {
 			}
 			years.push(rows);
 		}
-		return jsxs$1("div", {
+		return jsxs("div", {
 			ref: (el) => {
 				this.dom.el = el;
 			},
@@ -10111,7 +10469,7 @@ class ColorPickerComponent extends VDOM.Component {
 				children: jsx(PixelPickerIcon, {}),
 			});
 		}
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: data.classNames,
 			style: data.style,
 			onBlur: this.onBlur.bind(this),
@@ -10134,7 +10492,7 @@ class ColorPickerComponent extends VDOM.Component {
 						},
 					}),
 				}),
-				jsxs$1("div", {
+				jsxs("div", {
 					className: CSS.element(baseClass, "details"),
 					children: [
 						jsx("div", {
@@ -10151,10 +10509,10 @@ class ColorPickerComponent extends VDOM.Component {
 								},
 							}),
 						}),
-						jsxs$1("div", {
+						jsxs("div", {
 							className: CSS.element(baseClass, "inputs"),
 							children: [
-								jsxs$1("label", {
+								jsxs("label", {
 									children: [
 										"H ",
 										jsx("input", {
@@ -10168,7 +10526,7 @@ class ColorPickerComponent extends VDOM.Component {
 										}),
 									],
 								}),
-								jsxs$1("label", {
+								jsxs("label", {
 									children: [
 										"S ",
 										jsx("input", {
@@ -10182,7 +10540,7 @@ class ColorPickerComponent extends VDOM.Component {
 										}),
 									],
 								}),
-								jsxs$1("label", {
+								jsxs("label", {
 									children: [
 										"L ",
 										jsx("input", {
@@ -10196,7 +10554,7 @@ class ColorPickerComponent extends VDOM.Component {
 										}),
 									],
 								}),
-								jsxs$1("label", {
+								jsxs("label", {
 									children: [
 										"A ",
 										jsx("input", {
@@ -10212,7 +10570,7 @@ class ColorPickerComponent extends VDOM.Component {
 								}),
 							],
 						}),
-						jsxs$1("div", {
+						jsxs("div", {
 							className: CSS.element(baseClass, "alpha"),
 							onMouseDown: this.onAlphaSelect.bind(this),
 							onTouchStart: this.onAlphaSelect.bind(this),
@@ -10233,10 +10591,10 @@ class ColorPickerComponent extends VDOM.Component {
 								}),
 							],
 						}),
-						jsxs$1("div", {
+						jsxs("div", {
 							className: CSS.element(baseClass, "inputs"),
 							children: [
-								jsxs$1("label", {
+								jsxs("label", {
 									children: [
 										"R ",
 										jsx("input", {
@@ -10250,7 +10608,7 @@ class ColorPickerComponent extends VDOM.Component {
 										}),
 									],
 								}),
-								jsxs$1("label", {
+								jsxs("label", {
 									children: [
 										"G ",
 										jsx("input", {
@@ -10264,7 +10622,7 @@ class ColorPickerComponent extends VDOM.Component {
 										}),
 									],
 								}),
-								jsxs$1("label", {
+								jsxs("label", {
 									children: [
 										"B ",
 										jsx("input", {
@@ -10278,7 +10636,7 @@ class ColorPickerComponent extends VDOM.Component {
 										}),
 									],
 								}),
-								jsxs$1("label", {
+								jsxs("label", {
 									children: [
 										"A ",
 										jsx("input", {
@@ -10294,7 +10652,7 @@ class ColorPickerComponent extends VDOM.Component {
 								}),
 							],
 						}),
-						jsxs$1("div", {
+						jsxs("div", {
 							className: CSS.element(baseClass, "preview"),
 							children: [
 								jsx("div", {
@@ -10314,7 +10672,7 @@ class ColorPickerComponent extends VDOM.Component {
 										}),
 									}),
 								}),
-								jsxs$1("div", {
+								jsxs("div", {
 									className: CSS.element(baseClass, "values"),
 									children: [
 										jsx("input", {
@@ -10738,7 +11096,7 @@ class MonthInput extends VDOM.Component {
 				subscribe: true,
 			});
 		let empty = this.input ? !this.input.value : data.empty;
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(
 				data.classNames,
 				CSS.state({
@@ -11090,7 +11448,7 @@ class ColorInput extends VDOM.Component {
 				subscribe: true,
 			});
 		let empty = this.input ? !this.input.value : data.empty;
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(
 				data.classNames,
 				CSS.state({
@@ -11289,8 +11647,10 @@ class ColorInput extends VDOM.Component {
 	}
 }
 
-//TODO: Implement UploadStatus which will enable canceling
 class UploadButton extends Field {
+	constructor(config) {
+		super(config);
+	}
 	declareData(...args) {
 		super.declareData(
 			{
@@ -11345,7 +11705,7 @@ class UploadButtonComponent extends VDOM.Component {
 			});
 			className = CSS.expand(className, CSS.state("icon"), !isNonEmptyArray(children) && CSS.state("empty"));
 		}
-		return jsxs$1("div", {
+		return jsxs("div", {
 			ref: (el) => {
 				this.el = el || undefined;
 			},
@@ -11583,7 +11943,7 @@ class SliderComponent extends VDOM.Component {
 			[anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
 			[widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
 		};
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: data.classNames,
 			style: data.style,
 			id: data.id,
@@ -11594,7 +11954,7 @@ class SliderComponent extends VDOM.Component {
 			children: [
 				label,
 				"\u00A0",
-				jsxs$1("div", {
+				jsxs("div", {
 					className: CSS.element(baseClass, "axis"),
 					children: [
 						rangeSize > 0 &&
@@ -11606,7 +11966,7 @@ class SliderComponent extends VDOM.Component {
 								},
 								"range",
 							),
-						jsxs$1(
+						jsxs(
 							"div",
 							{
 								className: CSS.element(baseClass, "space"),
@@ -11894,7 +12254,7 @@ class Switch extends Field {
 		let { CSS, baseClass } = this;
 		let text = data.text || this.renderChildren(context, instance);
 		let renderTextElement = text?.length != 0;
-		return jsxs$1(
+		return jsxs(
 			"div",
 			{
 				className: data.classNames,
@@ -11930,7 +12290,7 @@ class Switch extends Field {
 				children: [
 					this.labelPlacement && getContent(this.renderLabel(context, instance, "label")),
 					"\u00A0",
-					jsxs$1("div", {
+					jsxs("div", {
 						className: CSS.element(baseClass, "axis"),
 						children: [
 							jsx("div", {
@@ -12066,7 +12426,7 @@ class WheelComponent extends VDOM.Component {
 			...bpad,
 		];
 		if (!this.state.wheelHeight) displayedOptions = displayedOptions.slice(this.index, this.index + size);
-		return jsxs$1("div", {
+		return jsxs("div", {
 			tabIndex: this.props.focusable ? 0 : undefined,
 			className:
 				className ||
@@ -12076,7 +12436,7 @@ class WheelComponent extends VDOM.Component {
 			style: style,
 			onKeyDown: this.onKeyDown,
 			children: [
-				jsxs$1("div", {
+				jsxs("div", {
 					className: CSS.element(baseClass, "clip"),
 					style: {
 						width: this.state.wheelWidth,
@@ -12387,7 +12747,7 @@ class DateTimePickerComponent extends VDOM.Component {
 				),
 			);
 		}
-		return jsxs$1("div", {
+		return jsxs("div", {
 			tabIndex: 0,
 			ref: (el) => {
 				this.el = el;
@@ -12663,86 +13023,83 @@ class DateTimePickerComponent extends VDOM.Component {
 	}
 }
 
-/** @jsxImportSource react */
-const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }) => {
-	return Widget.create({
-		type: ContentResolver,
-		params: {
-			step,
-			format,
-			dummy: true,
-		},
-		onResolve: ({ step, format }) => {
-			let max = 24 * 60;
-			if (!step) step = 15;
-			if (step < 1) step = 1;
-			let times = [];
-			let today = zeroTime(new Date()).valueOf();
-			for (let m = 0; m < max; m += step) {
-				let time = m * 60 * 1000;
-				times.push({
-					id: m * 60 * 1000,
-					text: Format$1.value(today + time, format || "datetime;HHmm"),
-				});
-			}
-			let stepMs = step * 60 * 1000;
-			return Widget.create({
-				type: DataProxy,
-				data: {
-					$value: value,
-				},
-				immutable: true,
-				children: Widget.create({
-					type: DataProxy,
-					data: {
-						$selection: {
-							get: ({ $value }) => {
-								if ($value == null) return null;
-								let selectionDate = new Date($value);
-								let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
-								return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
-							},
-							set: (value, instance) => {
-								let { store } = instance;
-								let $value = store.get("$value");
-								let copy = $value ? new Date($value) : new Date();
-								let today = zeroTime(new Date()).valueOf();
-								let date = new Date(today + value);
-								copy.setHours(date.getHours());
-								copy.setMinutes(date.getMinutes());
-								copy.setSeconds(date.getSeconds());
-								copy.setMilliseconds(0);
-								let encode = encoding || Culture.getDefaultDateEncoding();
-								store.set("$value", encode(copy));
-							},
+const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }) =>
+	jsx$1("cx", {
+		children: jsx$1(ContentResolver, {
+			params: {
+				step,
+				format,
+				dummy: true,
+			},
+			onResolve: ({ step, format }) => {
+				let max = 24 * 60;
+				if (!step) step = 15;
+				if (step < 1) step = 1;
+				let times = [];
+				let today = zeroTime(new Date()).valueOf();
+				for (let m = 0; m < max; m += step) {
+					let time = m * 60 * 1000;
+					times.push({
+						id: m * 60 * 1000,
+						text: Format$1.value(today + time, format || "datetime;HHmm"),
+					});
+				}
+				let stepMs = step * 60 * 1000;
+				return jsx$1("cx", {
+					children: jsx$1(DataProxy, {
+						data: {
+							$value: value,
 						},
-					},
-					children: Widget.create({
-						type: List,
-						records: times,
-						recordAlias: "$time",
-						selection: {
-							type: KeySelection,
-							selection: {
-								bind: "$selection",
+						immutable: true,
+						children: jsx$1(DataProxy, {
+							data: {
+								$selection: {
+									get: ({ $value }) => {
+										if ($value == null) return null;
+										let selectionDate = new Date($value);
+										let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
+										return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
+									},
+									set: (value, instance) => {
+										let { store } = instance;
+										let $value = store.get("$value");
+										let copy = $value ? new Date($value) : new Date();
+										let today = zeroTime(new Date()).valueOf();
+										let date = new Date(today + value);
+										copy.setHours(date.getHours());
+										copy.setMinutes(date.getMinutes());
+										copy.setSeconds(date.getSeconds());
+										copy.setMilliseconds(0);
+										let encode = encoding || Culture.getDefaultDateEncoding();
+										store.set("$value", encode(copy));
+									},
+								},
 							},
-						},
-						...props,
-						onItemClick: (e, instance) => {
-							if (!onSelect) return;
-							let date = new Date(instance.store.get("$value"));
-							if (isString(onSelect)) instance.invokeControllerMethod(onSelect, e, instance, date);
-							else if (isFunction(onSelect)) onSelect(e, instance, date);
-						},
-						children: HtmlElement.create("div", {
-							text: bind("$time.text"),
+							children: jsx$1(List, {
+								records: times,
+								recordAlias: "$time",
+								selection: {
+									type: KeySelection,
+									selection: bind("$selection"),
+								},
+								...props,
+								onItemClick: (e, instance) => {
+									if (!onSelect) return;
+									let date = new Date(instance.store.get("$value"));
+									if (isString(onSelect)) instance.invokeControllerMethod(onSelect, e, instance, date);
+									else if (isFunction(onSelect)) onSelect(e, instance, date);
+								},
+								children: jsx$1("div", {
+									text: bind("$time.text"),
+								}),
+							}),
 						}),
 					}),
-				}),
-			});
-		},
-	});
-});
+				});
+			},
+		}),
+	}),
+);
 
 class DateTimeField extends Field {
 	constructor(config) {
@@ -13029,7 +13386,7 @@ class DateTimeInput extends VDOM.Component {
 				subscribe: true,
 			});
 		let empty = this.input ? !this.input.value : data.empty;
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: CSS.expand(
 				data.classNames,
 				CSS.state({
@@ -13264,6 +13621,9 @@ Widget.alias("timefield", TimeField);
 Localization.registerPrototype("cx/widgets/TimeField", TimeField);
 
 class Validator extends Field {
+	constructor(config) {
+		super(config);
+	}
 	declareData(...args) {
 		return super.declareData(...args, {
 			value: {
@@ -14230,7 +14590,7 @@ class Grid extends ContainerBase {
 					let onContextMenu;
 					if (this.onColumnContextMenu) onContextMenu = (e) => instance.invoke("onColumnContextMenu", e, hdinst);
 					result[l].push(
-						jsxs$1(
+						jsxs(
 							"th",
 							{
 								colSpan: colSpan,
@@ -15214,7 +15574,7 @@ class GridComponent extends VDOM.Component {
 						}),
 						children: jsx("div", {
 							className: CSS.element(baseClass, "fixed-table-wrapper"),
-							children: jsxs$1("table", {
+							children: jsxs("table", {
 								ref: (el) => {
 									this.dom.fixedTable = el;
 								},
@@ -15238,7 +15598,7 @@ class GridComponent extends VDOM.Component {
 					}),
 					children: jsx("div", {
 						className: CSS.element(baseClass, "table-wrapper"),
-						children: jsxs$1("table", {
+						children: jsxs("table", {
 							ref: (el) => {
 								this.dom.table = el;
 								if (this.props.instance.widget.onRef) this.props.instance.invoke("onRef", el, this.props.instance);
@@ -15330,7 +15690,7 @@ class GridComponent extends VDOM.Component {
 				},
 			});
 		}
-		return jsxs$1("div", {
+		return jsxs("div", {
 			className: data.classNames,
 			style: {
 				...data.style,
@@ -16784,13 +17144,13 @@ class TreeNode extends ContainerBase {
 		}
 		let arrowIcon = this.arrowIcon;
 		if (this.hideIcon && data.loading) arrowIcon = this.loadingIcon;
-		return jsxs$1(
+		return jsxs(
 			"div",
 			{
 				className: data.classNames,
 				style: data.style,
 				children: [
-					jsxs$1("div", {
+					jsxs("div", {
 						className: CSS.element(baseClass, "handle"),
 						onClick: (e) => this.toggle(e, instance),
 						onMouseDown: !this.hideIcon ? stopPropagation : undefined,
@@ -16924,7 +17284,7 @@ Pagination.prototype.length = 5;
 Pagination.prototype.styled = true;
 Widget.alias("pagination", Pagination);
 
-class DragSource extends ContainerBase {
+class DragSource extends StyledContainerBase {
 	constructor(config) {
 		super(config);
 	}
@@ -16972,7 +17332,6 @@ class DragSource extends ContainerBase {
 		);
 	}
 }
-DragSource.prototype.styled = true;
 DragSource.prototype.baseClass = "dragsource";
 DragSource.prototype.hideOnDrag = false;
 DragSource.prototype.handled = false;
@@ -17111,7 +17470,7 @@ DragHandle.prototype.styled = true;
 DragHandle.prototype.baseClass = "draghandle";
 Widget.alias("draghandle", DragHandle);
 
-class DropZone extends ContainerBase {
+class DropZone extends StyledContainerBase {
 	constructor(config) {
 		super(config);
 	}
@@ -17161,7 +17520,6 @@ class DropZone extends ContainerBase {
 		);
 	}
 }
-DropZone.prototype.styled = true;
 DropZone.prototype.nearDistance = 0;
 DropZone.prototype.hinflate = 0;
 DropZone.prototype.vinflate = 0;
@@ -17380,6 +17738,7 @@ export {
 	Pagination,
 	ProgressBar,
 	Radio,
+	ReactElementWrapper,
 	RedirectRoute,
 	Resizer,
 	Route,