cx 26.1.13 → 26.2.1

package/src/charts/MouseTracker.tsx

@@ -24,6 +24,9 @@ export interface MouseTrackerConfig extends BoundedObjectConfig {
 
    /** Name of the y-axis. Default is 'y'. */
    yAxis?: string;
+
+   /** Tooltip configuration. */
+   tooltip?: any;
 }
 
 export interface MouseTrackerInstance extends BoundedObjectInstance, TooltipParentInstance {

package/src/charts/helpers/PointReducer.ts

@@ -28,7 +28,7 @@ export interface PointReducerInstance<TAccumulator extends PointReducerAccumulat
 
 export interface PointReducerConfig extends PureContainerConfig {
    /** A callback function used to initialize the accumulator. */
-   onInitAccumulator?: string | ((accumulator: DataRecord, instance?: Instance) => void);
+   onInitAccumulator?: string | ((accumulator: DataRecord, instance: Instance) => void);
 
    /** A callback function used to collect information about all data points. */
    onMap?:
@@ -36,7 +36,7 @@ export interface PointReducerConfig extends PureContainerConfig {
       | ((accumulator: DataRecord, x?: any, y?: any, name?: string, data?: any, array?: any[], index?: number) => void);
 
    /** A callback function used to process accumulated information and write results. */
-   onReduce?: string | ((accumulator: DataRecord, instance?: Instance) => void);
+   onReduce?: string | ((accumulator: DataRecord, instance: Instance) => void);
 
    /** Parameters that trigger filter predicate re-creation. */
    filterParams?: StructuredProp;

package/src/data/View.ts

@@ -42,25 +42,44 @@ export interface ViewMethods<D = Record<string, any>> {
    delete(paths: Path[]): boolean;
    delete(...paths: Path[]): boolean;
    delete<V>(path: AccessorChain<V>): boolean;
-   delete<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
-   delete<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
+   delete<T extends any[]>(
+      ...paths: { [K in keyof T]: AccessorChain<T[K]> }
+   ): boolean;
+   delete<T extends any[]>(paths: {
+      [K in keyof T]: AccessorChain<T[K]>;
+   }): boolean;
 
    toggle(path: Path): boolean;
    toggle(path: AccessorChain<boolean>): boolean;
 
-   update(updateFn: (currentValue: D, ...args: any[]) => any, ...args: any): boolean;
-   update<A extends any[]>(path: Path, updateFn: (currentValue: any, ...args: A) => any, ...args: A): boolean;
+   update<V>(path: AccessorChain<V>, updateFn: (currentValue: V) => V): boolean;
    update<V, A extends any[]>(
       path: AccessorChain<V>,
       updateFn: (currentValue: V, ...args: A) => V,
       ...args: A
    ): boolean;
+   update<A extends any[]>(
+      updateFn: (currentValue: D, ...args: A) => D,
+      ...args: any
+   ): boolean;
+   update<A extends any[]>(
+      path: Path,
+      updateFn: (currentValue: any, ...args: A) => any,
+      ...args: A
+   ): boolean;
 
    /**
     *  Mutates the content of the store using Immer
     */
-   mutate(updateFn: (currentValue: D, ...args: any[]) => void, ...args: any[]): boolean;
-   mutate<A extends any[]>(path: Path, updateFn: (currentValue: any, ...args: A) => void, ...args: A): boolean;
+   mutate(
+      updateFn: (currentValue: D, ...args: any[]) => void,
+      ...args: any[]
+   ): boolean;
+   mutate<A extends any[]>(
+      path: Path,
+      updateFn: (currentValue: any, ...args: A) => void,
+      ...args: A
+   ): boolean;
    mutate<V, A extends any[]>(
       path: AccessorChain<V>,
       updateFn: (currentValue: V, ...args: A) => void,
@@ -74,7 +93,14 @@ export class View<D = any> implements ViewMethods<D> {
    declare store?: View;
    declare meta: any;
    declare sealed: boolean;
-   cache: { version: number; data?: any; result?: any; itemIndex?: number; key?: string; parentStoreData?: any };
+   cache: {
+      version: number;
+      data?: any;
+      result?: any;
+      itemIndex?: number;
+      key?: string;
+      parentStoreData?: any;
+   };
    notificationsSuspended: number = 0;
    dirty: boolean = false;
 
@@ -97,11 +123,17 @@ export class View<D = any> implements ViewMethods<D> {
       if (typeof path == "object" && path != null) {
          let changed = false;
          for (let key in path)
-            if (path.hasOwnProperty(key) && this.get(key) === undefined && this.setItem(key, path[key])) changed = true;
+            if (
+               path.hasOwnProperty(key) &&
+               this.get(key) === undefined &&
+               this.setItem(key, path[key])
+            )
+               changed = true;
          return changed;
       }
       let binding = Binding.get(path);
-      if (this.get(binding.path) === undefined) return this.setItem(binding.path, value);
+      if (this.get(binding.path) === undefined)
+         return this.setItem(binding.path, value);
       return false;
    }
 
@@ -111,7 +143,9 @@ export class View<D = any> implements ViewMethods<D> {
    set(path: any, value?: any): boolean {
       if (typeof path == "object" && path != null) {
          let changed = false;
-         for (let key in path) if (path.hasOwnProperty(key) && this.setItem(key, path[key])) changed = true;
+         for (let key in path)
+            if (path.hasOwnProperty(key) && this.setItem(key, path[key]))
+               changed = true;
          return changed;
       }
       let binding = Binding.get(path);
@@ -144,11 +178,16 @@ export class View<D = any> implements ViewMethods<D> {
    delete(paths: Path[]): boolean;
    delete(...paths: Path[]): boolean;
    delete<V>(path: AccessorChain<V>): boolean;
-   delete<T extends any[]>(...paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
-   delete<T extends any[]>(paths: { [K in keyof T]: AccessorChain<T[K]> }): boolean;
+   delete<T extends any[]>(
+      ...paths: { [K in keyof T]: AccessorChain<T[K]> }
+   ): boolean;
+   delete<T extends any[]>(paths: {
+      [K in keyof T]: AccessorChain<T[K]>;
+   }): boolean;
    delete(path?: any): boolean {
       if (arguments.length > 1) path = Array.from(arguments);
-      if (isArray(path)) return path.map((arg) => this.delete(arg as Path)).some(Boolean);
+      if (isArray(path))
+         return path.map((arg) => this.delete(arg as Path)).some(Boolean);
 
       let binding = Binding.get(path);
       return this.deleteItem(binding.path);
@@ -178,7 +217,8 @@ export class View<D = any> implements ViewMethods<D> {
 
       if (arguments.length > 1) path = Array.from(arguments);
 
-      if (isArray(path)) return path.map((arg) => Binding.get(arg as any).value(storeData));
+      if (isArray(path))
+         return path.map((arg) => Binding.get(arg as any).value(storeData));
 
       return Binding.get(path).value(storeData);
    }
@@ -189,21 +229,38 @@ export class View<D = any> implements ViewMethods<D> {
       return this.set(path, !this.get(path));
    }
 
-   update(updateFn: (currentValue: D, ...args: any[]) => any, ...args: any): boolean;
-   update<A extends any[]>(path: Path, updateFn: (currentValue: any, ...args: A) => any, ...args: A): boolean;
+   update<V>(path: AccessorChain<V>, updateFn: (currentValue: V) => V): boolean;
    update<V, A extends any[]>(
       path: AccessorChain<V>,
       updateFn: (currentValue: V, ...args: A) => V,
       ...args: A
    ): boolean;
+   update(
+      updateFn: (currentValue: D, ...args: any[]) => any,
+      ...args: any
+   ): boolean;
+   update<A extends any[]>(
+      path: Path,
+      updateFn: (currentValue: any, ...args: A) => any,
+      ...args: A
+   ): boolean;
    update(path: any, updateFn?: any, ...args: any[]): boolean {
       if (arguments.length == 1 && isFunction(path))
-         return this.load(path.apply(null, [this.getData(), updateFn, ...args]));
+         return this.load(
+            path.apply(null, [this.getData(), updateFn, ...args]),
+         );
       return this.set(path, updateFn.apply(null, [this.get(path), ...args]));
    }
 
-   mutate(updateFn: (currentValue: D, ...args: any[]) => void, ...args: any[]): boolean;
-   mutate<A extends any[]>(path: Path, updateFn: (currentValue: any, ...args: A) => void, ...args: A): boolean;
+   mutate(
+      updateFn: (currentValue: D, ...args: any[]) => void,
+      ...args: any[]
+   ): boolean;
+   mutate<A extends any[]>(
+      path: Path,
+      updateFn: (currentValue: any, ...args: A) => void,
+      ...args: A
+   ): boolean;
    mutate<V, A extends any[]>(
       path: AccessorChain<V>,
       updateFn: (currentValue: V, ...args: A) => void,

package/src/data/ops/findTreeNode.ts

@@ -1,4 +1,23 @@
-export function findTreeNode<T = any>(array: T[], criteria: (node: T) => boolean, childrenField: keyof T): T | false {
+/**
+ * Recursively searches a tree structure for a node matching the criteria.
+ *
+ * @param array - The tree data array to search.
+ * @param criteria - Predicate that returns `true` when a matching node is found.
+ * @param childrenField - Name of the property containing child nodes.
+ * @returns The first matching node, or `false` if not found.
+ *
+ * @example
+ * // Find node by ID
+ * const node = findTreeNode(data, n => n.id === targetId, "$children");
+ *
+ * @example
+ * // Check if selected node is a leaf
+ * const node = findTreeNode(data, n => n.id === selectedId, "$children");
+ * if (node && node.$leaf) {
+ *   // Cannot add children to a leaf node
+ * }
+ */
+export function findTreeNode<T = any>(array: T[], criteria: (node: T) => boolean, childrenField: NoInfer<keyof T>): T | false {
    if (!Array.isArray(array)) return false;
 
    for (const node of array) {

package/src/data/ops/findTreePath.ts

@@ -1,7 +1,7 @@
 export function findTreePath<T = any>(
    array: T[] | undefined,
    criteria: (node: T) => boolean,
-   childrenField: keyof T = "$children" as keyof T,
+   childrenField: NoInfer<keyof T>,
    currentPath: T[] = [],
 ): T[] | false {
    if (!Array.isArray(array)) return false;
@@ -13,7 +13,12 @@ export function findTreePath<T = any>(
 
       const children = node[childrenField] as T[] | undefined;
 
-      const childPath = findTreePath(children, criteria, childrenField, currentPath);
+      const childPath = findTreePath(
+         children,
+         criteria,
+         childrenField,
+         currentPath,
+      );
       if (childPath) return childPath;
 
       currentPath.pop();

package/src/data/ops/removeTreeNodes.ts

@@ -1,9 +1,22 @@
 import { updateTree } from "./updateTree";
 
+/**
+ * Recursively removes nodes from a tree structure that match the criteria.
+ * Returns a new tree without the matching nodes, or the original tree if no nodes were removed.
+ *
+ * @param array - The tree data array to filter.
+ * @param criteria - Predicate that returns `true` for nodes to remove.
+ * @param childrenField - Name of the property containing child nodes.
+ * @returns A new tree with matching nodes removed, or the original array if unchanged.
+ *
+ * @example
+ * // Remove node by ID
+ * removeTreeNodes(data, node => node.id === targetId, "$children");
+ */
 export function removeTreeNodes<T = any>(
    array: T[] | undefined,
    criteria: (node: T) => boolean,
-   childrenField: keyof T,
+   childrenField: NoInfer<keyof T>,
 ): T[] | undefined {
    return updateTree(
       array,

package/src/data/ops/updateArray.ts

@@ -1,9 +1,9 @@
-export function updateArray<T = any>(
-   array: T[] | undefined,
+export function updateArray<T = any, A extends T[] | undefined = T[] | undefined>(
+   array: A,
    updateCallback: (item: T, index: number) => T,
    itemFilter?: null | ((item: T, index: number) => boolean),
    removeFilter?: (item: T, index: number) => boolean,
-): T[] | undefined {
+): A {
    if (!array) return array;
 
    const newArray: T[] = [];
@@ -27,5 +27,5 @@ export function updateArray<T = any>(
       }
    }
 
-   return dirty ? newArray : array;
+   return (dirty ? newArray : array) as A;
 }

package/src/data/ops/updateTree.ts

@@ -1,20 +1,46 @@
 import { updateArray } from "./updateArray";
 
-export function updateTree<T = any>(
-   array: T[] | undefined,
+/**
+ * Recursively updates nodes in a tree structure that match a filter.
+ * Returns a new tree with updated nodes, or the original tree if no changes were made.
+ *
+ * @param array - The tree data array to update.
+ * @param updateCallback - Function that receives a node and returns the updated node.
+ * @param itemFilter - Predicate that returns `true` for nodes to update. If `null`, all nodes are updated.
+ * @param childrenField - Name of the property containing child nodes.
+ * @param removeFilter - Optional predicate that returns `true` for nodes to remove.
+ * @returns A new tree with updates applied, or the original array if unchanged.
+ *
+ * @example
+ * // Expand all non-leaf nodes
+ * updateTree(data, node => ({ ...node, $expanded: true }), node => !node.$leaf, "$children");
+ *
+ * @example
+ * // Add a child to a specific node
+ * updateTree(data, node => ({ ...node, $children: [...node.$children, newChild] }), node => node.id === parentId, "$children");
+ */
+export function updateTree<T = any, A extends T[] | undefined = T[] | undefined>(
+   array: A,
    updateCallback: (item: T) => T,
    itemFilter: ((item: T) => boolean) | null,
-   childrenField: keyof T,
+   childrenField: NoInfer<keyof T>,
    removeFilter?: (item: T) => boolean,
-): T[] | undefined {
+): A {
    return updateArray(
       array,
       (item: T) => {
          if (!itemFilter || itemFilter(item)) item = updateCallback(item);
          const children = item[childrenField];
          if (!Array.isArray(children)) return item;
-         const updatedChildren = updateTree(children, updateCallback, itemFilter, childrenField, removeFilter);
-         if (updatedChildren != children) return { ...item, [childrenField]: updatedChildren };
+         const updatedChildren = updateTree(
+            children,
+            updateCallback,
+            itemFilter,
+            childrenField,
+            removeFilter,
+         );
+         if (updatedChildren != children)
+            return { ...item, [childrenField]: updatedChildren };
          return item;
       },
       null,

package/src/index.scss

@@ -1,6 +1,6 @@
-@import "global";
-@import "util/index";
-@import "ui/index";
-@import "widgets/index";
-@import "svg/index";
-@import "charts/index";
+@import "global";
+@import "util/index";
+@import "ui/index";
+@import "widgets/index";
+@import "svg/index";
+@import "charts/index";

package/src/jsx-runtime.spec.tsx

@@ -465,4 +465,44 @@ describe("jsx-runtime type inference", () => {
          assert.ok(widget.jsxAttributes.includes("key"));
       });
    });
+
+   describe("Fragment", () => {
+      it("returns single child directly", () => {
+         const widget = (
+            <cx>
+               <>
+                  <div text="Hello" />
+               </>
+            </cx>
+         );
+         assert.ok(widget);
+         assert.equal(widget.$type.name, "HtmlElement");
+      });
+
+      it("returns array of children", () => {
+         const widget = (
+            <cx>
+               <>
+                  <div text="Hello" />
+                  <div text="World" />
+               </>
+            </cx>
+         );
+         assert.ok(Array.isArray(widget));
+         assert.equal(widget.length, 2);
+      });
+
+      it("works with widgets inside fragment", () => {
+         const widget = (
+            <cx>
+               <>
+                  <Button text="Click" />
+                  <TextField value={bind("name")} />
+               </>
+            </cx>
+         );
+         assert.ok(Array.isArray(widget));
+         assert.equal(widget.length, 2);
+      });
+   });
 });

package/src/jsx-runtime.ts

@@ -1,84 +1,87 @@
-import type { ComponentClass, FunctionComponent, JSX as ReactJSX } from "react";
-import type { CxFunctionalComponent } from "./ui/createFunctionalComponent";
-import { Widget } from "./ui/Widget";
-import { isArray } from "./util/isArray";
-import { isString } from "./util/isString";
-import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
-import { ReactElementWrapper, ReactElementWrapperConfig } from "./widgets/ReactElementWrapper";
-
-export function jsx(typeName: any, props: any, key?: string): any {
-   if (isArray(typeName)) return typeName;
-
-   if (key) {
-      // key is allowed in CxJS, i.e. Sandbox use it
-      props = {
-         ...props,
-         key,
-      };
-   }
-
-   if (typeName.type || typeName.$type) return typeName;
-
-   if (props.children && isArray(props.children) && props.children.length == 0) props.children = null;
-
-   if (props.children && props.children.length == 1) props.children = props.children[0];
-
-   if (typeName == "cx") return props.children;
-
-   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) {
-      props.tag = typeName;
-      typeName = HtmlElement;
-   }
-   // React components (functions/classes without isComponentType and not CxJS functional components) should go through ReactElementWrapper
-   else if (typeof typeName === "function" && !typeName.isComponentType && !typeName.$isComponentFactory) {
-      props.componentType = typeName;
-      typeName = ReactElementWrapper;
-   }
-
-   return {
-      $type: typeName,
-      ...props,
-      jsxAttributes: props && Object.keys(props),
-   };
-}
-
-export const jsxs = jsx;
-
-type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
-
-type CxIntrinsicElements = {
-   [K in keyof ReactIntrinsicElements]: HtmlElementConfig<K>;
-};
-
-// Helper type to transform props for React components (but not CxJS functional components)
-// Uses a workaround to avoid TypeScript inference issues with conditional types in LibraryManagedAttributes
-// We use Omit to exclude componentType since it's added automatically by the jsx-runtime
-type TransformReactComponentProps<C, P> = [C] extends [CxFunctionalComponent<any>]
-   ? P // CxJS functional components already have proper types
-   : [C] extends [FunctionComponent<any>]
-     ? ReactElementWrapperConfig<P>
-     : [C] extends [ComponentClass<any>]
-       ? ReactElementWrapperConfig<P>
-       : P;
-
-export namespace JSX {
-   /**
-    * Base class for JSX element instances.
-    * All widgets must extend from Widget class or React.Component.
-    */
-   export type ElementClass = Widget<any> | React.Component<any, any>;
-
-   /**
-    * Intrinsic JSX elements (HTML-like tags).
-    * Supports HTML elements that map to HtmlElement widgets.
-    */
-   export interface IntrinsicElements extends CxIntrinsicElements {
-      cx: any;
-   }
-
-   /**
-    * Transform props for React function components used in CxJS JSX.
-    * Adds standard WidgetConfig properties and transforms React props to Prop<X>.
-    */
-   export type LibraryManagedAttributes<C, P> = TransformReactComponentProps<C, P>;
-}
+import type { ComponentClass, FunctionComponent, JSX as ReactJSX } from "react";
+import type { CxFunctionalComponent } from "./ui/createFunctionalComponent";
+import { Widget } from "./ui/Widget";
+import { isArray } from "./util/isArray";
+import { isString } from "./util/isString";
+import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
+import { ReactElementWrapper, ReactElementWrapperConfig } from "./widgets/ReactElementWrapper";
+
+// Fragment symbol for supporting <>...</> syntax
+export const Fragment = Symbol.for("cx.fragment");
+
+export function jsx(typeName: any, props: any, key?: string): any {
+   if (isArray(typeName)) return typeName;
+
+   if (key) {
+      // key is allowed in CxJS, i.e. Sandbox use it
+      props = {
+         ...props,
+         key,
+      };
+   }
+
+   if (typeName.type || typeName.$type) return typeName;
+
+   if (props.children && isArray(props.children) && props.children.length == 0) props.children = null;
+
+   if (props.children && props.children.length == 1) props.children = props.children[0];
+
+   if (typeName == "cx" || typeName === Fragment) return props.children;
+
+   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) {
+      props.tag = typeName;
+      typeName = HtmlElement;
+   }
+   // React components (functions/classes without isComponentType and not CxJS functional components) should go through ReactElementWrapper
+   else if (typeof typeName === "function" && !typeName.isComponentType && !typeName.$isComponentFactory) {
+      props.componentType = typeName;
+      typeName = ReactElementWrapper;
+   }
+
+   return {
+      $type: typeName,
+      ...props,
+      jsxAttributes: props && Object.keys(props),
+   };
+}
+
+export const jsxs = jsx;
+
+type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
+
+type CxIntrinsicElements = {
+   [K in keyof ReactIntrinsicElements]: HtmlElementConfig<K>;
+};
+
+// Helper type to transform props for React components (but not CxJS functional components)
+// Uses a workaround to avoid TypeScript inference issues with conditional types in LibraryManagedAttributes
+// We use Omit to exclude componentType since it's added automatically by the jsx-runtime
+type TransformReactComponentProps<C, P> = [C] extends [CxFunctionalComponent<any>]
+   ? P // CxJS functional components already have proper types
+   : [C] extends [FunctionComponent<any>]
+     ? ReactElementWrapperConfig<P>
+     : [C] extends [ComponentClass<any>]
+       ? ReactElementWrapperConfig<P>
+       : P;
+
+export namespace JSX {
+   /**
+    * Base class for JSX element instances.
+    * All widgets must extend from Widget class or React.Component.
+    */
+   export type ElementClass = Widget<any> | React.Component<any, any>;
+
+   /**
+    * Intrinsic JSX elements (HTML-like tags).
+    * Supports HTML elements that map to HtmlElement widgets.
+    */
+   export interface IntrinsicElements extends CxIntrinsicElements {
+      cx: any;
+   }
+
+   /**
+    * Transform props for React function components used in CxJS JSX.
+    * Adds standard WidgetConfig properties and transforms React props to Prop<X>.
+    */
+   export type LibraryManagedAttributes<C, P> = TransformReactComponentProps<C, P>;
+}