cx 24.3.3 → 24.3.4

package/dist/widgets.js

@@ -15775,10 +15775,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 				var headerTBody = e.target.parentElement.parentElement.parentElement;
 				var uniqueColId = e.currentTarget.dataset.uniqueColId;
 				var headerCell = findFirstChild(headerTBody, function (el) {
-					var _el$dataset;
-					return (
-						el.tagName == "TH" && ((_el$dataset = el.dataset) == null ? void 0 : _el$dataset.uniqueColId) == uniqueColId
-					);
+					return el.tagName == "TH" && el.dataset && el.dataset.uniqueColId == uniqueColId;
 				});
 				var scrollAreaEl = headerTBody.parentElement.parentElement;
 				var gridEl = scrollAreaEl.parentElement;
@@ -16535,6 +16532,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			cursorCellIndex: 0,
 			focused: widget.focused,
 			dropInsertionIndex: null,
+			dropNextToTheRowAbove: null,
 			start: 0,
 			end: end,
 		};
@@ -16921,7 +16919,48 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				},
 				"dropzone",
 			);
-			children.splice(this.state.dropInsertionIndex, 0, dragInsertionRow);
+			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++;
+			}
+			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++;
+				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++;
+				}
+
+			// do not allow insertion after the last group footer
+			if (savedIndexPos < index && index == children.length) index = savedIndexPos;
+			children.splice(index, 0, dragInsertionRow);
 		}
 		var content = [],
 			fixedColumnsContent = [];
@@ -17307,12 +17346,14 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				start = _this$getBufferStartE2.start;
 			var _this$state2 = this.state,
 				dropInsertionIndex = _this$state2.dropInsertionIndex,
-				dropTarget = _this$state2.dropTarget;
+				dropTarget = _this$state2.dropTarget,
+				dropNextToTheRowAbove = _this$state2.dropNextToTheRowAbove;
 			if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
 				e.target = {
 					insertionIndex: start + dropInsertionIndex,
 					recordBefore: this.getRecordAt(start + dropInsertionIndex - 1),
 					recordAfter: this.getRecordAt(start + dropInsertionIndex),
+					dropNextToTheRowAbove: dropNextToTheRowAbove,
 				};
 				instance.invoke("onDrop", e, instance);
 			} else if (dropTarget == "row") {
@@ -17432,6 +17473,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var parentOffset = getParentFrameBoundingClientRect(this.dom.scroller);
 		var cy = ev.cursor.clientY - parentOffset.top;
 		var rowOverIndex = null;
+		var nextToTheRowAbove = false;
 		while (s < e) {
 			m = Math.floor((s + e) / 2);
 			b = nodes[m].getBoundingClientRect();
@@ -17467,8 +17509,10 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 						break;
 					}
 				}
-				if (cy > (b.bottom + b.top) / 2) s = e = m + 1;
-				else s = e = m;
+				if (cy > (b.bottom + b.top) / 2) {
+					s = e = m + 1;
+					nextToTheRowAbove = true;
+				} else s = e = m;
 			}
 		}
 		var cancel = false;
@@ -17483,6 +17527,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			else if (rowOverIndex != this.state.dropInsertionIndex || this.state.dropTarget != "row") {
 				this.setState({
 					dropInsertionIndex: rowOverIndex,
+					dropNextToTheRowAbove: false,
 					dropItemHeight: ev.source.height - 1,
 					dropTarget: "row",
 				});
@@ -17500,6 +17545,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			else if (s != this.state.dropInsertionIndex || this.state.dropTarget != "grid") {
 				this.setState({
 					dropInsertionIndex: s,
+					dropNextToTheRowAbove: nextToTheRowAbove,
 					dropItemHeight: ev.source.height - 1,
 					dropTarget: "grid",
 				});
@@ -17508,6 +17554,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (cancel) {
 			this.setState({
 				dropInsertionIndex: null,
+				dropNextToTheRowAbove: null,
 				dropTarget: null,
 			});
 		}
@@ -17515,6 +17562,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 	_proto2.onDragLeave = function onDragLeave(e) {
 		this.setState({
 			dropInsertionIndex: null,
+			dropNextToTheRowAbove: null,
 			dropTarget: null,
 		});
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.3.3",
+   "version": "24.3.4",
    "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/axis/Axis.d.ts

@@ -1,96 +1,96 @@
-import { Instance } from "./../../ui/Instance.d";
-import * as Cx from "../../core";
-import { BoundedObject, BoundedObjectProps } from "../../svg/BoundedObject";
-
-export interface AxisProps extends BoundedObjectProps {
-   /** Set to `true` for vertical axes. */
-   vertical?: boolean;
-
-   /** Used as a secondary axis. Displayed at the top/right. */
-   secondary?: boolean;
-
-   /** When set to `true`, the values are displayed in descending order. */
-   inverted?: Cx.BooleanProp;
-
-   /** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
-   hidden?: boolean;
-
-   tickSize?: number;
-   minTickDistance?: number;
-   minLabelDistanceVertical?: number;
-   minLabelDistanceHorizontal?: number;
-
-   /** Distance between labels and the axis. */
-   labelOffset?: number | string;
-
-   /** Label rotation angle in degrees. */
-   labelRotation?: Cx.Prop<number | string>;
-
-   /** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
-   labelAnchor?: "start" | "end" | "middle" | "auto";
-
-   /** Horizontal text offset. */
-   labelDx?: number | string;
-
-   /** Vertical text offset which can be used for vertical alignment. */
-   labelDy?: number | string;
-
-   /** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
-   labelWrap?: boolean;
-
-   /**
-    * Used for vertical adjustment of multi-line labels. Default value is `auto` which means
-    * that value is initialized based on axis configuration. Value `0` means that label will grow towards
-    * the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
-    * `-0.5` will make labels vertically centered.
-    */
-   labelLineCountDyFactor?: number | string;
-
-   /**
-    * Used for vertical adjustment of multi-line labels. Default value is 1 which means
-    * that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
-    */
-   labelLineHeight?: number | string;
-
-   /** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
-   labelMaxLineLength?: number;
-
-   /** Set to true to hide the axis labels. */
-   hideLabels?: boolean;
-
-   /** Set to true to hide the axis line. */
-   hideLine?: boolean;
-
-   /** Set to true to hide the axis ticks. */
-   hideTicks?: boolean;
-
-   /** Additional CSS style to be applied to the axis line. */
-   lineStyle?: Cx.StyleProp;
-
-   /** Additional CSS style to be applied to the axis ticks. */
-   tickStyle?: Cx.StyleProp;
-
-   /** Additional CSS style to be applied to the axis labels. */
-   labelStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be applied to the axis line. */
-   lineClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the axis ticks. */
-   tickClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the axis labels. */
-   labelClass?: Cx.ClassProp;
-
-   onMeasured?: (info: any, instance: Instance) => void;
-
-   /** A function used to create a formatter function for axis labels. See Complex Labels example in the CxJS documentation for more info. */
-   onCreateLabelFormatter?:
-      | string
-      | ((
-           context: any,
-           instance: Instance
-        ) => (formattedValue: string, value: any) => { text: string; style?: any; className?: string }[]);
-}
-
-export class Axis extends BoundedObject {}
+import { Instance } from "./../../ui/Instance.d";
+import * as Cx from "../../core";
+import { BoundedObject, BoundedObjectProps } from "../../svg/BoundedObject";
+
+export interface AxisProps extends BoundedObjectProps {
+   /** Set to `true` for vertical axes. */
+   vertical?: boolean;
+
+   /** Used as a secondary axis. Displayed at the top/right. */
+   secondary?: boolean;
+
+   /** When set to `true`, the values are displayed in descending order. */
+   inverted?: Cx.BooleanProp;
+
+   /** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
+   hidden?: boolean;
+
+   tickSize?: number;
+   minTickDistance?: number;
+   minLabelDistanceVertical?: number;
+   minLabelDistanceHorizontal?: number;
+
+   /** Distance between labels and the axis. */
+   labelOffset?: number | string;
+
+   /** Label rotation angle in degrees. */
+   labelRotation?: Cx.Prop<number | string>;
+
+   /** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
+   labelAnchor?: "start" | "end" | "middle" | "auto";
+
+   /** Horizontal text offset. */
+   labelDx?: number | string;
+
+   /** Vertical text offset which can be used for vertical alignment. */
+   labelDy?: number | string;
+
+   /** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
+   labelWrap?: boolean;
+
+   /**
+    * Used for vertical adjustment of multi-line labels. Default value is `auto` which means
+    * that value is initialized based on axis configuration. Value `0` means that label will grow towards
+    * the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
+    * `-0.5` will make labels vertically centered.
+    */
+   labelLineCountDyFactor?: number | string;
+
+   /**
+    * Used for vertical adjustment of multi-line labels. Default value is 1 which means
+    * that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
+    */
+   labelLineHeight?: number | string;
+
+   /** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
+   labelMaxLineLength?: number;
+
+   /** Set to true to hide the axis labels. */
+   hideLabels?: boolean;
+
+   /** Set to true to hide the axis line. */
+   hideLine?: boolean;
+
+   /** Set to true to hide the axis ticks. */
+   hideTicks?: boolean;
+
+   /** Additional CSS style to be applied to the axis line. */
+   lineStyle?: Cx.StyleProp;
+
+   /** Additional CSS style to be applied to the axis ticks. */
+   tickStyle?: Cx.StyleProp;
+
+   /** Additional CSS style to be applied to the axis labels. */
+   labelStyle?: Cx.StyleProp;
+
+   /** Additional CSS class to be applied to the axis line. */
+   lineClass?: Cx.ClassProp;
+
+   /** Additional CSS class to be applied to the axis ticks. */
+   tickClass?: Cx.ClassProp;
+
+   /** Additional CSS class to be applied to the axis labels. */
+   labelClass?: Cx.ClassProp;
+
+   onMeasured?: (info: any, instance: Instance) => void;
+
+   /** A function used to create a formatter function for axis labels. See Complex Labels example in the CxJS documentation for more info. */
+   onCreateLabelFormatter?:
+      | string
+      | ((
+           context: any,
+           instance: Instance
+        ) => (formattedValue: string, value: any) => { text: string; style?: any; className?: string }[]);
+}
+
+export class Axis extends BoundedObject {}