cx 26.5.1 → 26.6.0

package/dist/widgets.css

@@ -5313,6 +5313,10 @@ th.cxe-calendar-display {
   content: counter(cx-row-number);
 }
 
+.cxe-grid-group-caption.cxs-reset-row-numbers {
+  counter-set: cx-row-number 0;
+}
+
 .cxe-grid-fixed-header {
   overflow: hidden;
   position: absolute;

package/dist/widgets.js

@@ -8677,6 +8677,19 @@ class LookupField extends Field {
 			}
 		}
 		instance.lastDropdown = context.lastDropdown;
+		if (this.validateOptionExists && isArray(data.options) && !this.isEmpty(data)) {
+			let invalid = this.multiple
+				? isArray(data.values) && data.records.length < data.values.length
+				: !data.options.some(($option) =>
+						areKeysEqual(
+							getOptionKey(this.keyBindings, {
+								$option,
+							}),
+							data.selectedKeys[0],
+						),
+					);
+			if (invalid) data.error = this.invalidOptionText;
+		}
 		super.prepareData(context, instance);
 	}
 	renderInput(context, instance, key) {
@@ -8742,6 +8755,8 @@ LookupField.prototype.hideSearchField = false;
 LookupField.prototype.minOptionsForSearchField = 7;
 LookupField.prototype.loadingText = "Loading...";
 LookupField.prototype.queryErrorText = "Error occurred while querying for lookup data.";
+LookupField.prototype.validateOptionExists = false;
+LookupField.prototype.invalidOptionText = "The selected option is no longer available.";
 LookupField.prototype.noResultsText = "No results found.";
 LookupField.prototype.optionIdField = "id";
 LookupField.prototype.optionTextField = "text";
@@ -15600,12 +15615,13 @@ class Grid extends ContainerBase {
 	renderGroupHeader(context, instance, g, level, group, i, store, fixedColumns) {
 		let { CSS, baseClass } = this;
 		let data = store.getData();
+		let resetRowNumbers = g.resetRowNumbers ? "reset-row-numbers" : null;
 		if (g.caption) {
 			let caption = g.caption(data);
 			return jsx(
 				"tbody",
 				{
-					className: CSS.element(baseClass, "group-caption", ["level-" + level]),
+					className: CSS.element(baseClass, "group-caption", ["level-" + level, resetRowNumbers]),
 					"data-group-key": group.$key,
 					"data-group-element": `group-caption-${level}`,
 					children: jsx("tr", {
@@ -15696,7 +15712,7 @@ class Grid extends ContainerBase {
 			return jsx(
 				"tbody",
 				{
-					className: CSS.element(baseClass, "group-caption", ["level-" + level]),
+					className: CSS.element(baseClass, "group-caption", ["level-" + level, resetRowNumbers]),
 					"data-group-key": group.$key,
 					"data-group-element": `group-caption-${level}`,
 					children: lines,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.5.1",
+  "version": "26.6.0",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

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/widgets/form/LookupField.spec.tsx

@@ -1,5 +1,10 @@
 import { createAccessorModelProxy } from "../../data/createAccessorModelProxy";
 import { LookupField } from "./LookupField";
+import { Store } from "../../data/Store";
+import { ValidationGroup } from "./ValidationGroup";
+import { bind } from "../../ui/bind";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+import assert from "assert";
 
 interface User {
    id: number;
@@ -90,4 +95,148 @@ describe("LookupField", () => {
          </cx>
       );
    });
+
+   describe("validateOptionExists", () => {
+      const options = [
+         { id: 1, text: "One" },
+         { id: 2, text: "Two" },
+      ];
+
+      it("reports an error when the selected value is missing from options", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     value={bind("value")}
+                     text={bind("text")}
+                     options={options}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("value", 99);
+         store.set("text", "Stale");
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 1);
+         assert.equal(errors[0].message, "The selected option is no longer available.");
+      });
+
+      it("does not report an error when the selected value matches an option", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     value={bind("value")}
+                     text={bind("text")}
+                     options={options}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("value", 1);
+         store.set("text", "One");
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 0);
+      });
+
+      it("does not report an error when the field is empty", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     value={bind("value")}
+                     text={bind("text")}
+                     options={options}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 0);
+      });
+
+      it("does not report an error when options are not provided (server-side mode)", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     value={bind("value")}
+                     text={bind("text")}
+                     onQuery={() => []}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("value", 99);
+         store.set("text", "Stale");
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 0);
+      });
+
+      it("reports an error in multiple mode when some ids are not in options", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField
+                     multiple
+                     values={bind("values")}
+                     options={options}
+                     validateOptionExists
+                  />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("values", [1, 99]);
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 1);
+      });
+
+      it("does not validate by default (back-compat)", async () => {
+         let widget = (
+            <cx>
+               <ValidationGroup errors={bind("errors")}>
+                  <LookupField value={bind("value")} text={bind("text")} options={options} />
+               </ValidationGroup>
+            </cx>
+         );
+
+         let store = new Store();
+         store.set("value", 99);
+         store.set("text", "Stale");
+
+         await createTestRenderer(store, widget);
+
+         let errors = store.get("errors");
+         assert.equal(errors.length, 0);
+      });
+   });
 });

package/src/widgets/form/LookupField.tsx

@@ -117,6 +117,12 @@ interface LookupFieldBaseConfig<TOption = any> extends FieldConfig {
   /** Error message displayed if server query throws an exception. */
   queryErrorText?: string;
 
+  /** Set to `true` to report a validation error when the selected value is not present in `options`. Only applies when `options` is an array. Default is `false`. */
+  validateOptionExists?: boolean;
+
+  /** Error message displayed when the selected value is not present in `options`. */
+  invalidOptionText?: string;
+
   /** Message to be displayed if no entries match the user query. */
   noResultsText?: string;
 
@@ -292,6 +298,8 @@ export class LookupField<TOption = any, TRecord = any> extends Field<
   declare public minOptionsForSearchField: number;
   declare public loadingText: string;
   declare public queryErrorText: string;
+  declare public validateOptionExists: boolean;
+  declare public invalidOptionText: string;
   declare public noResultsText: string;
   declare public optionIdField: string;
   declare public optionTextField: string;
@@ -501,6 +509,22 @@ export class LookupField<TOption = any, TRecord = any> extends Field<
 
     (instance as DropdownInstance).lastDropdown = context.lastDropdown;
 
+    if (
+      this.validateOptionExists &&
+      isArray(data.options) &&
+      !this.isEmpty(data)
+    ) {
+      let invalid = this.multiple
+        ? isArray(data.values) && data.records!.length < data.values.length
+        : !data.options.some(($option) =>
+            areKeysEqual(
+              getOptionKey(this.keyBindings!, { $option }),
+              data.selectedKeys[0],
+            ),
+          );
+      if (invalid) data.error = this.invalidOptionText;
+    }
+
     super.prepareData(context, instance);
   }
 
@@ -604,6 +628,9 @@ LookupField.prototype.minOptionsForSearchField = 7;
 LookupField.prototype.loadingText = "Loading...";
 LookupField.prototype.queryErrorText =
   "Error occurred while querying for lookup data.";
+LookupField.prototype.validateOptionExists = false;
+LookupField.prototype.invalidOptionText =
+  "The selected option is no longer available.";
 LookupField.prototype.noResultsText = "No results found.";
 LookupField.prototype.optionIdField = "id";
 LookupField.prototype.optionTextField = "text";

package/src/widgets/grid/Grid.scss

@@ -184,6 +184,12 @@
       content: counter(cx-row-number);
    }
 
+   // counter-set (not counter-reset) updates the existing row-number counter in place; a
+   // counter-reset here would create a nested counter that the following data rows ignore.
+   .#{$element}#{$name}-group-caption.#{$state}reset-row-numbers {
+      counter-set: cx-row-number 0;
+   }
+
    .#{$element}#{$name}-fixed-header {
       overflow: hidden;
       position: absolute;

package/src/widgets/grid/Grid.tsx

@@ -156,6 +156,11 @@ export interface GridGroupingConfig<T> {
    showCaption?: boolean;
    showFooter?: boolean;
    showHeader?: boolean;
+   /**
+    * Restart automatic row numbers (`cxe-grid-row-number`) from 1 at the beginning of each group
+    * at this grouping level instead of counting continuously across the whole grid. Defaults to `false`.
+    */
+   resetRowNumbers?: boolean;
    caption?: StringProp;
    name?: StringProp;
    text?: StringProp;
@@ -1510,12 +1515,13 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
    ) {
       let { CSS, baseClass } = this;
       let data = store.getData();
+      let resetRowNumbers = g.resetRowNumbers ? "reset-row-numbers" : null;
       if (g.caption) {
          let caption = g.caption(data);
          return (
             <tbody
                key={`g-${level}-${group.$key}`}
-               className={CSS.element(baseClass, "group-caption", ["level-" + level])}
+               className={CSS.element(baseClass, "group-caption", ["level-" + level, resetRowNumbers])}
                data-group-key={group.$key}
                data-group-element={`group-caption-${level}`}
             >
@@ -1598,7 +1604,7 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
          return (
             <tbody
                key={"c" + group.$key}
-               className={CSS.element(baseClass, "group-caption", ["level-" + level])}
+               className={CSS.element(baseClass, "group-caption", ["level-" + level, resetRowNumbers])}
                data-group-key={group.$key}
                data-group-element={`group-caption-${level}`}
             >