cx 26.0.11 → 26.0.13

package/src/widgets/Sandbox.ts

@@ -1,103 +1,103 @@
-import { Widget } from "../ui/Widget";
-import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
-import { Binding, BindingInput } from "../data/Binding";
-import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { StringProp, WritableProp } from "../ui/Prop";
-
-export interface SandboxConfig extends PureContainerConfig {
-   /** Binding to the object that holds sandbox data. */
-   storage: WritableProp<Record<string, any>>;
-
-   /** Key used to identify the sandbox instance within the storage. */
-   key?: StringProp;
-
-   /** Alias for `key`. */
-   accessKey?: StringProp;
-
-   /** Alias used to expose sandbox data. Default is `$page`. */
-   recordName?: string;
-
-   /** Alias for `recordName`. */
-   recordAlias?: string;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that sandbox store data should not be mutated. */
-   sealed?: boolean;
-}
-
-export interface SandboxInstance extends Instance {
-   store: ExposedValueView;
-}
-
-export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
-   declare storage: WritableProp<Record<string, any>>;
-   declare key?: StringProp;
-   declare recordName?: string;
-   declare recordAlias?: string;
-   declare accessKey?: StringProp;
-   declare immutable?: boolean;
-   declare sealed?: boolean;
-   declare storageBinding: Binding;
-   init(): void {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.accessKey) this.key = this.accessKey;
-
-      this.storageBinding = Binding.get(this.storage);
-
-      super.init();
-   }
-
-   initInstance(context: RenderingContext, instance: SandboxInstance): void {
-      instance.store = new ExposedValueView({
-         store: instance.parentStore,
-         containerBinding: this.storageBinding,
-         key: null,
-         recordName: this.recordName,
-         immutable: this.immutable,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: SandboxInstance): void {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(
-         {
-            storage: undefined,
-            key: undefined,
-         },
-         ...args,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: SandboxInstance): void {
-      var { store, data } = instance;
-      if (store.getKey() !== data.key) {
-         //when navigating to a page using the same widget tree as the previous page
-         //everything needs to be reinstantiated, e.g. user/1 => user/2
-         instance.store = new ExposedValueView({
-            store: store,
-            containerBinding: this.storageBinding,
-            key: data.key,
-            recordName: this.recordName,
-            immutable: this.immutable,
-            sealed: this.sealed,
-         });
-         instance.clearChildrenCache();
-      }
-      super.prepareData(context, instance);
-   }
-}
-
-Sandbox.prototype.recordName = "$page";
-Sandbox.prototype.immutable = false;
-Sandbox.prototype.sealed = false;
-
-Widget.alias("sandbox", Sandbox);
+import { Widget } from "../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { Binding, BindingInput } from "../data/Binding";
+import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp, WritableProp } from "../ui/Prop";
+
+export interface SandboxConfig extends PureContainerConfig {
+   /** Binding to the object that holds sandbox data. */
+   storage: WritableProp<Record<string, any>>;
+
+   /** Key used to identify the sandbox instance within the storage. */
+   key?: StringProp;
+
+   /** Alias for `key`. */
+   accessKey?: StringProp;
+
+   /** Alias used to expose sandbox data. Default is `$page`. */
+   recordName?: string;
+
+   /** Alias for `recordName`. */
+   recordAlias?: string;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that sandbox store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export interface SandboxInstance extends Instance {
+   store: ExposedValueView;
+}
+
+export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
+   declare storage: WritableProp<Record<string, any>>;
+   declare key?: StringProp;
+   declare recordName?: string;
+   declare recordAlias?: string;
+   declare accessKey?: StringProp;
+   declare immutable?: boolean;
+   declare sealed?: boolean;
+   declare storageBinding: Binding;
+   init(): void {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.accessKey) this.key = this.accessKey;
+
+      this.storageBinding = Binding.get(this.storage);
+
+      super.init();
+   }
+
+   initInstance(context: RenderingContext, instance: SandboxInstance): void {
+      instance.store = new ExposedValueView({
+         store: instance.parentStore,
+         containerBinding: this.storageBinding,
+         key: null,
+         recordName: this.recordName,
+         immutable: this.immutable,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: SandboxInstance): void {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            storage: undefined,
+            key: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: SandboxInstance): void {
+      var { store, data } = instance;
+      if (store.getKey() !== data.key) {
+         //when navigating to a page using the same widget tree as the previous page
+         //everything needs to be reinstantiated, e.g. user/1 => user/2
+         instance.store = new ExposedValueView({
+            store: store,
+            containerBinding: this.storageBinding,
+            key: data.key,
+            recordName: this.recordName,
+            immutable: this.immutable,
+            sealed: this.sealed,
+         });
+         instance.clearChildrenCache();
+      }
+      super.prepareData(context, instance);
+   }
+}
+
+Sandbox.prototype.recordName = "$page";
+Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
+
+Widget.alias("sandbox", Sandbox);

package/src/widgets/autoFocus.ts

@@ -1,9 +1,9 @@
-import { FocusManager } from "../ui/FocusManager";
-import { isTouchEvent } from "../util/isTouchEvent";
-
-export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
-   let data = component.props.data || component.props.instance.data;
-   let autoFocusValue = el && data.autoFocus;
-   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
-   component.autoFocusValue = autoFocusValue;
-}
+import { FocusManager } from "../ui/FocusManager";
+import { isTouchEvent } from "../util/isTouchEvent";
+
+export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
+   let data = component.props.data || component.props.instance.data;
+   let autoFocusValue = el && data.autoFocus;
+   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
+   component.autoFocusValue = autoFocusValue;
+}

package/src/widgets/cx.ts

@@ -1,63 +1,63 @@
-import { HtmlElement } from "./HtmlElement";
-import { VDOM } from "../ui/Widget";
-import { createComponentFactory, isComponentFactory } from "../util/Component";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { isString } from "../util/isString";
-import { isNumber } from "../util/isNumber";
-import { isFunction } from "../util/isFunction";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-
-import { flattenProps } from "../ui/flattenProps";
-
-let htmlFactoryCache: Record<string, any> = {};
-
-function getHtmlElementFactory(tagName: string): any {
-   let factory = htmlFactoryCache[tagName];
-   if (factory) return factory;
-   return (htmlFactoryCache[tagName] = createComponentFactory(
-      () => {},
-      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
-      { tag: tagName },
-   ));
-}
-
-export function cx(typeName: any, props?: any, ...children: any[]): any {
-   if (isArray(typeName)) return typeName;
-
-   if (isFunction(typeName) && isUndefined(props))
-      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
-
-   if (typeName.type || typeName.$type) return typeName;
-
-   if (children && children.length == 0) children = [];
-
-   if (children && children.length == 1) children = children[0];
-
-   if (typeName == "cx") return children;
-
-   if (typeName == "react") return react(children);
-
-   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
-
-   return {
-      $type: typeName,
-      $props: props,
-      jsxAttributes: props && Object.keys(props),
-      children,
-   };
-}
-
-export function react(config: any): any {
-   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
-
-   if (isArray(config)) return config.map(react);
-
-   let type = config.$type;
-
-   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
-
-   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
-
-   return VDOM.createElement(type, config.$props, react(config.children));
-}
+import { HtmlElement } from "./HtmlElement";
+import { VDOM } from "../ui/Widget";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { isString } from "../util/isString";
+import { isNumber } from "../util/isNumber";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+
+import { flattenProps } from "../ui/flattenProps";
+
+let htmlFactoryCache: Record<string, any> = {};
+
+function getHtmlElementFactory(tagName: string): any {
+   let factory = htmlFactoryCache[tagName];
+   if (factory) return factory;
+   return (htmlFactoryCache[tagName] = createComponentFactory(
+      () => {},
+      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
+      { tag: tagName },
+   ));
+}
+
+export function cx(typeName: any, props?: any, ...children: any[]): any {
+   if (isArray(typeName)) return typeName;
+
+   if (isFunction(typeName) && isUndefined(props))
+      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
+
+   if (typeName.type || typeName.$type) return typeName;
+
+   if (children && children.length == 0) children = [];
+
+   if (children && children.length == 1) children = children[0];
+
+   if (typeName == "cx") return children;
+
+   if (typeName == "react") return react(children);
+
+   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
+
+   return {
+      $type: typeName,
+      $props: props,
+      jsxAttributes: props && Object.keys(props),
+      children,
+   };
+}
+
+export function react(config: any): any {
+   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
+
+   if (isArray(config)) return config.map(react);
+
+   let type = config.$type;
+
+   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
+
+   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
+
+   return VDOM.createElement(type, config.$props, react(config.children));
+}

package/src/widgets/drag-drop/DragSource.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource react */
 
 import { Widget, VDOM } from "../../ui/Widget";
-import { ContainerBase, ContainerConfig } from "../../ui/Container";
+import { ContainerBase, ContainerConfig, StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
 import { ddMouseDown, ddDetect, ddMouseUp, initiateDragDrop, isDragHandleEvent } from "./ops";
 import { preventFocus } from "../../ui/FocusManager";
 import { parseStyle } from "../../util/parseStyle";
@@ -9,7 +9,7 @@ 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.
@@ -54,7 +54,7 @@ export interface DragSourceInstance extends Instance<DragSource> {
    dragHandles: any[];
 }
 
-export class DragSource extends ContainerBase<DragSourceConfig, DragSourceInstance> {
+export class DragSource extends StyledContainerBase<DragSourceConfig, DragSourceInstance> {
    declare styled: boolean;
    declare baseClass: string;
    declare hideOnDrag: boolean;
@@ -105,7 +105,6 @@ export class DragSource extends ContainerBase<DragSourceConfig, DragSourceInstan
    }
 }
 
-DragSource.prototype.styled = true;
 DragSource.prototype.baseClass = "dragsource";
 DragSource.prototype.hideOnDrag = false;
 DragSource.prototype.handled = false;

package/src/widgets/drag-drop/DropZone.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource react */
 
 import { Widget, VDOM } from "../../ui/Widget";
-import { ContainerBase, ContainerConfig } from "../../ui/Container";
+import { ContainerBase, ContainerConfig, StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
 import { parseStyle } from "../../util/parseStyle";
 import { registerDropZone, DragDropContext, DragEvent } from "./ops";
 import { findScrollableParent } from "../../util/findScrollableParent";
@@ -11,7 +11,7 @@ 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;
 
@@ -105,7 +105,7 @@ export interface DropZoneConfig extends ContainerConfig {
 
 export interface DropZoneInstance extends Instance<DropZone> {}
 
-export class DropZone extends ContainerBase<DropZoneConfig, DropZoneInstance> {
+export class DropZone extends StyledContainerBase<DropZoneConfig, DropZoneInstance> {
    declare styled: boolean;
    declare nearDistance: number;
    declare hinflate: number;
@@ -166,7 +166,6 @@ export class DropZone extends ContainerBase<DropZoneConfig, DropZoneInstance> {
    }
 }
 
-DropZone.prototype.styled = true;
 DropZone.prototype.nearDistance = 0;
 DropZone.prototype.hinflate = 0;
 DropZone.prototype.vinflate = 0;

package/src/widgets/form/Checkbox.tsx

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

package/src/widgets/form/ColorField.tsx

@@ -44,6 +44,9 @@ export interface ColorFieldConfig extends FieldConfig {
 
    /** 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 class ColorFieldInstance<F extends ColorField = ColorField> extends FieldInstance<F> implements DropdownWidgetProps {

package/src/widgets/form/DateTimeField.tsx

@@ -112,6 +112,11 @@ export interface DateTimeFieldConfig extends FieldConfig {
 
    /** 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 class DateTimeField extends Field<DateTimeFieldConfig> {

package/src/widgets/form/Field.tsx

@@ -104,9 +104,6 @@ export interface FieldConfig extends PureContainerConfig, WidgetStyleConfig {
    /** 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;
 

package/src/widgets/form/Label.tsx

@@ -31,6 +31,7 @@ export class Label extends HtmlElement {
    constructor(config?: LabelConfig) {
       super(config);
    }
+
    declareData(...args: Record<string, unknown>[]): void {
       super.declareData(...args, {
          required: undefined,

package/src/widgets/form/LabeledContainer.ts

@@ -1,27 +1,27 @@
-import { isSelector } from '../../data/isSelector';
-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 { isSelector } from "../../data/isSelector";
+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, Config, 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;
 }
 
-export class LabeledContainer extends FieldGroup<LabeledContainerConfig>
-{
+export class LabeledContainer extends FieldGroup<LabeledContainerConfig> {
    declare label?: string | Record<string, unknown> | Label | Widget; // Can be string, selector, Label widget config, or Widget
    declare disabled?: boolean;
    declare mod?: Record<string, unknown>;
@@ -29,26 +29,23 @@ export class LabeledContainer extends FieldGroup<LabeledContainerConfig>
 
    declareData(...args: Record<string, unknown>[]): void {
       super.declareData(...args, {
-         label: undefined
+         label: undefined,
       });
    }
 
-   init(): void {  
+   init(): void {
       if (this.label != null) {
          let labelConfig: any = {
             type: Label,
             disabled: this.disabled,
             mod: this.mod,
             asterisk: this.asterisk,
-            required: true
+            required: true,
          };
 
-         if ((this.label as any).isComponentType)
-            labelConfig = this.label as Record<string, unknown>;
-         else if (isSelector(this.label))
-            labelConfig.text = this.label;
-         else
-            Object.assign(labelConfig, this.label);
+         if ((this.label as any).isComponentType) labelConfig = this.label as Record<string, unknown>;
+         else if (isSelector(this.label)) labelConfig.text = this.label;
+         else Object.assign(labelConfig, this.label);
 
          this.label = Widget.create(labelConfig);
       }
@@ -58,24 +55,23 @@ export class LabeledContainer extends FieldGroup<LabeledContainerConfig>
 
    initComponents(context: RenderingContext, instance: Instance, ...args: Record<string, unknown>[]): void {
       return super.initComponents(context, instance, ...args, {
-         label: this.label
+         label: this.label,
       });
    }
 
    renderLabel(context: RenderingContext, instance: Instance, key?: string): CxChild {
-      if (instance.components && instance.components.label)
-         return instance.components.label.render(context);
+      if (instance.components && instance.components.label) return instance.components.label.render(context);
       return null;
    }
 
    render(context: RenderingContext, instance: Instance, key: string): { label: CxChild; content: CxChild } {
       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);