cx 24.2.0 → 24.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.2.0",
+   "version": "24.2.1",
    "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/TimeAxis.js

@@ -4,12 +4,13 @@ import { Stack } from "./Stack";
 import { Format } from "../../ui/Format";
 import { isNumber } from "../../util/isNumber";
 import { zeroTime } from "../../util/date/zeroTime";
+import { parseDateInvariant } from "../../util";
 
 Format.registerFactory("yearOrMonth", (format) => {
    let year = Format.parse("datetime;yyyy");
    let month = Format.parse("datetime;MMM");
    return function (date) {
-      let d = new Date(date);
+      let d = parseDateInvariant(date);
       if (d.getMonth() == 0) return year(d);
       else return month(d);
    };
@@ -19,7 +20,7 @@ Format.registerFactory("monthOrDay", (format) => {
    let month = Format.parse("datetime;MMM");
    let day = Format.parse("datetime;dd");
    return function (date) {
-      let d = new Date(date);
+      let d = parseDateInvariant(date);
       if (d.getDate() == 1) return month(d);
       else return day(d);
    };
@@ -69,7 +70,7 @@ export class TimeAxis extends Axis {
          this.minTickUnit,
          lowerDeadZone,
          upperDeadZone,
-         this.decode
+         this.decode,
       );
    }
 
@@ -149,7 +150,7 @@ class TimeScale {
       minTickUnit,
       lowerDeadZone,
       upperDeadZone,
-      decode
+      decode,
    ) {
       this.dateCache = {};
       this.min = min != null ? this.decodeValue(min) : null;
@@ -180,12 +181,12 @@ class TimeScale {
             let v = this.dateCache[date];
             if (!v) {
                if (this.decode) date = this.decode(date);
-               v = this.dateCache[date] = Date.parse(date);
+               v = this.dateCache[date] = parseDateInvariant(date).getTime();
             }
             return v;
 
          case "number":
-            return date;
+            return parseDateInvariant(date).getTime();
       }
    }
 

package/src/ui/Format.js

@@ -1,5 +1,6 @@
 import { Culture } from "./Culture";
 import { Format as Fmt, resolveMinMaxFractionDigits } from "../util/Format";
+import { parseDateInvariant } from "../util";
 import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
 
 export const Format = Fmt;
@@ -68,19 +69,19 @@ export function enableCultureSensitiveFormatting() {
    Fmt.registerFactory(["date", "d"], (fmt, format = "yyyyMMdd") => {
       let culture = Culture.getDateTimeCulture();
       let formatter = culture.getFormatter(format);
-      return (value) => formatter.format(new Date(value));
+      return (value) => formatter.format(parseDateInvariant(value));
    });
 
    Fmt.registerFactory(["time", "t"], (fmt, format = "hhmmss") => {
       let culture = Culture.getDateTimeCulture();
       let formatter = culture.getFormatter(format);
-      return (value) => formatter.format(new Date(value));
+      return (value) => formatter.format(parseDateInvariant(value));
    });
 
    Fmt.registerFactory(["datetime", "dt"], (fmt, format = "yyyyMd hhmm") => {
       let culture = Culture.getDateTimeCulture();
       let formatter = culture.getFormatter(format);
-      return (value) => formatter.format(new Date(value));
+      return (value) => formatter.format(parseDateInvariant(value));
    });
 
    GlobalCacheIdentifier.change();

package/src/util/Format.js

@@ -1,121 +1,116 @@
-import {debug} from "./Debug";
-import {GlobalCacheIdentifier} from './GlobalCacheIdentifier';
-import {isNumber} from '../util/isNumber';
-import {isUndefined} from '../util/isUndefined';
-import {isArray} from '../util/isArray';
+import { isArray } from "../util/isArray";
+import { isNumber } from "../util/isNumber";
+import { isUndefined } from "../util/isUndefined";
+import { parseDateInvariant } from "./date";
+import { debug } from "./Debug";
+import { GlobalCacheIdentifier } from "./GlobalCacheIdentifier";
 
 //Culture dependent formatters are defined in the ui package.
 
-const defaultFormatter = v => v.toString();
+const defaultFormatter = (v) => v.toString();
 
 let formatFactory = {
-
-   string: function() {
-      return defaultFormatter
+   string: function () {
+      return defaultFormatter;
    },
 
-   wrap: function(part0, prefix, suffix) {
-      if (!prefix)
-         prefix = '';
+   wrap: function (part0, prefix, suffix) {
+      if (!prefix) prefix = "";
 
-      if (!suffix)
-         suffix = '';
+      if (!suffix) suffix = "";
 
-      return value => prefix + value.toString() + suffix;
+      return (value) => prefix + value.toString() + suffix;
    },
 
-   fixed: function(part0, digits) {
-      return value => value.toFixed(digits)
+   fixed: function (part0, digits) {
+      return (value) => value.toFixed(digits);
    },
 
-   prefix: function(part0, prefix) {
-      if (!prefix)
-         prefix = '';
+   prefix: function (part0, prefix) {
+      if (!prefix) prefix = "";
 
-      return value => prefix + value.toString();
+      return (value) => prefix + value.toString();
    },
 
-   suffix: function(part0, suffix) {
-      if (!suffix)
-         suffix = '';
+   suffix: function (part0, suffix) {
+      if (!suffix) suffix = "";
 
-      return value => value.toString() + suffix;
+      return (value) => value.toString() + suffix;
    },
 
-   uppercase: function() {
-      return value => value.toString().toUpperCase();
+   uppercase: function () {
+      return (value) => value.toString().toUpperCase();
    },
 
-   lowercase: function() {
-      return value => value.toString().toLowerCase();
+   lowercase: function () {
+      return (value) => value.toString().toLowerCase();
    },
 
-   urlencode: function() {
-      return value => encodeURIComponent(value);
+   urlencode: function () {
+      return (value) => encodeURIComponent(value);
    },
-   
+
    number: function (part0, minFractionDigits, maxFractionDigits) {
-      let {minimumFractionDigits, maximumFractionDigits} = resolveMinMaxFractionDigits(minFractionDigits, maxFractionDigits);
+      let { minimumFractionDigits, maximumFractionDigits } = resolveMinMaxFractionDigits(
+         minFractionDigits,
+         maxFractionDigits,
+      );
       let trimmable = maximumFractionDigits - minimumFractionDigits;
       if (trimmable > 0) {
-         if (minimumFractionDigits == 0)
-            ++trimmable;
-         return value => trimFractionZeros(value.toFixed(maximumFractionDigits), trimmable);
+         if (minimumFractionDigits == 0) ++trimmable;
+         return (value) => trimFractionZeros(value.toFixed(maximumFractionDigits), trimmable);
       }
-      return value => value.toFixed(maximumFractionDigits);
+      return (value) => value.toFixed(maximumFractionDigits);
    },
 
    percentage: function (part0, minFractionDigits, maxFractionDigits) {
       let numberFormatter = formatFactory.number(part0, minFractionDigits, maxFractionDigits);
-      return value => numberFormatter(value * 100) + '%';
+      return (value) => numberFormatter(value * 100) + "%";
    },
 
    percentageSign: function (part0, minFractionDigits, maxFractionDigits) {
       let numberFormatter = formatFactory.number(part0, minFractionDigits, maxFractionDigits);
-      return value => numberFormatter(value) + '%';
+      return (value) => numberFormatter(value) + "%";
    },
 
    date: function () {
-      return value => {
-         let date = new Date(value);
+      return (value) => {
+         let date = parseDateInvariant(value);
          return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
-      }
+      };
    },
 
    time: function () {
-      return value => {
-         let date = new Date(value);
-         let h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours();
-         let m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes();
+      return (value) => {
+         let date = parseDateInvariant(value);
+         let h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
+         let m = date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
          return `${h}:${m}`;
-      }
+      };
    },
 
    datetime: function () {
       let date = formatFactory.date();
       let time = formatFactory.time();
-      return value => date(value) + ' ' + time(value);
+      return (value) => date(value) + " " + time(value);
    },
 
    ellipsis: function (part0, length, where) {
       length = Number(length);
-      if (!(length > 3))
-         length = 10;
+      if (!(length > 3)) length = 10;
       switch (where) {
          default:
          case "end":
             return (value) => {
                let s = String(value);
-               if (s.length > length)
-                  return s.substring(0, length - 3) + "...";
+               if (s.length > length) return s.substring(0, length - 3) + "...";
                return s;
             };
 
          case "start":
             return (value) => {
                let s = String(value);
-               if (s.length > length)
-                  return "..." + s.substring(s.length - length + 3);
+               if (s.length > length) return "..." + s.substring(s.length - length + 3);
                return s;
             };
 
@@ -129,7 +124,7 @@ let formatFactory = {
                return s;
             };
       }
-   }
+   },
 };
 
 formatFactory.s = formatFactory.str = formatFactory.string;
@@ -142,26 +137,25 @@ formatFactory.t = formatFactory.time;
 formatFactory.dt = formatFactory.datetime;
 
 function buildFormatter(format) {
-   let formatter = defaultFormatter, nullText = '';
+   let formatter = defaultFormatter,
+      nullText = "";
    if (format) {
-      let pipeParts = format.split('|');
-      nullText = pipeParts[1] || '';
-      let colonSepParts = pipeParts[0].split(':');
+      let pipeParts = format.split("|");
+      nullText = pipeParts[1] || "";
+      let colonSepParts = pipeParts[0].split(":");
       for (let i = 0; i < colonSepParts.length; i++) {
-         let parts = colonSepParts[i].split(';');
+         let parts = colonSepParts[i].split(";");
          let factory = formatFactory[parts[0]];
-         if (!factory)
-            debug('Unknown string format: ' + format);
-         else if (i == 0)
-            formatter = factory(...parts);
+         if (!factory) debug("Unknown string format: " + format);
+         else if (i == 0) formatter = factory(...parts);
          else {
             let outerFmt = factory(...parts);
             let innerFmt = formatter;
-            formatter = v => outerFmt(innerFmt(v));
+            formatter = (v) => outerFmt(innerFmt(v));
          }
       }
    }
-   return v => (v == null || v === '') ? nullText : formatter(v);
+   return (v) => (v == null || v === "" ? nullText : formatter(v));
 }
 
 let format = {
@@ -172,25 +166,22 @@ function getFormatCache() {
    if (format.cacheIdentifier != GlobalCacheIdentifier.get()) {
       format = {
          cache: {},
-         cacheIdentifier: GlobalCacheIdentifier.get()
+         cacheIdentifier: GlobalCacheIdentifier.get(),
       };
    }
    return format.cache;
 }
 
 function getFormatter(format) {
-   if (!format)
-      format = '';
+   if (!format) format = "";
    let formatCache = getFormatCache();
    let formatter = formatCache[format];
-   if (!formatter)
-      formatter = formatCache[format] = buildFormatter(format);
+   if (!formatter) formatter = formatCache[format] = buildFormatter(format);
 
    return formatter;
 }
 
 export class Format {
-
    static value(v, format) {
       let formatter = getFormatter(format);
       return formatter(v);
@@ -205,10 +196,8 @@ export class Format {
    }
 
    static registerFactory(format, factory) {
-      if (isArray(format))
-         format.forEach(f => this.registerFactory(f, factory));
-      else
-         formatFactory[format] = factory;
+      if (isArray(format)) format.forEach((f) => this.registerFactory(f, factory));
+      else formatFactory[format] = factory;
    }
 }
 
@@ -217,26 +206,24 @@ export function resolveMinMaxFractionDigits(minimumFractionDigits, maximumFracti
    maximumFractionDigits = maximumFractionDigits != null ? Number(maximumFractionDigits) : maximumFractionDigits;
 
    if (isNumber(minimumFractionDigits)) {
-      if (isUndefined(maximumFractionDigits))
-         maximumFractionDigits = minimumFractionDigits;
+      if (isUndefined(maximumFractionDigits)) maximumFractionDigits = minimumFractionDigits;
       else if (isNumber(maximumFractionDigits) && maximumFractionDigits < minimumFractionDigits)
          maximumFractionDigits = minimumFractionDigits;
-   }
-   else if (minimumFractionDigits == null && maximumFractionDigits == null) {
+   } else if (minimumFractionDigits == null && maximumFractionDigits == null) {
       minimumFractionDigits = 0;
       maximumFractionDigits = 18;
    }
 
    return {
       minimumFractionDigits,
-      maximumFractionDigits
-   }
+      maximumFractionDigits,
+   };
 }
 
 export function trimFractionZeros(str, max) {
-   let cnt = 0, l = str.length;
-   while (cnt < max && (str[l - 1 - cnt] === '0' || str[l - 1 - cnt] === '.'))
-      cnt++;
+   let cnt = 0,
+      l = str.length;
+   while (cnt < max && (str[l - 1 - cnt] === "0" || str[l - 1 - cnt] === ".")) cnt++;
 
    return cnt > 0 ? str.substring(0, l - cnt) : str;
-}
+}

package/src/util/date/index.d.ts

@@ -1,9 +1,10 @@
-export * from './dateDiff';
-export * from './zeroTime';
-export * from './monthStart';
-export * from './lowerBoundCheck';
-export * from './upperBoundCheck';
-export * from './maxDate';
-export * from './minDate';
-export * from './sameDate';
-export * from './encodeDateWithTimezoneOffset';
+export * from "./dateDiff";
+export * from "./zeroTime";
+export * from "./monthStart";
+export * from "./lowerBoundCheck";
+export * from "./upperBoundCheck";
+export * from "./maxDate";
+export * from "./minDate";
+export * from "./sameDate";
+export * from "./encodeDateWithTimezoneOffset";
+export * from "./parseDateInvariant";

package/src/util/date/index.js

@@ -1,9 +1,10 @@
-export * from './dateDiff';
-export * from './zeroTime';
-export * from './monthStart';
-export * from './lowerBoundCheck';
-export * from './upperBoundCheck';
-export * from './maxDate';
-export * from './minDate';
-export * from './sameDate';
-export * from './encodeDateWithTimezoneOffset';
+export * from "./dateDiff";
+export * from "./zeroTime";
+export * from "./monthStart";
+export * from "./lowerBoundCheck";
+export * from "./upperBoundCheck";
+export * from "./maxDate";
+export * from "./minDate";
+export * from "./sameDate";
+export * from "./encodeDateWithTimezoneOffset";
+export * from "./parseDateInvariant";

package/src/util/date/parseDateInvariant.d.ts

@@ -0,0 +1,3 @@
+export function parseDateInvariant(input: string | number | Date): Date;
+
+export function overrideParseDateInvariant(newImpl: (input: string | number | Date) => Date): void;

package/src/util/date/parseDateInvariant.js

@@ -0,0 +1,20 @@
+// This module addresses a common issue when handling date strings in the format "yyyy-MM-dd" usually returned by backends.
+// In time zones earlier than UTC, creating a Date object from such a string can result in the date being shifted one day earlier.
+// This happens because "yyyy-MM-dd" is interpreted as a UTC date at 00:00, and when the browser displays it in local time, it adjusts backward.
+// To resolve this, the default implementation (`defaultInvariantParseDate`) appends " 00:00" to the date string,
+// explicitly indicating local time. Custom parsing logic can also be registered dynamically using `registerInvariantParseDateImpl`
+// to accommodate other formats or requirements.
+function defaultParseDateInvariant(input) {
+   if (typeof input == "string" && input.length == 10 && input[4] == "-" && input[7] == "-")
+      return new Date(`${input} 00:00`);
+   return new Date(input);
+}
+let impl = defaultParseDateInvariant;
+
+export function parseDateInvariant(input) {
+   return impl(input);
+}
+
+export function overrideParseDateInvariant(newImpl) {
+   impl = newImpl;
+}

package/src/widgets/form/Calendar.js

@@ -1,26 +1,27 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { Culture } from "../../ui/Culture";
-import { FocusManager, oneFocusOut, offFocusOut } from "../../ui/FocusManager";
 import { StringTemplate } from "../../data/StringTemplate";
-import { zeroTime } from "../../util/date/zeroTime";
+import { Culture } from "../../ui/Culture";
+import { FocusManager, offFocusOut, oneFocusOut } from "../../ui/FocusManager";
+import "../../ui/Format";
+import { Localization } from "../../ui/Localization";
+import { VDOM, Widget } from "../../ui/Widget";
+import { parseDateInvariant } from "../../util";
+import { KeyCode } from "../../util/KeyCode";
 import { dateDiff } from "../../util/date/dateDiff";
 import { lowerBoundCheck } from "../../util/date/lowerBoundCheck";
-import { upperBoundCheck } from "../../util/date/upperBoundCheck";
+import { monthStart } from "../../util/date/monthStart";
 import { sameDate } from "../../util/date/sameDate";
+import { upperBoundCheck } from "../../util/date/upperBoundCheck";
+import { zeroTime } from "../../util/date/zeroTime";
+import DropdownIcon from "../icons/drop-down";
+import ForwardIcon from "../icons/forward";
 import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
    tooltipMouseLeave,
+   tooltipMouseMove,
    tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
 } from "../overlay/tooltip-ops";
-import { KeyCode } from "../../util/KeyCode";
-import { Localization } from "../../ui/Localization";
-import ForwardIcon from "../icons/forward";
-import DropdownIcon from "../icons/drop-down";
-import "../../ui/Format";
-import { monthStart } from "../../util/date/monthStart";
+import { Field, getFieldTooltip } from "./Field";
 
 export class Calendar extends Field {
    declareData() {
@@ -37,7 +38,7 @@ export class Calendar extends Field {
             focusable: undefined,
             dayData: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -53,17 +54,17 @@ export class Calendar extends Field {
       };
 
       if (data.value) {
-         let d = new Date(data.value);
+         let d = parseDateInvariant(data.value);
          if (!isNaN(d.getTime())) {
             data.date = zeroTime(d);
          }
       }
 
-      if (data.refDate) data.refDate = zeroTime(new Date(data.refDate));
+      if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
 
-      if (data.maxValue) data.maxValue = zeroTime(new Date(data.maxValue));
+      if (data.maxValue) data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
 
-      if (data.minValue) data.minValue = zeroTime(new Date(data.minValue));
+      if (data.minValue) data.minValue = zeroTime(parseDateInvariant(data.minValue));
 
       super.prepareData(...arguments);
    }
@@ -92,7 +93,7 @@ export class Calendar extends Field {
          }
 
          if (data.dayData) {
-            let date = new Date(data.value);
+            let date = parseDateInvariant(data.value);
             let info = data.dayData[date.toDateString()];
             if (info && info.disabled) data.error = this.disabledDaysOfWeekErrorText;
          }
@@ -117,7 +118,7 @@ export class Calendar extends Field {
       if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
 
       if (widget.partial) {
-         let mixed = new Date(data.value);
+         let mixed = parseDateInvariant(data.value);
          if (data.value && !isNaN(mixed)) {
             mixed.setFullYear(date.getFullYear());
             mixed.setMonth(date.getMonth());
@@ -176,7 +177,7 @@ export class CalendarCmp extends VDOM.Component {
             focus: false,
             cursor: zeroTime(data.date || refDate),
          },
-         this.getPage(refDate)
+         this.getPage(refDate),
       );
 
       this.handleMouseMove = this.handleMouseMove.bind(this);
@@ -414,7 +415,7 @@ export class CalendarCmp extends VDOM.Component {
                   today: widget.highlightToday && sameDate(date, today),
                }),
                dayInfo.className,
-               CSS.mod(dayInfo.mod)
+               CSS.mod(dayInfo.mod),
             );
             let dateInst = new Date(date);
             days.push(
@@ -429,7 +430,7 @@ export class CalendarCmp extends VDOM.Component {
                   onMouseDown={unselectable ? null : this.handleMouseDown}
                >
                   {date.getDate()}
-               </td>
+               </td>,
             );
             date.setDate(date.getDate() + 1);
          }
@@ -438,7 +439,7 @@ export class CalendarCmp extends VDOM.Component {
                <td />
                {days}
                <td />
-            </tr>
+            </tr>,
          );
       }
 

package/src/widgets/form/DateTimeField.js

@@ -27,6 +27,7 @@ import { Format } from "../../util/Format";
 import { TimeList } from "./TimeList";
 import { autoFocus } from "../autoFocus";
 import { getActiveElement } from "../../util";
+import { parseDateInvariant } from "../../util";
 
 export class DateTimeField extends Field {
    declareData() {
@@ -77,7 +78,9 @@ export class DateTimeField extends Field {
       let { data } = instance;
 
       if (data.value) {
-         let date = new Date(data.value);
+         let date = parseDateInvariant(data.value);
+         //  let date = new Date(data.value);
+
          if (isNaN(date.getTime())) data.formatted = String(data.value);
          else {
             // handle utc edge cases
@@ -87,11 +90,11 @@ export class DateTimeField extends Field {
          data.date = date;
       } else data.formatted = "";
 
-      if (data.refDate) data.refDate = zeroTime(new Date(data.refDate));
+      if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
 
-      if (data.maxValue) data.maxValue = new Date(data.maxValue);
+      if (data.maxValue) data.maxValue = parseDateInvariant(data.maxValue);
 
-      if (data.minValue) data.minValue = new Date(data.minValue);
+      if (data.minValue) data.minValue = parseDateInvariant(data.minValue);
 
       if (this.segment == "date") {
          if (data.minValue) data.minValue = zeroTime(data.minValue);
@@ -540,7 +543,7 @@ class DateTimeInput extends VDOM.Component {
       });
 
       if (!isNaN(date)) {
-         let mixed = new Date(baseValue);
+         let mixed = parseDateInvariant(baseValue);
          if (date && baseValue && !isNaN(mixed) && widget.partial) {
             switch (widget.segment) {
                case "date":