cx 26.0.11 → 26.0.13

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);

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

@@ -4,61 +4,109 @@ import { DropdownConfig } from "../overlay/Dropdown";
 import type { CxChild, RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
 import { FieldConfig } from "./Field";
-import { Prop, BooleanProp, StringProp, DataRecord } from "../../ui/Prop";
+import { Prop, BooleanProp, StringProp, StructuredProp, DataRecord } from "../../ui/Prop";
 export interface LookupBinding {
     local: string;
     remote: string;
     key?: boolean;
 }
-export interface LookupFieldConfig extends FieldConfig {
+export interface LookupFieldConfig<TOption = unknown, TRecord = unknown> extends FieldConfig {
+    /** Defaults to `false`. Set to `true` to enable multiple selection. */
     multiple?: BooleanProp;
+    /** Selected value. Used only if `multiple` is set to `false`. */
     value?: Prop<number | string>;
+    /** A list of selected ids. Used only if `multiple` is set to `true`. */
     values?: Prop<(number | string)[]>;
-    records?: Prop<Record<string, any>[]>;
+    /** A list of selected records. Used only if `multiple` is set to `true`. */
+    records?: Prop<TRecord[]>;
+    /** Text associated with the selection. Used only if `multiple` is set to `false`. */
     text?: StringProp;
+    /** The opposite of `disabled`. */
     enabled?: BooleanProp;
+    /** Defaults to `false`. Used to make the field read-only. */
+    readOnly?: BooleanProp;
+    /** Default text displayed when the field is empty. */
     placeholder?: StringProp;
-    options?: Prop<Record<string, any>[]>;
+    /** A list of available options. */
+    options?: Prop<TOption[]>;
+    /** Set to `true` to hide the clear button. Default value is `false`. */
     hideClear?: boolean;
+    /** Set to `false` to hide the clear button. Default value is `true`. */
     showClear?: boolean;
+    /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
     alwaysShowClear?: boolean;
+    /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
     baseClass?: string;
+    /** Name or configuration of the icon to be put on the left side of the input. */
+    icon?: StringProp | Record<string, any>;
+    /** Additional config to be applied to all items. */
     itemConfig?: any;
+    /** An array of objects describing the mapping of option data to store data. */
     bindings?: LookupBinding[];
+    /** A delay in milliseconds between typing stop and query. Default is `150`. */
     queryDelay?: number;
+    /** Minimal number of characters required before query is made. */
     minQueryLength?: number;
+    /** Set to `true` to hide the search field. */
     hideSearchField?: boolean;
+    /** Number of options required to show search field. Defaults to `7`. */
     minOptionsForSearchField?: number;
+    /** Text to display while data is being loaded. */
     loadingText?: string;
+    /** Error message displayed if server query throws an exception. */
     queryErrorText?: string;
+    /** Message to be displayed if no entries match the user query. */
     noResultsText?: string;
+    /** Name of the field which holds the id of the option. Default is `id`. */
     optionIdField?: string;
+    /** Name of the field which holds the display text of the option. Default is `text`. */
     optionTextField?: string;
+    /** Name of the field to store id of selected value in multiple mode. Default is `id`. */
     valueIdField?: string;
+    /** Name of the field to store display text of selected value. Default is `text`. */
     valueTextField?: string;
+    /** `onQuery` will be called once to fetch all options; filtering occurs client-side. */
     fetchAll?: boolean;
+    /** When set with `fetchAll`, fetched options are cached for widget lifetime. */
     cacheAll?: boolean;
+    /** Close the dropdown after selection. Default is `true`. */
     closeOnSelect?: boolean;
+    /** Message displayed if the entered search query is too short. */
     minQueryLengthMessageText?: string;
+    /** Query function called to fetch options. */
     onQuery?: string | ((query: string | {
         query: string;
         page: number;
         pageSize: number;
-    }, instance: Instance) => Record<string, any>[] | Promise<Record<string, any>[]>);
+    }, instance: Instance) => TOption[] | Promise<TOption[]>);
+    /** Set to `true` to sort dropdown options. */
     sort?: boolean;
+    /** Additional list options, such as grouping configuration, custom sorting, etc. */
     listOptions?: Record<string, any>;
+    /** Show dropdown immediately after component mount; useful for cell editing. */
     autoOpen?: BooleanProp;
+    /** Allow enter key events to propagate; useful for forms or grid cell editors. */
     submitOnEnterKey?: BooleanProp;
+    /** Allow dropdown enter key events to propagate for form submission. */
     submitOnDropdownEnterKey?: BooleanProp;
+    /** Number of additional items loaded in `infinite` mode. Default is `100`. */
     pageSize?: number;
+    /** Set to `true` to enable loading additional options when scroll reaches end. */
     infinite?: boolean;
+    /** Allow quick selection of all displayed items on `Ctrl + A` key combination. */
     quickSelectAll?: boolean;
-    onGetRecordDisplayText?: ((record: Record<string, any>, instance: Instance) => string) | null;
-    onCreateVisibleOptionsFilter?: string | ((filterParams: unknown, instance: Instance) => (option: Record<string, any>) => boolean);
-    /** Additional configuration to be passed to the dropdown. */
+    /** Parameters that affect filtering. */
+    filterParams?: StructuredProp;
+    /** Used in multiple selection lookups to construct display text from multiple fields. */
+    onGetRecordDisplayText?: ((record: TRecord, instance: Instance) => string) | null;
+    /** Callback to create a filter function for given filter params. */
+    onCreateVisibleOptionsFilter?: string | ((filterParams: unknown, instance: Instance) => (option: TOption) => boolean);
+    /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
     dropdownOptions?: Partial<DropdownConfig>;
+    /** Custom validation function. */
+    onValidate?: string | ((value: number | string, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
-export declare class LookupField<Config extends LookupFieldConfig = LookupFieldConfig> extends Field<Config> {
+export declare class LookupField<TOption = unknown, TRecord = unknown> extends Field<LookupFieldConfig<TOption, TRecord>> {
     baseClass: string;
     multiple: boolean;
     hideClear?: boolean;

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

@@ -64,6 +64,8 @@ export interface MonthFieldConfig extends FieldConfig {
     inclusiveTo?: boolean;
     /** Optional configuration options for the MonthPicker component rendered within the dropdown. */
     monthPickerOptions?: Config;
+    /** Custom validation function. */
+    onValidate?: string | ((value: string | Date, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class MonthField<Config extends MonthFieldConfig = MonthFieldConfig> extends Field<Config, MonthFieldInstance> {
     baseClass: string;

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

@@ -31,6 +31,8 @@ export interface NumberFieldConfig extends FieldConfig {
     inputErrorText?: string;
     scale?: number;
     offset?: number;
+    /** Custom validation function. */
+    onValidate?: string | ((value: number, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class NumberField<Config extends NumberFieldConfig = NumberFieldConfig> extends Field<Config> {
     baseClass: string;

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

@@ -21,6 +21,8 @@ export interface RadioConfig extends FieldConfig {
     native?: boolean;
     /** Set to `true` to make the radio initially selected. */
     default?: boolean;
+    /** Custom validation function. */
+    onValidate?: string | ((value: number | string | boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class Radio extends Field<RadioConfig> {
     selection?: Prop<number | string | boolean>;

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

@@ -17,6 +17,8 @@ export interface SelectConfig extends FieldConfig {
     multiple?: boolean;
     convertValues?: boolean;
     nullString?: string;
+    /** Custom validation function. */
+    onValidate?: string | ((value: number | string, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class Select<Config extends SelectConfig = SelectConfig> extends Field<Config> {
     baseClass: string;

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

@@ -3,6 +3,7 @@ import { BooleanProp, NumberProp, StringProp, StructuredProp, StyleProp } from "
 import type { RenderingContext } from "../../ui/RenderingContext";
 import { type TooltipConfig } from "../overlay/tooltip-ops";
 import { Field, FieldConfig, FieldInstance } from "./Field";
+import type { Instance } from "../../ui/Instance";
 export interface SliderConfig extends FieldConfig {
     /** Low value of the slider range. */
     from?: NumberProp;
@@ -42,6 +43,8 @@ export interface SliderConfig extends FieldConfig {
     incrementPercentage?: number;
     /** Set to `true` to make the slider read-only. */
     readOnly?: BooleanProp;
+    /** Custom validation function. */
+    onValidate?: string | ((value: number, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class Slider extends Field<SliderConfig, FieldInstance<Slider>> {
     baseClass: string;

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

@@ -23,6 +23,8 @@ export interface SwitchConfig extends FieldConfig {
     baseClass?: string;
     /** Determines if button should receive focus on mousedown event. Default is `false`. */
     focusOnMouseDown?: boolean;
+    /** Custom validation function. */
+    onValidate?: string | ((value: boolean, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 export declare class Switch extends Field<SwitchConfig> {
     on?: unknown;

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

@@ -3,30 +3,64 @@ import { Field, FieldConfig } from "./Field";
 import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
 import { Instance } from "../../ui/Instance";
 export interface TextFieldConfig extends FieldConfig {
+    /** Textual value of the input field. */
     value?: Prop<any>;
+    /** Default text displayed when the field is empty. */
     placeholder?: StringProp;
+    /** Defaults to `false`. Set to `true` to disable the field. */
     disabled?: BooleanProp;
+    /** The opposite of `disabled`. */
+    enabled?: BooleanProp;
+    /** Defaults to `false`. Used to make the field read-only. */
     readOnly?: BooleanProp;
+    /** Defaults to `false`. Used to make the field required. */
     required?: BooleanProp;
+    /** Minimal length of the input text. */
     minLength?: NumberProp;
+    /** Maximal length of the input text. */
     maxLength?: NumberProp;
+    /** Regular expression used to validate the user's input. */
     validationRegExp?: Prop<RegExp>;
+    /** Error message displayed upon validation failure. */
     validationErrorText?: StringProp;
+    /** Error message displayed when input text is too short. */
     minLengthValidationErrorText?: StringProp;
+    /** Error message displayed when input text is too long. */
     maxLengthValidationErrorText?: StringProp;
+    /** Event triggering value updates. Possible values are `input` (default), `enter`, or `blur`. Multiple values can be separated by space. */
     reactOn?: StringProp;
+    /** Input type. Defaults to `text`. Other common value is `password`. */
     inputType?: StringProp;
+    /** Base CSS class to be applied to the field. Defaults to `textfield`. */
+    baseClass?: string;
+    /** Keyboard shortcut used to focus the field. */
     keyboardShortcut?: StringProp;
+    /** Set to `true` to remove leading and trailing whitespace. Default is `false`. */
     trim?: BooleanProp;
+    /** Set to `true` to hide the clear button. Default value is `false`. */
     hideClear?: BooleanProp;
+    /** Set to `false` to hide the clear button. Default value is `true`. */
     showClear?: BooleanProp;
+    /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
     alwaysShowClear?: BooleanProp;
+    /** Name or configuration of the icon to be put on the left side of the input. */
     icon?: Prop<any>;
+    /** Additional attributes to be passed to the input element. */
     inputAttrs?: Prop<any>;
+    /** If `trackFocus` is set, this value will be set when the field receives or loses focus. */
+    focused?: BooleanProp;
+    /** Callback invoked when the value changes. */
     onChange?: string | ((value: any, instance: Instance) => void);
+    /** Callback invoked on each input event. */
     onInput?: string | ((value: any, instance: Instance) => void);
+    /** Callback invoked when the field receives focus. */
     onFocus?: string | ((e: FocusEvent, instance: Instance) => void);
+    /** Callback invoked when the field loses focus. */
     onBlur?: string | ((e: FocusEvent, instance: Instance) => void);
+    /** Handler triggered on key down events. Return `false` to prevent default behavior. */
+    onKeyDown?: string | ((e: KeyboardEvent, instance: Instance) => boolean | void);
+    /** Custom validation function. */
+    onValidate?: string | ((value: string, instance: Instance, validationParams: any) => string | undefined | false);
 }
 export interface TextFieldProps extends TextFieldConfig {
 }

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

@@ -1 +1,16 @@
-export declare const TimeList: any;
+import type { Instance } from "../../ui/Instance";
+export interface TimeListProps {
+    /** Selected time value. Should be a Date object or a valid date string. */
+    value?: unknown;
+    /** Time step in minutes. Default is `15`. */
+    step?: number;
+    /** Time format string. Default is `datetime;HHmm`. */
+    format?: string;
+    /** Function to encode the Date object before storing. */
+    encoding?: (date: Date) => unknown;
+    /** Callback invoked when a time is selected. */
+    onSelect?: string | ((e: React.MouseEvent, instance: Instance, date: Date) => void);
+    /** Additional properties passed to the underlying component. */
+    [key: string]: unknown;
+}
+export declare const TimeList: import("../../ui").CxFunctionalComponent<TimeListProps>;

package/build/widgets/form/TimeList.js

@@ -1,4 +1,4 @@
-/** @jsxImportSource react */
+import { jsx as _jsx } from "cx/jsx-runtime";
 import { ContentResolver } from "../../ui/ContentResolver";
 import { DataProxy } from "../../ui/DataProxy";
 import { List } from "../List";
@@ -10,13 +10,7 @@ import { Culture } from "../../ui/Culture";
 import { isString } from "../../util/isString";
 import { isFunction } from "../../util/isFunction";
 import { bind } from "../../ui/bind";
-import { Widget } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-export const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }) => {
-    return Widget.create({
-        type: ContentResolver,
-        params: { step, format, dummy: true },
-        onResolve: ({ step, format }) => {
+export const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }) => (_jsx("cx", { children: _jsx(ContentResolver, { params: { step, format, dummy: true }, onResolve: ({ step, format }) => {
             let max = 24 * 60;
             if (!step)
                 step = 15;
@@ -32,58 +26,36 @@ export const TimeList = createFunctionalComponent(({ value, step, format, encodi
                 });
             }
             let stepMs = step * 60 * 1000;
-            return Widget.create({
-                type: DataProxy,
-                data: { $value: value },
-                immutable: true,
-                children: Widget.create({
-                    type: DataProxy,
-                    data: {
-                        $selection: {
-                            get: ({ $value }) => {
-                                if ($value == null)
-                                    return null;
-                                let selectionDate = new Date($value);
-                                let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
-                                return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
+            return (_jsx("cx", { children: _jsx(DataProxy, { data: { $value: value }, immutable: true, children: _jsx(DataProxy, { data: {
+                            $selection: {
+                                get: ({ $value }) => {
+                                    if ($value == null)
+                                        return null;
+                                    let selectionDate = new Date($value);
+                                    let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
+                                    return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
+                                },
+                                set: (value, instance) => {
+                                    let { store } = instance;
+                                    let $value = store.get("$value");
+                                    let copy = $value ? new Date($value) : new Date();
+                                    let today = zeroTime(new Date()).valueOf();
+                                    let date = new Date(today + value);
+                                    copy.setHours(date.getHours());
+                                    copy.setMinutes(date.getMinutes());
+                                    copy.setSeconds(date.getSeconds());
+                                    copy.setMilliseconds(0);
+                                    let encode = encoding || Culture.getDefaultDateEncoding();
+                                    store.set("$value", encode(copy));
+                                },
                             },
-                            set: (value, instance) => {
-                                let { store } = instance;
-                                let $value = store.get("$value");
-                                let copy = $value ? new Date($value) : new Date();
-                                let today = zeroTime(new Date()).valueOf();
-                                let date = new Date(today + value);
-                                copy.setHours(date.getHours());
-                                copy.setMinutes(date.getMinutes());
-                                copy.setSeconds(date.getSeconds());
-                                copy.setMilliseconds(0);
-                                let encode = encoding || Culture.getDefaultDateEncoding();
-                                store.set("$value", encode(copy));
-                            },
-                        },
-                    },
-                    children: Widget.create({
-                        type: List,
-                        records: times,
-                        recordAlias: "$time",
-                        selection: {
-                            type: KeySelection,
-                            selection: { bind: "$selection" },
-                        },
-                        ...props,
-                        onItemClick: (e, instance) => {
-                            if (!onSelect)
-                                return;
-                            let date = new Date(instance.store.get('$value'));
-                            if (isString(onSelect))
-                                instance.invokeControllerMethod(onSelect, e, instance, date);
-                            else if (isFunction(onSelect))
-                                onSelect(e, instance, date);
-                        },
-                        children: HtmlElement.create("div", { text: bind("$time.text") }),
-                    }),
-                }),
-            });
-        },
-    });
-});
+                        }, children: _jsx(List, { records: times, recordAlias: "$time", selection: { type: KeySelection, selection: bind("$selection") }, ...props, onItemClick: (e, instance) => {
+                                if (!onSelect)
+                                    return;
+                                let date = new Date(instance.store.get("$value"));
+                                if (isString(onSelect))
+                                    instance.invokeControllerMethod(onSelect, e, instance, date);
+                                else if (isFunction(onSelect))
+                                    onSelect(e, instance, date);
+                            }, children: _jsx("div", { text: bind("$time.text") }) }) }) }) }));
+        } }) })));

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

@@ -1,8 +1,39 @@
 /** @jsxImportSource react */
-import { Field, FieldInstance } from "./Field";
+import { Field, FieldConfig, FieldInstance } from "./Field";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
-export declare class UploadButton extends Field {
+import { StringProp } from "../../ui/Prop";
+export interface UploadButtonConfig extends FieldConfig {
+    /** Set to `true` to allow multiple file selection. Default is `false`. */
+    multiple?: boolean;
+    /** HTTP method used for upload. Default is `POST`. */
+    method?: string;
+    /** Set to `true` to abort uploads when the component is destroyed. Default is `false`. */
+    abortOnDestroy?: boolean;
+    /** Text displayed while upload is in progress. */
+    uploadInProgressText?: string;
+    /** URL to upload files to. */
+    url?: StringProp;
+    /** Text displayed on the button. */
+    text?: StringProp;
+    /** Name or configuration of the icon to be displayed on the button. */
+    icon?: StringProp;
+    /** File types accepted for upload. E.g. `image/*`, `.pdf`, etc. */
+    accept?: StringProp;
+    /** Base CSS class to be applied to the button. Defaults to `uploadbutton`. */
+    baseClass?: string;
+    /** Callback to resolve the upload URL for each file. */
+    onResolveUrl?: string | ((file: File, instance: Instance) => string | Promise<string>);
+    /** Callback invoked before upload starts. Return `false` to cancel the upload. */
+    onUploadStarting?: string | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => boolean | Promise<boolean>);
+    /** Callback invoked when upload completes successfully. */
+    onUploadComplete?: string | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => void);
+    /** Callback invoked to report upload progress. */
+    onUploadProgress?: string | ((event: ProgressEvent, instance: Instance, file: File, formData: FormData) => void);
+    /** Callback invoked when an upload error occurs. */
+    onUploadError?: string | ((error: unknown, instance: Instance, file: File, formData: FormData) => void);
+}
+export declare class UploadButton extends Field<UploadButtonConfig> {
     multiple: boolean;
     method: string;
     abortOnDestroy: boolean;
@@ -12,6 +43,7 @@ export declare class UploadButton extends Field {
     onUploadComplete?: string | ((xhr: XMLHttpRequest, instance: Instance, file: File, formData: FormData) => void);
     onUploadProgress?: string | ((event: ProgressEvent, instance: Instance, file: File, formData: FormData) => void);
     onUploadError?: string | ((error: unknown, instance: Instance, file: File, formData: FormData) => void);
+    constructor(config?: UploadButtonConfig);
     declareData(...args: Record<string, unknown>[]): void;
     renderInput(context: RenderingContext, instance: FieldInstance<UploadButton>, key: string): React.ReactNode;
 }

package/build/widgets/form/UploadButton.js

@@ -6,8 +6,10 @@ import { Field } from "./Field";
 import { Url } from "../../ui/app/Url";
 import { Localization } from "../../ui/Localization";
 import { isNonEmptyArray } from "../../util/isNonEmptyArray";
-//TODO: Implement UploadStatus which will enable canceling
 export class UploadButton extends Field {
+    constructor(config) {
+        super(config);
+    }
     declareData(...args) {
         super.declareData({
             disabled: undefined,

package/build/widgets/form/ValidationGroup.spec.d.ts

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

package/build/widgets/form/ValidationGroup.spec.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../../data/Store";
+import { ValidationGroup } from "./ValidationGroup";
+import { Validator } from "./Validator";
+import { bind } from "../../ui/bind";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+import assert from "assert";
+describe("ValidationGroup", () => {
+    it("performs validation and sets the flags", () => {
+        let widget = (_jsx("cx", { children: _jsxs(ValidationGroup, { invalid: bind("invalid"), valid: bind("valid"), children: [_jsx(Validator, { onValidate: () => "Something is wrong..." }), _jsx("div", { visible: bind("invalid"), children: "Invalid" })] }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree));
+        assert.equal(tree.type, "div");
+        assert.equal(store.get("invalid"), true);
+        assert.equal(store.get("valid"), false);
+    });
+    it("nested validation works", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsxs(ValidationGroup, { invalid: bind("invalid"), children: [_jsx(ValidationGroup, { invalid: bind("invalid1"), children: _jsx(Validator, { onValidate: () => "Something is wrong..." }) }), _jsx(ValidationGroup, { invalid: bind("invalid2"), children: _jsx(Validator, { onValidate: () => false }) })] }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.equal(store.get("invalid"), true);
+        assert.equal(store.get("invalid1"), true);
+        assert.equal(store.get("invalid2"), false);
+    });
+    it("isolated validation group does not affect the parent", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsxs(ValidationGroup, { invalid: bind("invalid"), children: [_jsx(ValidationGroup, { invalid: bind("invalid1"), isolated: true, children: _jsx(Validator, { onValidate: () => "Something is wrong..." }) }), _jsx(ValidationGroup, { invalid: bind("invalid2"), children: _jsx(Validator, { onValidate: () => false }) })] }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.equal(store.get("invalid"), false);
+        assert.equal(store.get("invalid1"), true);
+        assert.equal(store.get("invalid2"), false);
+    });
+    it("visited flag is propagated into nested validation groups", () => {
+        let visited = false;
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(ValidationGroup, { visited: true, children: _jsx(ValidationGroup, { children: _jsx("div", { onExplore: (context, instance) => {
+                                if (context.parentVisited)
+                                    visited = true;
+                            } }) }) }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(visited);
+    });
+    it("disabled flag can be overruled by the field props", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(ValidationGroup, { invalid: bind("invalid"), disabled: true, children: _jsx(Validator, { onValidate: () => "Something is wrong...", disabled: false }) }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.equal(store.get("invalid"), true);
+    });
+    it("strict flag is used to enforce disabled flag", () => {
+        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(ValidationGroup, { invalid: bind("invalid"), disabled: true, strict: true, children: _jsx(Validator, { onValidate: () => "Something is wrong...", disabled: false }) }) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.equal(store.get("invalid"), false);
+    });
+});

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

@@ -1,7 +1,38 @@
-import { Field } from "./Field";
+import { Field, FieldConfig } from "./Field";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
-export declare class Validator extends Field {
+import type { StructuredProp, ResolvePropType } from "../../ui/Prop";
+/**
+ * Configuration for Validator widget.
+ *
+ * The value type parameter enables type inference for the onValidate callback:
+ * - Literal values preserve their types
+ * - AccessorChain<T> resolves to T
+ * - Bind/Tpl/Expr resolve to any
+ * - Structured props (objects) have each property resolved individually
+ *
+ * @example
+ * ```typescript
+ * <Validator
+ *    value={{
+ *       password: model.user.password,
+ *       confirmPassword: model.user.confirmPassword
+ *    }}
+ *    onValidate={(value) => {
+ *       if (value.password !== value.confirmPassword)
+ *          return "Passwords do not match";
+ *    }}
+ * />
+ * ```
+ */
+export interface ValidatorConfig<V = StructuredProp> extends FieldConfig {
+    /** The value to be validated. Can be a structured object with multiple fields. */
+    value?: V;
+    /** Custom validation function. */
+    onValidate?: string | ((value: ResolvePropType<V>, instance: Instance, validationParams: Record<string, unknown>) => unknown);
+}
+export declare class Validator<V = StructuredProp> extends Field<ValidatorConfig<V>> {
+    constructor(config?: ValidatorConfig<V>);
     declareData(...args: Record<string, unknown>[]): void;
     isEmpty(data: Record<string, unknown>): boolean;
     render(context: RenderingContext, instance: Instance, key: string): any;

package/build/widgets/form/Validator.js

@@ -1,5 +1,8 @@
 import { Field } from "./Field";
 export class Validator extends Field {
+    constructor(config) {
+        super(config);
+    }
     declareData(...args) {
         return super.declareData(...args, {
             value: {