cx 24.6.4 → 24.7.1

package/dist/ui.js

@@ -3941,7 +3941,7 @@ function startAppLoop(parentDOMElement, storeOrInstance, widget, options) {
 		if (storeOrInstance.widget === widget) instance = storeOrInstance;
 		else parentInstance = storeOrInstance;
 	} else throw new Error("Second argument to startAppLoop should be either of type Store or Instance");
-	var root = /*#__PURE__*/ jsx(Cx, {
+	var content = /*#__PURE__*/ jsx(Cx, {
 		store: store,
 		widget: widget,
 		instance: instance,
@@ -3949,7 +3949,11 @@ function startAppLoop(parentDOMElement, storeOrInstance, widget, options) {
 		options: options,
 		subscribe: true,
 	});
-	VDOM.DOM.render(root, parentDOMElement);
+	var root = null;
+	if (VDOM.DOM.createRoot) {
+		root = VDOM.DOM.createRoot(parentDOMElement);
+		root.render(content);
+	} else VDOM.DOM.render(content, parentDOMElement);
 	var stopped = false;
 	return function () {
 		if (stopped) return;
@@ -3963,7 +3967,8 @@ function startAppLoop(parentDOMElement, storeOrInstance, widget, options) {
 	};
 }
 function destroy(parentDOMElement, options) {
-	VDOM.DOM.unmountComponentAtNode(parentDOMElement);
+	if (root) root.unmount();
+	else VDOM.DOM.unmountComponentAtNode(parentDOMElement);
 	if (options.removeParentDOMElement && parentDOMElement.parentNode)
 		parentDOMElement.parentNode.removeChild(parentDOMElement);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.6.4",
+   "version": "24.7.1",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/Legend.js

@@ -1,151 +1,151 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { PureContainer } from "../ui/PureContainer";
-import { getShape } from "./shapes";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-import { withHoverSync } from "../ui/HoverSync";
-
-export class Legend extends HtmlElement {
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         vertical: this.vertical,
-      });
-      super.prepareData(context, instance);
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         shape: undefined,
-      });
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "shapeSize":
-         case "svgSize":
-         case "shape":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   explore(context, instance) {
-      if (!context.legends) context.legends = {};
-
-      instance.legends = context.legends;
-
-      context.addLegendEntry = (legendName, entry) => {
-         if (!legendName) return;
-
-         //case when all legends are scoped and new entry is added outside the scope
-         if (!context.legends) return;
-
-         let legend = context.legends[legendName];
-         if (!legend)
-            legend = context.legends[legendName] = {
-               entries: [],
-               names: {},
-            };
-
-         if (!legend.names[entry.name]) {
-            legend.entries.push(entry);
-            legend.names[entry.name] = entry;
-         }
-      };
-
-      super.explore(context, instance);
-   }
-
-   renderChildren(context, instance) {
-      const CSS = this.CSS;
-
-      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
-         list;
-
-      if (isArray(entries) && entries.length > 0) {
-         list = (
-            <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
-               {entries.map((e, i) =>
-                  withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
-                     <div
-                        key={i}
-                        className={CSS.element(this.baseClass, "entry", {
-                           "color-root": true,
-                           hover,
-                           disabled: e.disabled,
-                           selected: e.selected,
-                        })}
-                        onClick={e.onClick}
-                        onMouseMove={onMouseMove}
-                        onMouseLeave={onMouseLeave}
-                     >
-                        {this.renderShape(e, instance.data.shape)}
-                        {e.name}
-                     </div>
-                  )),
-               )}
-            </div>
-         );
-      }
-
-      return [list, super.renderChildren(context, instance)];
-   }
-
-   renderShape(entry, legendEntriesShape) {
-      const className = this.CSS.element(this.baseClass, "shape", {
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      const shape = getShape(legendEntriesShape || entry.shape || "square");
-
-      return (
-         <svg
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-               marginTop: `${-this.svgSize / 2}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
-               style: entry.style,
-               className: className,
-            })}
-         </svg>
-      );
-   }
-}
-
-Legend.prototype.name = "legend";
-Legend.prototype.baseClass = "legend";
-Legend.prototype.vertical = false;
-Legend.prototype.memoize = false;
-Legend.prototype.shapeSize = 18;
-Legend.prototype.shape = null;
-Legend.prototype.svgSize = 20;
-
-Widget.alias("legend", Legend);
-
-Legend.Scope = class extends PureContainer {
-   explore(context, instance) {
-      context.push("legends", (instance.legends = {}));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("legends");
-   }
-
-   prepare(context, instance) {
-      context.push("legends", instance.legends);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("legends");
-   }
-};
-
-export const LegendScope = Legend.Scope;
+import { Widget, VDOM } from "../ui/Widget";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { PureContainer } from "../ui/PureContainer";
+import { getShape } from "./shapes";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+import { withHoverSync } from "../ui/HoverSync";
+
+export class Legend extends HtmlElement {
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = Object.assign(data.stateMods || {}, {
+         vertical: this.vertical,
+      });
+      super.prepareData(context, instance);
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         shape: undefined,
+      });
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "shapeSize":
+         case "svgSize":
+         case "shape":
+            return false;
+
+         default:
+            return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   explore(context, instance) {
+      if (!context.legends) context.legends = {};
+
+      instance.legends = context.legends;
+
+      context.addLegendEntry = (legendName, entry) => {
+         if (!legendName) return;
+
+         //case when all legends are scoped and new entry is added outside the scope
+         if (!context.legends) return;
+
+         let legend = context.legends[legendName];
+         if (!legend)
+            legend = context.legends[legendName] = {
+               entries: [],
+               names: {},
+            };
+
+         if (!legend.names[entry.name]) {
+            legend.entries.push(entry);
+            legend.names[entry.name] = entry;
+         }
+      };
+
+      super.explore(context, instance);
+   }
+
+   renderChildren(context, instance) {
+      const CSS = this.CSS;
+
+      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
+         list;
+
+      if (isArray(entries) && entries.length > 0) {
+         list = (
+            <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
+               {entries.map((e, i) =>
+                  withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
+                     <div
+                        key={i}
+                        className={CSS.element(this.baseClass, "entry", {
+                           "color-root": true,
+                           hover,
+                           disabled: e.disabled,
+                           selected: e.selected,
+                        })}
+                        onClick={e.onClick}
+                        onMouseMove={onMouseMove}
+                        onMouseLeave={onMouseLeave}
+                     >
+                        {this.renderShape(e, instance.data.shape)}
+                        {e.name}
+                     </div>
+                  )),
+               )}
+            </div>
+         );
+      }
+
+      return [list, super.renderChildren(context, instance)];
+   }
+
+   renderShape(entry, legendEntriesShape) {
+      const className = this.CSS.element(this.baseClass, "shape", {
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      const shape = getShape(legendEntriesShape || entry.shape || "square");
+
+      return (
+         <svg
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+               marginTop: `${-this.svgSize / 2}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
+               style: entry.style,
+               className: className,
+            })}
+         </svg>
+      );
+   }
+}
+
+Legend.prototype.name = "legend";
+Legend.prototype.baseClass = "legend";
+Legend.prototype.vertical = false;
+Legend.prototype.memoize = false;
+Legend.prototype.shapeSize = 18;
+Legend.prototype.shape = null;
+Legend.prototype.svgSize = 20;
+
+Widget.alias("legend", Legend);
+
+Legend.Scope = class extends PureContainer {
+   explore(context, instance) {
+      context.push("legends", (instance.legends = {}));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      context.pop("legends");
+   }
+
+   prepare(context, instance) {
+      context.push("legends", instance.legends);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("legends");
+   }
+};
+
+export const LegendScope = Legend.Scope;

package/src/charts/Marker.d.ts

@@ -1,96 +1,96 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-
-interface MarkerProps extends BoundedObjectProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.Prop<string | number>;
-
-   /** Used to indicate if the data should affect axis span. */
-   affectsAxes?: Cx.BooleanProp;
-
-   /** Shape kind. `circle`, `square`, `triangle`, etc. */
-   shape?: Cx.StringProp;
-
-   disabled?: Cx.BooleanProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.Prop<string | number>;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   legendColorIndex?: Cx.NumberProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   xOffset?: number;
-   yOffset?: number;
-
-   /** Size of the shape in pixels. */
-   size?: Cx.NumberProp;
-
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    *  in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `marker`. */
-   baseClass?: string;
-
-   /** Set to `true` to make the shape draggable along the X axis. */
-   draggableX?: boolean;
-
-   /** Set to `true` to make the shape draggable along the Y axis. */
-   draggableY?: boolean;
-
-   /** Set to `true` to make the shape draggable along the X and Y axis. */
-   draggable?: boolean;
-
-   /** Constrain the marker position to min/max values of the X axis during drag operations. */
-   constrainX?: boolean;
-
-   /** Constrain the marker position to min/max values of the Y axis during drag operations. */
-   constrainY?: boolean;
-
-   /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
-   constrain?: boolean;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string;
-
-   legendAction?: string;
-
-   /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp;
-
-   /** Set to true to hide the marker. The marker will still participate in axis range calculations. */
-   hidden?: boolean;
-
-   /** Indicate that markers should be stacked horizontally. Default value is `false`. */
-   stackedX?: Cx.BooleanProp;
-
-   /** Indicate that markers should be stacked vertically. Default value is `false`. */
-   stackedY?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-}
-
-export class Marker extends Cx.Widget<MarkerProps> {}
+import * as Cx from "../core";
+import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
+
+interface MarkerProps extends BoundedObjectProps {
+   /** The `x` value binding or expression. */
+   x?: Cx.Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Cx.Prop<string | number>;
+
+   /** Used to indicate if the data should affect axis span. */
+   affectsAxes?: Cx.BooleanProp;
+
+   /** Shape kind. `circle`, `square`, `triangle`, etc. */
+   shape?: Cx.StringProp;
+
+   disabled?: Cx.BooleanProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: Cx.Prop<string | number>;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: Cx.StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: Cx.StringProp;
+
+   legendColorIndex?: Cx.NumberProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: Cx.StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: Cx.BooleanProp;
+
+   xOffset?: number;
+   yOffset?: number;
+
+   /** Size of the shape in pixels. */
+   size?: Cx.NumberProp;
+
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    *  in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+
+   /** Base CSS class to be applied to the element. Defaults to `marker`. */
+   baseClass?: string;
+
+   /** Set to `true` to make the shape draggable along the X axis. */
+   draggableX?: boolean;
+
+   /** Set to `true` to make the shape draggable along the Y axis. */
+   draggableY?: boolean;
+
+   /** Set to `true` to make the shape draggable along the X and Y axis. */
+   draggable?: boolean;
+
+   /** Constrain the marker position to min/max values of the X axis during drag operations. */
+   constrainX?: boolean;
+
+   /** Constrain the marker position to min/max values of the Y axis during drag operations. */
+   constrainY?: boolean;
+
+   /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
+   constrain?: boolean;
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: string;
+
+   legendAction?: string;
+
+   /** Tooltip configuration. For more info see Tooltips. */
+   tooltip?: Cx.StringProp | Cx.StructuredProp;
+
+   /** Set to true to hide the marker. The marker will still participate in axis range calculations. */
+   hidden?: boolean;
+
+   /** Indicate that markers should be stacked horizontally. Default value is `false`. */
+   stackedX?: Cx.BooleanProp;
+
+   /** Indicate that markers should be stacked vertically. Default value is `false`. */
+   stackedY?: Cx.BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: Cx.StringProp;
+}
+
+export class Marker extends Cx.Widget<MarkerProps> {}