cx 24.3.5 → 24.3.7

package/dist/widgets.js

@@ -6348,6 +6348,7 @@ var Label = /*#__PURE__*/ (function (_HtmlElement) {
 					required: undefined,
 					disabled: undefined,
 					htmlFor: undefined,
+					asterisk: undefined,
 				},
 			]),
 		);
@@ -6368,7 +6369,7 @@ var Label = /*#__PURE__*/ (function (_HtmlElement) {
 			data._disabled,
 			context.parentDisabled,
 		);
-		data.asterisk = context.parentAsterisk || this.asterisk;
+		data.asterisk = context.parentAsterisk || data.asterisk;
 		if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
 			instance.markShouldUpdate(context);
 			this.prepareCSS(context, instance);
@@ -16636,6 +16637,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				dragged: isDragged,
 				cursor: widget.selectable && index == cursor,
 				over: dropTarget == "row" && dropInsertionIndex === index,
+				alternate: index % 2 == 1,
 			};
 			if (isRecordSelectable) {
 				var selectable = isRecordSelectable(record.data, {});
@@ -16919,44 +16921,32 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				},
 				"dropzone",
 			);
+			var isDataRecord = widget.buffered
+				? function (item) {
+						var _item$props;
+						return (
+							((_item$props = item.props) == null ||
+							(_item$props = _item$props.instance) == null ||
+							(_item$props = _item$props.data) == null
+								? void 0
+								: _item$props["class"]) == "cxe-grid-data"
+						);
+					}
+				: function (item) {
+						var _item$props2;
+						return (_item$props2 = item.props) == null || (_item$props2 = _item$props2.record) == null
+							? void 0
+							: _item$props2.type;
+					};
 			var index = 0;
-			while (
-				index < children.length &&
-				((_children$index = children[index]) == null ||
-				(_children$index = _children$index.props) == null ||
-				(_children$index = _children$index.record) == null
-					? void 0
-					: _children$index.type) != "data"
-			) {
-				var _children$index;
-				index++;
-			}
+			while (index < children.length && !isDataRecord(children[index])) index++;
 			var count = 0;
-			while (count < this.state.dropInsertionIndex) {
-				var _children$index2;
-				if (
-					((_children$index2 = children[index]) == null ||
-					(_children$index2 = _children$index2.props) == null ||
-					(_children$index2 = _children$index2.record) == null
-						? void 0
-						: _children$index2.type) == "data"
-				)
-					count++;
+			while (index < children.length && count < this.state.dropInsertionIndex) {
+				if (isDataRecord(children[index])) count++;
 				index++;
 			}
 			var savedIndexPos = index;
-			if (!this.state.dropNextToTheRowAbove)
-				while (
-					index < children.length &&
-					((_children$index3 = children[index]) == null ||
-					(_children$index3 = _children$index3.props) == null ||
-					(_children$index3 = _children$index3.record) == null
-						? void 0
-						: _children$index3.type) != "data"
-				) {
-					var _children$index3;
-					index++;
-				}
+			if (!this.state.dropNextToTheRowAbove) while (index < children.length && !isDataRecord(children[index])) index++;
 
 			// do not allow insertion after the last group footer
 			if (savedIndexPos < index && index == children.length) index = savedIndexPos;
@@ -17351,15 +17341,15 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
 				e.target = {
 					insertionIndex: start + dropInsertionIndex,
-					recordBefore: this.getRecordAt(start + dropInsertionIndex - 1),
-					recordAfter: this.getRecordAt(start + dropInsertionIndex),
+					recordBefore: this.getDataRecordAt(start + dropInsertionIndex - 1),
+					recordAfter: this.getDataRecordAt(start + dropInsertionIndex),
 					dropNextToTheRowAbove: dropNextToTheRowAbove,
 				};
 				instance.invoke("onDrop", e, instance);
 			} else if (dropTarget == "row") {
 				e.target = {
 					index: start + dropInsertionIndex,
-					record: this.getRecordAt(start + dropInsertionIndex),
+					record: this.getDataRecordAt(start + dropInsertionIndex),
 				};
 				instance.invoke("onRowDrop", e, instance);
 			} else if (dropTarget == "column" && widget.onColumnDrop) {
@@ -18032,6 +18022,14 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		}
 		widget.selection.selectMultiple(instance.store, selection, indexes, options);
 	};
+	_proto2.getDataRecordAt = function getDataRecordAt(index) {
+		var records = this.props.instance.records;
+		if (!records) return this.getRecordAt(index);
+		var dataRecords = records.filter(function (r) {
+			return r.type == "data";
+		});
+		return dataRecords[index];
+	};
 	_proto2.getRecordAt = function getRecordAt(cursor) {
 		var _this$props7 = this.props,
 			instance = _this$props7.instance,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.3.5",
+   "version": "24.3.7",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/Swimlanes.d.ts

@@ -20,19 +20,19 @@ interface SwimlanesProps extends BoundedObjectProps {
    baseClass?: string;
 
    /** Represents a swimlane size. */
-   size?: number;
+   size?: Cx.NumberProp;
 
    /**
     * Represents a swimlane step. Define a step on which a swimlane will be rendered. (eg. step 2 will render
     * every second swimlane in the chart.)
     */
-   step?: number;
+   step?: Cx.NumberProp;
 
    /** Switch to vertical swimlanes. */
    vertical?: boolean;
 
    /**The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
-   laneOffset?: number;
+   laneOffset?: Cx.NumberProp;
 
    /** Style object applied to the swimlanes. */
    laneStyle?: StyleProp;

package/src/charts/Swimlanes.js

@@ -33,6 +33,8 @@ export class Swimlanes extends BoundedObject {
       let { bounds } = data;
       let { CSS, baseClass } = this;
 
+      if (data.step <= 0 || data.size <= 0) return;
+
       let axis = this.vertical ? xAxis : yAxis;
 
       if (!axis) return null;

package/src/core.d.ts

@@ -72,6 +72,7 @@ declare namespace Cx {
    type ClassProp = Prop<string> | StructuredProp;
    type RecordsProp = Prop<Record[]>;
    type SortersProp = Prop<Sorter[]>;
+   type UnknownProp = Prop<unknown>;
 
    type RecordAlias = string | { toString(): string };
 

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

@@ -59,7 +59,7 @@ export interface FieldProps extends Cx.StyledContainerProps {
    requiredText?: string;
 
    /** Append asterisk to the label to indicate a required field. */
-   asterisk?: boolean;
+   asterisk?: Cx.BooleanProp;
 
    /** Text displayed to the user to indicate that server-side validation is in progress. */
    validatingText?: string;

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

@@ -1,25 +1,23 @@
-import * as Cx from '../../core';
+import * as Cx from "../../core";
 
 interface LabelProps extends Cx.HtmlElementProps {
-   
    /** Used in combination with `asterisk` to indicate required fields. */
-   required?: Cx.BooleanProp,
+   required?: Cx.BooleanProp;
 
    /** Set to true to disable the label. */
-   disabled?: Cx.BooleanProp,
+   disabled?: Cx.BooleanProp;
 
    /** Id of the field. */
-   htmlFor?: Cx.StringProp,
-   
+   htmlFor?: Cx.StringProp;
+
    /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string,
+   baseClass?: string;
 
    /** Set to `true` to add red asterisk for required fields. */
-   asterisk?: boolean,
+   asterisk?: Cx.BooleanProp;
 
    /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string
-   
+   tag?: string;
 }
 
 export class Label extends Cx.Widget<LabelProps> {}

package/src/widgets/form/Label.js

@@ -1,88 +1,89 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { FocusManager } from "../../ui/FocusManager";
-import { isArray } from "../../util/isArray";
-import { coalesce } from "../../util/coalesce";
-
-export class Label extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         required: undefined,
-         disabled: undefined,
-         htmlFor: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         disabled: data.disabled,
-      };
-      data._disabled = data.disabled;
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
-
-      data.disabled = data.stateMods.disabled = coalesce(
-         context.parentStrict ? context.parentDisabled : null,
-         data._disabled,
-         context.parentDisabled
-      );
-
-      data.asterisk = context.parentAsterisk || this.asterisk;
-
-      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
-         instance.markShouldUpdate(context);
-         this.prepareCSS(context, instance);
-      }
-
-      super.explore(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "asterisk":
-         case "required":
-            return false;
-      }
-      return super.isValidHtmlAttribute(attrName);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-
-      if (data.htmlFor) {
-         props.htmlFor = data.htmlFor;
-
-         if (!props.onClick)
-            props.onClick = () => {
-               //additional focus for LookupFields which are not input based
-               let el = document.getElementById(instance.data.htmlFor);
-               if (el) FocusManager.focusFirst(el);
-            };
-      }
-
-      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
-
-      if (data.required && data.asterisk) {
-         if (!isArray(props.children)) props.children = [props.children];
-         props.children.push(" ");
-         props.children.push(
-            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
-               *
-            </span>
-         );
-      }
-   }
-}
-
-Label.prototype.baseClass = "label";
-Label.prototype.tag = "label";
-Label.prototype.asterisk = false;
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { FocusManager } from "../../ui/FocusManager";
+import { isArray } from "../../util/isArray";
+import { coalesce } from "../../util/coalesce";
+
+export class Label extends HtmlElement {
+   declareData() {
+      super.declareData(...arguments, {
+         required: undefined,
+         disabled: undefined,
+         htmlFor: undefined,
+         asterisk: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         disabled: data.disabled,
+      };
+      data._disabled = data.disabled;
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      let { data } = instance;
+
+      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
+
+      data.disabled = data.stateMods.disabled = coalesce(
+         context.parentStrict ? context.parentDisabled : null,
+         data._disabled,
+         context.parentDisabled
+      );
+
+      data.asterisk = context.parentAsterisk || data.asterisk;
+
+      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
+         instance.markShouldUpdate(context);
+         this.prepareCSS(context, instance);
+      }
+
+      super.explore(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "asterisk":
+         case "required":
+            return false;
+      }
+      return super.isValidHtmlAttribute(attrName);
+   }
+
+   attachProps(context, instance, props) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+
+      if (data.htmlFor) {
+         props.htmlFor = data.htmlFor;
+
+         if (!props.onClick)
+            props.onClick = () => {
+               //additional focus for LookupFields which are not input based
+               let el = document.getElementById(instance.data.htmlFor);
+               if (el) FocusManager.focusFirst(el);
+            };
+      }
+
+      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
+
+      if (data.required && data.asterisk) {
+         if (!isArray(props.children)) props.children = [props.children];
+         props.children.push(" ");
+         props.children.push(
+            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
+               *
+            </span>
+         );
+      }
+   }
+}
+
+Label.prototype.baseClass = "label";
+Label.prototype.tag = "label";
+Label.prototype.asterisk = false;

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

@@ -1,17 +1,9 @@
-import * as Cx from '../../core';
-import { FieldGroupProps } from './FieldGroup';
+import * as Cx from "../../core";
+import { FieldGroupProps } from "./FieldGroup";
 
 interface LabeledContainerProps extends FieldGroupProps {
-
    /** The label. */
-   label?: Cx.StringProp | Cx.Config,
-   
-   /** Set to true to disable all fields inside the container. */
-   disabled?: boolean,
-
-   /** Apply asterisk to the label. */
-   asterisk?: boolean
-   
+   label?: Cx.StringProp | Cx.Config;
 }
 
 export class LabeledContainer extends Cx.Widget<LabeledContainerProps> {}

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

@@ -35,7 +35,7 @@ export interface ValidationGroupProps extends Cx.PureContainerProps {
    strict?: Cx.BooleanProp;
 
    /** Set to `true` to add red asterisk for all required fields inside the group. */
-   asterisk?: boolean;
+   asterisk?: Cx.BooleanProp;
 }
 
 export class ValidationGroup extends Cx.Widget<ValidationGroupProps> {}

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

@@ -17,6 +17,7 @@ import {
    StructuredProp,
    StyledContainerProps,
    StyleProp,
+   UnknownProp,
    Widget,
 } from "../../core";
 import { DataAdapterRecord } from "../../ui/adapter/DataAdapter";
@@ -108,6 +109,7 @@ interface GridColumnConfig {
    aggregate?: "min" | "max" | "count" | "sum" | "distinct" | "avg";
    aggregateAlias?: string;
    aggregateField?: string;
+   aggregateValue?: UnknownProp;
    caption?: StringProp;
    class?: ClassProp;
    className?: ClassProp;
@@ -319,7 +321,7 @@ interface GridProps<T = unknown> extends StyledContainerProps {
          sortField?: string;
          sortDirection?: string;
       },
-      instance?: Instance,
+      instance?: Instance
    ) => FetchRecordsResult | Promise<FetchRecordsResult>;
 
    /** Callback function to be executed when a row is double-clicked. */
@@ -352,7 +354,7 @@ interface GridProps<T = unknown> extends StyledContainerProps {
    /** Callback to create a function that can be used to check whether a record is selectable. */
    onCreateIsRecordSelectable?: (
       params: any,
-      instance: Instance,
+      instance: Instance
    ) => (record: T, options?: { range?: boolean; toggle?: boolean }) => boolean;
 
    /** Parameters whose change will cause scroll to be reset. */

package/src/widgets/grid/Grid.js

@@ -1324,6 +1324,7 @@ class GridComponent extends VDOM.Component {
             dragged: isDragged,
             cursor: widget.selectable && index == cursor,
             over: dropTarget == "row" && dropInsertionIndex === index,
+            alternate: index % 2 == 1,
          };
 
          if (isRecordSelectable) {
@@ -1593,19 +1594,23 @@ class GridComponent extends VDOM.Component {
             </tbody>
          );
 
+         let isDataRecord = widget.buffered
+            ? (item) => item.props?.instance?.data?.class == "cxe-grid-data"
+            : (item) => item.props?.record?.type;
+
          let index = 0;
-         while (index < children.length && children[index]?.props?.record?.type != "data") index++;
+         while (index < children.length && !isDataRecord(children[index])) index++;
 
          let count = 0;
-         while (count < this.state.dropInsertionIndex) {
-            if (children[index]?.props?.record?.type == "data") count++;
+         while (index < children.length && count < this.state.dropInsertionIndex) {
+            if (isDataRecord(children[index])) count++;
             index++;
          }
 
          let savedIndexPos = index;
 
          if (!this.state.dropNextToTheRowAbove)
-            while (index < children.length && children[index]?.props?.record?.type != "data") index++;
+            while (index < children.length && !isDataRecord(children[index])) index++;
 
          // do not allow insertion after the last group footer
          if (savedIndexPos < index && index == children.length) index = savedIndexPos;
@@ -2001,15 +2006,15 @@ class GridComponent extends VDOM.Component {
          if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
             e.target = {
                insertionIndex: start + dropInsertionIndex,
-               recordBefore: this.getRecordAt(start + dropInsertionIndex - 1),
-               recordAfter: this.getRecordAt(start + dropInsertionIndex),
+               recordBefore: this.getDataRecordAt(start + dropInsertionIndex - 1),
+               recordAfter: this.getDataRecordAt(start + dropInsertionIndex),
                dropNextToTheRowAbove,
             };
             instance.invoke("onDrop", e, instance);
          } else if (dropTarget == "row") {
             e.target = {
                index: start + dropInsertionIndex,
-               record: this.getRecordAt(start + dropInsertionIndex),
+               record: this.getDataRecordAt(start + dropInsertionIndex),
             };
             instance.invoke("onRowDrop", e, instance);
          } else if (dropTarget == "column" && widget.onColumnDrop) {
@@ -2729,6 +2734,13 @@ class GridComponent extends VDOM.Component {
       widget.selection.selectMultiple(instance.store, selection, indexes, options);
    }
 
+   getDataRecordAt(index) {
+      let { records } = this.props.instance;
+      if (!records) return this.getRecordAt(index);
+      let dataRecords = records.filter((r) => r.type == "data");
+      return dataRecords[index];
+   }
+
    getRecordAt(cursor) {
       let { instance, data } = this.props;
       let { records, widget } = instance;