cx 26.4.0 → 26.4.2

package/src/widgets/HtmlElement.tsx

@@ -1,468 +1,468 @@
-/** @jsxImportSource react */
-
-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 { autoFocus } from "./autoFocus";
-import type { TooltipInstance } from "./overlay/Tooltip";
-import type { TooltipConfig, TooltipProp } from "./overlay/tooltip-ops";
-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;
-
-export let urlAttributes: Record<string, boolean> = {
-  "a.href": true,
-  "img.src": true,
-  "iframe.src": true,
-};
-
-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.
-// We exclude style/className/class as they're handled by StyledContainerConfig with better CxJS types.
-type TransformHtmlElementProps<T> = {
-  [K in keyof T as K extends "style" | "className" | "class"
-    ? never
-    : K]: K extends "children"
-    ? ChildNode | ChildNode[]
-    : 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
-{
-  events?: Record<string, (e: React.SyntheticEvent, instance: Instance) => any>;
-  declare tooltips: { [key: string]: TooltipInstance };
-}
-
-export class HtmlElement<
-  Config extends HtmlElementConfigBase = HtmlElementConfig,
-  InstanceType extends HtmlElementInstance<any> = HtmlElementInstance<any>,
-> extends StyledContainerBase<Config, InstanceType> {
-  declare public tag?: string;
-  declare public html?: string;
-  declare public innerText?: string;
-  declare public text?: string;
-  declare public innerHtml?: string;
-  declare public attrs?: Record<string, unknown>;
-  declare public data?: Record<string, unknown>;
-  declare public events?: Record<
-    string,
-    (e: Event, instance: Instance) => unknown
-  >;
-  declare public urlAttributes?: string[];
-  declare public extraProps?: Record<string, unknown>;
-  declare public tooltip?: TooltipProp;
-  declare public onRef?:
-    | string
-    | ((element: HTMLElement | null, instance: Instance) => void);
-  declare public autoFocus?: boolean | string;
-  [key: string]: unknown; // Index signature for dynamic properties
-
-  constructor(config?: Config) {
-    super(config);
-
-    if (isUndefined(this.jsxAttributes) && config)
-      this.jsxAttributes = Object.keys(config).filter(
-        this.isValidHtmlAttribute.bind(this)
-      );
-  }
-
-  declareData(...args: Record<string, unknown>[]): void {
-    const data: Record<string, unknown> = {
-      text: undefined,
-      innerHtml: undefined,
-      attrs: {
-        structured: true,
-      },
-      data: {
-        structured: true,
-      },
-      autoFocus: undefined,
-    };
-
-    let name: string | false;
-
-    this.urlAttributes = [];
-
-    if (this.jsxAttributes) {
-      this.jsxAttributes.forEach((attr) => {
-        if (urlAttributes[`${this.tag}.${attr}`])
-          this.urlAttributes!.push(attr);
-
-        if ((name = isDataAttribute(attr))) {
-          if (!this.data) this.data = {};
-          this.data[name] = this[attr];
-        } else if (
-          (name = this.isValidHtmlAttribute(attr)) &&
-          !data.hasOwnProperty(name)
-        ) {
-          if (name.indexOf("on") === 0) {
-            if (this[attr]) {
-              if (!this.events) this.events = {};
-              this.events[name] = this[attr] as (
-                e: Event,
-                instance: Instance
-              ) => unknown;
-            }
-          } else {
-            if (!this.attrs) this.attrs = {};
-            this.attrs[name] = this[attr];
-          }
-        }
-      });
-    }
-
-    if (this.urlAttributes.length === 0) delete this.urlAttributes;
-
-    // Combine args array with data object for super call
-    super.declareData(...args, data);
-  }
-
-  isValidHtmlAttribute(attrName: string): string | false {
-    switch (attrName) {
-      case "tag":
-      case "$type":
-      case "$props":
-      case "text":
-      case "layout":
-      case "class":
-      case "className":
-      case "style":
-      case "controller":
-      case "outerLayout":
-      case "items":
-      case "children":
-      case "visible":
-      case "if":
-      case "mod":
-      case "putInto":
-      case "contentFor":
-      case "trimWhitespace":
-      case "preserveWhitespace":
-      case "ws":
-      case "plainText":
-      case "vertical":
-      case "memoize":
-      case "onInit":
-      case "onExplore":
-      case "onDestroy":
-      case "onRef":
-      case "html":
-      case "innerText":
-      case "baseClass":
-      case "CSS":
-      case "tooltip":
-      case "styles":
-      case "jsxAttributes":
-      case "jsxSpread":
-      case "instance":
-      case "store":
-      case "autoFocus":
-      case "vdomKey":
-        return false;
-
-      case "type":
-        // allow type like in <input type="text" /> only if it's set as an attribute
-        if (this.jsxAttributes?.includes("type") !== true) return false;
-        break;
-
-      default:
-        if (isDataAttribute(attrName)) return false;
-        break;
-    }
-
-    return attrName;
-  }
-
-  init(): void {
-    if (this.html) this.innerHtml = this.html;
-
-    if (this.innerText) this.text = this.innerText;
-
-    super.init();
-  }
-
-  prepareData(context: RenderingContext, instance: InstanceType): void {
-    const { data } = instance;
-    if (this.urlAttributes && data.attrs) {
-      data.attrs = { ...data.attrs };
-      this.urlAttributes.forEach((attr: string) => {
-        const attrValue = (data.attrs as Record<string, unknown>)[attr];
-        if (isString(attrValue)) {
-          (data.attrs as Record<string, unknown>)[attr] =
-            Url.resolve(attrValue);
-        }
-      });
-    }
-    super.prepareData(context, instance);
-  }
-
-  attachProps(
-    context: RenderingContext,
-    instance: InstanceType,
-    props: RenderProps
-  ): void {
-    Object.assign(props, this.extraProps);
-
-    if (!isString(this.tag)) props.instance = instance;
-  }
-
-  render(
-    context: RenderingContext,
-    instance: InstanceType,
-    key: string
-  ): React.ReactNode {
-    //rebind events to pass instance
-    if (this.events && !instance.events) {
-      instance.events = {};
-      for (const eventName in this.events) {
-        const handler = this.events[eventName];
-        instance.events[eventName] = (e: React.SyntheticEvent) =>
-          instance.invoke(eventName, e, instance);
-      }
-    }
-
-    const { data, events } = instance;
-
-    const props: RenderProps = Object.assign(
-      {
-        key: key,
-      },
-      data.attrs,
-      events
-    );
-
-    if (data.classNames) props.className = data.classNames as string;
-
-    if (data.style) props.style = data.style as Record<string, string | number>;
-
-    let children: CxChild;
-    if (isDefined(data.text)) children = data.text;
-    else if (isString(data.innerHtml)) {
-      props.dangerouslySetInnerHTML = { __html: data.innerHtml };
-    } else {
-      children = this.renderChildren(context, instance);
-      if (children && isArray(children) && children.length === 0)
-        children = undefined;
-    }
-
-    props.children = children;
-
-    this.attachProps(context, instance, props);
-
-    if (this.tooltip || this.onRef || this.autoFocus)
-      return (
-        <ContainerComponent
-          key={key}
-          tag={this.tag!}
-          props={props}
-          instance={instance}
-          data={data}
-        >
-          {props.children as React.ReactNode}
-        </ContainerComponent>
-      );
-
-    return VDOM.createElement(
-      this.tag!,
-      props,
-      props.children as React.ReactNode
-    );
-  }
-}
-
-HtmlElement.prototype.tag = "div";
-
-interface ContainerComponentProps {
-  tag: string | React.ComponentType;
-  props: RenderProps;
-  children: React.ReactNode;
-  instance: HtmlElementInstance;
-  data: WidgetData;
-  key: string;
-}
-
-class ContainerComponent extends VDOM.Component<ContainerComponentProps> {
-  el: HTMLElement | null = null;
-  declare ref: (c: HTMLElement | null) => void;
-
-  constructor(props: ContainerComponentProps) {
-    super(props);
-    this.ref = (c: HTMLElement | null) => {
-      this.el = c;
-      const { instance } = this.props;
-      const widget = instance.widget as HtmlElement;
-      if (widget.onRef) {
-        instance.invoke("onRef", c, instance);
-      }
-    };
-  }
-
-  render(): React.ReactNode {
-    const { tag, props, children, instance } = this.props;
-    const widget = instance.widget as HtmlElement;
-
-    props.ref = this.ref;
-
-    if (widget.tooltip) {
-      const { onMouseLeave, onMouseMove } = props;
-
-      props.onMouseLeave = (e: React.MouseEvent) => {
-        tooltipMouseLeave(e, instance, widget.tooltip!);
-        if (onMouseLeave) onMouseLeave(e);
-      };
-      props.onMouseMove = (e: React.MouseEvent) => {
-        tooltipMouseMove(e, instance, widget.tooltip!);
-        if (onMouseMove) onMouseMove(e);
-      };
-    }
-
-    return VDOM.createElement(tag, props, children);
-  }
-
-  componentWillUnmount(): void {
-    tooltipParentWillUnmount(this.props.instance);
-  }
-
-  UNSAFE_componentWillReceiveProps(props: ContainerComponentProps): void {
-    const widget = this.props.instance.widget as HtmlElement;
-    if (this.el && widget.tooltip) {
-      tooltipParentWillReceiveProps(this.el, props.instance, widget.tooltip);
-    }
-  }
-
-  componentDidMount(): void {
-    const widget = this.props.instance.widget as HtmlElement;
-    if (this.el && widget.tooltip) {
-      tooltipParentDidMount(this.el, this.props.instance, widget.tooltip);
-    }
-    autoFocus(this.el, this);
-  }
-
-  componentDidUpdate(): void {
-    const widget = this.props.instance.widget as HtmlElement;
-    if (this.el && widget.tooltip) {
-      tooltipParentDidUpdate(this.el, this.props.instance, widget.tooltip);
-    }
-    autoFocus(this.el, this);
-  }
-}
-
-const originalWidgetFactory = Widget.factory;
-
-//support for React components
-Widget.factory = function (
-  type: string | React.ComponentType | undefined,
-  config?: Record<string, unknown>,
-  more?: Record<string, unknown>
-) {
-  const typeType = typeof type;
-
-  if (typeType === "undefined") {
-    debug("Creating a widget of unknown type.", config, more);
-    return new HtmlElement(Object.assign({}, config, more));
-  }
-
-  if (typeType === "function")
-    return HtmlElement.create(HtmlElement, { tag: type }, config);
-
-  return originalWidgetFactory.call(Widget, type as string, config, more);
-};
-
-Widget.alias("html-element", HtmlElement);
+/** @jsxImportSource react */
+
+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 { autoFocus } from "./autoFocus";
+import type { TooltipInstance } from "./overlay/Tooltip";
+import type { TooltipConfig, TooltipProp } from "./overlay/tooltip-ops";
+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;
+
+export let urlAttributes: Record<string, boolean> = {
+  "a.href": true,
+  "img.src": true,
+  "iframe.src": true,
+};
+
+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.
+// We exclude style/className/class as they're handled by StyledContainerConfig with better CxJS types.
+type TransformHtmlElementProps<T> = {
+  [K in keyof T as K extends "style" | "className" | "class"
+    ? never
+    : K]: K extends "children"
+    ? ChildNode | ChildNode[]
+    : 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
+{
+  events?: Record<string, (e: React.SyntheticEvent, instance: Instance) => any>;
+  declare tooltips: { [key: string]: TooltipInstance };
+}
+
+export class HtmlElement<
+  Config extends HtmlElementConfigBase = HtmlElementConfig,
+  InstanceType extends HtmlElementInstance<any> = HtmlElementInstance<any>,
+> extends StyledContainerBase<Config, InstanceType> {
+  declare public tag?: string;
+  declare public html?: string;
+  declare public innerText?: string;
+  declare public text?: string;
+  declare public innerHtml?: string;
+  declare public attrs?: Record<string, unknown>;
+  declare public data?: Record<string, unknown>;
+  declare public events?: Record<
+    string,
+    (e: Event, instance: Instance) => unknown
+  >;
+  declare public urlAttributes?: string[];
+  declare public extraProps?: Record<string, unknown>;
+  declare public tooltip?: TooltipProp;
+  declare public onRef?:
+    | string
+    | ((element: HTMLElement | null, instance: Instance) => void);
+  declare public autoFocus?: boolean | string;
+  [key: string]: unknown; // Index signature for dynamic properties
+
+  constructor(config?: Config) {
+    super(config);
+
+    if (isUndefined(this.jsxAttributes) && config)
+      this.jsxAttributes = Object.keys(config).filter(
+        this.isValidHtmlAttribute.bind(this)
+      );
+  }
+
+  declareData(...args: Record<string, unknown>[]): void {
+    const data: Record<string, unknown> = {
+      text: undefined,
+      innerHtml: undefined,
+      attrs: {
+        structured: true,
+      },
+      data: {
+        structured: true,
+      },
+      autoFocus: undefined,
+    };
+
+    let name: string | false;
+
+    this.urlAttributes = [];
+
+    if (this.jsxAttributes) {
+      this.jsxAttributes.forEach((attr) => {
+        if (urlAttributes[`${this.tag}.${attr}`])
+          this.urlAttributes!.push(attr);
+
+        if ((name = isDataAttribute(attr))) {
+          if (!this.data) this.data = {};
+          this.data[name] = this[attr];
+        } else if (
+          (name = this.isValidHtmlAttribute(attr)) &&
+          !data.hasOwnProperty(name)
+        ) {
+          if (name.indexOf("on") === 0) {
+            if (this[attr]) {
+              if (!this.events) this.events = {};
+              this.events[name] = this[attr] as (
+                e: Event,
+                instance: Instance
+              ) => unknown;
+            }
+          } else {
+            if (!this.attrs) this.attrs = {};
+            this.attrs[name] = this[attr];
+          }
+        }
+      });
+    }
+
+    if (this.urlAttributes.length === 0) delete this.urlAttributes;
+
+    // Combine args array with data object for super call
+    super.declareData(...args, data);
+  }
+
+  isValidHtmlAttribute(attrName: string): string | false {
+    switch (attrName) {
+      case "tag":
+      case "$type":
+      case "$props":
+      case "text":
+      case "layout":
+      case "class":
+      case "className":
+      case "style":
+      case "controller":
+      case "outerLayout":
+      case "items":
+      case "children":
+      case "visible":
+      case "if":
+      case "mod":
+      case "putInto":
+      case "contentFor":
+      case "trimWhitespace":
+      case "preserveWhitespace":
+      case "ws":
+      case "plainText":
+      case "vertical":
+      case "memoize":
+      case "onInit":
+      case "onExplore":
+      case "onDestroy":
+      case "onRef":
+      case "html":
+      case "innerText":
+      case "baseClass":
+      case "CSS":
+      case "tooltip":
+      case "styles":
+      case "jsxAttributes":
+      case "jsxSpread":
+      case "instance":
+      case "store":
+      case "autoFocus":
+      case "vdomKey":
+        return false;
+
+      case "type":
+        // allow type like in <input type="text" /> only if it's set as an attribute
+        if (this.jsxAttributes?.includes("type") !== true) return false;
+        break;
+
+      default:
+        if (isDataAttribute(attrName)) return false;
+        break;
+    }
+
+    return attrName;
+  }
+
+  init(): void {
+    if (this.html) this.innerHtml = this.html;
+
+    if (this.innerText) this.text = this.innerText;
+
+    super.init();
+  }
+
+  prepareData(context: RenderingContext, instance: InstanceType): void {
+    const { data } = instance;
+    if (this.urlAttributes && data.attrs) {
+      data.attrs = { ...data.attrs };
+      this.urlAttributes.forEach((attr: string) => {
+        const attrValue = (data.attrs as Record<string, unknown>)[attr];
+        if (isString(attrValue)) {
+          (data.attrs as Record<string, unknown>)[attr] =
+            Url.resolve(attrValue);
+        }
+      });
+    }
+    super.prepareData(context, instance);
+  }
+
+  attachProps(
+    context: RenderingContext,
+    instance: InstanceType,
+    props: RenderProps
+  ): void {
+    Object.assign(props, this.extraProps);
+
+    if (!isString(this.tag)) props.instance = instance;
+  }
+
+  render(
+    context: RenderingContext,
+    instance: InstanceType,
+    key: string
+  ): React.ReactNode {
+    //rebind events to pass instance
+    if (this.events && !instance.events) {
+      instance.events = {};
+      for (const eventName in this.events) {
+        const handler = this.events[eventName];
+        instance.events[eventName] = (e: React.SyntheticEvent) =>
+          instance.invoke(eventName, e, instance);
+      }
+    }
+
+    const { data, events } = instance;
+
+    const props: RenderProps = Object.assign(
+      {
+        key: key,
+      },
+      data.attrs,
+      events
+    );
+
+    if (data.classNames) props.className = data.classNames as string;
+
+    if (data.style) props.style = data.style as Record<string, string | number>;
+
+    let children: CxChild;
+    if (isDefined(data.text)) children = data.text;
+    else if (isString(data.innerHtml)) {
+      props.dangerouslySetInnerHTML = { __html: data.innerHtml };
+    } else {
+      children = this.renderChildren(context, instance);
+      if (children && isArray(children) && children.length === 0)
+        children = undefined;
+    }
+
+    props.children = children;
+
+    this.attachProps(context, instance, props);
+
+    if (this.tooltip || this.onRef || this.autoFocus)
+      return (
+        <ContainerComponent
+          key={key}
+          tag={this.tag!}
+          props={props}
+          instance={instance}
+          data={data}
+        >
+          {props.children as React.ReactNode}
+        </ContainerComponent>
+      );
+
+    return VDOM.createElement(
+      this.tag!,
+      props,
+      props.children as React.ReactNode
+    );
+  }
+}
+
+HtmlElement.prototype.tag = "div";
+
+interface ContainerComponentProps {
+  tag: string | React.ComponentType;
+  props: RenderProps;
+  children: React.ReactNode;
+  instance: HtmlElementInstance;
+  data: WidgetData;
+  key: string;
+}
+
+class ContainerComponent extends VDOM.Component<ContainerComponentProps> {
+  el: HTMLElement | null = null;
+  declare ref: (c: HTMLElement | null) => void;
+
+  constructor(props: ContainerComponentProps) {
+    super(props);
+    this.ref = (c: HTMLElement | null) => {
+      this.el = c;
+      const { instance } = this.props;
+      const widget = instance.widget as HtmlElement;
+      if (widget.onRef) {
+        instance.invoke("onRef", c, instance);
+      }
+    };
+  }
+
+  render(): React.ReactNode {
+    const { tag, props, children, instance } = this.props;
+    const widget = instance.widget as HtmlElement;
+
+    props.ref = this.ref;
+
+    if (widget.tooltip) {
+      const { onMouseLeave, onMouseMove } = props;
+
+      props.onMouseLeave = (e: React.MouseEvent) => {
+        tooltipMouseLeave(e, instance, widget.tooltip!);
+        if (onMouseLeave) onMouseLeave(e);
+      };
+      props.onMouseMove = (e: React.MouseEvent) => {
+        tooltipMouseMove(e, instance, widget.tooltip!);
+        if (onMouseMove) onMouseMove(e);
+      };
+    }
+
+    return VDOM.createElement(tag, props, children);
+  }
+
+  componentWillUnmount(): void {
+    tooltipParentWillUnmount(this.props.instance);
+  }
+
+  UNSAFE_componentWillReceiveProps(props: ContainerComponentProps): void {
+    const widget = this.props.instance.widget as HtmlElement;
+    if (this.el && widget.tooltip) {
+      tooltipParentWillReceiveProps(this.el, props.instance, widget.tooltip);
+    }
+  }
+
+  componentDidMount(): void {
+    const widget = this.props.instance.widget as HtmlElement;
+    if (this.el && widget.tooltip) {
+      tooltipParentDidMount(this.el, this.props.instance, widget.tooltip);
+    }
+    autoFocus(this.el, this);
+  }
+
+  componentDidUpdate(): void {
+    const widget = this.props.instance.widget as HtmlElement;
+    if (this.el && widget.tooltip) {
+      tooltipParentDidUpdate(this.el, this.props.instance, widget.tooltip);
+    }
+    autoFocus(this.el, this);
+  }
+}
+
+const originalWidgetFactory = Widget.factory;
+
+//support for React components
+Widget.factory = function (
+  type: string | React.ComponentType | undefined,
+  config?: Record<string, unknown>,
+  more?: Record<string, unknown>
+) {
+  const typeType = typeof type;
+
+  if (typeType === "undefined") {
+    debug("Creating a widget of unknown type.", config, more);
+    return new HtmlElement(Object.assign({}, config, more));
+  }
+
+  if (typeType === "function")
+    return HtmlElement.create(HtmlElement, { tag: type }, config);
+
+  return originalWidgetFactory.call(Widget, type as string, config, more);
+};
+
+Widget.alias("html-element", HtmlElement);