cx 26.0.14 → 26.1.1

package/build/ui/VDOM.d.ts

@@ -1,20 +1 @@
-import type * as React from "react";
-import type { Component } from "react";
-import type { unstable_batchedUpdates, render, findDOMNode, createPortal, unstable_renderSubtreeIntoContainer, hydrate, unmountComponentAtNode } from "react-dom";
-import type { createRoot, hydrateRoot } from "react-dom/client";
-export interface VDOMType extends Omit<typeof React, "default"> {
-    allowRenderOutputCaching?: boolean;
-    Component: typeof Component;
-    DOM: {
-        unstable_batchedUpdates: typeof unstable_batchedUpdates;
-        render: typeof render;
-        findDOMNode: typeof findDOMNode;
-        createPortal: typeof createPortal;
-        createRoot: typeof createRoot;
-        hydrateRoot: typeof hydrateRoot;
-        hydrate: typeof hydrate;
-        unmountComponentAtNode: typeof unmountComponentAtNode;
-        unstable_renderSubtreeIntoContainer: typeof unstable_renderSubtreeIntoContainer;
-    };
-}
-export declare const VDOM: VDOMType;
+export { VDOM } from "cx-react";

package/build/ui/VDOM.js

@@ -1,3 +1 @@
-// @ts-expect-error
-import { VDOM as vdom } from "cx-react";
-export const VDOM = vdom;
+export { VDOM } from "cx-react";

package/build/ui/Widget.d.ts

@@ -5,7 +5,7 @@ import { RenderingContext } from "./RenderingContext";
 import type { Controller, ControllerConfig, ControllerFactory } from "./Controller";
 import { BooleanProp, ClassProp, ModProp, StyleProp } from "./Prop";
 import { Instance } from "./Instance";
-export declare const VDOM: import("./VDOM").VDOMType;
+export declare const VDOM: import("cx-react").CxVDOM;
 export type ControllerProp = CreateConfig<typeof Controller> | (ControllerConfig & {
     type?: never;
     $type?: never;

package/build/ui/Widget.js

@@ -39,11 +39,6 @@ export class Widget extends Component {
             this.style = this.styles;
         if (this.styled)
             this.style = parseStyle(this.style);
-        else if (this.style) {
-            Console.warn("Components that allow use of the style attribute should set styled = true on their prototype. This will be an error in future versions.");
-            this.style = parseStyle(this.style);
-            this.styled = true;
-        }
         if (typeof this.if !== "undefined")
             this.visible = this.if;
         this.declareData();

package/build/ui/app/startAppLoop.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/** @jsxImportSource react */
 import { VDOM } from "../Widget";
 import { Store } from "../../data/Store";
 import { Cx } from "../Cx";
@@ -22,13 +21,8 @@ export function startAppLoop(parentDOMElement, storeOrInstance, widget, options
     else
         throw new Error("Second argument to startAppLoop should be either of type Store or Instance");
     let content = (_jsx(Cx, { store: store, widget: widget, instance: instance, parentInstance: parentInstance, options: options, subscribe: true }));
-    let root = null;
-    if (VDOM.DOM.createRoot) {
-        root = VDOM.DOM.createRoot(parentDOMElement);
-        root.render(content);
-    }
-    else
-        VDOM.DOM.render(content, parentDOMElement);
+    let root = VDOM.DOM.createRoot(parentDOMElement);
+    root.render(content);
     let stopped = false;
     return function () {
         if (stopped)
@@ -46,8 +40,6 @@ export function startAppLoop(parentDOMElement, storeOrInstance, widget, options
 function destroy(parentDOMElement, options, root) {
     if (root)
         root.unmount();
-    else
-        VDOM.DOM.unmountComponentAtNode(parentDOMElement);
     if (options.removeParentDOMElement && parentDOMElement.parentNode)
         parentDOMElement.parentNode.removeChild(parentDOMElement);
 }

package/build/util/Component.js

@@ -85,6 +85,11 @@ export class Component {
         let cfg = config;
         if (more)
             cfg = Object.assign({}, config, more);
+        // Check if merged cfg has type/$type that should override cmpType
+        // Only redirect if cfgType is a class (not a string alias or factory) to prevent infinite recursion
+        let cfgType = cfg && (cfg.type || cfg.$type);
+        if (cfgType && cfgType.isComponentType && cfgType !== cmpType)
+            return this.create(cfg);
         let cmp = new cmpType(cfg);
         if (cmpType.autoInit && cmp.init)
             cmp.init();

package/build/util/test/createTestRenderer.d.ts

@@ -1,5 +1,7 @@
 /** @jsxImportSource react */
 import renderer from "react-test-renderer";
+import { act } from "react";
 import { View } from "../../data/View";
-export declare function createTestRenderer(store: View, widget: any): renderer.ReactTestRenderer;
+export declare function createTestRenderer(store: View, widget: any): Promise<renderer.ReactTestRenderer>;
 export declare function createTestWidget(store: View, widget: any): import("react/jsx-runtime").JSX.Element;
+export { act };

package/build/util/test/createTestRenderer.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** @jsxImportSource react */
 import renderer from "react-test-renderer";
+import { act } from "react";
 import { Cx } from "../../ui/Cx";
-export function createTestRenderer(store, widget) {
-    return renderer.create(createTestWidget(store, widget));
+export async function createTestRenderer(store, widget) {
+    let result;
+    await act(async () => {
+        result = renderer.create(createTestWidget(store, widget));
+    });
+    return result;
 }
 export function createTestWidget(store, widget) {
     return _jsx(Cx, { widget: widget, store: store, subscribe: true, immediate: true });
 }
+export { act };

package/build/widgets/form/Checkbox.d.ts

@@ -1,5 +1,4 @@
 /** @jsxImportSource react */
-import * as React from "react";
 import type { Instance } from "../../ui/Instance";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import { Field, FieldConfig, FieldInstance } from "./Field";

package/build/widgets/form/Checkbox.js

@@ -1,4 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
 import { VDOM } from "../../ui/VDOM";
 import { Widget, getContent } from "../../ui/Widget";
 import { stopPropagation } from "../../util/eventCallbacks";

package/build/widgets/form/ColorField.d.ts

@@ -1,5 +1,4 @@
 /** @jsxImportSource react */
-import * as React from "react";
 import { DropdownWidgetProps, Instance } from "../../ui/Instance";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import { DropdownConfig } from "../overlay/Dropdown";

package/build/widgets/form/ColorField.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
 import { Cx } from "../../ui/Cx";
 import { VDOM, Widget, getContent } from "../../ui/Widget";
 import { parseColor } from "../../util/color/parseColor";
@@ -129,8 +130,7 @@ class ColorInput extends VDOM.Component {
         let { CSS, baseClass, suppressErrorsUntilVisited, showClear, alwaysShowClear } = widget;
         let insideButton;
         if (!data.readOnly && !data.disabled) {
-            if (showClear &&
-                (((!data.required || alwaysShowClear) && !data.empty) || instance.state?.inputError))
+            if (showClear && (((!data.required || alwaysShowClear) && !data.empty) || instance.state?.inputError))
                 insideButton = (_jsx("div", { className: CSS.element(baseClass, "clear"), onMouseDown: (e) => {
                         e.preventDefault();
                         e.stopPropagation();

package/build/widgets/form/DateTimeField.d.ts

@@ -1,5 +1,3 @@
-/** @jsxImportSource react */
-import * as React from "react";
 import type { Instance } from "../../ui/Instance";
 import { FieldInstance } from "./Field";
 import type { RenderingContext } from "../../ui/RenderingContext";

package/build/widgets/form/DateTimeField.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
 import { StringTemplate } from "../../data/StringTemplate";
 import { Culture } from "../../ui/Culture";
 import { Cx } from "../../ui/Cx";

package/build/widgets/form/DateTimePicker.d.ts

@@ -1,5 +1,3 @@
-/** @jsxImportSource react */
-import * as React from "react";
 import type { Instance } from "../../ui/Instance";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import { Widget } from "../../ui/Widget";

package/build/widgets/form/DateTimePicker.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
 import { Culture } from "../../ui/Culture";
 import { offFocusOut, oneFocusOut } from "../../ui/FocusManager";
 import { enableCultureSensitiveFormatting } from "../../ui/Format";

package/build/widgets/form/Radio.d.ts

@@ -2,7 +2,6 @@
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
 import { Field, FieldConfig, FieldInstance } from "./Field";
-import * as React from "react";
 import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
 export interface RadioConfig extends FieldConfig {
     /** Selected value. If the value is equal to `option`, the radio button appears checked. */

package/build/widgets/form/Slider.js

@@ -108,7 +108,15 @@ class SliderComponent extends VDOM.Component {
             [anchor]: `${(100 * rangeStart) / (maxValue - minValue)}%`,
             [widget.vertical ? "height" : "width"]: `${(100 * rangeSize) / (maxValue - minValue)}%`,
         };
-        return (_jsxs("div", { className: data.classNames, style: data.style, id: data.id, onClick: (e) => this.onClick(e), ref: (el) => (this.dom.el = el || undefined), onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(instance)), children: [label, "\u00A0", _jsxs("div", { className: CSS.element(baseClass, "axis"), children: [rangeSize > 0 && _jsx("div", { className: CSS.element(baseClass, "range"), style: rangeStyle }, "range"), _jsxs("div", { className: CSS.element(baseClass, "space"), ref: (c) => (this.dom.range = c || undefined), children: [widget.showFrom && (_jsx("div", { className: CSS.element(baseClass, "handle"), tabIndex: data.disabled ? undefined : data.tabIndex || 0, style: fromHandleStyle, onMouseDown: (e) => this.onHandleMouseDown(e, "from"), onMouseMove: (e) => tooltipMouseMove(e, instance, widget.fromTooltip, { tooltipName: "fromTooltip" }), onMouseLeave: (e) => this.onHandleMouseLeave(e, "from"), onTouchStart: (e) => this.onHandleMouseDown(e, "from"), ref: (c) => (this.dom.from = c || undefined) }, "from")), widget.showTo && (_jsx("div", { className: CSS.element(baseClass, "handle"), tabIndex: data.disabled ? undefined : 0, style: toHandleStyle, onMouseDown: (e) => this.onHandleMouseDown(e, "to"), onMouseMove: (e) => tooltipMouseMove(e, instance, widget.toTooltip, { tooltipName: "toTooltip" }), onMouseLeave: (e) => this.onHandleMouseLeave(e, "to"), onTouchStart: (e) => this.onHandleMouseDown(e, "to"), ref: (c) => (this.dom.to = c || undefined) }, "to"))] }, "space")] })] }));
+        return (_jsxs("div", { className: data.classNames, style: data.style, id: data.id, onClick: (e) => this.onClick(e), ref: (el) => {
+                this.dom.el = el || undefined;
+            }, onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(instance)), children: [label, "\u00A0", _jsxs("div", { className: CSS.element(baseClass, "axis"), children: [rangeSize > 0 && _jsx("div", { className: CSS.element(baseClass, "range"), style: rangeStyle }, "range"), _jsxs("div", { className: CSS.element(baseClass, "space"), ref: (c) => {
+                                this.dom.range = c || undefined;
+                            }, children: [widget.showFrom && (_jsx("div", { className: CSS.element(baseClass, "handle"), tabIndex: data.disabled ? undefined : data.tabIndex || 0, style: fromHandleStyle, onMouseDown: (e) => this.onHandleMouseDown(e, "from"), onMouseMove: (e) => tooltipMouseMove(e, instance, widget.fromTooltip, { tooltipName: "fromTooltip" }), onMouseLeave: (e) => this.onHandleMouseLeave(e, "from"), onTouchStart: (e) => this.onHandleMouseDown(e, "from"), ref: (c) => {
+                                        this.dom.from = c || undefined;
+                                    } }, "from")), widget.showTo && (_jsx("div", { className: CSS.element(baseClass, "handle"), tabIndex: data.disabled ? undefined : 0, style: toHandleStyle, onMouseDown: (e) => this.onHandleMouseDown(e, "to"), onMouseMove: (e) => tooltipMouseMove(e, instance, widget.toTooltip, { tooltipName: "toTooltip" }), onMouseLeave: (e) => this.onHandleMouseLeave(e, "to"), onTouchStart: (e) => this.onHandleMouseDown(e, "to"), ref: (c) => {
+                                        this.dom.to = c || undefined;
+                                    } }, "to"))] }, "space")] })] }));
     }
     UNSAFE_componentWillReceiveProps(props) {
         this.setState({

package/build/widgets/form/Switch.d.ts

@@ -2,7 +2,6 @@
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
 import { Field, FieldConfig, FieldInstance } from "./Field";
-import * as React from "react";
 import { BooleanProp, StringProp, StyleProp } from "../../ui/Prop";
 export interface SwitchConfig extends FieldConfig {
     /** Value indicating that switch is on. */

package/build/widgets/form/Switch.js

@@ -54,7 +54,7 @@ export class Switch extends Field {
         let { CSS, baseClass } = this;
         let text = data.text || this.renderChildren(context, instance);
         let renderTextElement = text?.length != 0;
-        return (_jsxs("div", { className: data.classNames, style: data.style, id: data.id, tabIndex: data.disabled ? undefined : (data.tabIndex || 0), onMouseDown: (e) => {
+        return (_jsxs("div", { className: data.classNames, style: data.style, id: data.id, tabIndex: data.disabled ? undefined : data.tabIndex || 0, onMouseDown: (e) => {
                 e.stopPropagation();
                 if (!this.focusOnMouseDown)
                     preventFocus(e);

package/build/widgets/form/Wheel.d.ts

@@ -4,7 +4,6 @@ import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
 import type { CSS } from "../../ui/CSS";
-import * as React from "react";
 import { Prop, StructuredProp } from "../../ui/Prop";
 export interface WheelConfig extends PureContainerConfig {
     /** The selected value. */

package/build/widgets/grid/Grid.d.ts

@@ -1,5 +1,3 @@
-/** @jsxImportSource react */
-import * as React from "react";
 import { ArrayAdapter } from "../../ui/adapter/ArrayAdapter";
 import { DataAdapter, DataAdapterRecord } from "../../ui/adapter/DataAdapter";
 import { GroupAdapter } from "../../ui/adapter/GroupAdapter";

package/build/widgets/grid/GridCellEditor.js

@@ -17,7 +17,9 @@ class GridCellEditorCmp extends VDOM.Component {
     el = null;
     render() {
         let { className, style, children } = this.props;
-        return (_jsx("div", { ref: (el) => (this.el = el), className: className, style: style, children: children }));
+        return (_jsx("div", { ref: (el) => {
+                this.el = el;
+            }, className: className, style: style, children: children }));
     }
     componentDidMount() {
         if (!isFocusedDeep(this.el)) {

package/build/widgets/icons/calendar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { registerIcon } from './registry';
-export default 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" })] });
+/** @jsxImportSource react */
+import { registerIcon } from "./registry";
+export default registerIcon("calendar", ({ key, ...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" })] }, key));
 }, true);

package/build/widgets/icons/check.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default registerIcon('check', (props) => {
-    return _jsx("svg", { ...props, viewBox: "0 0 64 64", children: _jsx("path", { d: "M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z", fill: "currentColor" }) });
+export default registerIcon('check', ({ key, ...props }) => {
+    return _jsx("svg", { ...props, viewBox: "0 0 64 64", children: _jsx("path", { d: "M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z", fill: "currentColor" }) }, key);
 }, true);

package/build/widgets/icons/clear.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default registerIcon('clear', (props) => {
-    return _jsx("svg", { ...props, viewBox: "0 0 32 32", children: _jsx("path", { fill: "currentColor", strokeWidth: "1", stroke: "currentColor", d: "M16.9 16l4.92-4.92c.24-.24.24-.6 0-.84s-.6-.24-.84 0l-4.92 4.92-5.04-4.98c-.24-.24-.6-.24-.84 0s-.24.6 0 .84L15.16 16l-4.98 4.98c-.24.24-.24.6 0 .84s.6.24.84 0L16 16.84l4.98 4.98c.24.24.6.24.84 0s.24-.6 0-.84L16.9 16z" }) });
+export default registerIcon('clear', ({ key, ...props }) => {
+    return _jsx("svg", { ...props, viewBox: "0 0 32 32", children: _jsx("path", { fill: "currentColor", strokeWidth: "1", stroke: "currentColor", d: "M16.9 16l4.92-4.92c.24-.24.24-.6 0-.84s-.6-.24-.84 0l-4.92 4.92-5.04-4.98c-.24-.24-.6-.24-.84 0s-.24.6 0 .84L15.16 16l-4.98 4.98c-.24.24-.24.6 0 .84s.6.24.84 0L16 16.84l4.98 4.98c.24.24.6.24.84 0s.24-.6 0-.84L16.9 16z" }) }, key);
 }, true);

package/build/widgets/icons/close.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from "./registry";
-export default 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" }) }));
+export default registerIcon("close", ({ key, ...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" }) }, key));
 }, true);

package/build/widgets/icons/cx.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default 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" })] }) });
+export default registerIcon('cx', ({ key, ...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" })] }) }, key);
 }, true);

package/build/widgets/icons/drop-down.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default registerIcon('drop-down', (props) => {
-    return _jsx("svg", { ...props, viewBox: "0 0 20 20", children: _jsx("path", { fill: "currentColor", strokeWidth: "0", stroke: "currentColor", d: "M4.516 8.147L10.01 12.5l5.474-4.33-.473-.65-5 3.98-5-4z" }) });
+export default registerIcon('drop-down', ({ key, ...props }) => {
+    return _jsx("svg", { ...props, viewBox: "0 0 20 20", children: _jsx("path", { fill: "currentColor", strokeWidth: "0", stroke: "currentColor", d: "M4.516 8.147L10.01 12.5l5.474-4.33-.473-.65-5 3.98-5-4z" }) }, key);
 }, true);

package/build/widgets/icons/file.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default 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" })] });
+export default registerIcon('file', ({ key, ...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" })] }, key);
 }, true);

package/build/widgets/icons/folder-open.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default 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" })] });
+export default registerIcon('folder-open', ({ key, ...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" })] }, key);
 }, true);

package/build/widgets/icons/folder.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default registerIcon('folder', (props) => {
-    return _jsx("svg", { ...props, viewBox: "0 0 16 16", children: _jsx("path", { d: "M1 5h13v9H1zm1 0h6L7 3H3z", fill: "currentColor", stroke: "none" }) });
+export default registerIcon('folder', ({ key, ...props }) => {
+    return _jsx("svg", { ...props, viewBox: "0 0 16 16", children: _jsx("path", { d: "M1 5h13v9H1zm1 0h6L7 3H3z", fill: "currentColor", stroke: "none" }) }, key);
 }, true);

package/build/widgets/icons/forward.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default registerIcon('forward', (props) => {
-    return _jsxs("svg", { ...props, viewBox: "0 0 20 20", children: [_jsx("path", { fill: "currentColor", strokeWidth: "0", stroke: "currentColor", d: "M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" }), _jsx("path", { fill: "currentColor", strokeWidth: "0", stroke: "currentColor", d: "M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" })] });
+export default registerIcon('forward', ({ key, ...props }) => {
+    return _jsxs("svg", { ...props, viewBox: "0 0 20 20", children: [_jsx("path", { fill: "currentColor", strokeWidth: "0", stroke: "currentColor", d: "M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" }), _jsx("path", { fill: "currentColor", strokeWidth: "0", stroke: "currentColor", d: "M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" })] }, key);
 }, true);

package/build/widgets/icons/loading.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default registerIcon('loading', (props) => {
+export default registerIcon('loading', ({ key, ...props }) => {
     let style = {
         animation: 'linear infinite 0.5s cx-rotate'
     };
@@ -10,5 +10,5 @@ export default registerIcon('loading', (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" }) });
+    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" }) }, key);
 }, true);

package/build/widgets/icons/menu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default 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" })] });
+export default registerIcon('menu', ({ key, ...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" })] }, key);
 }, true);

package/build/widgets/icons/pixel-picker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from "./registry";
-export default registerIcon("pixel-picker", (props) => {
-    return (_jsx("svg", { ...props, viewBox: "0 0 30 30", children: _jsx("path", { d: "M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z", fill: "currentColor" }) }));
+export default registerIcon("pixel-picker", ({ key, ...props }) => {
+    return (_jsx("svg", { ...props, viewBox: "0 0 30 30", children: _jsx("path", { d: "M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z", fill: "currentColor" }) }, key));
 }, true);

package/build/widgets/icons/search.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default 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" }) });
+export default registerIcon('search', ({ key, ...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" }) }, key);
 }, true);

package/build/widgets/icons/sort-asc.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default registerIcon('sort-asc', (props) => {
-    return _jsx("svg", { ...props, viewBox: "0 0 16 16", children: _jsx("path", { fill: "currentColor", d: "M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z" }) });
+export default registerIcon('sort-asc', ({ key, ...props }) => {
+    return _jsx("svg", { ...props, viewBox: "0 0 16 16", children: _jsx("path", { fill: "currentColor", d: "M10.5 5.8l-3-3-3 3 .707.708L7 4.688v8.312h1V4.69l1.793 1.817z" }) }, key);
 }, true);

package/build/widgets/icons/square.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { registerIcon } from './registry';
-export default registerIcon('square', (props) => {
-    return _jsx("svg", { ...props, viewBox: "0 0 64 64", children: _jsx("rect", { x: "12", y: "12", width: "40", height: "40", fill: "currentColor" }) });
+export default registerIcon('square', ({ key, ...props }) => {
+    return _jsx("svg", { ...props, viewBox: "0 0 64 64", children: _jsx("rect", { x: "12", y: "12", width: "40", height: "40", fill: "currentColor" }) }, key);
 }, true);

package/build/widgets/overlay/Overlay.d.ts

@@ -1,3 +1,5 @@
+/** @jsxImportSource react */
+import type { Root } from "cx-react";
 import { Store } from "../../data/Store";
 import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
 import { Instance } from "../../ui/Instance";
@@ -152,6 +154,7 @@ export declare class OverlayComponent<Props extends OverlayComponentProps = Over
     onPopState?: () => void;
     unsubscribeWheelBlock?: () => void;
     customStyle: any;
+    root: Root;
     constructor(props: Props);
     render(): import("react/jsx-runtime").JSX.Element | null;
     renderOverlay(): import("react/jsx-runtime").JSX.Element;

package/build/widgets/overlay/Overlay.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** @jsxImportSource react */
 import { isBinding, isBindingObject } from "../../data/Binding";
 import { startAppLoop } from "../../ui/app/startAppLoop";
 import { ContainerBase } from "../../ui/Container";
@@ -531,6 +530,7 @@ export class OverlayComponent extends VDOM.Component {
         widget.overlayWillUnmount(this.props.instance, this);
         if (this.ownedEl) {
             setTimeout(() => {
+                this.root?.unmount();
                 if (this.ownedEl?.parentNode)
                     this.ownedEl.parentNode.removeChild(this.ownedEl);
                 this.ownedEl = null;
@@ -590,7 +590,8 @@ export class OverlayComponent extends VDOM.Component {
     }
     componentDidUpdate() {
         if (this.containerEl && !VDOM.DOM.createPortal) {
-            VDOM.DOM.render(this.renderOverlay(), this.containerEl);
+            this.root = VDOM.DOM.createRoot(this.containerEl);
+            this.root.render(this.renderOverlay());
         }
         this.overlayDidUpdate();
     }