cx 26.9.1 → 26.9.3

package/src/widgets/form/Field.spec.tsx

@@ -0,0 +1,50 @@
+import { createModel } from "../../data/createAccessorModelProxy";
+import { Store } from "../../data/Store";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+import { TextField } from "./TextField";
+import { LabeledContainer } from "./LabeledContainer";
+import assert from "assert";
+
+interface Model {
+   name: string;
+   caption: string;
+   hint: string;
+}
+
+function collectText(node: any): string {
+   if (node == null) return "";
+   if (typeof node === "string") return node;
+   if (Array.isArray(node)) return node.map(collectText).join("");
+   return collectText(node.children);
+}
+
+describe("Field", () => {
+   const m = createModel<Model>();
+
+   it("accepts an accessor chain as label", async () => {
+      let store = new Store({ data: { caption: "Full name" } });
+      let component = await createTestRenderer(store, <TextField value={m.name} label={m.caption} />);
+      assert.ok(collectText(component.toJSON()).includes("Full name"));
+   });
+
+   it("accepts an accessor chain as help", async () => {
+      let store = new Store({ data: { hint: "As on your passport" } });
+      let component = await createTestRenderer(store, <TextField value={m.name} help={m.hint} />);
+      assert.ok(collectText(component.toJSON()).includes("As on your passport"));
+   });
+});
+
+describe("LabeledContainer", () => {
+   const m = createModel<Model>();
+
+   it("accepts an accessor chain as label", async () => {
+      let store = new Store({ data: { caption: "Contact" } });
+      let component = await createTestRenderer(
+         store,
+         <LabeledContainer label={m.caption}>
+            <TextField value={m.name} />
+         </LabeledContainer>,
+      );
+      assert.ok(collectText(component.toJSON()).includes("Contact"));
+   });
+});

package/src/widgets/form/Field.tsx

@@ -252,7 +252,7 @@ export class Field<
     if (this.help != null) {
       let helpConfig: any = {};
 
-      if ((this.help as any).isComponentType) helpConfig = this.help;
+      if ((this.help as any).isComponentType === true) helpConfig = this.help;
       else if (isSelector(this.help)) helpConfig.text = this.help;
       else Object.assign(helpConfig, this.help);
 
@@ -269,7 +269,7 @@ export class Field<
         class: this.labelClass,
       };
 
-      if ((this.label as any).isComponentType) labelConfig = this.label;
+      if ((this.label as any).isComponentType === true) labelConfig = this.label;
       else if (isSelector(this.label)) labelConfig.text = this.label;
       else Object.assign(labelConfig, this.label);
 

package/src/widgets/form/LabeledContainer.ts

@@ -43,7 +43,7 @@ export class LabeledContainer extends FieldGroup<LabeledContainerConfig> {
             required: true,
          };
 
-         if ((this.label as any).isComponentType) labelConfig = this.label as Record<string, unknown>;
+         if ((this.label as any).isComponentType === true) labelConfig = this.label as Record<string, unknown>;
          else if (isSelector(this.label)) labelConfig.text = this.label;
          else Object.assign(labelConfig, this.label);
 

package/src/widgets/grid/Grid.tsx

@@ -1280,7 +1280,14 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
       );
    }
 
-   renderHeader(context: RenderingContext, instance: GridInstance, key: any, fixed: any, fixedColumns: any) {
+   renderHeader(
+      context: RenderingContext,
+      instance: GridInstance,
+      key: any,
+      fixed: any,
+      fixedColumns: any,
+      repeated?: boolean,
+   ) {
       let { data, widget, header } = instance;
 
       let { CSS, baseClass } = widget;
@@ -1458,10 +1465,12 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
 
       if (headerRows.length == 0) return null;
 
-      return (
-         <tbody key={"h" + key} className={CSS.element(baseClass, "header")}>
-            {headerRows}
-         </tbody>
+      //headers repeated for each group sit between the data rows, where a second thead
+      //would not be allowed
+      return VDOM.createElement(
+         repeated ? "tbody" : "thead",
+         { key: "h" + key, className: CSS.element(baseClass, "header") },
+         headerRows,
       );
    }
 
@@ -1582,7 +1591,9 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
                data-group-element={`group-caption-${level}`}
             >
                <tr>
-                  <td colSpan={1000}>{caption}</td>
+                  <td colSpan={1000} role="columnheader">
+                     {caption}
+                  </td>
                </tr>
             </tbody>
          );
@@ -1644,7 +1655,13 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
                if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
 
                return (
-                  <td key={i} className={cls} colSpan={colSpan} style={style}>
+                  <td
+                     key={i}
+                     className={cls}
+                     colSpan={colSpan}
+                     role={c.caption ? "columnheader" : undefined}
+                     style={style}
+                  >
                      {v}
                   </td>
                );
@@ -1820,9 +1837,11 @@ export class Grid<T = unknown> extends ContainerBase<GridConfig<T>, GridInstance
                );
 
             if (g.showHeader) {
-               record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
+               record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false, true));
                if (hasFixedColumns)
-                  record.fixedVdom.push(this.renderHeader(context, instance, record.key + "-header", false, true));
+                  record.fixedVdom.push(
+                     this.renderHeader(context, instance, record.key + "-header", false, true, true),
+                  );
             }
          }
 
@@ -2242,6 +2261,25 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
       };
    }
 
+   groupLooseRows(items: any[]): any[] {
+      let { CSS, baseClass } = this.props.instance.widget;
+      let result: any[] = [];
+      for (let i = 0; i < items.length; i++) {
+         if (!items[i]?.props?.useTrTag) {
+            result.push(items[i]);
+            continue;
+         }
+         let start = i;
+         while (i + 1 < items.length && items[i + 1]?.props?.useTrTag) i++;
+         result.push(
+            <tbody key={`rows-${items[start].key}`} className={CSS.element(baseClass, "row-group")}>
+               {items.slice(start, i + 1)}
+            </tbody>,
+         );
+      }
+      return result;
+   }
+
    render() {
       let { instance, data, fixedFooter, fixedColumnsFixedFooter } = this.props;
       let { widget, hasFixedColumns } = instance;
@@ -2495,6 +2533,13 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
          }
       }
 
+      //grids with merged cells render rows as tr elements, as rowspan cannot cross row group
+      //boundaries, so consecutive rows have to share a tbody instead of getting one each
+      if (instance.row.hasMergedCells) {
+         children = this.groupLooseRows(children);
+         if (hasFixedColumns) fixedChildren = this.groupLooseRows(fixedChildren);
+      }
+
       let shouldRenderFixedFooter = widget.scrollable && (fixedFooter || fixedColumnsFixedFooter);
 
       if (hasFixedColumns) {
@@ -3526,20 +3571,23 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
                if (scrollIntoView) {
                   let record = this.getRecordAt(index)!;
 
-                  let item = record && this.dom.table!.querySelector(`tbody[data-record-key="${record.key}"]`);
+                  //rows are tbody elements, except in grids with merged cells, where they are tr
+                  let cellsOf = (rowEl: Element) =>
+                     (rowEl.tagName == "TR" ? rowEl : (rowEl.firstChild as HTMLElement)).children;
+
+                  let item = record && this.dom.table!.querySelector(`[data-record-key="${record.key}"]`);
 
                   let hscroll = false;
                   if (item) {
                      if (widget.cellEditable)
                         if (this.state.cursorCellIndex >= this.props.instance.fixedColumnCount) {
                            hscroll = true;
-                           item = (item.firstChild as HTMLElement)!.children[
+                           item = cellsOf(item)[
                               this.state.cursorCellIndex - this.props.instance.fixedColumnCount
                            ] as Element;
                         } else {
-                           let fixedItem = this.dom.fixedTable!.querySelector(`tbody[data-record-key="${record.key}"]`);
-                           let cell =
-                              fixedItem && (fixedItem.firstChild as HTMLElement)!.children[this.state.cursorCellIndex];
+                           let fixedItem = this.dom.fixedTable!.querySelector(`[data-record-key="${record.key}"]`);
+                           let cell = fixedItem && cellsOf(fixedItem)[this.state.cursorCellIndex];
                            if (cell) scrollElementIntoView(cell, false, true, 10);
                         }
 

package/src/widgets/index.ts

@@ -1,41 +1,41 @@
-export { Widget } from "../ui/Widget";
-export { Text } from "../ui/Text";
-export { StaticText } from "../ui/StaticText";
-export { PureContainer } from "../ui/PureContainer";
-export { IsolatedScope } from "../ui/IsolatedScope";
-export { DetachedScope } from "../ui/DetachedScope";
-export { Restate, PrivateStore } from "../ui/Restate";
-export { DataProxy } from "../ui/DataProxy";
-export { Content } from "../ui/layout/Content";
-export { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
-export { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
-export { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
-export { ContentResolver } from "../ui/ContentResolver";
-export { Rescope } from "../ui/Rescope";
-export { Repeater } from "../ui/Repeater";
-
-export * from "./cx";
-export * from "./HtmlElement";
-export * from "./Button";
-export * from "./DocumentTitle";
-export * from "./List";
-export * from "./Sandbox";
-export * from "./CxCredit";
-export * from "./Heading";
-export * from "./Section";
-export * from "./FlexBox";
-export * from "./Icon";
-export * from "./ProgressBar";
-export * from "./Resizer";
-export * from "./HighlightedSearchText";
-export * from "./autoFocus";
-export * from "./ReactElementWrapper";
-
-export * from "./icons/index";
-export * from "./overlay/index";
-export * from "./nav/index";
-export * from "./form/index";
-export * from "./grid/index";
-export * from "./drag-drop/index";
-
-export * from "./enableAllInternalDependencies";
+export { Widget } from "../ui/Widget";
+export { Text } from "../ui/Text";
+export { StaticText } from "../ui/StaticText";
+export { PureContainer } from "../ui/PureContainer";
+export { IsolatedScope } from "../ui/IsolatedScope";
+export { DetachedScope } from "../ui/DetachedScope";
+export { Restate, PrivateStore } from "../ui/Restate";
+export { DataProxy } from "../ui/DataProxy";
+export { Content } from "../ui/layout/Content";
+export { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
+export { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
+export { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
+export { ContentResolver } from "../ui/ContentResolver";
+export { Rescope } from "../ui/Rescope";
+export { Repeater } from "../ui/Repeater";
+
+export * from "./cx";
+export * from "./HtmlElement";
+export * from "./Button";
+export * from "./DocumentTitle";
+export * from "./List";
+export * from "./Sandbox";
+export * from "./CxCredit";
+export * from "./Heading";
+export * from "./Section";
+export * from "./FlexBox";
+export * from "./Icon";
+export * from "./ProgressBar";
+export * from "./Resizer";
+export * from "./HighlightedSearchText";
+export * from "./autoFocus";
+export * from "./ReactElementWrapper";
+
+export * from "./icons/index";
+export * from "./overlay/index";
+export * from "./nav/index";
+export * from "./form/index";
+export * from "./grid/index";
+export * from "./drag-drop/index";
+
+export * from "./enableAllInternalDependencies";

package/src/widgets/overlay/Overlay.tsx

@@ -240,10 +240,14 @@ export class OverlayBase<
       } else if (context.options.dismiss) instance.dismiss = context.options.dismiss;
 
       if (instance.dismiss) {
-         context.push("parentOptions", {
+         let parentOptions = {
             ...context.parentOptions,
             dismiss: instance.dismiss,
-         });
+         };
+         context.push("parentOptions", parentOptions);
+         // The overlay's own instance captured parentOptions before this point, so
+         // a controller attached to the overlay would not see its own dismiss.
+         instance.parentOptions = parentOptions;
       }
 
       if (instance.cache("dismiss", instance.dismiss)) instance.markShouldUpdate(context);

package/src/widgets/overlay/Window.spec.tsx

@@ -0,0 +1,59 @@
+import { createModel } from "../../data/createAccessorModelProxy";
+import { Store } from "../../data/Store";
+import { Controller } from "../../ui/Controller";
+import { act, createTestRenderer } from "../../util/test/createTestRenderer";
+import { Window } from "./Window";
+import assert from "assert";
+
+interface Model {
+   visible: boolean;
+}
+
+describe("Window", () => {
+   const m = createModel<Model>();
+
+   it("can be dismissed by a controller attached to the window", async () => {
+      let controller: WindowController | undefined;
+
+      class WindowController extends Controller {
+         onInit() {
+            controller = this;
+         }
+      }
+
+      let store = new Store({ data: { visible: true } });
+      await createTestRenderer(
+         store,
+         <Window visible={m.visible} inline controller={WindowController}>
+            Content
+         </Window>,
+      );
+
+      assert.ok(controller, "controller was not initialized");
+      assert.equal(typeof controller.instance.parentOptions?.dismiss, "function");
+      await act(async () => controller!.instance.parentOptions.dismiss());
+      assert.equal(store.get(m.visible), false);
+   });
+
+   it("can be dismissed by a controller inside the window", async () => {
+      let controller: ContentController | undefined;
+
+      class ContentController extends Controller {
+         onInit() {
+            controller = this;
+         }
+      }
+
+      let store = new Store({ data: { visible: true } });
+      await createTestRenderer(
+         store,
+         <Window visible={m.visible} inline>
+            <div controller={ContentController}>Content</div>
+         </Window>,
+      );
+
+      assert.ok(controller, "controller was not initialized");
+      await act(async () => controller!.instance.parentOptions.dismiss());
+      assert.equal(store.get(m.visible), false);
+   });
+});