cx 26.4.4 → 26.6.0

package/src/data/createAccessorModelProxy.ts

@@ -1,66 +1,66 @@
-// Homomorphic mapped type preserves Go-to-Definition in IDEs
-// -? strips optionality, as clause filters conflicting method names
-type AccessorChainMap<M> = {
-   [K in keyof M as Exclude<K, "toString" | "valueOf" | "nameOf">]-?: AccessorChain<M[K]>;
-};
-
-// Check if a type is `any` using the intersection trick
-type IsAny<T> = 0 extends 1 & T ? true : false;
-
-export type AccessorChain<M> = (IsAny<M> extends true
-   ? { [key: string]: any } // Allow any property access for `any` type
-   : [M] extends [object]
-     ? AccessorChainMap<M> // Direct mapping preserves IDE navigation
-     : [NonNullable<M>] extends [object]
-       ? AccessorChainMap<NonNullable<M>> // Fallback for nullable types (e.g. optional properties)
-       : {}) & {
-   toString(): string;
-   valueOf(): M | undefined;
-   nameOf(): string;
-};
-
-const emptyFn = () => {};
-
-export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
-   let lastOp: string | null = null;
-
-   const proxy = new Proxy(emptyFn, {
-      get: (_, name: string | symbol) => {
-         if (typeof name !== "string") return proxy;
-
-         switch (name) {
-            case "isAccessorChain":
-               return true;
-
-            case "toString":
-            case "valueOf":
-            case "nameOf":
-               lastOp = name;
-               return proxy;
-         }
-
-         let newChain = chain;
-         if (newChain.length > 0) newChain += ".";
-         newChain += name;
-         return createAccessorModelProxy(newChain);
-      },
-
-      apply(): string {
-         switch (lastOp) {
-            case "nameOf":
-               const lastDotIndex = chain.lastIndexOf(".");
-               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
-
-            default:
-               return chain;
-         }
-      },
-   });
-   return proxy as unknown as AccessorChain<M>;
-}
-
-export const createModel = createAccessorModelProxy;
-
-export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
-   return value != null && !!(value as any).isAccessorChain;
-}
+// Homomorphic mapped type preserves Go-to-Definition in IDEs
+// -? strips optionality, as clause filters conflicting method names
+type AccessorChainMap<M> = {
+   [K in keyof M as Exclude<K, "toString" | "valueOf" | "nameOf">]-?: AccessorChain<M[K]>;
+};
+
+// Check if a type is `any` using the intersection trick
+type IsAny<T> = 0 extends 1 & T ? true : false;
+
+export type AccessorChain<M> = (IsAny<M> extends true
+   ? { [key: string]: any } // Allow any property access for `any` type
+   : [M] extends [object]
+     ? AccessorChainMap<M> // Direct mapping preserves IDE navigation
+     : [NonNullable<M>] extends [object]
+       ? AccessorChainMap<NonNullable<M>> // Fallback for nullable types (e.g. optional properties)
+       : {}) & {
+   toString(): string;
+   valueOf(): M | undefined;
+   nameOf(): string;
+};
+
+const emptyFn = () => {};
+
+export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
+   let lastOp: string | null = null;
+
+   const proxy = new Proxy(emptyFn, {
+      get: (_, name: string | symbol) => {
+         if (typeof name !== "string") return proxy;
+
+         switch (name) {
+            case "isAccessorChain":
+               return true;
+
+            case "toString":
+            case "valueOf":
+            case "nameOf":
+               lastOp = name;
+               return proxy;
+         }
+
+         let newChain = chain;
+         if (newChain.length > 0) newChain += ".";
+         newChain += name;
+         return createAccessorModelProxy(newChain);
+      },
+
+      apply(): string {
+         switch (lastOp) {
+            case "nameOf":
+               const lastDotIndex = chain.lastIndexOf(".");
+               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
+
+            default:
+               return chain;
+         }
+      },
+   });
+   return proxy as unknown as AccessorChain<M>;
+}
+
+export const createModel = createAccessorModelProxy;
+
+export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
+   return value != null && !!(value as any).isAccessorChain;
+}

package/src/locale/de-de.ts

@@ -16,6 +16,7 @@ Localization.localize(c, "cx/widgets/LookupField", {
    queryErrorText: "Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.",
    noResultsText: "Keine Ergebnisse gefunden.",
    minQueryLengthMessageText: "Geben Sie mindestens {0} Zeichen ein.",
+   invalidOptionText: "Die ausgewählte Option ist nicht mehr verfügbar.",
 });
 
 // In common for Calendar and MonthPicker

package/src/locale/en-us.ts

@@ -15,6 +15,7 @@ Localization.localize(c, "cx/widgets/LookupField", {
    queryErrorText: "Error occurred while querying for lookup data.",
    noResultsText: "No results found.",
    minQueryLengthMessageText: "Type in at least {0} character(s).",
+   invalidOptionText: "The selected option is no longer available.",
 });
 
 // In common for Calendar and MonthPicker

package/src/locale/es-es.ts

@@ -16,6 +16,7 @@ Localization.localize(c, "cx/widgets/LookupField", {
    queryErrorText: "Se produjo un error al consultar los datos de búsqueda.",
    noResultsText: "No se han encontrado resultados.",
    minQueryLengthMessageText: "Escriba al menos {0} caracteres.",
+   invalidOptionText: "La opción seleccionada ya no está disponible.",
 });
 
 // In common for Calendar and MonthPicker

package/src/locale/fr-fr.ts

@@ -16,6 +16,7 @@ Localization.localize(c, "cx/widgets/LookupField", {
    queryErrorText: "Une erreur s'est produite lors de l'interrogation des données de recherche.",
    noResultsText: "Aucun résultat trouvé.",
    minQueryLengthMessageText: "Tapez au moins {0} caractère (s).",
+   invalidOptionText: "L'option sélectionnée n'est plus disponible.",
 });
 
 // In common for Calendar and MonthPicker

package/src/locale/nl-nl.ts

@@ -16,6 +16,7 @@ Localization.localize(c, "cx/widgets/LookupField", {
    queryErrorText: "Er is een fout opgetreden bij het weergeven van gegevens.",
    noResultsText: "Geen resultaten gevonden",
    minQueryLengthMessageText: "Voer minimaal {0} tekens in.",
+   invalidOptionText: "De geselecteerde optie is niet meer beschikbaar.",
 });
 
 // In common for Calendar and MonthPicker

package/src/locale/pt-pt.ts

@@ -16,6 +16,7 @@ Localization.localize(c, "cx/widgets/LookupField", {
    queryErrorText: "Ocorreu um erro ao consultar os dados de pesquisa.",
    noResultsText: "Nenhum resultado encontrado.",
    minQueryLengthMessageText: "Digite pelo menos {0} caractere(s).",
+   invalidOptionText: "A opção selecionada já não está disponível.",
 });
 
 // In common for Calendar and MonthPicker

package/src/locale/sr-latn-ba.ts

@@ -16,6 +16,7 @@ Localization.localize(c, "cx/widgets/LookupField", {
    queryErrorText: "Došlo je do greške kod pribavljanja podataka za prikaz.",
    noResultsText: "Rezultati nisu pronađeni.",
    minQueryLengthMessageText: "Unesite najmanje {0} karakter(a).",
+   invalidOptionText: "Izabrana opcija više nije dostupna.",
 });
 
 // In common for Calendar and MonthPicker

package/src/ui/Format.spec.ts

@@ -0,0 +1,32 @@
+import assert from "assert";
+import { Format } from "./Format";
+
+// The `quarter` formatter is registered eagerly when ui/Format is imported,
+// so these tests do not need enableCultureSensitiveFormatting().
+describe("Format - quarter", function () {
+   it("renders the calendar quarter with the default pattern", function () {
+      assert.equal(Format.value(new Date(2020, 0, 15), "quarter"), "Q1 2020");
+      assert.equal(Format.value(new Date(2020, 5, 1), "quarter"), "Q2 2020");
+      assert.equal(Format.value(new Date(2020, 11, 31), "quarter"), "Q4 2020");
+   });
+
+   it("supports custom patterns and the {yy} token", function () {
+      assert.equal(Format.value(new Date(2020, 0, 1), "quarter;{yy}Q{q}"), "20Q1");
+      assert.equal(Format.value(new Date(2020, 8, 1), "quarter;{q}Q{yyyy}"), "3Q2020");
+   });
+
+   it("accepts both lowercase and uppercase placeholders", function () {
+      assert.equal(Format.value(new Date(2020, 0, 1), "quarter;{YY}Q{Q}"), "20Q1");
+      assert.equal(Format.value(new Date(2020, 0, 1), "quarter;Q{Q} {YYYY}"), "Q1 2020");
+   });
+
+   it("treats the input as an exclusive range end with the exclusive flag", function () {
+      assert.equal(Format.value(new Date(2021, 0, 1), "quarter;{yy}Q{q};exclusive"), "20Q4");
+      assert.equal(Format.value(new Date(2021, 0, 1), "quarter;{yy}Q{q};ex"), "20Q4");
+   });
+
+   it("falls back to the default pattern when the pattern argument is empty (quarter;;e)", function () {
+      assert.equal(Format.value(new Date(2021, 0, 1), "quarter;;e"), "Q4 2020");
+      assert.equal(Format.value(new Date(2020, 0, 1), "quarter;;e"), "Q4 2019");
+   });
+});

package/src/ui/Format.ts

@@ -1,12 +1,31 @@
 import { Culture, getCurrentCultureCache } from "./Culture";
 import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
 import { setGetExpressionCacheCallback } from "../data/Expression";
-import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
-import { parseDateInvariant } from "../util";
+import { setGetStringTemplateCacheCallback, StringTemplate } from "../data/StringTemplate";
+import { dateQuarter, dayBefore, parseDateInvariant } from "../util";
 import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
 
 export const Format = Fmt;
 
+// The `quarter` formatter renders a calendar quarter via a string-template
+// pattern with `{q}` (quarter number), `{yyyy}` and `{yy}` (year) placeholders.
+// Placeholders are case-insensitive (`{Q}`, `{YYYY}`, `{YY}` work too). It lives
+// here rather than in util/Format because it depends on StringTemplate from the
+// data layer, which util/ cannot import. It is registered eagerly since it does
+// not depend on culture settings.
+Fmt.registerFactory("quarter", (fmt: any, pattern?: string, mode?: string) => {
+   let exclusive = mode === "exclusive" || mode === "ex" || mode === "e";
+   let template = StringTemplate.get(pattern || "Q{q} {yyyy}");
+   return (value: any) => {
+      let date = parseDateInvariant(value);
+      if (exclusive) date = dayBefore(date);
+      let q = dateQuarter(date);
+      let yyyy = date.getFullYear();
+      let yy = String(yyyy % 100).padStart(2, "0");
+      return template({ q, Q: q, yyyy, YYYY: yyyy, yy, YY: yy });
+   };
+});
+
 let cultureSensitiveFormatsRegistered = false;
 
 export function resolveNumberFormattingFlags(flags?: string): any {
@@ -86,6 +105,12 @@ export function enableCultureSensitiveFormatting() {
       return (value: any) => formatter.format(parseDateInvariant(value));
    });
 
+   Fmt.registerFactory(["dayBefore", "daybefore"], (fmt: any, format = "yyyyMd hhmm") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value: any) => formatter.format(dayBefore(parseDateInvariant(value)));
+   });
+
    setGetFormatCacheCallback(() => {
       let cache = getCurrentCultureCache();
       if (!cache.formatCache) cache.formatCache = {};

package/src/ui/Repeater.spec.tsx

@@ -1,181 +1,181 @@
-import { Store } from "../data/Store";
-import { Repeater } from "./Repeater";
-import { bind } from "./bind";
-import { createTestRenderer, act } from "../util/test/createTestRenderer";
-import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
-
-import assert from "assert";
-
-describe("Repeater", () => {
-   it("allows sorting", async () => {
-      let data = [
-         {
-            value: "C",
-         },
-         {
-            value: "B",
-         },
-         {
-            value: "A",
-         },
-      ];
-
-      let widget = (
-         <cx>
-            <div>
-               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
-                  <div text={bind("$item.value")} />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = await createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["A"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-   });
-
-   it("changes are properly updated", async () => {
-      let divInstances: any[] = [];
-      let widget = (
-         <cx>
-            <div>
-               <Repeater records={bind("data")} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
-                  <div
-                     text={bind("$item.value")}
-                     onExplore={(context, instance) => {
-                        divInstances.push(instance);
-                     }}
-                  />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            data: [
-               {
-                  value: "C",
-               },
-               {
-                  value: "B",
-               },
-            ],
-         },
-      });
-
-      const component = await createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-
-      divInstances = [];
-
-      await act(async () => {
-         store.update("data", (data) => [{ value: "A" }, ...data]);
-      });
-
-      assert.deepEqual(component.toJSON(), {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["A"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-
-      assert.equal(divInstances.length, 3);
-      assert.equal(divInstances[0].store.get("$item.value"), "A");
-      assert.equal(divInstances[1].store.get("$item.value"), "B");
-      assert.equal(divInstances[2].store.get("$item.value"), "C");
-   });
-
-   it("infers T from AccessorChain<T[]> for onCreateFilter callback", () => {
-      interface Item {
-         name: string;
-         active: boolean;
-      }
-
-      interface AppModel {
-         items: Item[];
-         $item: Item;
-      }
-
-      const m = createAccessorModelProxy<AppModel>();
-
-      // onCreateFilter should receive (record: Item) => boolean when T is inferred from AccessorChain<Item[]>
-      const widget = (
-         <cx>
-            <div>
-               <Repeater
-                  records={m.items}
-                  recordAlias={m.$item}
-                  onCreateFilter={() => (record) => {
-                     // If T is correctly inferred as Item, record.name should be string
-                     const name: string = record.name;
-                     // @ts-expect-error - record.name should be string, not number
-                     const wrong: number = record.name;
-                     return record.active;
-                  }}
-               >
-                  <div text={m.$item.name} />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      assert.ok(widget);
-   });
-});
+import { Store } from "../data/Store";
+import { Repeater } from "./Repeater";
+import { bind } from "./bind";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+
+import assert from "assert";
+
+describe("Repeater", () => {
+   it("allows sorting", async () => {
+      let data = [
+         {
+            value: "C",
+         },
+         {
+            value: "B",
+         },
+         {
+            value: "A",
+         },
+      ];
+
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div text={bind("$item.value")} />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+   });
+
+   it("changes are properly updated", async () => {
+      let divInstances: any[] = [];
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={bind("data")} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div
+                     text={bind("$item.value")}
+                     onExplore={(context, instance) => {
+                        divInstances.push(instance);
+                     }}
+                  />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            data: [
+               {
+                  value: "C",
+               },
+               {
+                  value: "B",
+               },
+            ],
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      divInstances = [];
+
+      await act(async () => {
+         store.update("data", (data) => [{ value: "A" }, ...data]);
+      });
+
+      assert.deepEqual(component.toJSON(), {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      assert.equal(divInstances.length, 3);
+      assert.equal(divInstances[0].store.get("$item.value"), "A");
+      assert.equal(divInstances[1].store.get("$item.value"), "B");
+      assert.equal(divInstances[2].store.get("$item.value"), "C");
+   });
+
+   it("infers T from AccessorChain<T[]> for onCreateFilter callback", () => {
+      interface Item {
+         name: string;
+         active: boolean;
+      }
+
+      interface AppModel {
+         items: Item[];
+         $item: Item;
+      }
+
+      const m = createAccessorModelProxy<AppModel>();
+
+      // onCreateFilter should receive (record: Item) => boolean when T is inferred from AccessorChain<Item[]>
+      const widget = (
+         <cx>
+            <div>
+               <Repeater
+                  records={m.items}
+                  recordAlias={m.$item}
+                  onCreateFilter={() => (record) => {
+                     // If T is correctly inferred as Item, record.name should be string
+                     const name: string = record.name;
+                     // @ts-expect-error - record.name should be string, not number
+                     const wrong: number = record.name;
+                     return record.active;
+                  }}
+               >
+                  <div text={m.$item.name} />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      assert.ok(widget);
+   });
+});

package/src/util/Format.spec.ts

@@ -47,6 +47,17 @@ describe("Format", function () {
       });
    });
 
+   describe("daybefore", function () {
+      it("formats the date shifted back by one day", function () {
+         assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "daybefore"), "3/31/2015 05:06");
+         assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "dayBefore"), "3/31/2015 05:06");
+      });
+
+      it("steps back across month and year boundaries", function () {
+         assert.equal(Format.value(new Date(2021, 0, 1), "daybefore"), "12/31/2020 00:00");
+      });
+   });
+
    describe("ellipsis", function () {
       it("can shorten long texts", function () {
          assert.equal(Format.value("This is a very long text.", "ellipsis;7"), "This...");