cx 26.2.3 → 26.3.1

package/dist/widgets.js

@@ -7933,6 +7933,7 @@ const validationCheck = (date, data, disabledDaysOfWeek) => {
 };
 class CalendarCmp extends VDOM.Component {
 	el = null;
+	unsubscribeWheel;
 	constructor(props) {
 		super(props);
 		let { data } = props.instance;
@@ -8111,7 +8112,9 @@ class CalendarCmp extends VDOM.Component {
 		if (calendarWidget.autoFocus && this.el) this.el.focus();
 		if (this.el) {
 			tooltipParentDidMount$1(this.el, ...getFieldTooltip(this.props.instance));
-			this.el.addEventListener("wheel", (e) => this.handleWheel(e));
+			this.unsubscribeWheel = addEventListenerWithOptions(this.el, "wheel", (e) => this.handleWheel(e), {
+				passive: false,
+			});
 		}
 	}
 	UNSAFE_componentWillReceiveProps(props) {
@@ -8127,6 +8130,7 @@ class CalendarCmp extends VDOM.Component {
 	componentWillUnmount() {
 		offFocusOut(this);
 		tooltipParentWillUnmount$1(this.props.instance);
+		this.unsubscribeWheel?.();
 	}
 	showYearDropdown() {
 		if (this.el && this.el.firstChild) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.2.3",
+  "version": "26.3.1",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/charts/helpers/SnapPointFinder.ts

@@ -1,136 +1,136 @@
-import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { NumberProp, Bind, Prop, DataRecord } from "../../ui/Prop";
-import { AccessorChain } from "../../data/createAccessorModelProxy";
-
-export interface SnapAccumulator extends PointReducerAccumulator {
-   cursor: {
-      x: number | null;
-      y: number | null;
-      mapped: boolean;
-      mappedX?: number | null;
-      mappedY?: number | null;
-   };
-   dist: number;
-   snapX: any;
-   snapY: any;
-   snapRecord?: any;
-   xAxis: any;
-   yAxis: any;
-}
-
-export interface SnapPointFinderInstance extends PointReducerInstance<SnapAccumulator> {
-   xAxis?: any;
-   yAxis?: any;
-}
-
-export interface SnapPointFinderConfig extends PointReducerConfig {
-   /** Cursor X value. */
-   cursorX?: NumberProp;
-
-   /** Cursor Y value */
-   cursorY?: NumberProp;
-
-   /** A binding used to receive the x value of the nearest point.*/
-   snapX?: Bind | AccessorChain<number> | AccessorChain<string>;
-
-   /** A binding used to receive the y value of the nearest point. */
-   snapY?: Bind | AccessorChain<number> | AccessorChain<string>;
-
-   /** A binding used to receive the record prop */
-   snapRecord?: Prop<DataRecord>;
-
-   /** Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
-   maxDistance?: number;
-
-   /** A function used to convert x values into numeric format. Commonly used with dates. */
-   convertX?: (value: number | string) => number;
-
-   /** A function used to convert y values into numeric format. Commonly used with dates. */
-   convertY?: (value: number | string) => number;
-
-   /** Name of the x-axis. Default is 'x'. */
-   xAxis?: string;
-
-   /** Name of the y-axis. Default is 'y'. */
-   yAxis?: string;
-}
-
-export class SnapPointFinder extends PointReducer<SnapAccumulator> {
-   declare maxDistance: number;
-   declare convertX: (value: any) => number;
-   declare convertY: (value: any) => number;
-   declare xAxis: string;
-   declare yAxis: string;
-
-   constructor(config?: SnapPointFinderConfig) {
-      super(config);
-   }
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         cursorX: undefined,
-         cursorY: undefined,
-         snapX: undefined,
-         snapY: undefined,
-         snapRecord: undefined,
-         maxDistance: undefined,
-      });
-   }
-
-   explore(context: RenderingContext, instance: SnapPointFinderInstance) {
-      instance.xAxis = (context.axes as any)?.[this.xAxis];
-      instance.yAxis = (context.axes as any)?.[this.yAxis];
-      super.explore(context, instance);
-   }
-
-   onInitAccumulator = (acc: SnapAccumulator, { data, xAxis, yAxis }: SnapPointFinderInstance) => {
-      const d = data as any;
-      acc.cursor = {
-         x: d.cursorX,
-         y: d.cursorY,
-         mapped: false,
-      };
-      acc.dist = d.maxDistance > 0 ? Math.pow(d.maxDistance, 2) : Number.POSITIVE_INFINITY;
-      acc.snapX = null;
-      acc.snapY = null;
-      acc.xAxis = xAxis;
-      acc.yAxis = yAxis;
-   };
-
-   onMap = (acc: SnapAccumulator, x: any, y: any, name: string, p: any) => {
-      let { xAxis, yAxis, cursor } = acc;
-
-      if (!cursor.mapped) {
-         cursor.mappedX = cursor.x != null ? xAxis?.map(this.convertX(cursor.x)) : null;
-         cursor.mappedY = cursor.y != null ? yAxis?.map(this.convertY(cursor.y)) : null;
-         cursor.mapped = true;
-      }
-
-      let d: number | null = null;
-      let cx = x != null ? xAxis?.map(this.convertX(x)) : null;
-      let cy = y != null ? yAxis?.map(this.convertY(y)) : null;
-
-      if (cursor.mappedX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - cursor.mappedX), 2);
-      if (cursor.mappedY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - cursor.mappedY), 2);
-
-      if (d != null && d < acc.dist) {
-         acc.dist = d;
-         acc.snapX = x;
-         acc.snapY = y;
-         acc.snapRecord = p;
-      }
-   };
-
-   onReduce = (acc: SnapAccumulator, instance: PointReducerInstance<SnapAccumulator>) => {
-      instance.set("snapX", acc.snapX);
-      instance.set("snapY", acc.snapY);
-      instance.set("snapRecord", acc.snapRecord);
-   };
-}
-
-SnapPointFinder.prototype.maxDistance = 50;
-SnapPointFinder.prototype.convertX = (x) => x;
-SnapPointFinder.prototype.convertY = (y) => y;
-SnapPointFinder.prototype.xAxis = "x";
-SnapPointFinder.prototype.yAxis = "y";
+import { PointReducer, PointReducerConfig, PointReducerInstance, PointReducerAccumulator } from "./PointReducer";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { NumberProp, Bind, Prop, DataRecord } from "../../ui/Prop";
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+
+export interface SnapAccumulator extends PointReducerAccumulator {
+   cursor: {
+      x: number | null;
+      y: number | null;
+      mapped: boolean;
+      mappedX?: number | null;
+      mappedY?: number | null;
+   };
+   dist: number;
+   snapX: any;
+   snapY: any;
+   snapRecord?: any;
+   xAxis: any;
+   yAxis: any;
+}
+
+export interface SnapPointFinderInstance extends PointReducerInstance<SnapAccumulator> {
+   xAxis?: any;
+   yAxis?: any;
+}
+
+export interface SnapPointFinderConfig extends PointReducerConfig {
+   /** Cursor X value. */
+   cursorX?: NumberProp;
+
+   /** Cursor Y value */
+   cursorY?: NumberProp;
+
+   /** A binding used to receive the x value of the nearest point.*/
+   snapX?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
+
+   /** A binding used to receive the y value of the nearest point. */
+   snapY?: Bind | AccessorChain<number | null | undefined> | AccessorChain<string | null | undefined>;
+
+   /** A binding used to receive the record prop */
+   snapRecord?: Prop<DataRecord>;
+
+   /** Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
+   maxDistance?: number;
+
+   /** A function used to convert x values into numeric format. Commonly used with dates. */
+   convertX?: (value: number | string) => number;
+
+   /** A function used to convert y values into numeric format. Commonly used with dates. */
+   convertY?: (value: number | string) => number;
+
+   /** Name of the x-axis. Default is 'x'. */
+   xAxis?: string;
+
+   /** Name of the y-axis. Default is 'y'. */
+   yAxis?: string;
+}
+
+export class SnapPointFinder extends PointReducer<SnapAccumulator> {
+   declare maxDistance: number;
+   declare convertX: (value: any) => number;
+   declare convertY: (value: any) => number;
+   declare xAxis: string;
+   declare yAxis: string;
+
+   constructor(config?: SnapPointFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         cursorX: undefined,
+         cursorY: undefined,
+         snapX: undefined,
+         snapY: undefined,
+         snapRecord: undefined,
+         maxDistance: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: SnapPointFinderInstance) {
+      instance.xAxis = (context.axes as any)?.[this.xAxis];
+      instance.yAxis = (context.axes as any)?.[this.yAxis];
+      super.explore(context, instance);
+   }
+
+   onInitAccumulator = (acc: SnapAccumulator, { data, xAxis, yAxis }: SnapPointFinderInstance) => {
+      const d = data as any;
+      acc.cursor = {
+         x: d.cursorX,
+         y: d.cursorY,
+         mapped: false,
+      };
+      acc.dist = d.maxDistance > 0 ? Math.pow(d.maxDistance, 2) : Number.POSITIVE_INFINITY;
+      acc.snapX = null;
+      acc.snapY = null;
+      acc.xAxis = xAxis;
+      acc.yAxis = yAxis;
+   };
+
+   onMap = (acc: SnapAccumulator, x: any, y: any, name: string, p: any) => {
+      let { xAxis, yAxis, cursor } = acc;
+
+      if (!cursor.mapped) {
+         cursor.mappedX = cursor.x != null ? xAxis?.map(this.convertX(cursor.x)) : null;
+         cursor.mappedY = cursor.y != null ? yAxis?.map(this.convertY(cursor.y)) : null;
+         cursor.mapped = true;
+      }
+
+      let d: number | null = null;
+      let cx = x != null ? xAxis?.map(this.convertX(x)) : null;
+      let cy = y != null ? yAxis?.map(this.convertY(y)) : null;
+
+      if (cursor.mappedX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - cursor.mappedX), 2);
+      if (cursor.mappedY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - cursor.mappedY), 2);
+
+      if (d != null && d < acc.dist) {
+         acc.dist = d;
+         acc.snapX = x;
+         acc.snapY = y;
+         acc.snapRecord = p;
+      }
+   };
+
+   onReduce = (acc: SnapAccumulator, instance: PointReducerInstance<SnapAccumulator>) => {
+      instance.set("snapX", acc.snapX);
+      instance.set("snapY", acc.snapY);
+      instance.set("snapRecord", acc.snapRecord);
+   };
+}
+
+SnapPointFinder.prototype.maxDistance = 50;
+SnapPointFinder.prototype.convertX = (x) => x;
+SnapPointFinder.prototype.convertY = (y) => y;
+SnapPointFinder.prototype.xAxis = "x";
+SnapPointFinder.prototype.yAxis = "y";

package/src/charts/helpers/ValueAtFinder.ts

@@ -1,86 +1,72 @@
-import {
-   PointReducer,
-   PointReducerConfig,
-   PointReducerInstance,
-   PointReducerAccumulator,
-} from "./PointReducer";
-import { NumberProp, StringProp, Bind } from "../../ui/Prop";
-import { AccessorChain } from "../../data/createAccessorModelProxy";
-
-export interface ValueAtAccumulator extends PointReducerAccumulator {
-   at: number;
-   left?: { x: number; y: number; d: number };
-   right?: { x: number; y: number; d: number };
-}
-
-export interface ValueAtFinderConfig extends PointReducerConfig {
-   /** X axis probe value. */
-   at?: NumberProp | StringProp;
-
-   /** A binding used to receive the measured y axis value */
-   value?: Bind | AccessorChain<number | null>;
-
-   /** A function used to convert x values into numeric format. Commonly used with dates. */
-   convert?: (value: number | string) => number;
-}
-
-/** Calculate value at a given point on the graph */
-export class ValueAtFinder extends PointReducer<ValueAtAccumulator> {
-   declare convert: (value: any) => number;
-
-   constructor(config?: ValueAtFinderConfig) {
-      super(config);
-   }
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         at: undefined,
-         value: undefined,
-      });
-   }
-
-   onInitAccumulator = (
-      acc: ValueAtAccumulator,
-      { data }: PointReducerInstance<ValueAtAccumulator>,
-   ) => {
-      acc.at = this.convert((data as any).at);
-   };
-
-   onMap = (acc: ValueAtAccumulator, x: any, y: any, name: string) => {
-      let cx = this.convert(x);
-      let d = cx - acc.at;
-      if (d <= 0 && (!acc.left || acc.left.d < d)) {
-         acc.left = {
-            x: cx,
-            y,
-            d,
-         };
-      }
-      if (d >= 0 && (!acc.right || acc.right.d > d)) {
-         acc.right = {
-            x: cx,
-            y,
-            d,
-         };
-      }
-   };
-
-   onReduce = (
-      acc: ValueAtAccumulator,
-      instance: PointReducerInstance<ValueAtAccumulator>,
-   ) => {
-      let y: number | null = null;
-      if (acc.left && acc.right) {
-         if (acc.left.x == acc.right.x) y = acc.left.y;
-         else if (acc.left.y != null && acc.right.y != null) {
-            y =
-               acc.left.y +
-               ((acc.right.y - acc.left.y) * (acc.at - acc.left.x)) /
-                  (acc.right.x - acc.left.x);
-         }
-      }
-      instance.set("value", y);
-   };
-}
-
-ValueAtFinder.prototype.convert = (x) => x;
+import { AccessorChain } from "../../data/createAccessorModelProxy";
+import { Bind, Prop } from "../../ui/Prop";
+import { PointReducer, PointReducerAccumulator, PointReducerConfig, PointReducerInstance } from "./PointReducer";
+
+export interface ValueAtAccumulator extends PointReducerAccumulator {
+   at: number;
+   left?: { x: number; y: number; d: number };
+   right?: { x: number; y: number; d: number };
+}
+
+export interface ValueAtFinderConfig extends PointReducerConfig {
+   /** X axis probe value. */
+   at?: Prop<string | number | null | undefined>;
+
+   /** A binding used to receive the measured y axis value */
+   value?: Bind | AccessorChain<number | null | undefined>;
+
+   /** A function used to convert x values into numeric format. Commonly used with dates. */
+   convert?: (value: number | string) => number;
+}
+
+/** Calculate value at a given point on the graph */
+export class ValueAtFinder extends PointReducer<ValueAtAccumulator> {
+   declare convert: (value: any) => number;
+
+   constructor(config?: ValueAtFinderConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         at: undefined,
+         value: undefined,
+      });
+   }
+
+   onInitAccumulator = (acc: ValueAtAccumulator, { data }: PointReducerInstance<ValueAtAccumulator>) => {
+      acc.at = this.convert((data as any).at);
+   };
+
+   onMap = (acc: ValueAtAccumulator, x: any, y: any, name: string) => {
+      let cx = this.convert(x);
+      let d = cx - acc.at;
+      if (d <= 0 && (!acc.left || acc.left.d < d)) {
+         acc.left = {
+            x: cx,
+            y,
+            d,
+         };
+      }
+      if (d >= 0 && (!acc.right || acc.right.d > d)) {
+         acc.right = {
+            x: cx,
+            y,
+            d,
+         };
+      }
+   };
+
+   onReduce = (acc: ValueAtAccumulator, instance: PointReducerInstance<ValueAtAccumulator>) => {
+      let y: number | null = null;
+      if (acc.left && acc.right) {
+         if (acc.left.x == acc.right.x) y = acc.left.y;
+         else if (acc.left.y != null && acc.right.y != null) {
+            y = acc.left.y + ((acc.right.y - acc.left.y) * (acc.at - acc.left.x)) / (acc.right.x - acc.left.x);
+         }
+      }
+      instance.set("value", y);
+   };
+}
+
+ValueAtFinder.prototype.convert = (x) => x;

package/src/jsx-runtime.ts

@@ -1,5 +1,6 @@
 import type { ComponentClass, FunctionComponent, JSX as ReactJSX } from "react";
 import type { CxFunctionalComponent } from "./ui/createFunctionalComponent";
+import type { PureContainerConfig } from "./ui/PureContainer";
 import { Widget } from "./ui/Widget";
 import { isArray } from "./util/isArray";
 import { isString } from "./util/isString";
@@ -57,7 +58,7 @@ type CxIntrinsicElements = {
 // 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
+   ? P & Omit<PureContainerConfig, keyof P> // Add container props (visible, if, controller, layout, etc.) without overriding component props
    : [C] extends [FunctionComponent<any>]
      ? ReactElementWrapperConfig<P>
      : [C] extends [ComponentClass<any>]

package/src/ui/createFunctionalComponent.spec.tsx

@@ -11,6 +11,61 @@ import { LabeledContainer } from "../widgets/form/LabeledContainer";
 import { Repeater } from "./Repeater";
 import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
 import { useStoreMethods } from "../hooks";
+import { AccessorChain, createAccessorModelProxy } from "../data/createAccessorModelProxy";
+
+describe("createFunctionalComponent generic type safety", () => {
+  interface User {
+    id: number;
+    name: string;
+  }
+
+  interface GenericListProps<T> {
+    items: AccessorChain<T[]>;
+    onSelect?: (item: T) => void;
+  }
+
+  const GenericList = createFunctionalComponent(
+    <T,>({ items, onSelect }: GenericListProps<T>) => (
+      <cx>
+        <div />
+      </cx>
+    )
+  );
+
+  it("infers generic type parameter from AccessorChain", () => {
+    let model = createAccessorModelProxy<{ users: User[] }>();
+
+    const widget = (
+      <cx>
+        <GenericList
+          items={model.users}
+          onSelect={(user) => {
+            // user should be inferred as User
+            const id: number = user.id;
+            const name: string = user.name;
+            // @ts-expect-error - nonExistent does not exist on User
+            const x = user.nonExistent;
+          }}
+        />
+      </cx>
+    );
+    assert.ok(widget);
+  });
+
+  it("accepts PureContainerConfig props like visible", () => {
+    let model = createAccessorModelProxy<{ users: User[] }>();
+
+    const widget = (
+      <cx>
+        <GenericList
+          items={model.users}
+          visible={true}
+        />
+      </cx>
+    );
+    assert.ok(widget);
+  });
+});
 
 describe("createFunctionalComponent type safety", () => {
   interface MyComponentProps {

package/src/ui/createFunctionalComponent.ts

@@ -49,9 +49,19 @@ export interface CxFunctionalComponent<Props = any> {
    __cxFunctionalComponent: true;
 }
 
-export function createFunctionalComponent<Props = any>(
+// Overload 1: Preserves generic factory types (e.g. <T>(props: Props<T>) => ...)
+export function createFunctionalComponent<F extends (props: any) => ChildNode | ChildNode[]>(
+   factory: F,
+): F & { __cxFunctionalComponent: true };
+
+// Overload 2: Explicit Props type parameter (e.g. createFunctionalComponent<MyProps>(fn))
+export function createFunctionalComponent<Props>(
    factory: (props: Props) => ChildNode | ChildNode[],
-): CxFunctionalComponent<Props> {
+): CxFunctionalComponent<Props>;
+
+export function createFunctionalComponent(
+   factory: (props: any) => ChildNode | ChildNode[],
+): any {
    if (isComponentFactory(factory)) return factory as any;
 
    return createComponentFactory(factory, (props: any = {}) => {