cx 23.12.1 → 23.12.3

package/dist/ui.js

@@ -2770,6 +2770,7 @@ var Restate = /*#__PURE__*/ (function (_PureContainer) {
 				onError: this.onError,
 				deferredUntilIdle: instance.data.deferredUntilIdle,
 				idleTimeout: instance.data.idleTimeout,
+				immediate: this.immediate,
 			},
 			key
 		);
@@ -2778,6 +2779,7 @@ var Restate = /*#__PURE__*/ (function (_PureContainer) {
 })(PureContainer);
 Restate.prototype.detached = false;
 Restate.prototype.waitForIdle = false;
+Restate.prototype.immediate = false;
 var PrivateStore = Restate;
 var RestateStore = /*#__PURE__*/ (function (_Store) {
 	_inheritsLoose(RestateStore, _Store);

package/dist/widgets.js

@@ -3266,15 +3266,14 @@ var OverlayComponent = /*#__PURE__*/ (function (_VDOM$Component2) {
 					}),
 					style: parseStyle(data.shadowStyle),
 					children: [
-						widget.backdrop &&
-							/*#__PURE__*/ jsx(
-								"div",
-								{
-									className: CSS.element("overlay", "modal-backdrop"),
-									onClick: this.onBackdropClick.bind(this),
-								},
-								"backdrop"
-							),
+						/*#__PURE__*/ jsx(
+							"div",
+							{
+								className: CSS.element("overlay", "modal-backdrop"),
+								onClick: this.onBackdropClick.bind(this),
+							},
+							"backdrop"
+						),
 						content,
 					],
 				},
@@ -3365,6 +3364,8 @@ var OverlayComponent = /*#__PURE__*/ (function (_VDOM$Component2) {
 		if (widget.onBackdropClick) instance.invoke("onBackdropClick", e, instance);
 		if (widget.backdrop) {
 			if (instance.dismiss) instance.dismiss();
+		} else if (widget.modal) {
+			FocusManager.focus(this.el);
 		}
 	};
 	_proto3.onMouseUp = function onMouseUp(e) {
@@ -10748,14 +10749,16 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
 		);
 	};
 	_proto.handleSelect = function handleSelect(e, instance, date1, date2) {
-		var data = instance.data;
+		var data = instance.data,
+			widget = instance.widget;
+		var encode = widget.encoding || Culture.getDefaultDateEncoding();
 		if (data.disabled) return;
 		if (!validationCheck(date1, data)) return;
 		if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date1, date2) === false) return;
 		if (this.range) {
-			instance.set("from", date1.toISOString());
-			instance.set("to", date2.toISOString());
-		} else instance.set("value", date1.toISOString());
+			instance.set("from", encode(date1));
+			instance.set("to", encode(date2));
+		} else instance.set("value", encode(date1));
 		if (this.onSelect) instance.invoke("onSelect", instance, date1, date2);
 	};
 	return MonthPicker;
@@ -12071,16 +12074,18 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
 		return date;
 	};
 	_proto.handleSelect = function handleSelect(instance, date1, date2) {
+		var widget = instance.widget;
+		var encode = widget.encoding || Culture.getDefaultDateEncoding();
 		instance.setState({
 			inputError: false,
 		});
 		if (this.range) {
-			var d1 = date1 ? date1.toISOString() : this.emptyValue;
-			var d2 = date2 ? date2.toISOString() : this.emptyValue;
+			var d1 = date1 ? encode(date1) : this.emptyValue;
+			var d2 = date2 ? encode(date2) : this.emptyValue;
 			instance.set("from", d1);
 			instance.set("to", d2);
 		} else {
-			var value = date1 ? date1.toISOString() : this.emptyValue;
+			var value = date1 ? encode(date1) : this.emptyValue;
 			instance.set("value", value);
 		}
 	};
@@ -12143,6 +12148,7 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 					),
 					{},
 					{
+						encoding: widget.encoding,
 						autoFocus: true,
 						onFocusOut: function onFocusOut(e) {
 							_this2.closeDropdown(e);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.12.1",
+   "version": "23.12.3",
    "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/PieLabel.js

@@ -1,72 +1,71 @@
-import { VDOM } from "../ui/Widget";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import { parseStyle } from "../util/parseStyle";
-
-export class PieLabel extends BoundedObject {
-   init() {
-      this.lineStyle = parseStyle(this.lineStyle);
-      super.init();
-   }
-
-   declareData(...args) {
-      super.declareData(...args, {
-         distance: undefined,
-         lineStyle: { structured: true },
-         lineStroke: undefined,
-         lineClass: { structured: true },
-         lineColorIndex: undefined,
-      });
-   }
-
-   calculateBounds(context, instance) {
-      var { data } = instance;
-      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-      instance.originalBounds = bounds;
-      instance.actualBounds = context.placePieLabel(bounds, data.distance);
-      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      if (!context.registerPieLabel)
-         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
-      console.log(instance.actualBounds, instance.originalBounds, instance.parentRect);
-      let right = instance.parentRect.r > instance.parentRect.l;
-      context.push("textDirection", right ? "right" : "left");
-      context.registerPieLabel(instance);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("textDirection");
-   }
-
-   render(context, instance, key) {
-      let { originalBounds, actualBounds, data } = instance;
-
-      return (
-         <g key={key} className={data.classNames}>
-            <line
-               className={this.CSS.element(
-                  this.baseClass,
-                  "line",
-                  data.lineColorIndex != null && "color-" + data.lineColorIndex
-               )}
-               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
-               y1={(actualBounds.t + actualBounds.b) / 2}
-               x2={(originalBounds.l + originalBounds.r) / 2}
-               y2={(originalBounds.t + originalBounds.b) / 2}
-               stroke={data.lineStroke}
-               style={data.lineStyle}
-            />
-            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
-               {this.renderChildren(context, instance)}
-            </g>
-         </g>
-      );
-   }
-}
-
-PieLabel.prototype.distance = 100;
-PieLabel.prototype.baseClass = "pielabel";
-PieLabel.prototype.styled = true;
+import { VDOM } from "../ui/Widget";
+import { BoundedObject } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { parseStyle } from "../util/parseStyle";
+
+export class PieLabel extends BoundedObject {
+   init() {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
+   declareData(...args) {
+      super.declareData(...args, {
+         distance: undefined,
+         lineStyle: { structured: true },
+         lineStroke: undefined,
+         lineClass: { structured: true },
+         lineColorIndex: undefined,
+      });
+   }
+
+   calculateBounds(context, instance) {
+      var { data } = instance;
+      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+      instance.originalBounds = bounds;
+      instance.actualBounds = context.placePieLabel(bounds, data.distance);
+      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
+   }
+
+   prepare(context, instance) {
+      super.prepare(context, instance);
+      if (!context.registerPieLabel)
+         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
+      let right = instance.parentRect.r > instance.parentRect.l;
+      context.push("textDirection", right ? "right" : "left");
+      context.registerPieLabel(instance);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("textDirection");
+   }
+
+   render(context, instance, key) {
+      let { originalBounds, actualBounds, data } = instance;
+
+      return (
+         <g key={key} className={data.classNames}>
+            <line
+               className={this.CSS.element(
+                  this.baseClass,
+                  "line",
+                  data.lineColorIndex != null && "color-" + data.lineColorIndex
+               )}
+               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
+               y1={(actualBounds.t + actualBounds.b) / 2}
+               x2={(originalBounds.l + originalBounds.r) / 2}
+               y2={(originalBounds.t + originalBounds.b) / 2}
+               stroke={data.lineStroke}
+               style={data.lineStyle}
+            />
+            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
+               {this.renderChildren(context, instance)}
+            </g>
+         </g>
+      );
+   }
+}
+
+PieLabel.prototype.distance = 100;
+PieLabel.prototype.baseClass = "pielabel";
+PieLabel.prototype.styled = true;

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 {}