cx 26.0.14 → 26.1.0

package/dist/ui.js

@@ -69,7 +69,7 @@ import {
 	isNumber,
 	isDataRecord,
 } from "cx/util";
-import { VDOM as VDOM$2 } from "cx-react";
+import { VDOM as VDOM$1 } from "cx-react";
 import { NumberCulture, DateTimeCulture } from "intl-io";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -261,9 +261,6 @@ class CSS {
 CSS.classPrefix = "cx";
 CSSHelper.alias("cx", CSS);
 
-// @ts-expect-error
-const VDOM$1 = VDOM$2;
-
 const VDOM = VDOM$1;
 let widgetId = 100;
 class Widget extends Component {
@@ -3576,11 +3573,8 @@ function startAppLoop(parentDOMElement, storeOrInstance, widget, options = {}) {
 		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) return;
@@ -3595,7 +3589,6 @@ 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/dist/widgets.js

@@ -3180,6 +3180,7 @@ 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;
 			}, widget.destroyDelay);
@@ -3243,7 +3244,8 @@ 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();
 	}
@@ -11947,7 +11949,9 @@ class SliderComponent extends VDOM.Component {
 			style: data.style,
 			id: data.id,
 			onClick: (e) => this.onClick(e),
-			ref: (el) => (this.dom.el = el || undefined),
+			ref: (el) => {
+				this.dom.el = el || undefined;
+			},
 			onMouseMove: (e) => tooltipMouseMove$1(e, ...getFieldTooltip(instance)),
 			onMouseLeave: (e) => tooltipMouseLeave$1(e, ...getFieldTooltip(instance)),
 			children: [
@@ -11969,7 +11973,9 @@ class SliderComponent extends VDOM.Component {
 							"div",
 							{
 								className: CSS.element(baseClass, "space"),
-								ref: (c) => (this.dom.range = c || undefined),
+								ref: (c) => {
+									this.dom.range = c || undefined;
+								},
 								children: [
 									widget.showFrom &&
 										jsx(
@@ -11985,7 +11991,9 @@ class SliderComponent extends VDOM.Component {
 													}),
 												onMouseLeave: (e) => this.onHandleMouseLeave(e, "from"),
 												onTouchStart: (e) => this.onHandleMouseDown(e, "from"),
-												ref: (c) => (this.dom.from = c || undefined),
+												ref: (c) => {
+													this.dom.from = c || undefined;
+												},
 											},
 											"from",
 										),
@@ -12003,7 +12011,9 @@ class SliderComponent extends VDOM.Component {
 													}),
 												onMouseLeave: (e) => this.onHandleMouseLeave(e, "to"),
 												onTouchStart: (e) => this.onHandleMouseDown(e, "to"),
-												ref: (c) => (this.dom.to = c || undefined),
+												ref: (c) => {
+													this.dom.to = c || undefined;
+												},
 											},
 											"to",
 										),
@@ -13678,7 +13688,9 @@ class GridCellEditorCmp extends VDOM.Component {
 	render() {
 		let { className, style, children } = this.props;
 		return jsx("div", {
-			ref: (el) => (this.el = el),
+			ref: (el) => {
+				this.el = el;
+			},
 			className: className,
 			style: style,
 			children: children,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "26.0.14",
+   "version": "26.1.0",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "exports": {
       "./data": {
@@ -73,9 +73,10 @@
       "route-parser": "^0.0.5"
    },
    "peerDependencies": {
-      "@types/react": "*",
-      "react": "*",
-      "react-dom": "*"
+      "@types/react": ">=18",
+      "cx-react": ">=26",
+      "react": ">=18",
+      "react-dom": ">=18"
    },
    "repository": {
       "type": "git",
@@ -84,10 +85,10 @@
    "devDependencies": {
       "@types/jest": "^30.0.0",
       "@types/mocha": "^10.0.10",
-      "@types/node": "^22.10.2",
-      "@types/react-dom": "^18.3.1",
-      "@types/react-test-renderer": "^18.3.1",
-      "react-test-renderer": "^18.3.1",
+      "@types/node": "^25.0.3",
+      "@types/react-dom": "^19.2.3",
+      "@types/react-test-renderer": "^19.1.0",
+      "react-test-renderer": "^19.2.3",
       "ts-mocha": "^11.1.0",
       "ts-node": "^10.9.2",
       "tsconfig-paths": "^4.2.0",

package/src/charts/Chart.ts

@@ -1,108 +1,108 @@
-import { Widget, VDOM, getContent } from "../ui/Widget";
-import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance, SvgRenderingContext } from "../svg/BoundedObject";
-import { Axis } from "./axis/Axis";
-import type { NumericAxis } from "./axis/NumericAxis";
-import type { CategoryAxis } from "./axis/CategoryAxis";
-import type { TimeAxis } from "./axis/TimeAxis";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Create } from "../util/Component";
-
-/** Typed context interface for chart-related context properties */
-export interface ChartRenderingContext extends SvgRenderingContext {
-   axes?: Record<string, any>;
-}
-
-export interface ChartConfig extends BoundedObjectConfig {
-   /** Axis definition. Each key represent an axis, and each value hold axis configuration. */
-   axes?: Record<
-      string,
-      Create<typeof Axis> | Create<typeof NumericAxis> | Create<typeof CategoryAxis> | Create<typeof TimeAxis>
-   >;
-
-   /** Put axes over data series. */
-   axesOnTop?: boolean;
-}
-
-export interface ChartInstance extends BoundedObjectInstance {
-   calculators: Record<string, any>;
-   axes: Record<string, any>;
-}
-
-export class Chart extends BoundedObject<ChartConfig, ChartInstance> {
-   declare axes: Record<string, any>;
-   declare axesOnTop: boolean;
-
-   constructor(config?: ChartConfig) {
-      super(config);
-   }
-
-   init(): void {
-      super.init();
-
-      if (!this.axes) this.axes = {};
-
-      for (let axis in this.axes) {
-         this.axes[axis] = Axis.create(this.axes[axis]);
-      }
-   }
-
-   explore(context: ChartRenderingContext, instance: ChartInstance): void {
-      instance.calculators = { ...context.axes };
-
-      context.push("axes", instance.calculators);
-      instance.axes = {};
-
-      //axes need to be registered before children to be processed first
-      for (let axis in this.axes) {
-         let axisInstance = instance.getChild(context, this.axes[axis]);
-         if (axisInstance.scheduleExploreIfVisible(context)) {
-            instance.axes[axis] = axisInstance;
-            instance.calculators[axis] = this.axes[axis].report(context, axisInstance);
-         }
-      }
-
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
-      context.pop("axes");
-
-      for (let axis in instance.axes) {
-         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
-      }
-   }
-
-   prepare(context: ChartRenderingContext, instance: ChartInstance): void {
-      context.push("axes", instance.calculators);
-      super.prepare(context, instance);
-   }
-
-   prepareCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
-      context.pop("axes");
-      super.prepareCleanup(context, instance);
-   }
-
-   render(context: ChartRenderingContext, instance: ChartInstance, key: string): any[] {
-      let axes = [];
-      for (let k in instance.axes) {
-         axes.push(getContent(instance.axes[k].render(context, key + "-axis-" + k)));
-      }
-
-      let result = [];
-
-      if (!this.axesOnTop) result.push(axes);
-
-      result.push(this.renderChildren(context, instance));
-
-      if (this.axesOnTop) result.push(axes);
-
-      return result;
-   }
-}
-
-Chart.prototype.anchors = "0 1 1 0";
-Chart.prototype.styled = true;
-Chart.prototype.isPureContainer = true;
-Chart.prototype.axesOnTop = false;
-
-Widget.alias("chart", Chart);
+import { Widget, VDOM, getContent } from "../ui/Widget";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance, SvgRenderingContext } from "../svg/BoundedObject";
+import { Axis } from "./axis/Axis";
+import type { NumericAxis } from "./axis/NumericAxis";
+import type { CategoryAxis } from "./axis/CategoryAxis";
+import type { TimeAxis } from "./axis/TimeAxis";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Create } from "../util/Component";
+
+/** Typed context interface for chart-related context properties */
+export interface ChartRenderingContext extends SvgRenderingContext {
+   axes?: Record<string, any>;
+}
+
+export interface ChartConfig extends BoundedObjectConfig {
+   /** Axis definition. Each key represent an axis, and each value hold axis configuration. */
+   axes?: Record<
+      string,
+      Create<typeof Axis> | Create<typeof NumericAxis> | Create<typeof CategoryAxis> | Create<typeof TimeAxis>
+   >;
+
+   /** Put axes over data series. */
+   axesOnTop?: boolean;
+}
+
+export interface ChartInstance extends BoundedObjectInstance {
+   calculators: Record<string, any>;
+   axes: Record<string, any>;
+}
+
+export class Chart extends BoundedObject<ChartConfig, ChartInstance> {
+   declare axes: Record<string, any>;
+   declare axesOnTop: boolean;
+
+   constructor(config?: ChartConfig) {
+      super(config);
+   }
+
+   init(): void {
+      super.init();
+
+      if (!this.axes) this.axes = {};
+
+      for (let axis in this.axes) {
+         this.axes[axis] = Axis.create(this.axes[axis]);
+      }
+   }
+
+   explore(context: ChartRenderingContext, instance: ChartInstance): void {
+      instance.calculators = { ...context.axes };
+
+      context.push("axes", instance.calculators);
+      instance.axes = {};
+
+      //axes need to be registered before children to be processed first
+      for (let axis in this.axes) {
+         let axisInstance = instance.getChild(context, this.axes[axis]);
+         if (axisInstance.scheduleExploreIfVisible(context)) {
+            instance.axes[axis] = axisInstance;
+            instance.calculators[axis] = this.axes[axis].report(context, axisInstance);
+         }
+      }
+
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.pop("axes");
+
+      for (let axis in instance.axes) {
+         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.push("axes", instance.calculators);
+      super.prepare(context, instance);
+   }
+
+   prepareCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.pop("axes");
+      super.prepareCleanup(context, instance);
+   }
+
+   render(context: ChartRenderingContext, instance: ChartInstance, key: string): any[] {
+      let axes = [];
+      for (let k in instance.axes) {
+         axes.push(getContent(instance.axes[k].render(context, key + "-axis-" + k)));
+      }
+
+      let result = [];
+
+      if (!this.axesOnTop) result.push(axes);
+
+      result.push(this.renderChildren(context, instance));
+
+      if (this.axesOnTop) result.push(axes);
+
+      return result;
+   }
+}
+
+Chart.prototype.anchors = "0 1 1 0";
+Chart.prototype.styled = true;
+Chart.prototype.isPureContainer = true;
+Chart.prototype.axesOnTop = false;
+
+Widget.alias("chart", Chart);

package/src/data/ArrayElementView.ts

@@ -1,90 +1,90 @@
-import { AugmentedViewBase } from "./AugmentedViewBase";
-import { isArray } from "../util/isArray";
-import { Binding } from "./Binding";
-import { View } from "./View";
-
-export interface ArrayElementViewConfig {
-   store: View;
-   arrayAccessor: any;
-   immutable?: boolean;
-   recordAlias?: string;
-   indexAlias?: string;
-   lengthAlias?: string;
-   hasNestedAliases?: boolean;
-   recordBinding?: any;
-   indexBinding?: any;
-   lengthBinding?: any;
-   itemIndex: number;
-   sealed?: boolean;
-}
-
-export class ArrayElementView extends AugmentedViewBase {
-   declare arrayAccessor: any;
-   declare recordAlias: string;
-   declare indexAlias: string;
-   declare lengthAlias: string;
-   declare hasNestedAliases?: boolean;
-   declare recordBinding?: any;
-   declare indexBinding?: any;
-   declare lengthBinding?: any;
-   declare itemIndex: number;
-
-   constructor(config: ArrayElementViewConfig) {
-      super(config);
-      this.hasNestedAliases =
-         this.recordAlias.indexOf(".") >= 0 || this.indexAlias.indexOf(".") >= 0 || this.lengthAlias.indexOf(".") >= 0;
-      this.recordBinding = Binding.get(this.recordAlias);
-      if (this.hasNestedAliases) {
-         this.indexBinding = Binding.get(this.indexAlias);
-         this.lengthBinding = Binding.get(this.lengthAlias);
-      }
-   }
-
-   getExtraKeyBinding(key: string): any {
-      if (!key.startsWith(this.recordAlias)) return null;
-      if (key.length == this.recordAlias.length || key[this.recordAlias.length] == ".") return this.recordBinding;
-      return null;
-   }
-
-   deleteExtraKeyValue(key: string): boolean {
-      if (key != this.recordAlias) throw new Error(`Field ${key} cannot be deleted.`);
-      const array = this.arrayAccessor.get(this.store.getData());
-      if (!array) return false;
-      const newArray = [...array.slice(0, this.itemIndex), ...array.slice(this.itemIndex + 1)];
-      return this.arrayAccessor.set(newArray, this.store);
-   }
-
-   setExtraKeyValue(key: string, value: any): boolean {
-      if (key != this.recordAlias) throw new Error(`Field ${key} is read-only.`);
-      const array = this.arrayAccessor.get(this.store.getData());
-      if (!array || value === array[this.itemIndex]) return false;
-      const newArray = [...array.slice(0, this.itemIndex), value, ...array.slice(this.itemIndex + 1)];
-      return this.arrayAccessor.set(newArray, this.store);
-   }
-
-   embedAugmentData(result: any, parentStoreData: any): void {
-      let array = this.arrayAccessor.get(parentStoreData);
-      if (!isArray(array)) return;
-      if (!this.hasNestedAliases) {
-         result[this.recordAlias] = array[this.itemIndex];
-         result[this.indexAlias] = this.itemIndex;
-         result[this.lengthAlias] = array.length;
-      } else {
-         let copy = result;
-         copy = this.recordBinding.set(copy, array[this.itemIndex]);
-         copy = this.indexBinding.set(copy, this.itemIndex);
-         copy = this.lengthBinding.set(copy, array.length);
-         result[this.recordBinding.parts[0]] = copy[this.recordBinding.parts[0]];
-         result[this.indexBinding.parts[0]] = copy[this.indexBinding.parts[0]];
-         result[this.lengthBinding.parts[0]] = copy[this.lengthBinding.parts[0]];
-      }
-   }
-
-   setIndex(itemIndex: number): void {
-      this.itemIndex = itemIndex;
-   }
-}
-
-ArrayElementView.prototype.recordAlias = "$record";
-ArrayElementView.prototype.indexAlias = "$index";
-ArrayElementView.prototype.lengthAlias = "$length";
+import { AugmentedViewBase } from "./AugmentedViewBase";
+import { isArray } from "../util/isArray";
+import { Binding } from "./Binding";
+import { View } from "./View";
+
+export interface ArrayElementViewConfig {
+   store: View;
+   arrayAccessor: any;
+   immutable?: boolean;
+   recordAlias?: string;
+   indexAlias?: string;
+   lengthAlias?: string;
+   hasNestedAliases?: boolean;
+   recordBinding?: any;
+   indexBinding?: any;
+   lengthBinding?: any;
+   itemIndex: number;
+   sealed?: boolean;
+}
+
+export class ArrayElementView extends AugmentedViewBase {
+   declare arrayAccessor: any;
+   declare recordAlias: string;
+   declare indexAlias: string;
+   declare lengthAlias: string;
+   declare hasNestedAliases?: boolean;
+   declare recordBinding?: any;
+   declare indexBinding?: any;
+   declare lengthBinding?: any;
+   declare itemIndex: number;
+
+   constructor(config: ArrayElementViewConfig) {
+      super(config);
+      this.hasNestedAliases =
+         this.recordAlias.indexOf(".") >= 0 || this.indexAlias.indexOf(".") >= 0 || this.lengthAlias.indexOf(".") >= 0;
+      this.recordBinding = Binding.get(this.recordAlias);
+      if (this.hasNestedAliases) {
+         this.indexBinding = Binding.get(this.indexAlias);
+         this.lengthBinding = Binding.get(this.lengthAlias);
+      }
+   }
+
+   getExtraKeyBinding(key: string): any {
+      if (!key.startsWith(this.recordAlias)) return null;
+      if (key.length == this.recordAlias.length || key[this.recordAlias.length] == ".") return this.recordBinding;
+      return null;
+   }
+
+   deleteExtraKeyValue(key: string): boolean {
+      if (key != this.recordAlias) throw new Error(`Field ${key} cannot be deleted.`);
+      const array = this.arrayAccessor.get(this.store.getData());
+      if (!array) return false;
+      const newArray = [...array.slice(0, this.itemIndex), ...array.slice(this.itemIndex + 1)];
+      return this.arrayAccessor.set(newArray, this.store);
+   }
+
+   setExtraKeyValue(key: string, value: any): boolean {
+      if (key != this.recordAlias) throw new Error(`Field ${key} is read-only.`);
+      const array = this.arrayAccessor.get(this.store.getData());
+      if (!array || value === array[this.itemIndex]) return false;
+      const newArray = [...array.slice(0, this.itemIndex), value, ...array.slice(this.itemIndex + 1)];
+      return this.arrayAccessor.set(newArray, this.store);
+   }
+
+   embedAugmentData(result: any, parentStoreData: any): void {
+      let array = this.arrayAccessor.get(parentStoreData);
+      if (!isArray(array)) return;
+      if (!this.hasNestedAliases) {
+         result[this.recordAlias] = array[this.itemIndex];
+         result[this.indexAlias] = this.itemIndex;
+         result[this.lengthAlias] = array.length;
+      } else {
+         let copy = result;
+         copy = this.recordBinding.set(copy, array[this.itemIndex]);
+         copy = this.indexBinding.set(copy, this.itemIndex);
+         copy = this.lengthBinding.set(copy, array.length);
+         result[this.recordBinding.parts[0]] = copy[this.recordBinding.parts[0]];
+         result[this.indexBinding.parts[0]] = copy[this.indexBinding.parts[0]];
+         result[this.lengthBinding.parts[0]] = copy[this.lengthBinding.parts[0]];
+      }
+   }
+
+   setIndex(itemIndex: number): void {
+      this.itemIndex = itemIndex;
+   }
+}
+
+ArrayElementView.prototype.recordAlias = "$record";
+ArrayElementView.prototype.indexAlias = "$index";
+ArrayElementView.prototype.lengthAlias = "$length";