@beinformed/ui 1.58.4 → 1.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beinformed/ui",
-  "version": "1.58.4",
+  "version": "1.59.0",
   "description": "Toolbox for be informed javascript layouts",
   "license": "SEE LICENSE IN LICENSE.md",
   "bugs": "http://support.beinformed.com",
@@ -83,6 +83,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
+    "@date-fns/tz": "^1.2.0",
     "big.js": "^6.2.2",
     "date-fns": "^4.1.0",
     "deepmerge": "^4.3.1",
@@ -95,10 +96,11 @@
     "klona": "^2.0.6",
     "lodash": "^4.17.21",
     "reselect": "^4.1.8",
-    "setimmediate": "^1.0.5"
+    "setimmediate": "^1.0.5",
+    "timezone-soft": "^1.5.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
+    "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.25.9",
     "@babel/eslint-plugin": "^7.25.9",
@@ -107,10 +109,10 @@
     "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-flow": "^7.25.9",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "auditjs": "^4.0.46",
     "babel-jest": "^29.7.0",
     "babel-plugin-styled-components": "^2.1.4",
@@ -124,14 +126,14 @@
     "eslint-plugin-ft-flow": "^3.0.11",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.9.0",
-    "eslint-plugin-jsdoc": "^50.5.0",
+    "eslint-plugin-jsdoc": "^50.6.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "^6.14.0",
     "flow-bin": "^0.200.1",
     "flow-copy-source": "^2.0.9",
     "flow-typed": "^3.9.0",
-    "hermes-eslint": "^0.25.0",
+    "hermes-eslint": "^0.25.1",
     "history": "^4.0.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
@@ -141,7 +143,7 @@
     "jscodeshift": "^17.1.1",
     "lint-staged": "^15.2.10",
     "polished": "^4.0.0",
-    "prettier": "^3.4.0",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",

package/src/constants/Constants.js

@@ -64,6 +64,10 @@ export const ISO_TIME_FORMAT = "HH:mm:ss";
 /**
  */
 export const ISO_TIMESTAMP_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSS";
+/**
+ * Offset format is appended to iso datetime and timestamp when isIncludeTimeOffsetInDateTimes = true
+ */
+export const DATETIME_OFFSET_FORMAT = "xxx";
 /**
  * week starts on monday by default
  */
@@ -99,6 +103,11 @@ export const IS_SYNC = typeof dataFetcher !== "undefined";
  * @type {boolean}
  */
 export const IS_SERVER = IS_SYNC;
+/**
+ * @type {boolean}
+ */
+// $FlowExpectedError[cannot-resolve-name]
+export const IS_GRAALJS = typeof Graal !== "undefined";
 
 /**
  * @type {{SUCCESS: string, ERROR: string, INFO: string, WARNING: string}}
@@ -161,6 +170,8 @@ export const ATTRIBUTE_WIDTH = {
 
 export const ALL_CONTENT_IN_DATA_SETTING = "hasAllContentInData";
 
+export const INCLUDE_TIME_OFFSET = "isIncludeTimeOffsetInDateTimes";
+
 export const INTERNAL_LOGIN_TYPE = {
   JAAS: "JAAS",
   PAC4J_FORM: "PAC4J_FORM",

package/src/constants/Settings.js

@@ -3,6 +3,7 @@ import { isPlainObject, has } from "../utils/helpers/objects";
 import { getRepositoryResourceUrl } from "../utils/helpers/repositoryResource";
 import {
   ALL_CONTENT_IN_DATA_SETTING,
+  INCLUDE_TIME_OFFSET,
   INTERNAL_LOGIN_TYPE,
   LOGIN_TYPE,
   LOGIN_PATH_SETTING,
@@ -200,6 +201,11 @@ export const getCaptchaPath = (
 export const hasAllContentInData = (): boolean =>
   getSetting(ALL_CONTENT_IN_DATA_SETTING, true);
 
+/**
+ */
+export const isIncludeTimeOffsetInDateTimes = (): boolean =>
+  getSetting(INCLUDE_TIME_OFFSET, false);
+
 /**
  * Login type, only available when pac4j is configured
  *

package/src/models/attributes/DatetimeAttributeModel.js

@@ -16,7 +16,12 @@ import DateTimeTimeFormatConstraint from "./input-constraints/DateTimeTimeFormat
 import DatetimeFormatConstraint from "./input-constraints/DatetimeFormatConstraint";
 import DateBoundaryConstraint from "./input-constraints/DateBoundaryConstraint";
 
-import { ATTRIBUTE_WIDTH, ISO_DATE_FORMAT } from "../../constants";
+import {
+  isIncludeTimeOffsetInDateTimes,
+  ATTRIBUTE_WIDTH,
+  DATETIME_OFFSET_FORMAT,
+  ISO_DATE_FORMAT,
+} from "../../constants";
 
 import type {
   FormErrorAnchor,
@@ -24,6 +29,7 @@ import type {
   AttributeType,
   ModelOptions,
 } from "../types";
+import type { OffsetInfo } from "../../utils/datetime/DateTimeUtil";
 
 /**
  */
@@ -78,7 +84,9 @@ class DatetimeAttributeModel extends StringAttributeModel {
 
       // handle old datetime values, which contained ms
       if (this.type === "datetime" && value.includes(".")) {
-        value = value.split(".")[0];
+        value = TimestampUtil.toFormat(value, DateTimeUtil.getIsoFormat());
+      } else {
+        value = this.formatUtil.toISO(value);
       }
 
       if (this.hasTime) {
@@ -105,6 +113,17 @@ class DatetimeAttributeModel extends StringAttributeModel {
     if (this.type === "timestamp" && !this.timeInputFormat.includes("S")) {
       timeValue = this.formatUtil.setMilliseconds(value, 0);
     }
+
+    if (isIncludeTimeOffsetInDateTimes()) {
+      // https://github.com/date-fns/date-fns/issues/3579
+      const oldOffset = this.formatUtil.toFormat(value, DATETIME_OFFSET_FORMAT);
+      const newOffset = this.formatUtil.toFormat(
+        timeValue,
+        DATETIME_OFFSET_FORMAT,
+      );
+      timeValue = timeValue.replace(newOffset, oldOffset);
+    }
+
     return timeValue;
   }
 
@@ -214,7 +233,7 @@ class DatetimeAttributeModel extends StringAttributeModel {
 
   /**
    */
-  get inputFormat(): string {
+  get inputFormatWithoutOffset(): string {
     if (this.hasDate && this.hasTime) {
       return `${this.dateInputFormat} ${this.timeInputFormat}`.trim();
     }
@@ -230,6 +249,19 @@ class DatetimeAttributeModel extends StringAttributeModel {
     return "";
   }
 
+  /**
+   */
+  get inputFormat(): string {
+    if (
+      isIncludeTimeOffsetInDateTimes() &&
+      this.dateInputFormat !== "" &&
+      this.timeInputFormat !== ""
+    ) {
+      return `${this.inputFormatWithoutOffset} ${DATETIME_OFFSET_FORMAT}`;
+    }
+    return this.inputFormatWithoutOffset;
+  }
+
   /**
    */
   get dateInputFormat(): string {
@@ -337,8 +369,8 @@ class DatetimeAttributeModel extends StringAttributeModel {
       : "";
   }
 
-  // format value in readonly rendering
   /**
+   * format value in readonly rendering
    */
   formatValue(value: ?string): string {
     if (value == null || value.toString() === "") {
@@ -376,6 +408,24 @@ class DatetimeAttributeModel extends StringAttributeModel {
     return "";
   }
 
+  /**
+   */
+  get isAmbiguous(): boolean {
+    if (typeof this.value === "string") {
+      return this.formatUtil.isAmbiguous(this.value);
+    }
+    return false;
+  }
+
+  /**
+   */
+  get offset(): OffsetInfo | null {
+    if (typeof this.value === "string") {
+      return this.formatUtil.getOffset(this.value);
+    }
+    return null;
+  }
+
   /**
    * Get minimum date
    */

package/src/models/attributes/__tests__/DatetimeAttributeModel.spec.js

@@ -165,4 +165,13 @@ describe("datetimeAttributeModel", () => {
 
     expect(attribute.placeholder).toBe("dd-MM-yyyy");
   });
+
+  it("does NOT contain offset in formdata property", () => {
+    const attribute = new DatetimeAttributeModel(
+      { key: "datetime", value: "2031-12-21T17:41:21" },
+      { type: "datetime" },
+    );
+
+    expect(attribute.formdata).toEqual({ datetime: "2031-12-21T17:41:21" });
+  });
 });

package/src/models/attributes/__tests__/DatetimeAttributeModel_offset.spec.js

@@ -0,0 +1,306 @@
+import DatetimeAttributeModel from "../DatetimeAttributeModel";
+import {
+  ATTRIBUTE_WIDTH,
+  INCLUDE_TIME_OFFSET,
+  setSettings,
+} from "../../../constants";
+import { DateTimeUtil } from "../../../utils";
+
+describe("datetimeAttributeModel with offset on", () => {
+  beforeEach(() => {
+    setSettings({ [INCLUDE_TIME_OFFSET]: true });
+  });
+
+  it("should be able to create an empty DatetimeAttribute object", () => {
+    const attribute = new DatetimeAttributeModel({}, { type: "datetime" });
+
+    expect(attribute).toBeInstanceOf(DatetimeAttributeModel);
+
+    expect(attribute.type).toBe("datetime");
+    expect(attribute.format).toBe("yyyy-MM-dd'T'HH:mm:ssxxx");
+    expect(attribute.getInputValue()).toBe("");
+    expect(attribute.inputvalue).toBe("");
+    expect(attribute.readonlyvalue).toBe("");
+
+    attribute.addConstraints();
+    expect(attribute.constraintCollection).toHaveLength(1);
+  });
+
+  it("should be able to update", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      },
+    );
+
+    attribute.update("18-08-2016 13:45 +02:00");
+    expect(attribute.getInputValue()).toBe("18-08-2016 13:45 +02:00");
+    expect(attribute.getInitialInputValue("2016-08-18T13:45:23+02:00")).toBe(
+      "18-08-2016 13:45 +02:00",
+    );
+
+    expect(attribute.readonlyvalue).toBe("18-08-2016 13:45");
+
+    attribute.update(null);
+    expect(attribute.getInputValue()).toBe("");
+
+    attribute.update("");
+    expect(attribute.value).toBeNull();
+
+    attribute.update("aaaa");
+    expect(attribute.value).toBe("Invalid Date");
+  });
+
+  it("should be able to handle min and max date in only date format and renders in format", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+        mindate: "2010-10-01T00:00:00+02:00", // CEST
+        maxdate: "2010-10-31T23:59:59+01:00", // CET
+      },
+    );
+
+    attribute.update("18-08-2016 13:45");
+
+    expect(attribute.isValid).toBe(false);
+    expect(attribute.formatValue(attribute.mindate)).toBe("01-10-2010 00:00");
+    expect(attribute.formatValue(attribute.maxdate)).toBe("31-10-2010 23:59");
+  });
+
+  it("should return AttributeWidth for dates", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "date",
+      },
+    );
+    expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.SMALL);
+  });
+
+  it("should return AttributeWidth for times", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "time",
+      },
+    );
+    expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.SMALL);
+  });
+
+  it("should return AttributeWidth for datetime", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+      },
+    );
+    expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.MEDIUM);
+  });
+
+  it("can validate datetime with datetime format", () => {
+    const datetimeFormat = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      },
+    );
+
+    expect(datetimeFormat.validate("19-10-2010 1:45 +02:00")).toBe(true);
+    expect(datetimeFormat.validate("19-10-2010 13:45 +02:00")).toBe(true);
+
+    expect(datetimeFormat.validate("19-10-2010")).toBe(false);
+    expect(datetimeFormat.validate("13:45")).toBe(false);
+    expect(datetimeFormat.validate("19-10-2010 1:45 am")).toBe(false);
+  });
+
+  it("can validate datetime with only date format", () => {
+    const dateFormat = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy",
+      },
+    );
+
+    expect(dateFormat.validate("19-10-2010")).toBe(true);
+
+    expect(dateFormat.validate("19-10-2010 1:45")).toBe(false);
+    expect(dateFormat.validate("13:45")).toBe(false);
+    expect(dateFormat.validate("19-10-2010 1:45 am")).toBe(false);
+  });
+
+  it("can validate datetime with datetime am/pm format", () => {
+    const datetimeAmPmFormat = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy hh:mm a",
+      },
+    );
+
+    expect(datetimeAmPmFormat.validate("19-10-2010 1:45 am +02:00")).toBe(true);
+    expect(datetimeAmPmFormat.validate("19-10-2010 1:45 pm +02:00")).toBe(true);
+
+    expect(datetimeAmPmFormat.validate("19-10-2010 1:45 +02:00")).toBe(false);
+    expect(datetimeAmPmFormat.validate("19-10-2010 13:45 +02:00")).toBe(false);
+  });
+
+  it("can handle old datetime format with ms", () => {
+    const attribute = new DatetimeAttributeModel(
+      { value: "2031-12-21T17:41:21.000+01:00" },
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      },
+    );
+
+    expect(attribute.readonlyvalue).toBe("21-12-2031 17:41");
+  });
+
+  it("returns date part of formatlabel as placeholder if attribute has date and time", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+        formatlabel: "dd-MM-yyyy HH:mm",
+      },
+    );
+
+    expect(attribute.placeholder).toBe("dd-MM-yyyy");
+  });
+
+  it("contains offset in formdata property", () => {
+    const attribute = new DatetimeAttributeModel(
+      { key: "datetime", value: "2031-12-21T17:41:21+01:00" },
+      { type: "datetime" },
+    );
+
+    expect(attribute.formdata).toEqual({
+      datetime: "2031-12-21T17:41:21+01:00",
+    });
+  });
+
+  it("handles offsets and indicates ambiguouty", () => {
+    const winter = new DatetimeAttributeModel(
+      { key: "datetime", value: "2031-12-21T17:41:21+01:00" },
+      { type: "datetime" },
+    );
+
+    expect(winter.isAmbiguous).toBe(false);
+    expect(winter.offset).toEqual({
+      abbr: "CET",
+      label: "Central European Standard Time",
+      value: "+01:00",
+    });
+
+    const summer = new DatetimeAttributeModel(
+      { key: "datetime", value: "2031-07-01T17:41:21+02:00" },
+      { type: "datetime" },
+    );
+
+    expect(summer.isAmbiguous).toBe(false);
+    expect(summer.offset).toEqual({
+      abbr: "CEST",
+      label: "Central European Summer Time",
+      value: "+02:00",
+    });
+
+    const ambiguousSummer = new DatetimeAttributeModel(
+      { key: "datetime", value: "2024-10-27T02:30:00+02:00" },
+      { type: "datetime" },
+    );
+
+    expect(ambiguousSummer.isAmbiguous).toBe(true);
+    expect(ambiguousSummer.offset).toEqual({
+      abbr: "CEST",
+      label: "Central European Summer Time",
+      value: "+02:00",
+    });
+
+    const ambiguousWinter = new DatetimeAttributeModel(
+      { key: "datetime", value: "2024-10-27T02:30:00+01:00" },
+      { type: "datetime" },
+    );
+
+    expect(ambiguousWinter.isAmbiguous).toBe(true);
+    expect(ambiguousWinter.offset).toEqual({
+      abbr: "CET",
+      label: "Central European Standard Time",
+      value: "+01:00",
+    });
+  });
+
+  it("retrieves the correct error collection", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      },
+    );
+
+    attribute.inputvalue = "27-10-2024";
+
+    expect(attribute.errorCollection.map((error) => error.id)).toEqual([
+      "Constraint.DateTime.MissingValue",
+    ]);
+
+    attribute.inputvalue = "27-10-2024 02:30";
+
+    expect(attribute.errorCollection.map((error) => error.id)).toEqual([
+      "Constraint.DateTime.MissingOffset",
+    ]);
+
+    attribute.inputvalue = "27-10-2024 +02:00";
+
+    expect(attribute.errorCollection.map((error) => error.id)).toEqual([
+      "Constraint.DateTime.MissingValue",
+    ]);
+  });
+
+  it("handles dst", () => {
+    const attribute1 = new DatetimeAttributeModel(
+      { value: "2024-10-27T01:30:00+00:00" },
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      },
+    );
+
+    expect(attribute1.initvalue).toBe("2024-10-27T02:30:00+01:00");
+    expect(
+      DateTimeUtil.toFormat(attribute1.value, "dd-MM-yyyy HH:mm xxx"),
+    ).toBe("27-10-2024 02:30 +01:00");
+    expect(attribute1.isAmbiguous).toBe(true);
+    expect(attribute1.offset).toEqual({
+      abbr: "CET",
+      label: "Central European Standard Time",
+      value: "+01:00",
+    });
+
+    const attribute2 = new DatetimeAttributeModel(
+      { value: "2024-10-27T00:30:00+00:00" },
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      },
+    );
+
+    expect(attribute2.initvalue).toBe("2024-10-27T02:30:00+02:00");
+    expect(
+      DateTimeUtil.toFormat(attribute2.value, "dd-MM-yyyy HH:mm xxx"),
+    ).toBe("27-10-2024 02:30 +02:00");
+    expect(attribute2.isAmbiguous).toBe(true);
+    expect(attribute2.offset).toEqual({
+      abbr: "CEST",
+      label: "Central European Summer Time",
+      value: "+02:00",
+    });
+  });
+});

package/src/models/attributes/input-constraints/DatetimeFormatConstraint.js

@@ -4,6 +4,11 @@ import {
   DateTimeUtil,
 } from "../../../utils/datetime/DateTimeUtil";
 
+import {
+  DATETIME_OFFSET_FORMAT,
+  isIncludeTimeOffsetInDateTimes,
+} from "../../../constants";
+
 import type { IConstraintModel } from "../../types";
 
 /**
@@ -11,13 +16,17 @@ import type { IConstraintModel } from "../../types";
 class DatetimeFormatConstraint implements IConstraintModel {
   _type: string;
   _format: string;
+  _formatNoOffset: string;
   _formatLabel: string;
 
+  _id: string = "Constraint.DateTime.MissingValue";
+
   /**
    */
   constructor(type: string, format: string, formatLabel: string) {
     this._type = type;
     this._format = format;
+    this._formatNoOffset = format.replace(DATETIME_OFFSET_FORMAT, "").trim();
     this._formatLabel = formatLabel;
   }
 
@@ -30,7 +39,7 @@ class DatetimeFormatConstraint implements IConstraintModel {
   /**
    */
   get id(): string {
-    return "Constraint.DateTime.MissingValue";
+    return this._id;
   }
 
   /**
@@ -54,12 +63,24 @@ class DatetimeFormatConstraint implements IConstraintModel {
   /**
    */
   get defaultMessage(): string {
+    if (this._id === "Constraint.DateTime.MissingOffset") {
+      return "Please select ${daylight-label} or ${standard-label}";
+    }
     return "Date and time should both be entered";
   }
 
   /**
    */
-  get parameters(): { format: string } {
+  get parameters():
+    | { format: string }
+    | { "daylight-label": ?string, "standard-label": ?string } {
+    if (this._id === "Constraint.DateTime.MissingOffset") {
+      const offsets = DateTimeUtil.getTimezoneOffsets();
+      return {
+        "daylight-label": offsets.daylight?.label,
+        "standard-label": offsets.standard?.label,
+      };
+    }
     return { format: this.formatLabel };
   }
 
@@ -80,7 +101,25 @@ class DatetimeFormatConstraint implements IConstraintModel {
       return false;
     }
 
-    return this.formatUtil.hasFormat(value, this.format);
+    if (this.formatUtil.hasFormat(value, this.format)) {
+      return true;
+    }
+
+    if (isIncludeTimeOffsetInDateTimes()) {
+      const hasDateTime = this.formatUtil.hasFormat(
+        value,
+        this._formatNoOffset,
+      );
+      if (!hasDateTime) {
+        this._id = "Constraint.DateTime.MissingValue";
+        return false;
+      } else if (!new RegExp("[+-](0[0-9]|1[0-4]):[0-5][0-9]").test(value)) {
+        this._id = "Constraint.DateTime.MissingOffset";
+        return false;
+      }
+    }
+
+    return false;
   }
 
   /**

package/src/react-client/client.js

@@ -21,6 +21,7 @@ import {
 
 import {
   setAllContentInDataSetting,
+  setDateTimeSettings,
   setLoginPreferences,
 } from "../redux/actions/Preferences";
 import { showXHRErrorNotification } from "../redux/actions/Notification";
@@ -175,6 +176,7 @@ export const setupClient = (
 
   setAllContentInDataSetting(store.getState());
   setLoginPreferences(store.getState());
+  setDateTimeSettings(store.getState());
 
   // load existing cache from other browser tabs
   Cache.loadOtherBrowserTabs(() => {

package/src/react-server/__tests__/serverUtil.spec.js

@@ -119,6 +119,12 @@ describe("serverUtil", () => {
           "security.clients": null,
         },
       },
+      {
+        type: "SET_PREFERENCE",
+        payload: {
+          isIncludeTimeOffsetInDateTimes: false,
+        },
+      },
     ]);
   });
 
@@ -166,6 +172,12 @@ describe("serverUtil", () => {
           "security.clients": null,
         },
       },
+      {
+        type: "SET_PREFERENCE",
+        payload: {
+          isIncludeTimeOffsetInDateTimes: false,
+        },
+      },
     ]);
   });
 });