cx 26.0.12 → 26.0.13

package/build/util/isValidIdentifierName.spec.js

@@ -0,0 +1,28 @@
+import { isValidIdentifierName } from "./isValidIdentifierName";
+import assert from "assert";
+describe("isValidIdentifierName", function () {
+    it("names starting with a number are not valid", function () {
+        assert(!isValidIdentifierName("1a"));
+        assert(!isValidIdentifierName("00"));
+        assert(!isValidIdentifierName("0_abc"));
+    });
+    it("names starting with a dollar sign are valid", function () {
+        assert(isValidIdentifierName("$a"));
+        assert(isValidIdentifierName("$"));
+    });
+    it("names starting with an underscore are valid", function () {
+        assert(isValidIdentifierName("_a"));
+        assert(isValidIdentifierName("_"));
+    });
+    it("names starting with a letter are valid", function () {
+        assert(isValidIdentifierName("a"));
+        assert(isValidIdentifierName("abc"));
+        assert(isValidIdentifierName("abc0123"));
+    });
+    it("names with invalid characters are not valid", function () {
+        assert(!isValidIdentifierName("a b"));
+        assert(!isValidIdentifierName("a-b"));
+        assert(!isValidIdentifierName("a.b"));
+        assert(!isValidIdentifierName("a!b"));
+    });
+});

package/build/util/routeAppend.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/util/routeAppend.spec.js

@@ -0,0 +1,14 @@
+import { routeAppend } from './routeAppend';
+import assert from 'assert';
+describe('routeAppend', function () {
+    it('adds / if necessary', function () {
+        assert(routeAppend('x', 'y'), 'x/y');
+    });
+    it('does not add extra / if not necessary', function () {
+        assert(routeAppend('x/', 'y'), 'x/y');
+        assert(routeAppend('x', '/y'), 'x/y');
+    });
+    it('removes extra slash if both parts contain it', function () {
+        assert(routeAppend('x/', '/y'), 'x/y');
+    });
+});

package/build/widgets/AccessorBindings.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/widgets/AccessorBindings.spec.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import assert from "assert";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { Store } from "../data/Store";
+import { expr } from "../ui";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+let { $page } = createAccessorModelProxy();
+describe("Accessors", () => {
+    it("work as regular bindings", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { text: $page.text }) }));
+        let store = new Store({
+            data: {
+                $page: {
+                    text: "Test",
+                },
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree));
+        assert(tree.type === "div");
+        assert.deepStrictEqual(tree.children, ["Test"]);
+    });
+    it("support expressions", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { text: expr($page.a, $page.b, (a, b) => a + b) }) }));
+        let store = new Store({
+            data: {
+                $page: {
+                    a: 1,
+                    b: 3,
+                },
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree));
+        assert(tree.type === "div");
+        assert.deepStrictEqual(tree.children, ["4"]);
+    });
+});

package/build/widgets/Button.d.ts

@@ -3,15 +3,13 @@ import type { RenderingContext } from "../ui/RenderingContext";
 import type { Instance, RenderProps } from "../ui/Instance";
 import { BooleanProp, StringProp, Prop } from "../ui/Prop";
 import type { FormRenderingContext } from "./form/ValidationGroup";
-export interface ButtonConfig extends HtmlElementConfig {
+export interface ButtonConfig extends Omit<HtmlElementConfig<"button">, "disabled" | "type" | "form"> {
     /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
-    confirm?: Prop<string | Record<string, unknown>>;
+    confirm?: Prop<string | Record<string, unknown> | false>;
     /** If true button appears in pressed state. Useful for implementing toggle buttons. */
     pressed?: BooleanProp;
     /** Name of the icon to be put on the left side of the button. */
     icon?: StringProp;
-    /** HTML tag to be used. Default is `button`. */
-    tag?: string;
     /** Base CSS class to be applied to the element. Default is 'button'. */
     baseClass?: string;
     /**
@@ -31,8 +29,7 @@ export interface ButtonConfig extends HtmlElementConfig {
      * @param e - Event.
      * @param instance - Cx widget instance that fired the event.
      */
-    onClick?: string | ((e: MouseEvent, instance: Instance) => void);
-    onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
+    onClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
     /** Button type. */
     type?: "submit" | "button";
     /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */

package/build/widgets/Button.js

@@ -44,7 +44,7 @@ export class Button extends HtmlElement {
         super.attachProps(context, instance, props);
         if (!this.focusOnMouseDown) {
             props.onMouseDown = (e) => {
-                if (this.onMouseDown && instance.invoke("onMouseDown", e.nativeEvent, instance) === false)
+                if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false)
                     return;
                 preventFocus(e);
             };

package/build/widgets/DocumentTitle.d.ts

@@ -5,6 +5,8 @@ import { StringProp } from "../ui/Prop";
 export interface DocumentTitleConfig extends WidgetConfig {
     /** Text value to be used for the document title. */
     value?: StringProp;
+    /** Text value to be used for the document title. */
+    text?: StringProp;
     /** Deprecated. Use `action: "append"` instead. */
     append?: boolean;
     /** How to combine the title with existing document title. Default is `append`. */

package/build/widgets/Heading.d.ts

@@ -1,6 +1,6 @@
-import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "./HtmlElement";
 import { RenderingContext } from "../ui/RenderingContext";
-export interface HeadingConfig extends HtmlElementConfig {
+export interface HeadingConfig extends HtmlElementConfigBase {
     /** Name of the HTML element to be rendered. Default is `div`. */
     tag?: string;
     /** Heading level. Allowed values go from 1 to 6. Default is 3. */

package/build/widgets/HtmlElement.d.ts

@@ -1,29 +1,51 @@
 /** @jsxImportSource react */
-import { ContainerBase, StyledContainerConfig } from "../ui/Container";
-import { TooltipParentInstance } from "./overlay/tooltip-ops";
-import type { TooltipInstance } from "./overlay/Tooltip";
-import type { RenderingContext } from "../ui/RenderingContext";
+import type { JSX as ReactJSX } from "react";
+import { ChildNode, StyledContainerBase, StyledContainerConfig } from "../ui/Container";
 import type { RenderProps } from "../ui/Instance";
 import { Instance } from "../ui/Instance";
+import { BooleanProp, ClassProp, NumberProp, Prop, StringProp, StructuredProp } from "../ui/Prop";
+import type { RenderingContext } from "../ui/RenderingContext";
+import type { TooltipInstance } from "./overlay/Tooltip";
 import type { TooltipConfig, TooltipProp } from "./overlay/tooltip-ops";
-import { StringProp, NumberProp } from "../ui/Prop";
+import { TooltipParentInstance } from "./overlay/tooltip-ops";
 export declare let urlAttributes: Record<string, boolean>;
-export interface HtmlElementConfig extends StyledContainerConfig {
+type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
+type IsEventHandler<K, T> = K extends `on${string}` ? (NonNullable<T> extends Function ? true : false) : false;
+type CxEventHandler<T> = T extends (event: infer E) => any ? string | ((event: E, instance: Instance) => void) : T extends undefined ? undefined : string | T;
+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]> : NonNullable<T[K]> extends string ? Prop<T[K]> | string : 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;
+    autoFocus?: BooleanProp;
+    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 declare class HtmlElementInstance<E extends HtmlElement<any, any> = HtmlElement<any, any>> extends Instance<E> implements TooltipParentInstance {
     events?: Record<string, (e: React.SyntheticEvent, instance: Instance) => any>;
     tooltips: {
         [key: string]: TooltipInstance;
     };
 }
-export declare class HtmlElement<Config extends HtmlElementConfig = HtmlElementConfig, InstanceType extends HtmlElementInstance<any> = HtmlElementInstance<any>> extends ContainerBase<Config, InstanceType> {
+export declare class HtmlElement<Config extends HtmlElementConfigBase = HtmlElementConfig, InstanceType extends HtmlElementInstance<any> = HtmlElementInstance<any>> extends StyledContainerBase<Config, InstanceType> {
     tag?: string;
     html?: string;
     innerText?: string;
@@ -35,7 +57,7 @@ export declare class HtmlElement<Config extends HtmlElementConfig = HtmlElementC
     urlAttributes?: string[];
     extraProps?: Record<string, unknown>;
     tooltip?: TooltipProp;
-    onRef?: (element: HTMLElement | null, instance: Instance) => void;
+    onRef?: string | ((element: HTMLElement | null, instance: Instance) => void);
     autoFocus?: boolean | string;
     [key: string]: unknown;
     constructor(config?: Config);
@@ -46,3 +68,4 @@ export declare class HtmlElement<Config extends HtmlElementConfig = HtmlElementC
     attachProps(context: RenderingContext, instance: InstanceType, props: RenderProps): void;
     render(context: RenderingContext, instance: InstanceType, key: string): React.ReactNode;
 }
+export {};

package/build/widgets/HtmlElement.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/** @jsxImportSource react */
-import { Widget, VDOM } from "../ui/Widget";
-import { ContainerBase } from "../ui/Container";
-import { tooltipMouseMove, tooltipParentWillUnmount, tooltipMouseLeave, tooltipParentWillReceiveProps, tooltipParentDidMount, tooltipParentDidUpdate, } from "./overlay/tooltip-ops";
 import { Url } from "../ui/app/Url";
+import { StyledContainerBase } from "../ui/Container";
+import { Instance } from "../ui/Instance";
+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 { Instance } from "../ui/Instance";
+import { tooltipMouseLeave, tooltipMouseMove, tooltipParentDidMount, tooltipParentDidUpdate, tooltipParentWillReceiveProps, tooltipParentWillUnmount, } from "./overlay/tooltip-ops";
 const isDataAttribute = (attr) => (attr.indexOf("data-") === 0 ? attr.substring(5) : false);
 export let urlAttributes = {
     "a.href": true,
@@ -20,7 +19,7 @@ export let urlAttributes = {
 export class HtmlElementInstance extends Instance {
     events;
 }
-export class HtmlElement extends ContainerBase {
+export class HtmlElement extends StyledContainerBase {
     constructor(config) {
         super(config);
         if (isUndefined(this.jsxAttributes) && config)
@@ -181,7 +180,6 @@ export class HtmlElement extends ContainerBase {
     }
 }
 HtmlElement.prototype.tag = "div";
-HtmlElement.prototype.styled = true;
 class ContainerComponent extends VDOM.Component {
     el = null;
     constructor(props) {

package/build/widgets/HtmlElement.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/widgets/HtmlElement.spec.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { bind } from "../ui/bind";
+describe("HtmlElement", () => {
+    it("renders textual content provided through the text property", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { text: bind("text") }) }));
+        let store = new Store({
+            data: {
+                text: "Test",
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree), "Expected single element");
+        assert.equal(tree.type, "div");
+        assert.deepEqual(tree.children, ["Test"]);
+    });
+    it("allows spread bindings", () => {
+        let store = new Store({
+            data: {
+                title: "title",
+            },
+        });
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("a", { href: "#", title: { bind: "title" }, children: "Link" }) })));
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree), "Expected single element");
+        assert.deepEqual(tree, {
+            type: "a",
+            children: ["Link"],
+            props: {
+                href: "#",
+                title: "title",
+            },
+        });
+    });
+});

package/build/widgets/Icon.d.ts

@@ -1,21 +1,11 @@
-import { Widget, WidgetConfig } from "../ui/Widget";
+import { Widget, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
 import "./icons/index";
 import { RenderingContext } from "../ui/RenderingContext";
 import { Instance } from "../ui/Instance";
-import { StringProp, ClassProp, StyleProp } from "../ui/Prop";
-export interface IconConfig extends WidgetConfig {
+import { StringProp } from "../ui/Prop";
+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 declare class Icon extends Widget<IconConfig> {
     declareData(...args: Record<string, unknown>[]): void;

package/build/widgets/List.d.ts

@@ -12,8 +12,12 @@ export interface ListConfig<T = any> extends StyledContainerConfig {
     records?: Prop<T[]>;
     /** 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;
     /** CSS class to be applied to each list item. */

package/build/widgets/ReactElementWrapper.d.ts

@@ -0,0 +1,29 @@
+import { ContainerBase, ContainerConfig } from "../ui/Container";
+import { Instance } from "../ui/Instance";
+import { Prop } from "../ui/Prop";
+import type { RenderingContext } from "../ui/RenderingContext";
+type ReactElementWrapperConfigBase = Omit<ContainerConfig, "items">;
+type CxCallback<T> = T extends (...args: infer A) => infer R ? (this: Instance, ...args: A) => R : T;
+type TransformProp<K, V> = K extends keyof ReactElementWrapperConfigBase ? ReactElementWrapperConfigBase[K] : NonNullable<V> extends Function ? CxCallback<V> : Prop<V>;
+type TransformReactElementProps<T> = {
+    [K in keyof T]: TransformProp<K, T[K]>;
+};
+/** ReactElementWrapper configuration with component-specific props */
+export type ReactElementWrapperConfig<P> = ReactElementWrapperConfigBase & TransformReactElementProps<P>;
+interface ReactElementWrapperInstance extends Instance {
+    events?: Record<string, Function>;
+}
+export declare class ReactElementWrapper<C extends React.ComponentType<any> = React.ComponentType<any>> extends ContainerBase<ReactElementWrapperConfigBase & {
+    componentType: C;
+    jsxAttributes?: string[];
+}, ReactElementWrapperInstance> {
+    componentType: React.ComponentType<any>;
+    jsxAttributes?: string[];
+    props?: Record<string, unknown>;
+    [key: string]: unknown;
+    init(): void;
+    initInstance(_context: RenderingContext, _instance: ReactElementWrapperInstance): void;
+    declareData(...args: Record<string, unknown>[]): void;
+    render(context: RenderingContext, instance: ReactElementWrapperInstance, key: string): React.ReactNode;
+}
+export {};

package/build/widgets/ReactElementWrapper.js

@@ -0,0 +1,59 @@
+import { ContainerBase } from "../ui/Container";
+import { VDOM } from "../ui/Widget";
+import { isFunction, isNonEmptyArray } from "../util";
+import { isArray } from "../util/isArray";
+export class ReactElementWrapper extends ContainerBase {
+    init() {
+        // Collect all props to pass to the React component
+        this.props = {};
+        if (this.jsxAttributes) {
+            for (const attr of this.jsxAttributes) {
+                // Skip CxJS reserved attributes and children-related attributes
+                if (attr === "componentType" ||
+                    attr === "visible" ||
+                    attr === "if" ||
+                    attr === "controller" ||
+                    attr === "jsxAttributes" ||
+                    attr === "layout" ||
+                    attr === "outerLayout" ||
+                    attr === "putInto" ||
+                    attr === "contentFor" ||
+                    attr === "children" ||
+                    attr === "items")
+                    continue;
+                this.props[attr] = this[attr];
+            }
+        }
+        super.init();
+    }
+    initInstance(_context, _instance) {
+        let events;
+        if (!isNonEmptyArray(this.jsxAttributes))
+            return;
+        events = {};
+        for (let prop of this.jsxAttributes) {
+            let f = this[prop];
+            if (prop.startsWith("on") && isFunction(f))
+                events[prop] = (...args) => f.apply(_instance, args);
+        }
+    }
+    declareData(...args) {
+        super.declareData({
+            props: { structured: true },
+        }, ...args);
+    }
+    render(context, instance, key) {
+        const { data } = instance;
+        // Render CxJS children to React elements
+        let children = this.renderChildren(context, instance);
+        if (children && isArray(children) && children.length === 0)
+            children = undefined;
+        const props = {
+            key,
+            ...data.props,
+            ...instance.events,
+            children,
+        };
+        return VDOM.createElement(this.componentType, props);
+    }
+}

package/build/widgets/drag-drop/DragSource.d.ts

@@ -1,9 +1,9 @@
 /** @jsxImportSource react */
-import { ContainerBase, ContainerConfig } from "../../ui/Container";
+import { StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
 import { Instance } from "../../ui/Instance";
 import { StringProp, StyleProp, ClassProp, Config } from "../../ui/Prop";
 import { RenderingContext } from "../../ui/RenderingContext";
-export interface DragSourceConfig extends ContainerConfig {
+export interface DragSourceConfig extends StyledContainerConfig {
     /**
      * Data about the drag source that can be used by drop zones to test if
      * drag source is acceptable and to perform drop operations.
@@ -35,7 +35,7 @@ export interface DragSourceConfig extends ContainerConfig {
 export interface DragSourceInstance extends Instance<DragSource> {
     dragHandles: any[];
 }
-export declare class DragSource extends ContainerBase<DragSourceConfig, DragSourceInstance> {
+export declare class DragSource extends StyledContainerBase<DragSourceConfig, DragSourceInstance> {
     styled: boolean;
     baseClass: string;
     hideOnDrag: boolean;

package/build/widgets/drag-drop/DragSource.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** @jsxImportSource react */
 import { Widget, VDOM } from "../../ui/Widget";
-import { ContainerBase } from "../../ui/Container";
+import { StyledContainerBase } from "../../ui/Container";
 import { ddMouseDown, ddDetect, ddMouseUp, initiateDragDrop, isDragHandleEvent } from "./ops";
 import { preventFocus } from "../../ui/FocusManager";
 import { parseStyle } from "../../util/parseStyle";
-export class DragSource extends ContainerBase {
+export class DragSource extends StyledContainerBase {
     constructor(config) {
         super(config);
     }
@@ -35,7 +35,6 @@ export class DragSource extends ContainerBase {
         return (_jsx(DragSourceComponent, { instance: instance, handled: this.handled || instance.dragHandles.length > 0, children: this.renderChildren(context, instance) }, key));
     }
 }
-DragSource.prototype.styled = true;
 DragSource.prototype.baseClass = "dragsource";
 DragSource.prototype.hideOnDrag = false;
 DragSource.prototype.handled = false;

package/build/widgets/drag-drop/DropZone.d.ts

@@ -1,10 +1,10 @@
 /** @jsxImportSource react */
-import { ContainerBase, ContainerConfig } from "../../ui/Container";
+import { StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
 import { DragEvent } from "./ops";
 import { Instance } from "../../ui/Instance";
 import { StyleProp, ClassProp, StructuredProp } from "../../ui/Prop";
 import { RenderingContext } from "../../ui/RenderingContext";
-export interface DropZoneConfig extends ContainerConfig {
+export interface DropZoneConfig extends StyledContainerConfig {
     /** CSS styles to be applied when drag cursor is over the drop zone. */
     overStyle?: StyleProp;
     /** CSS styles to be applied when drag cursor is near the drop zone. */
@@ -74,7 +74,7 @@ export interface DropZoneConfig extends ContainerConfig {
 }
 export interface DropZoneInstance extends Instance<DropZone> {
 }
-export declare class DropZone extends ContainerBase<DropZoneConfig, DropZoneInstance> {
+export declare class DropZone extends StyledContainerBase<DropZoneConfig, DropZoneInstance> {
     styled: boolean;
     nearDistance: number;
     hinflate: number;

package/build/widgets/drag-drop/DropZone.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** @jsxImportSource react */
 import { Widget, VDOM } from "../../ui/Widget";
-import { ContainerBase } from "../../ui/Container";
+import { StyledContainerBase } from "../../ui/Container";
 import { parseStyle } from "../../util/parseStyle";
 import { registerDropZone, DragDropContext } from "./ops";
 import { findScrollableParent } from "../../util/findScrollableParent";
 import { isNumber } from "../../util/isNumber";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-export class DropZone extends ContainerBase {
+export class DropZone extends StyledContainerBase {
     constructor(config) {
         super(config);
     }
@@ -36,7 +36,6 @@ export class DropZone extends ContainerBase {
         return (_jsx(DropZoneComponent, { instance: instance, children: this.renderChildren(context, instance) }, key));
     }
 }
-DropZone.prototype.styled = true;
 DropZone.prototype.nearDistance = 0;
 DropZone.prototype.hinflate = 0;
 DropZone.prototype.vinflate = 0;

package/build/widgets/form/Checkbox.d.ts

@@ -23,6 +23,8 @@ export interface CheckboxConfig extends FieldConfig {
     unfocusable?: boolean;
     /** View mode text. */
     viewText?: StringProp;
+    /** Custom validation function. */
+    onValidate?: string | ((value: boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class Checkbox extends Field<CheckboxConfig> {
     baseClass: string;

package/build/widgets/form/ColorField.d.ts

@@ -26,6 +26,8 @@ export interface ColorFieldConfig extends FieldConfig {
     format?: "rgba" | "hsla" | "hex";
     /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
     dropdownOptions?: Partial<DropdownConfig>;
+    /** Custom validation function. */
+    onValidate?: string | ((value: string, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class ColorFieldInstance<F extends ColorField = ColorField> extends FieldInstance<F> implements DropdownWidgetProps {
     lastDropdown?: Instance;

package/build/widgets/form/DateTimeField.d.ts

@@ -59,6 +59,8 @@ export interface DateTimeFieldConfig extends FieldConfig {
     showSeconds?: boolean;
     /** Additional configuration to be passed to the dropdown. */
     dropdownOptions?: Partial<DropdownConfig>;
+    /** Custom validation function. */
+    onValidate?: string | ((value: string | Date, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class DateTimeField extends Field<DateTimeFieldConfig> {
     showClear?: boolean;

package/build/widgets/form/Field.d.ts

@@ -61,8 +61,6 @@ export interface FieldConfig extends PureContainerConfig, WidgetStyleConfig {
     tabIndex?: StringProp;
     /** Additional content to be displayed next to the field. */
     help?: string | Config;
-    /** Custom validation function. */
-    onValidate?: string | ((value: unknown, instance: Instance, validationParams: Record<string, unknown>) => unknown);
     /** Validation parameters to be passed to the validation function. */
     validationParams?: Config;
     onValidationException?: string | ((error: unknown, instance: FieldInstance) => void);

package/build/widgets/form/LabeledContainer.d.ts

@@ -1,16 +1,17 @@
-import type { Instance } from '../../ui/Instance';
-import type { CxChild, RenderingContext } from '../../ui/RenderingContext';
-import { Widget } from '../../ui/Widget';
-import { FieldGroup, FieldGroupConfig } from './FieldGroup';
-import { Label } from './Label';
-import { StringProp, Config, BooleanProp } from '../../ui/Prop';
+import type { Instance } from "../../ui/Instance";
+import type { CxChild, RenderingContext } from "../../ui/RenderingContext";
+import { Widget } from "../../ui/Widget";
+import { FieldGroup, FieldGroupConfig } from "./FieldGroup";
+import { Label, LabelConfig } from "./Label";
+import { StringProp, BooleanProp, ModProp } from "../../ui/Prop";
+import { Create } from "../../util/Component";
 export interface LabeledContainerConfig extends FieldGroupConfig {
     /** The label. */
-    label?: StringProp | Config;
+    label?: StringProp | Create<typeof Widget> | LabelConfig;
     /** Set to true to disable the field. */
     disabled?: BooleanProp;
     /** CSS modifier classes. */
-    mod?: Record<string, unknown>;
+    mod?: ModProp;
     /** Set to true to display an asterisk next to the label. */
     asterisk?: BooleanProp;
 }

package/build/widgets/form/LabeledContainer.js

@@ -1,11 +1,11 @@
-import { isSelector } from '../../data/isSelector';
-import { Widget } from '../../ui/Widget';
-import { FieldGroup } from './FieldGroup';
-import { Label } from './Label';
+import { isSelector } from "../../data/isSelector";
+import { Widget } from "../../ui/Widget";
+import { FieldGroup } from "./FieldGroup";
+import { Label } from "./Label";
 export class LabeledContainer extends FieldGroup {
     declareData(...args) {
         super.declareData(...args, {
-            label: undefined
+            label: undefined,
         });
     }
     init() {
@@ -15,7 +15,7 @@ export class LabeledContainer extends FieldGroup {
                 disabled: this.disabled,
                 mod: this.mod,
                 asterisk: this.asterisk,
-                required: true
+                required: true,
             };
             if (this.label.isComponentType)
                 labelConfig = this.label;
@@ -29,7 +29,7 @@ export class LabeledContainer extends FieldGroup {
     }
     initComponents(context, instance, ...args) {
         return super.initComponents(context, instance, ...args, {
-            label: this.label
+            label: this.label,
         });
     }
     renderLabel(context, instance, key) {
@@ -40,9 +40,9 @@ export class LabeledContainer extends FieldGroup {
     render(context, instance, key) {
         return {
             label: this.renderLabel(context, instance),
-            content: this.renderChildren(context, instance)
+            content: this.renderChildren(context, instance),
         };
     }
 }
 LabeledContainer.prototype.styled = true;
-Widget.alias('labeled-container', LabeledContainer);
+Widget.alias("labeled-container", LabeledContainer);