cx 23.9.1 → 23.11.1

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

@@ -1,171 +1,174 @@
-import { Instance } from "./../../ui/Instance";
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-export interface LookupBinding {
-   local: string;
-   remote: string;
-   key?: boolean;
-}
-
-interface LookupFieldProps extends FieldProps {
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: Cx.BooleanProp;
-
-   /** Selected value. Used only if `multiple` is set to `false`. */
-   value?: Cx.Prop<number | string>;
-
-   /** A list of selected ids. Used only if `multiple` is set to `true`. */
-   values?: Cx.Prop<any[]>;
-
-   /** A list of selected records. Used only if `multiple` is set to `true`. */
-   records?: Cx.RecordsProp;
-
-   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
-   text?: Cx.StringProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** A list of available options. */
-   options?: Cx.RecordsProp;
-
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
-    * No effect if `multiple` is used. Default value is `false`.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
-    * No effect if `multiple` is used. 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;
-
-   /* TODO: Check type */
-
-   /** Additional config to be applied to all items */
-   itemsConfig?: any;
-
-   /**
-    * An array of objects describing the mapping of option data to store data.
-    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
-    */
-   bindings?: LookupBinding[];
-
-   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value 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 the search field.
-    * If there are only a few options, there is no need for search. Defaults to `7`.
-    */
-   minOptionsForSearchField?: number;
-
-   /** Text to display while data is being loaded. */
-   loadingText?: string;
-
-   /** Error message displayed to the user 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 value is `id`. */
-   optionIdField?: string;
-
-   /** Name of the field which holds the display text of the option. Default value is `text`. */
-   optionTextField?: string;
-
-   /**
-    * Available only in `multiple` selection mode and without custom `bindings`.
-    * Name of the field to store id of the selected value. Default value is `id`.
-    */
-   valueIdField?: string;
-
-   /**
-    * Available only in `multiple` selection mode.
-    * Name of the field to store display text of the selected value. Default value is `text`.
-    */
-   valueTextField?: string;
-
-   /**
-    * If `true` `onQuery` will be called only once to fetch all options.
-    * After that options are filtered client-side.
-    */
-   fetchAll?: boolean;
-
-   /**
-    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
-    * Otherwise, data is fetched whenever the dropdown is shown.
-    */
-   cacheAll?: boolean;
-
-   /** Close the dropdown after selection. Default is `true`. */
-   closeOnSelect?: boolean;
-
-   /** Mesasge to be displayed to the user if the entered search query is too short. */
-   minQueryLengthMessageText?: string;
-
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: Cx.StringProp;
-
-   /** Query function. */
-   onQuery?: (
-      query: string | { query: string; page: number; pageSize: number },
-      instance: Instance
-   ) => Cx.Record[] | Promise<Cx.Record>;
-
-   /** Set to true to sort dropdown options. */
-   sort?: boolean;
-
-   /** Additional list options, such as grouping configuration, custom sorting, etc. */
-   listOptions?: Cx.Config;
-
-   /** Set to true to show the dropdown immediately after the component has mounted.
-    * This is commonly used for cell editing in grids. */
-   autoOpen?: Cx.BooleanProp;
-
-   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
-   submitOnEnterKey?: Cx.BooleanProp;
-
-   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
-   submitOnDropdownEnterKey?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
-   infinite?: boolean;
-
-   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
-   pageSize?: number;
-
-   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
-   quickSelectAll?: boolean;
-
-   /** Parameters that affect filtering. */
-   filterParams?: Cx.StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
-}
-
-export class LookupField extends Cx.Widget<LookupFieldProps> {}
+import { Instance } from "./../../ui/Instance";
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+export interface LookupBinding {
+   local: string;
+   remote: string;
+   key?: boolean;
+}
+
+interface LookupFieldProps extends FieldProps {
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: Cx.BooleanProp;
+
+   /** Selected value. Used only if `multiple` is set to `false`. */
+   value?: Cx.Prop<number | string>;
+
+   /** A list of selected ids. Used only if `multiple` is set to `true`. */
+   values?: Cx.Prop<any[]>;
+
+   /** A list of selected records. Used only if `multiple` is set to `true`. */
+   records?: Cx.RecordsProp;
+
+   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
+   text?: Cx.StringProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: Cx.BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: Cx.StringProp;
+
+   /** A list of available options. */
+   options?: Cx.RecordsProp;
+
+   /**
+    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
+    * No effect if `multiple` is used. Default value is `false`.
+    */
+   hideClear?: boolean;
+
+   /**
+    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
+    * No effect if `multiple` is used. 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;
+
+   /* TODO: Check type */
+
+   /** Additional config to be applied to all items */
+   itemsConfig?: any;
+
+   /**
+    * An array of objects describing the mapping of option data to store data.
+    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
+    */
+   bindings?: LookupBinding[];
+
+   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value 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 the search field.
+    * If there are only a few options, there is no need for search. Defaults to `7`.
+    */
+   minOptionsForSearchField?: number;
+
+   /** Text to display while data is being loaded. */
+   loadingText?: string;
+
+   /** Error message displayed to the user 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 value is `id`. */
+   optionIdField?: string;
+
+   /** Name of the field which holds the display text of the option. Default value is `text`. */
+   optionTextField?: string;
+
+   /**
+    * Available only in `multiple` selection mode and without custom `bindings`.
+    * Name of the field to store id of the selected value. Default value is `id`.
+    */
+   valueIdField?: string;
+
+   /**
+    * Available only in `multiple` selection mode.
+    * Name of the field to store display text of the selected value. Default value is `text`.
+    */
+   valueTextField?: string;
+
+   /**
+    * If `true` `onQuery` will be called only once to fetch all options.
+    * After that options are filtered client-side.
+    */
+   fetchAll?: boolean;
+
+   /**
+    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
+    * Otherwise, data is fetched whenever the dropdown is shown.
+    */
+   cacheAll?: boolean;
+
+   /** Close the dropdown after selection. Default is `true`. */
+   closeOnSelect?: boolean;
+
+   /** Mesasge to be displayed to the user if the entered search query is too short. */
+   minQueryLengthMessageText?: string;
+
+   /** Name of the icon to be put on the left side of the input. */
+   icon?: Cx.StringProp;
+
+   /** Query function. */
+   onQuery?: (
+      query: string | { query: string; page: number; pageSize: number },
+      instance: Instance
+   ) => Cx.Record[] | Promise<Cx.Record>;
+
+   /** Set to true to sort dropdown options. */
+   sort?: boolean;
+
+   /** Additional list options, such as grouping configuration, custom sorting, etc. */
+   listOptions?: Cx.Config;
+
+   /** Set to true to show the dropdown immediately after the component has mounted.
+    * This is commonly used for cell editing in grids. */
+   autoOpen?: Cx.BooleanProp;
+
+   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
+   submitOnEnterKey?: Cx.BooleanProp;
+
+   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
+   submitOnDropdownEnterKey?: Cx.BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp;
+
+   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
+   infinite?: boolean;
+
+   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
+   pageSize?: number;
+
+   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
+   quickSelectAll?: boolean;
+
+   /** Parameters that affect filtering. */
+   filterParams?: Cx.StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
+
+   /** Used in multiple selection lookups in combination with records, to construct the display text out of multiple fields or when additional formatting is needed. */
+   onGetRecordDisplayText?: (record: any, instance?: Instance) => string;
+}
+
+export class LookupField extends Cx.Widget<LookupFieldProps> {}

package/src/widgets/form/LookupField.js

@@ -204,8 +204,11 @@ export class LookupField extends Field {
       if (!this.multiple) return super.formatValue(context, instance);
 
       let { records, values, options } = instance.data;
-      if (isArray(records))
-         return records.map((record) => record[this.valueTextField] || record[this.valueIdField]).join(", ");
+      if (isArray(records)) {
+         let valueTextFormatter =
+            this.onGetRecordDisplayText ?? ((record) => record[this.valueTextField] || record[this.valueIdField]);
+         return records.map((record) => valueTextFormatter(record, instance));
+      }
 
       if (isArray(values)) {
          if (isArray(options))
@@ -254,6 +257,7 @@ LookupField.prototype.submitOnDropdownEnterKey = false;
 LookupField.prototype.pageSize = 100;
 LookupField.prototype.infinite = false;
 LookupField.prototype.quickSelectAll = false;
+LookupField.prototype.onGetRecordDisplayText = null;
 
 Localization.registerPrototype("cx/widgets/LookupField", LookupField);
 
@@ -586,6 +590,7 @@ class LookupComponent extends VDOM.Component {
       if (this.props.multiple) {
          let readOnly = data.disabled || data.readOnly;
          if (isNonEmptyArray(data.records)) {
+            let valueTextFormatter = this.onGetRecordDisplayText ?? ((record) => record[this.valueTextField]);
             text = data.records.map((v, i) => (
                <div
                   key={i}
@@ -593,7 +598,7 @@ class LookupComponent extends VDOM.Component {
                      readonly: readOnly,
                   })}
                >
-                  <span className={CSS.element(baseClass, "tag-value")}>{v[widget.valueTextField]}</span>
+                  <span className={CSS.element(baseClass, "tag-value")}>{valueTextFormatter(v, instance)}</span>
                   {!readOnly && (
                      <div
                         className={CSS.element(baseClass, "tag-clear")}

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

@@ -1,34 +1,34 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface UploadButtonProps extends FieldProps {
-   /** Text description. */
-   text?: Cx.StringProp;
-
-   url?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
-   baseClass?: string;
-
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean;
-
-   method?: string;
-   uploadInProgressText?: string;
-
-   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
-   abortOnDestroy: boolean;
-
-   /** Defines file types that are accepted for upload. */
-   accept?: Cx.StringProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
-   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-}
-
-export class UploadButton extends Cx.Widget<UploadButtonProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface UploadButtonProps extends FieldProps {
+   /** Text description. */
+   text?: Cx.StringProp;
+
+   url?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
+   baseClass?: string;
+
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: boolean;
+
+   method?: string;
+   uploadInProgressText?: string;
+
+   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
+   abortOnDestroy?: boolean;
+
+   /** Defines file types that are accepted for upload. */
+   accept?: Cx.StringProp;
+
+   /** Name of the icon to be put on the left side of the button. */
+   icon?: Cx.StringProp;
+
+   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
+   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
+   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
+   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
+}
+
+export class UploadButton extends Cx.Widget<UploadButtonProps> {}

package/src/widgets/grid/Grid.d.ts

@@ -155,9 +155,9 @@ interface GridRowConfig {
    mod?: StringProp | Prop<string[]> | StructuredProp;
 }
 
-interface GridProps extends StyledContainerProps {
+interface GridProps<T = unknown> extends StyledContainerProps {
    /** An array of records to be displayed in the grid. */
-   records?: Prop<Record[]>;
+   records?: Prop<T[]>;
 
    /** Set to true to add a vertical scroll and a fixed header to the grid. */
    scrollable?: boolean;
@@ -298,7 +298,7 @@ interface GridProps extends StyledContainerProps {
    filterParams?: StructuredProp;
 
    /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
+   onCreateFilter?: (filterParams: any, instance?: Instance) => (record: T) => boolean;
 
    /** Enable infinite scrolling */
    infinite?: boolean;
@@ -337,7 +337,7 @@ interface GridProps extends StyledContainerProps {
    onBeforeCellEdit?: string | ((change: GridCellBeforeEditInfo, record: DataAdapterRecord) => any);
 
    /** A callback function which is executed after a cell has been successfully edited. */
-   onCellEdited?: string | ((change: GridCellEditInfo, record: DataAdapterRecord) => void);
+   onCellEdited?: string | ((change: GridCellEditInfo<T>, record: DataAdapterRecord) => void);
 
    /** A callback function which is executed after a column has been resized. */
    onColumnResize?: (data: { width: number; column: Record }, instance: Instance) => void;
@@ -349,7 +349,7 @@ interface GridProps extends StyledContainerProps {
    onCreateIsRecordSelectable?: (
       params: any,
       instance: Instance
-   ) => (record: Record, options?: { range?: boolean; toggle?: boolean }) => boolean;
+   ) => (record: T, options?: { range?: boolean; toggle?: boolean }) => boolean;
 
    /** Parameters whose change will cause scroll to be reset. */
    scrollResetParams?: StructuredProp;
@@ -380,10 +380,10 @@ interface GridProps extends StyledContainerProps {
     * Accepts new records as a first argument.
     * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
     */
-   onTrackMappedRecords?: string | ((records: Record[], instance: Instance) => void);
+   onTrackMappedRecords?: string | ((records: T[], instance: Instance) => void);
 
    /** Callback to create a function that can be used to check whether a record is draggable. */
-   onCreateIsRecordDraggable?: (params: any, instance: Instance) => (record: Record) => boolean;
+   onCreateIsRecordDraggable?: (params: any, instance: Instance) => (record: T) => boolean;
 }
 
 interface GridCellInfo {
@@ -395,9 +395,9 @@ interface GridCellBeforeEditInfo extends GridCellInfo {
    data: any;
 }
 
-interface GridCellEditInfo extends GridCellInfo {
-   oldData: any;
-   newData: any;
+interface GridCellEditInfo<T> extends GridCellInfo {
+   oldData: T;
+   newData: T;
 }
 
-export class Grid extends Widget<GridProps> {}
+export class Grid<T = unknown> extends Widget<GridProps<T>> {}

package/src/widgets/icons/pixel-picker.js

@@ -0,0 +1,17 @@
+import { VDOM } from "../../ui/Widget";
+import { registerIcon } from "./registry";
+
+export default registerIcon(
+   "pixel-picker",
+   (props) => {
+      return (
+         <svg {...props} viewBox="0 0 30 30">
+            <path
+               d="M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6 c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3 c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6 c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8 c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z"
+               fill="currentColor"
+            />
+         </svg>
+      );
+   },
+   true
+);

package/src/widgets/overlay/Tooltip.d.ts

@@ -1,7 +1,7 @@
 import * as Cx from '../../core';
 import { DropdownProps } from './Dropdown';
 
-interface TooltipProps extends DropdownProps {
+export interface TooltipProps extends DropdownProps {
 
    /** Text to be displayed inside the tooltip. */
    text?: Cx.StringProp,