cx 26.0.14 → 26.1.0

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/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/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/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();
     }