cx 26.0.12 → 26.0.13

package/src/widgets/form/UploadButton.tsx

@@ -2,16 +2,63 @@
 
 import { Widget, VDOM } from "../../ui/Widget";
 import { Icon } from "../Icon";
-import { Field, FieldInstance } from "./Field";
+import { Field, FieldConfig, FieldInstance } from "./Field";
 import { Url } from "../../ui/app/Url";
 import { Localization } from "../../ui/Localization";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
 import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { BooleanProp, StringProp } from "../../ui/Prop";
 
 //TODO: Implement UploadStatus which will enable canceling
 
-export class UploadButton extends Field {
+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 class UploadButton extends Field<UploadButtonConfig> {
    declare public multiple: boolean;
    declare public method: string;
    declare public abortOnDestroy: boolean;
@@ -28,6 +75,10 @@ export class UploadButton extends Field {
       | ((event: ProgressEvent, instance: Instance, file: File, formData: FormData) => void);
    declare public onUploadError?: string | ((error: unknown, instance: Instance, file: File, formData: FormData) => void);
 
+   constructor(config?: UploadButtonConfig) {
+      super(config);
+   }
+
    declareData(...args: Record<string, unknown>[]): void {
       super.declareData(
          {

package/src/widgets/form/Validator.ts

@@ -1,10 +1,47 @@
-import { Field } from "./Field";
+import { Field, FieldConfig } from "./Field";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
+import type { StructuredProp, ResolvePropType } from "../../ui/Prop";
 
-export class Validator extends Field {
+/**
+ * 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 class Validator<V = StructuredProp> extends Field<ValidatorConfig<V>> {
+   constructor(config?: ValidatorConfig<V>) {
+      super(config);
+   }
    declareData(...args: Record<string, unknown>[]): void {
-      return super.declareData(...args, { 
+      return super.declareData(...args, {
          value: {
             structured: true,
          },

package/src/widgets/grid/Grid.tsx

@@ -76,9 +76,9 @@ import { Create, CreateConfig } from "../../util";
 import type { TreeAdapter } from "../../ui/adapter/TreeAdapter";
 export { GridRowConfig };
 
-type FetchRecordsResult<T> = T[] | { records: T[]; lastPage?: boolean; totalRecordCount?: number };
+export type GridFetchRecordsResult<T> = T[] | { records: T[]; lastPage?: boolean; totalRecordCount?: number };
 
-interface MappedGridRecord<T = any> extends DataAdapterRecord<T> {
+export interface MappedGridRecord<T = any> extends DataAdapterRecord<T> {
    row?: GridRowInstance;
    vdom?: any;
    fixedVdom?: any;
@@ -87,7 +87,7 @@ interface MappedGridRecord<T = any> extends DataAdapterRecord<T> {
    group?: any;
 }
 
-interface GridDragEvent<T> extends DragEvent {
+export interface GridDragEvent<T> extends DragEvent {
    target: {
       recordBefore?: MappedGridRecord<T>;
       recordAfter?: MappedGridRecord<T>;
@@ -97,14 +97,14 @@ interface GridDragEvent<T> extends DragEvent {
    };
 }
 
-interface GridRowDragEvent<T> extends DragEvent {
+export interface GridRowDragEvent<T> extends DragEvent {
    target: {
       record: MappedGridRecord<T>;
       index: number;
    };
 }
 
-interface GridColumnDropEvent extends DragEvent {
+export interface GridColumnDropEvent extends DragEvent {
    target: {
       grid: any;
       instance: Instance;
@@ -132,7 +132,7 @@ interface GridMoveCursorOptions {
    cancelEdit?: boolean;
 }
 
-interface GridGroupingKey {
+export interface GridGroupingKey {
    [key: string]:
       | Prop<any>
       | {
@@ -149,9 +149,9 @@ interface GroupingResult<T> {
    records: MappedGridRecord<T>[];
 }
 
-type GridColumnAlignment = "left" | "right" | "center";
+export type GridColumnAlignment = "left" | "right" | "center";
 
-interface GridGroupingConfig<T> {
+export interface GridGroupingConfig<T> {
    key: GridGroupingKey;
    aggregates?: StructuredProp;
    showCaption?: boolean;
@@ -163,9 +163,6 @@ interface GridGroupingConfig<T> {
    comparer?: (a: GroupingResult<T>, b: GroupingResult<T>) => number;
 }
 
-// TODO: Check Column config
-// Props are in order based on docs
-
 export interface GridColumnHeaderConfig {
    text?: StringProp;
    colSpan?: NumberProp;
@@ -422,7 +419,7 @@ export interface GridConfig<T = any> extends StyledContainerConfig {
          sortDirection?: string;
       },
       instance?: Instance,
-   ) => FetchRecordsResult<T> | Promise<FetchRecordsResult<T>>;
+   ) => GridFetchRecordsResult<T> | Promise<GridFetchRecordsResult<T>>;
 
    /** Callback function to be executed when a row is double-clicked. */
    onRowDoubleClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);

package/src/widgets/grid/GridCell.ts

@@ -1,143 +1,143 @@
-import { StyledContainerBase, StyledContainerConfig } from "../../ui";
-import { Format } from "../../ui/Format";
-import { Instance } from "../../ui/Instance";
-import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { isUndefined } from "../../util/isUndefined";
-
-export interface GridCellConfig extends StyledContainerConfig {
-   /** Selector used to obtain the value that should be displayed inside the cell. Not required if `field` is used. */
-   value?: StringProp | NumberProp;
-
-   /** Selector used to obtain the weight of the cell in aggregate operations, such as weighted averages. */
-   weight?: Prop<any>;
-
-   /** Add default padding to grid cell. */
-   pad?: BooleanProp;
-
-   /** Format specifier used to convert the value into a string. */
-   format?: StringProp;
-
-   /** Name of the field that holds the value to be displayed. */
-   field?: string;
-
-   /** Record alias. Default is `$record`. */
-   recordName?: string;
-
-   /** Record alias. Default is `$record`. */
-   recordAlias?: string;
-
-   /** Indicate if a cell is editable or not. Default value is true. */
-   editable?: boolean;
-
-   /**
-    * Used to indicate that the adjacent cells in the column should be merged together.
-    * If set to `same-value`, only cells with the same value will be merged.
-    * If set to `always`, all cells within the group will be merged.
-    * This is an experimental feature that might not work well with other
-    * grid related features such as multi-line rows, buffered rendering, etc.
-    */
-   mergeCells?: Prop<"same-value" | "always">;
-
-   /** Aggregate value for the cell. */
-   aggregateValue?: Prop<any>;
-
-   /** Column span. */
-   colSpan?: NumberProp;
-
-   /** Row span. */
-   rowSpan?: NumberProp;
-
-   /** Whether the column is fixed. */
-   fixed?: BooleanProp;
-
-   /** Cell alignment. */
-   align?: "left" | "right" | "center";
-
-   /** Editor widget for cell editing. */
-   editor?: any;
-
-   /** Unique column identifier. */
-   uniqueColumnId?: string;
-}
-
-export class GridCell extends StyledContainerBase<GridCellConfig> {
-   declare value?: StringProp | NumberProp;
-   declare field?: string;
-   declare recordName?: string;
-   declare editable?: boolean;
-   declare align?: "left" | "right" | "center";
-   declare editor?: any;
-   declare uniqueColumnId?: string;
-   declare pad?: boolean;
-   declare fixed?: boolean;
-   declare merged?: boolean;
-
-   constructor(config?: GridCellConfig) {
-      super(config);
-   }
-
-   declareData(...args: any[]) {
-      return super.declareData(...args, {
-         value: undefined,
-         aggregateValue: undefined,
-         weight: undefined,
-         pad: undefined,
-         format: undefined,
-         colSpan: undefined,
-         rowSpan: undefined,
-         editable: undefined,
-         fixed: undefined,
-         mergeCells: undefined,
-      });
-   }
-
-   init() {
-      if (!this.value && this.field) this.value = { bind: this.recordName + "." + this.field };
-
-      if (isUndefined(this.editable)) this.editable = !!this.editor;
-
-      super.init();
-   }
-
-   prepareCSS(context: RenderingContext, instance: Instance) {
-      let { data } = instance;
-
-      data.classNames = this.CSS.expand(
-         data.className,
-         data.class,
-         this.CSS.state({
-            pad: data.pad,
-            editable: data.editable,
-            ["aligned-" + this.align]: this.align,
-            mergable: data.merged,
-         }),
-      );
-
-      data.style = this.CSS.parseStyle(data.style);
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string) {
-      let { data } = instance;
-      let content;
-
-      if (this.items.length > 0) content = this.renderChildren(context, instance);
-      else {
-         content = data.value;
-         if (data.format) content = Format.value(content, data.format);
-      }
-
-      return {
-         atomic: true,
-         content,
-         instance,
-         data,
-         key,
-         uniqueColumnId: this.uniqueColumnId,
-      };
-   }
-}
-
-GridCell.prototype.pad = true;
-GridCell.prototype.fixed = false;
-GridCell.prototype.merged = false;
+import { StyledContainerBase, StyledContainerConfig } from "../../ui";
+import { Format } from "../../ui/Format";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { isUndefined } from "../../util/isUndefined";
+
+export interface GridCellConfig extends StyledContainerConfig {
+   /** Selector used to obtain the value that should be displayed inside the cell. Not required if `field` is used. */
+   value?: StringProp | NumberProp;
+
+   /** Selector used to obtain the weight of the cell in aggregate operations, such as weighted averages. */
+   weight?: Prop<any>;
+
+   /** Add default padding to grid cell. */
+   pad?: BooleanProp;
+
+   /** Format specifier used to convert the value into a string. */
+   format?: StringProp;
+
+   /** Name of the field that holds the value to be displayed. */
+   field?: string;
+
+   /** Record alias. Default is `$record`. */
+   recordName?: string;
+
+   /** Record alias. Default is `$record`. */
+   recordAlias?: string;
+
+   /** Indicate if a cell is editable or not. Default value is true. */
+   editable?: boolean;
+
+   /**
+    * Used to indicate that the adjacent cells in the column should be merged together.
+    * If set to `same-value`, only cells with the same value will be merged.
+    * If set to `always`, all cells within the group will be merged.
+    * This is an experimental feature that might not work well with other
+    * grid related features such as multi-line rows, buffered rendering, etc.
+    */
+   mergeCells?: Prop<"same-value" | "always">;
+
+   /** Aggregate value for the cell. */
+   aggregateValue?: Prop<any>;
+
+   /** Column span. */
+   colSpan?: NumberProp;
+
+   /** Row span. */
+   rowSpan?: NumberProp;
+
+   /** Whether the column is fixed. */
+   fixed?: BooleanProp;
+
+   /** Cell alignment. */
+   align?: "left" | "right" | "center";
+
+   /** Editor widget for cell editing. */
+   editor?: any;
+
+   /** Unique column identifier. */
+   uniqueColumnId?: string;
+}
+
+export class GridCell extends StyledContainerBase<GridCellConfig> {
+   declare value?: StringProp | NumberProp;
+   declare field?: string;
+   declare recordName?: string;
+   declare editable?: boolean;
+   declare align?: "left" | "right" | "center";
+   declare editor?: any;
+   declare uniqueColumnId?: string;
+   declare pad?: boolean;
+   declare fixed?: boolean;
+   declare merged?: boolean;
+
+   constructor(config?: GridCellConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         value: undefined,
+         aggregateValue: undefined,
+         weight: undefined,
+         pad: undefined,
+         format: undefined,
+         colSpan: undefined,
+         rowSpan: undefined,
+         editable: undefined,
+         fixed: undefined,
+         mergeCells: undefined,
+      });
+   }
+
+   init() {
+      if (!this.value && this.field) this.value = { bind: this.recordName + "." + this.field };
+
+      if (isUndefined(this.editable)) this.editable = !!this.editor;
+
+      super.init();
+   }
+
+   prepareCSS(context: RenderingContext, instance: Instance) {
+      let { data } = instance;
+
+      data.classNames = this.CSS.expand(
+         data.className,
+         data.class,
+         this.CSS.state({
+            pad: data.pad,
+            editable: data.editable,
+            ["aligned-" + this.align]: this.align,
+            mergable: data.merged,
+         }),
+      );
+
+      data.style = this.CSS.parseStyle(data.style);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      let content;
+
+      if (this.items.length > 0) content = this.renderChildren(context, instance);
+      else {
+         content = data.value;
+         if (data.format) content = Format.value(content, data.format);
+      }
+
+      return {
+         atomic: true,
+         content,
+         instance,
+         data,
+         key,
+         uniqueColumnId: this.uniqueColumnId,
+      };
+   }
+}
+
+GridCell.prototype.pad = true;
+GridCell.prototype.fixed = false;
+GridCell.prototype.merged = false;

package/src/widgets/grid/TreeNode.tsx

@@ -26,15 +26,24 @@ export interface TreeNodeConfig extends StyledContainerConfig {
    /** Icon to be displayed. */
    icon?: StringProp;
 
+   /** Icon for items (sets leafIcon). */
+   itemIcon?: StringProp;
+
    /** Icon for leaf nodes. */
    leafIcon?: StringProp;
 
+   /** Icon displayed when the node is loading. */
+   loadingIcon?: string;
+
    /** Icon for open folder. */
    openFolderIcon?: StringProp;
 
    /** Icon for folder. */
    folderIcon?: StringProp;
 
+   /** Set to `true` to hide the icon. */
+   hideIcon?: boolean;
+
    /** Set to `true` to hide the arrow. */
    hideArrow?: BooleanProp;
 }

package/src/widgets/icons/calendar.tsx

@@ -1,17 +1,17 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('calendar', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 32 32">
-
-      <path d="M4 3h6m10 0h6" fill="none" stroke="currentColor" strokeWidth="2"/>
-      <path d="M19 21h4v4h-4z" fill="currentColor"/>
-      <path d="M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5" fill="none" stroke="currentColor"/>
-      <path fill="currentColor" d="M10 8h10v2H10z"/>
-      <path fill="none" stroke="currentColor" strokeWidth="2" d="M3 5h24v24H3z"/>
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('calendar', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 32 32">
+
+      <path d="M4 3h6m10 0h6" fill="none" stroke="currentColor" strokeWidth="2"/>
+      <path d="M19 21h4v4h-4z" fill="currentColor"/>
+      <path d="M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5" fill="none" stroke="currentColor"/>
+      <path fill="currentColor" d="M10 8h10v2H10z"/>
+      <path fill="none" stroke="currentColor" strokeWidth="2" d="M3 5h24v24H3z"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/check.tsx

@@ -1,13 +1,13 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('check', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 64 64">
-      <path d="M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z"
-            fill="currentColor"/>
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('check', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 64 64">
+      <path d="M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z"
+            fill="currentColor"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/clear.tsx

@@ -1,15 +1,15 @@
-/** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('clear', (props: any) => {
-   return <svg
-      {...props}
-      viewBox="0 0 32 32">
-      <path fill="currentColor"
-            strokeWidth="1"
-            stroke="currentColor"
-            d="M16.9 16l4.92-4.92c.24-.24.24-.6 0-.84s-.6-.24-.84 0l-4.92 4.92-5.04-4.98c-.24-.24-.6-.24-.84 0s-.24.6 0 .84L15.16 16l-4.98 4.98c-.24.24-.24.6 0 .84s.6.24.84 0L16 16.84l4.98 4.98c.24.24.6.24.84 0s.24-.6 0-.84L16.9 16z"/>
-   </svg>
-}, true);
-
+/** @jsxImportSource react */
+import {VDOM} from '../../ui/Widget';
+import {registerIcon} from './registry';
+
+export default registerIcon('clear', (props: any) => {
+   return <svg
+      {...props}
+      viewBox="0 0 32 32">
+      <path fill="currentColor"
+            strokeWidth="1"
+            stroke="currentColor"
+            d="M16.9 16l4.92-4.92c.24-.24.24-.6 0-.84s-.6-.24-.84 0l-4.92 4.92-5.04-4.98c-.24-.24-.6-.24-.84 0s-.24.6 0 .84L15.16 16l-4.98 4.98c-.24.24-.24.6 0 .84s.6.24.84 0L16 16.84l4.98 4.98c.24.24.6.24.84 0s.24-.6 0-.84L16.9 16z"/>
+   </svg>
+}, true);
+

package/src/widgets/icons/close.tsx

@@ -1,20 +1,20 @@
-/** @jsxImportSource react */
-import { VDOM } from "../../ui/Widget";
-import { registerIcon } from "./registry";
-
-export default registerIcon(
-   "close",
-   (props: any) => {
-      return (
-         <svg {...props} viewBox="0 0 32 32">
-            <path
-               fill="currentColor"
-               strokeWidth="1"
-               stroke="currentColor"
-               d="M17.8 16l9.84-9.84c.48-.48.48-1.2 0-1.68s-1.2-.48-1.68 0l-9.84 9.84L6.04 4.36c-.48-.48-1.2-.48-1.68 0s-.48 1.2 0 1.68L14.32 16l-9.96 9.96c-.48.48-.48 1.2 0 1.68s1.2.48 1.68 0L16 17.68l9.96 9.96c.48.48 1.2.48 1.68 0s.48-1.2 0-1.68L17.8 16z"
-            />
-         </svg>
-      );
-   },
-   true
-);
+/** @jsxImportSource react */
+import { VDOM } from "../../ui/Widget";
+import { registerIcon } from "./registry";
+
+export default registerIcon(
+   "close",
+   (props: any) => {
+      return (
+         <svg {...props} viewBox="0 0 32 32">
+            <path
+               fill="currentColor"
+               strokeWidth="1"
+               stroke="currentColor"
+               d="M17.8 16l9.84-9.84c.48-.48.48-1.2 0-1.68s-1.2-.48-1.68 0l-9.84 9.84L6.04 4.36c-.48-.48-1.2-.48-1.68 0s-.48 1.2 0 1.68L14.32 16l-9.96 9.96c-.48.48-.48 1.2 0 1.68s1.2.48 1.68 0L16 17.68l9.96 9.96c.48.48 1.2.48 1.68 0s.48-1.2 0-1.68L17.8 16z"
+            />
+         </svg>
+      );
+   },
+   true
+);