cx 26.0.12 → 26.0.13

package/src/widgets/HtmlElement.spec.helpers.tsx

@@ -0,0 +1,108 @@
+/** @jsxImportSource react */
+import React from "react";
+
+// Function component
+export function ReactFunctionComponent(props: { title: string; children?: React.ReactNode }) {
+   return (
+      <div className="react-function-component">
+         <h3>{props.title}</h3>
+         <div className="content">{props.children}</div>
+      </div>
+   );
+}
+
+// Function component with hooks
+export function ReactCounterComponent(props: { initialCount?: number }) {
+   const [count, setCount] = React.useState(props.initialCount ?? 0);
+   return (
+      <div className="react-counter">
+         <span className="count">{count}</span>
+         <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+   );
+}
+
+// Class component
+export class ReactClassComponent extends React.Component<
+   { label: string; children?: React.ReactNode },
+   { active: boolean }
+> {
+   constructor(props: { label: string; children?: React.ReactNode }) {
+      super(props);
+      this.state = { active: false };
+   }
+
+   render() {
+      return (
+         <div className={`react-class-component ${this.state.active ? "active" : ""}`}>
+            <label>{this.props.label}</label>
+            <div className="body">{this.props.children}</div>
+         </div>
+      );
+   }
+}
+
+// Pure component
+export class ReactPureComponent extends React.PureComponent<{ value: string }> {
+   render() {
+      return <span className="react-pure-component">{this.props.value}</span>;
+   }
+}
+
+// Function component with useRef and useEffect
+export function ReactRefEffectComponent(props: { onMount?: (element: HTMLDivElement | null) => void }) {
+   const divRef = React.useRef<HTMLDivElement>(null);
+   const mountedRef = React.useRef(false);
+
+   React.useEffect(() => {
+      mountedRef.current = true;
+      props.onMount?.(divRef.current);
+      return () => {
+         mountedRef.current = false;
+      };
+   }, []);
+
+   return (
+      <div ref={divRef} className="react-ref-effect-component" data-mounted={mountedRef.current ? "true" : "false"}>
+         Component with ref and effect
+      </div>
+   );
+}
+
+// Function component with useEffect that updates state
+export function ReactEffectStateComponent(props: { value: string }) {
+   const [processed, setProcessed] = React.useState<string>("");
+   const renderCountRef = React.useRef(0);
+
+   React.useEffect(() => {
+      setProcessed(`Processed: ${props.value}`);
+   }, [props.value]);
+
+   renderCountRef.current += 1;
+
+   return (
+      <div className="react-effect-state-component">
+         <span className="processed">{processed}</span>
+         <span className="render-count">{renderCountRef.current}</span>
+      </div>
+   );
+}
+
+// Component for testing prop translation
+export function ReactPropsComponent(props: {
+   text: string;
+   count: number;
+   enabled: boolean;
+   tags?: string[];
+   onClick?: () => void;
+}) {
+   return (
+      <div className="react-props-component">
+         <span className="text">{props.text}</span>
+         <span className="count">{props.count}</span>
+         <span className="enabled">{props.enabled ? "yes" : "no"}</span>
+         {props.tags && <span className="tags">{props.tags.join(", ")}</span>}
+         {props.onClick && <button onClick={props.onClick}>Click</button>}
+      </div>
+   );
+}

package/src/widgets/HtmlElement.spec.tsx

@@ -54,28 +54,36 @@ describe("HtmlElement", () => {
       });
    });
 
-   it("allows React components as tag", () => {
-      class MyReactComponent extends VDOM.Component<any> {
-         render() {
-            return VDOM.createElement("div", { className: "my-component" }, this.props.children);
-         }
-      }
-
+   it("supports SVG elements with camelCase attributes", () => {
       let store = new Store();
 
       const component = createTestRenderer(
          store,
          <cx>
-            <MyReactComponent>
-               <span>Child content</span>
-            </MyReactComponent>
+            <svg>
+               <path
+                  d="M200,176V64a23.9,23.9,0,0,0-24-24H40"
+                  fill="none"
+                  stroke="#343434"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="12"
+               />
+            </svg>
          </cx>,
       );
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
-      assert.equal(tree.type, "div");
-      assert.equal(tree.props.className, "my-component");
+      assert.equal(tree.type, "svg");
       assert(tree.children && tree.children.length === 1, "Expected one child");
+      let path = tree.children[0] as any;
+      assert.equal(path.type, "path");
+      assert.equal(path.props.d, "M200,176V64a23.9,23.9,0,0,0-24-24H40");
+      assert.equal(path.props.fill, "none");
+      assert.equal(path.props.stroke, "#343434");
+      assert.equal(path.props.strokeLinecap, "round");
+      assert.equal(path.props.strokeLinejoin, "round");
+      assert.equal(path.props.strokeWidth, "12");
    });
 });

package/src/widgets/HtmlElement.tsx

@@ -1,29 +1,30 @@
 /** @jsxImportSource react */
 
-import { Widget, VDOM } from "../ui/Widget";
-import { ContainerBase, StyledContainerConfig } from "../ui/Container";
-import {
-   tooltipMouseMove,
-   tooltipParentWillUnmount,
-   tooltipMouseLeave,
-   tooltipParentWillReceiveProps,
-   tooltipParentDidMount,
-   tooltipParentDidUpdate,
-   TooltipParentInstance,
-} from "./overlay/tooltip-ops";
-import type { TooltipInstance } from "./overlay/Tooltip";
+import type { JSX as ReactJSX } from "react";
 import { Url } from "../ui/app/Url";
+import { ChildNode, StyledContainerBase, StyledContainerConfig } from "../ui/Container";
+import type { RenderProps, WidgetData } from "../ui/Instance";
+import { Instance } from "../ui/Instance";
+import { BooleanProp, ClassProp, NumberProp, Prop, StringProp, StructuredProp } from "../ui/Prop";
+import type { CxChild, RenderingContext } from "../ui/RenderingContext";
+import { VDOM, Widget } from "../ui/Widget";
 import { debug } from "../util/Debug";
+import { isArray } from "../util/isArray";
+import { isDefined } from "../util/isDefined";
 import { isString } from "../util/isString";
 import { isUndefined } from "../util/isUndefined";
-import { isDefined } from "../util/isDefined";
-import { isArray } from "../util/isArray";
 import { autoFocus } from "./autoFocus";
-import type { CxChild, RenderingContext } from "../ui/RenderingContext";
-import type { WidgetData, RenderProps } from "../ui/Instance";
-import { Instance } from "../ui/Instance";
+import type { TooltipInstance } from "./overlay/Tooltip";
 import type { TooltipConfig, TooltipProp } from "./overlay/tooltip-ops";
-import { StringProp, NumberProp, StructuredProp } from "../ui/Prop";
+import {
+   tooltipMouseLeave,
+   tooltipMouseMove,
+   tooltipParentDidMount,
+   tooltipParentDidUpdate,
+   TooltipParentInstance,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
+} from "./overlay/tooltip-ops";
 
 const isDataAttribute = (attr: string): string | false => (attr.indexOf("data-") === 0 ? attr.substring(5) : false);
 
@@ -33,19 +34,73 @@ export let urlAttributes: Record<string, boolean> = {
    "iframe.src": true,
 };
 
-export interface HtmlElementConfig extends StyledContainerConfig {
+type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
+
+// Check if a key is an event handler (starts with "on" and is a function)
+// Use NonNullable to handle optional event handlers (T | undefined)
+type IsEventHandler<K, T> = K extends `on${string}` ? (NonNullable<T> extends Function ? true : false) : false;
+
+// CxJS event handler type - can be string (controller method) or callback with Instance
+type CxEventHandler<T> = T extends (event: infer E) => any
+   ? string | ((event: E, instance: Instance) => void)
+   : T extends undefined
+     ? undefined
+     : string | T;
+
+// Transform React element props to CxJS props
+// Note: For string literal union props (like SVG's strokeLinecap), we also accept `string`
+// because TypeScript widens string literals to `string` in JSX attribute syntax.
+// This is a known TypeScript behavior where `<path strokeLinecap="round"/>` infers "round" as string.
+type TransformHtmlElementProps<T> = {
+   [K in keyof T]: K extends "children"
+      ? ChildNode | ChildNode[]
+      : K extends "className" | "class"
+        ? ClassProp
+        : IsEventHandler<K, T[K]> extends true
+          ? CxEventHandler<T[K]>
+          : string extends T[K]
+            ? Prop<T[K]> // Plain string props - no change needed
+            : NonNullable<T[K]> extends string
+              ? Prop<T[K]> | string // String literal unions - accept string for JSX compatibility
+              : Prop<T[K]>;
+};
+
+/** Base HtmlElement configuration - core CxJS properties for extension by widgets */
+export interface HtmlElementConfigBase extends StyledContainerConfig {
    id?: StringProp | NumberProp;
 
+   /** HTML tag name */
+   tag?: string;
+
    /** Inner text contents. */
    text?: StringProp | NumberProp;
 
+   /** Inner html contents. */
+   innerHtml?: StringProp;
+
    /** Inner html contents. */
    html?: StringProp;
 
    /** Tooltip configuration. */
    tooltip?: StringProp | TooltipConfig;
+
+   /** Additional attributes to be applied. */
+   attrs?: StructuredProp;
+
+   /** Additional data attributes. */
+   data?: StructuredProp;
+
+   //** Set to true to automatically focus the element when mounted. */
+   autoFocus?: BooleanProp;
+
+   //** Callback to receive the HTMLElement where this component is mounted. */
+   onRef?: string | ((element: HTMLElement | null, instance: Instance) => void);
 }
 
+/** HtmlElement configuration with tag-specific attributes and events */
+export type HtmlElementConfig<Tag extends keyof ReactIntrinsicElements = "div"> = Omit<HtmlElementConfigBase, "tag"> &
+   TransformHtmlElementProps<ReactIntrinsicElements[Tag]> & { tag?: Tag };
+
 export class HtmlElementInstance<E extends HtmlElement<any, any> = HtmlElement<any, any>>
    extends Instance<E>
    implements TooltipParentInstance
@@ -55,9 +110,9 @@ export class HtmlElementInstance<E extends HtmlElement<any, any> = HtmlElement<a
 }
 
 export class HtmlElement<
-   Config extends HtmlElementConfig = HtmlElementConfig,
+   Config extends HtmlElementConfigBase = HtmlElementConfig,
    InstanceType extends HtmlElementInstance<any> = HtmlElementInstance<any>,
-> extends ContainerBase<Config, InstanceType> {
+> extends StyledContainerBase<Config, InstanceType> {
    declare public tag?: string;
    declare public html?: string;
    declare public innerText?: string;
@@ -69,7 +124,7 @@ export class HtmlElement<
    declare public urlAttributes?: string[];
    declare public extraProps?: Record<string, unknown>;
    declare public tooltip?: TooltipProp;
-   declare public onRef?: (element: HTMLElement | null, instance: Instance) => void;
+   declare public onRef?: string | ((element: HTMLElement | null, instance: Instance) => void);
    declare public autoFocus?: boolean | string;
    [key: string]: unknown; // Index signature for dynamic properties
 
@@ -253,7 +308,6 @@ export class HtmlElement<
 }
 
 HtmlElement.prototype.tag = "div";
-HtmlElement.prototype.styled = true;
 
 interface ContainerComponentProps {
    tag: string | React.ComponentType;

package/src/widgets/Icon.ts

@@ -1,4 +1,4 @@
-import { Widget, VDOM, WidgetConfig } from "../ui/Widget";
+import { Widget, VDOM, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
 import {
    registerIcon,
    registerIconFactory,
@@ -10,25 +10,11 @@ import {
 import "./icons/index";
 import { RenderingContext } from "../ui/RenderingContext";
 import { Instance } from "../ui/Instance";
-import { StringProp, ClassProp, StyleProp } from "../ui/Prop";
+import { StringProp } from "../ui/Prop";
 
-export interface IconConfig extends WidgetConfig {
+export interface IconConfig extends WidgetConfig, WidgetStyleConfig {
    /** Name under which the icon is registered. */
    name?: StringProp;
-
-   /** Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list. */
-   className?: ClassProp;
-
-   /** Additional CSS classes to be applied to the field.
-    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list. */
-   class?: ClassProp;
-
-   /** Style object applied to the wrapper div. Used for setting the dimensions of the field. */
-   style?: StyleProp;
-
-   /** Base CSS class to be applied to the element. Default is `icon`. */
-   baseClass?: string;
 }
 
 export class Icon extends Widget<IconConfig> {

package/src/widgets/List.tsx

@@ -32,9 +32,15 @@ export interface ListConfig<T = any> extends StyledContainerConfig {
    /** Record alias. Default is `$record`. */
    recordName?: RecordAlias;
 
+   /** Record alias. Alias for `recordName`. Default is `$record`. */
+   recordAlias?: RecordAlias;
+
    /** Index alias. Default is `$index`. */
    indexName?: RecordAlias;
 
+   /** Index alias. Alias for `indexName`. Default is `$index`. */
+   indexAlias?: RecordAlias;
+
    /** Style to be applied to each list item. */
    itemStyle?: StyleProp;