cx 26.0.11 → 26.0.13

package/build/widgets/grid/Grid.d.ts

@@ -17,12 +17,12 @@ import { GridRow, GridRowConfig, GridRowInstance } from "./GridRow";
 import { Create, CreateConfig } from "../../util";
 import type { TreeAdapter } from "../../ui/adapter/TreeAdapter";
 export { GridRowConfig };
-type FetchRecordsResult<T> = T[] | {
+export type GridFetchRecordsResult<T> = T[] | {
     records: T[];
     lastPage?: boolean;
     totalRecordCount?: number;
 };
-interface MappedGridRecord<T = any> extends DataAdapterRecord<T> {
+export interface MappedGridRecord<T = any> extends DataAdapterRecord<T> {
     row?: GridRowInstance;
     vdom?: any;
     fixedVdom?: any;
@@ -30,7 +30,7 @@ interface MappedGridRecord<T = any> extends DataAdapterRecord<T> {
     level?: number;
     group?: any;
 }
-interface GridDragEvent<T> extends DragEvent {
+export interface GridDragEvent<T> extends DragEvent {
     target: {
         recordBefore?: MappedGridRecord<T>;
         recordAfter?: MappedGridRecord<T>;
@@ -39,20 +39,20 @@ interface GridDragEvent<T> extends DragEvent {
         dropNextToTheRowAbove?: boolean | null;
     };
 }
-interface GridRowDragEvent<T> extends DragEvent {
+export interface GridRowDragEvent<T> extends DragEvent {
     target: {
         record: MappedGridRecord<T>;
         index: number;
     };
 }
-interface GridColumnDropEvent extends DragEvent {
+export interface GridColumnDropEvent extends DragEvent {
     target: {
         grid: any;
         instance: Instance;
         index: number;
     };
 }
-interface GridGroupingKey {
+export interface GridGroupingKey {
     [key: string]: Prop<any> | {
         value: Prop<any>;
         direction: SortDirection;
@@ -65,8 +65,8 @@ interface GroupingResult<T> {
     indexes: number[];
     records: MappedGridRecord<T>[];
 }
-type GridColumnAlignment = "left" | "right" | "center";
-interface GridGroupingConfig<T> {
+export type GridColumnAlignment = "left" | "right" | "center";
+export interface GridGroupingConfig<T> {
     key: GridGroupingKey;
     aggregates?: StructuredProp;
     showCaption?: boolean;
@@ -267,7 +267,7 @@ export interface GridConfig<T = any> extends StyledContainerConfig {
         sorters?: DataRecord[];
         sortField?: string;
         sortDirection?: string;
-    }, instance?: Instance) => FetchRecordsResult<T> | Promise<FetchRecordsResult<T>>;
+    }, instance?: Instance) => GridFetchRecordsResult<T> | Promise<GridFetchRecordsResult<T>>;
     /** Callback function to be executed when a row is double-clicked. */
     onRowDoubleClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
     /** Callback function to be executed on key down. Accepts instance of the currently focused record as the second argument. */

package/build/widgets/grid/TreeNode.d.ts

@@ -15,12 +15,18 @@ export interface TreeNodeConfig extends StyledContainerConfig {
     loading?: BooleanProp;
     /** Icon to be displayed. */
     icon?: StringProp;
+    /** Icon for items (sets leafIcon). */
+    itemIcon?: StringProp;
     /** Icon for leaf nodes. */
     leafIcon?: StringProp;
+    /** Icon displayed when the node is loading. */
+    loadingIcon?: string;
     /** Icon for open folder. */
     openFolderIcon?: StringProp;
     /** Icon for folder. */
     folderIcon?: StringProp;
+    /** Set to `true` to hide the icon. */
+    hideIcon?: boolean;
     /** Set to `true` to hide the arrow. */
     hideArrow?: BooleanProp;
 }

package/build/widgets/index.d.ts

@@ -27,6 +27,7 @@ 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";

package/build/widgets/index.js

@@ -28,6 +28,7 @@ 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";

package/build/widgets/nav/MenuItem.d.ts

@@ -1,10 +1,10 @@
-import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../HtmlElement";
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "../HtmlElement";
 import { RenderingContext } from "../../ui/RenderingContext";
 import { DropdownConfig } from "../overlay/Dropdown";
 import { KeyboardShortcut } from "../../ui/keyboardShortcuts";
 import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
 import { Config } from "../../ui/Prop";
-export interface MenuItemConfig extends HtmlElementConfig {
+export interface MenuItemConfig extends HtmlElementConfigBase {
     baseClass?: string;
     hoverFocusTimeout?: number;
     clickToOpen?: boolean;
@@ -31,6 +31,7 @@ export interface MenuItemConfig extends HtmlElementConfig {
     hideCursor?: boolean;
     dropdown?: any;
     onClick?: string | ((e: React.MouseEvent | null, instance: HtmlElementInstance<MenuItem>) => void);
+    onMouseDown?: string | ((e: React.MouseEvent, instance: HtmlElementInstance<MenuItem>) => void);
 }
 export declare class MenuItemInstance extends HtmlElementInstance<MenuItem> {
     horizontal?: boolean;

package/build/widgets/nav/Route.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/widgets/nav/Route.spec.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import { Route } from "./Route";
+import { Store } from "../../data/Store";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+import assert from "assert";
+describe("Route", () => {
+    it("matching works for ~/widgets/color-pickers", () => {
+        let widget = (_jsx("cx", { children: _jsx(Route, { url: "~/widgets/color-pickers", route: "~/widgets/color-pickers", children: _jsx("div", {}) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree));
+        assert.equal(tree.type, "div");
+    });
+});

package/build/widgets/nav/Scroller.d.ts

@@ -1,21 +1,19 @@
 import { VDOM } from "../../ui/Widget";
-import { Container, ContainerConfig } from "../../ui/Container";
+import { StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
 import { RenderingContext } from "../../ui/RenderingContext";
 import { Instance } from "../../ui/Instance";
 import { BooleanProp, StringProp } from "../../ui/Prop";
-export interface ScrollerConfig extends ContainerConfig {
-    /** Base CSS class. Default is `hscroller`. */
-    baseClass?: string;
+export interface ScrollerConfig extends StyledContainerConfig {
     horizontal?: BooleanProp;
     vertical?: BooleanProp;
     scrollIntoViewSelector?: StringProp;
 }
-export declare class Scroller extends Container {
+export declare class Scroller extends StyledContainerBase<ScrollerConfig> {
     baseClass: string;
-    styled: boolean;
     horizontal?: any;
     vertical?: any;
     scrollIntoViewSelector?: any;
+    constructor(config?: ScrollerConfig);
     init(): void;
     declareData(...args: any[]): void;
     render(context: RenderingContext, instance: Instance, key: string): import("react/jsx-runtime").JSX.Element;

package/build/widgets/nav/Scroller.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
 import { Icon } from "../Icon";
 import { VDOM } from "../../ui/Widget";
-import { Container } from "../../ui/Container";
+import { StyledContainerBase } from "../../ui/Container";
 import { ResizeManager } from "../../ui/ResizeManager";
 import { isString, scrollElementIntoView } from "../../util";
-export class Scroller extends Container {
+export class Scroller extends StyledContainerBase {
+    constructor(config) {
+        super(config);
+    }
     init() {
         if (!this.vertical)
             this.horizontal = true; //default
@@ -19,7 +23,6 @@ export class Scroller extends Container {
         return (_jsx(HScrollerComponent, { widget: this, data: instance.data, children: this.renderChildren(context, instance) }, key));
     }
 }
-Scroller.prototype.styled = true;
 Scroller.prototype.baseClass = "scroller";
 export class HScrollerComponent extends VDOM.Component {
     unsubscribeResize;

package/build/widgets/nav/Tab.d.ts

@@ -1,8 +1,8 @@
-import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../HtmlElement";
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "../HtmlElement";
 import { Instance } from "../../ui/Instance";
 import { RenderingContext } from "../../ui/RenderingContext";
 import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
-export interface TabConfig extends HtmlElementConfig {
+export interface TabConfig extends HtmlElementConfigBase {
     /** A value to be written to the `value` property if the tab is clicked. */
     tab?: Prop<string | number>;
     /**

package/build/widgets/overlay/ContextMenu.d.ts

@@ -1,9 +1,9 @@
-import { Dropdown, DropdownConfig } from "./Dropdown";
-import { View } from "../../data/View";
+import { Store } from "../../data/Store";
 import { Instance } from "../../ui/Instance";
+import { Dropdown, DropdownConfig } from "./Dropdown";
 export interface ContextMenuConfig extends DropdownConfig {
 }
 export declare class ContextMenu extends Dropdown {
     constructor(config?: ContextMenuConfig);
 }
-export declare const openContextMenu: (e: React.MouseEvent, content: any, storeOrInstance?: View | Instance, options?: any) => () => void;
+export declare const openContextMenu: (e: React.MouseEvent, content: any, storeOrInstance?: Store | Instance, options?: any) => () => void;

package/build/widgets/overlay/Overlay.d.ts

@@ -1,3 +1,4 @@
+import { Store } from "../../data/Store";
 import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
 import { Instance } from "../../ui/Instance";
 import { BooleanProp, NumberProp } from "../../ui/Prop";
@@ -124,7 +125,7 @@ export declare class OverlayBase<Config extends OverlayConfig = OverlayConfig, I
     handleMouseEnter(instance: InstanceType, component: any): void;
     getOverlayContainer(): HTMLElement;
     containerFactory(): HTMLElement;
-    open(storeOrInstance: any, options?: any): () => void;
+    open(storeOrInstance?: Store | Instance, options?: any): () => void;
     handleMove(e: any, instance: InstanceType, component: any): void;
     handleResize(e: any, instance: InstanceType, component: any): void;
 }

package/build/widgets/overlay/Overlay.js

@@ -7,9 +7,9 @@ import { FocusManager, offFocusOut, oneFocusOut } from "../../ui/FocusManager";
 import { Instance } from "../../ui/Instance";
 import { VDOM, Widget } from "../../ui/Widget";
 import { ZIndexManager } from "../../ui/ZIndexManager";
-import { getActiveElement } from "../../util";
 import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
 import { closest, isSelfOrDescendant } from "../../util/DOM";
+import { getActiveElement } from "../../util/getActiveElement";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
 import { isDataRecord } from "../../util/isDataRecord";
 import { isNumber } from "../../util/isNumber";

package/build.js

@@ -1,133 +1,133 @@
-const buildJS = require("cx-build-tools/buildJS"),
-   buildSCSS = require("cx-build-tools/buildSCSS"),
-   copyFiles = require("cx-build-tools/copyFiles"),
-   getPathResolver = require("cx-build-tools/getPathResolver"),
-   fs = require("fs"),
-   resolvePath = getPathResolver(__dirname),
-   cxSrc = getPathResolver(resolvePath("./src")),
-   cxBuild = getPathResolver(resolvePath("./build"));
-
-const entries = [
-   {
-      name: "util",
-      options: {
-         input: cxBuild("util/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "data",
-
-      options: {
-         input: cxBuild("data/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "ui",
-      options: {
-         input: cxBuild("ui/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "widgets",
-      options: {
-         input: cxBuild("widgets/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "svg",
-      options: {
-         input: cxBuild("svg/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "charts",
-      options: {
-         input: cxBuild("charts/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "hooks",
-      options: {
-         input: cxBuild("hooks/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "jsx-runtime",
-      options: {
-         input: cxBuild("jsx-runtime.js"),
-      },
-      output: {},
-   },
-];
-
-const externalPaths = {
-   [cxBuild("./util/")]: "cx/util",
-   [cxBuild("./data/")]: "cx/data",
-   [cxBuild("./ui/")]: "cx/ui",
-   [cxBuild("./widgets")]: "cx/widgets",
-   [cxBuild("./charts")]: "cx/charts",
-   [cxBuild("./svg/")]: "cx/svg",
-   [cxBuild("./hooks/")]: "cx/hooks",
-   [cxBuild("./jsx-runtime")]: "cx/jsx-runtime",
-};
-
-(async function buildAll() {
-   console.log("Building cx...");
-   try {
-      let distPath = resolvePath("./dist");
-      if (!fs.existsSync(distPath)) {
-         fs.mkdirSync(distPath);
-      }
-
-      // // Copy SCSS files from src to build
-      // copyFiles(cxSrc("."), cxBuild("."), ".scss");
-
-      await Promise.all([
-         buildJS(resolvePath("./src"), resolvePath("./dist"), entries, externalPaths),
-         buildSCSS([resolvePath("../cx-build-tools/reset.scss")], resolvePath("./dist/reset.css")),
-         buildSCSS(
-            [
-               cxSrc("variables.scss"),
-               resolvePath("../cx-build-tools/divide.scss"),
-               cxSrc("widgets/index.scss"),
-               cxSrc("ui/index.scss"),
-            ],
-            resolvePath("./dist/widgets.css"),
-         ),
-         buildSCSS(
-            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("charts/index.scss")],
-            resolvePath("./dist/charts.css"),
-         ),
-         buildSCSS(
-            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("svg/index.scss")],
-            resolvePath("./dist/svg.css"),
-         ),
-      ]);
-   } catch (err) {
-      console.log("Build error.", err);
-   }
-
-   // console.log("Building cx-redux...");
-   // await build(
-   //    resolvePath("../../cx-redux/src"),
-   //    resolvePath("../../cx-redux/dist"),
-   //    [
-   //       {
-   //          name: "index",
-   //          options: {
-   //             input: [resolvePath("../../cx-redux/src/index.js")]
-   //          },
-   //          output: {}
-   //       }
-   //    ],
-   //    null,
-   //    ["redux", "cx/data"]
-   // );
-})();
+const buildJS = require("cx-build-tools/buildJS"),
+   buildSCSS = require("cx-build-tools/buildSCSS"),
+   copyFiles = require("cx-build-tools/copyFiles"),
+   getPathResolver = require("cx-build-tools/getPathResolver"),
+   fs = require("fs"),
+   resolvePath = getPathResolver(__dirname),
+   cxSrc = getPathResolver(resolvePath("./src")),
+   cxBuild = getPathResolver(resolvePath("./build"));
+
+const entries = [
+   {
+      name: "util",
+      options: {
+         input: cxBuild("util/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "data",
+
+      options: {
+         input: cxBuild("data/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "ui",
+      options: {
+         input: cxBuild("ui/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "widgets",
+      options: {
+         input: cxBuild("widgets/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "svg",
+      options: {
+         input: cxBuild("svg/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "charts",
+      options: {
+         input: cxBuild("charts/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "hooks",
+      options: {
+         input: cxBuild("hooks/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "jsx-runtime",
+      options: {
+         input: cxBuild("jsx-runtime.js"),
+      },
+      output: {},
+   },
+];
+
+const externalPaths = {
+   [cxBuild("./util/")]: "cx/util",
+   [cxBuild("./data/")]: "cx/data",
+   [cxBuild("./ui/")]: "cx/ui",
+   [cxBuild("./widgets")]: "cx/widgets",
+   [cxBuild("./charts")]: "cx/charts",
+   [cxBuild("./svg/")]: "cx/svg",
+   [cxBuild("./hooks/")]: "cx/hooks",
+   [cxBuild("./jsx-runtime")]: "cx/jsx-runtime",
+};
+
+(async function buildAll() {
+   console.log("Building cx...");
+   try {
+      let distPath = resolvePath("./dist");
+      if (!fs.existsSync(distPath)) {
+         fs.mkdirSync(distPath);
+      }
+
+      // // Copy SCSS files from src to build
+      // copyFiles(cxSrc("."), cxBuild("."), ".scss");
+
+      await Promise.all([
+         buildJS(resolvePath("./src"), resolvePath("./dist"), entries, externalPaths),
+         buildSCSS([resolvePath("../cx-build-tools/reset.scss")], resolvePath("./dist/reset.css")),
+         buildSCSS(
+            [
+               cxSrc("variables.scss"),
+               resolvePath("../cx-build-tools/divide.scss"),
+               cxSrc("widgets/index.scss"),
+               cxSrc("ui/index.scss"),
+            ],
+            resolvePath("./dist/widgets.css"),
+         ),
+         buildSCSS(
+            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("charts/index.scss")],
+            resolvePath("./dist/charts.css"),
+         ),
+         buildSCSS(
+            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("svg/index.scss")],
+            resolvePath("./dist/svg.css"),
+         ),
+      ]);
+   } catch (err) {
+      console.log("Build error.", err);
+   }
+
+   // console.log("Building cx-redux...");
+   // await build(
+   //    resolvePath("../../cx-redux/src"),
+   //    resolvePath("../../cx-redux/dist"),
+   //    [
+   //       {
+   //          name: "index",
+   //          options: {
+   //             input: [resolvePath("../../cx-redux/src/index.js")]
+   //          },
+   //          output: {}
+   //       }
+   //    ],
+   //    null,
+   //    ["redux", "cx/data"]
+   // );
+})();

package/dist/data.js

@@ -1663,7 +1663,7 @@ function updateTree(array, updateCallback, itemFilter, childrenField, removeFilt
 	);
 }
 
-function removeTreeNodes(array, criteria, childrenField = "$children") {
+function removeTreeNodes(array, criteria, childrenField) {
 	return updateTree(
 		array,
 		(x) => x,
@@ -1673,7 +1673,7 @@ function removeTreeNodes(array, criteria, childrenField = "$children") {
 	);
 }
 
-function findTreeNode(array, criteria, childrenField = "$children") {
+function findTreeNode(array, criteria, childrenField) {
 	if (!Array.isArray(array)) return false;
 	for (const node of array) {
 		if (criteria(node)) return node;

package/dist/jsx-runtime.js

@@ -1,5 +1,5 @@
 import { isArray, isString } from "cx/util";
-import { HtmlElement } from "cx/widgets";
+import { HtmlElement, ReactElementWrapper } from "cx/widgets";
 
 function jsx(typeName, props, key) {
 	if (isArray(typeName)) return typeName;
@@ -13,6 +13,11 @@ function jsx(typeName, props, key) {
 		props.tag = typeName;
 		typeName = HtmlElement;
 	}
+	// React components (functions/classes without isComponentType and not CxJS functional components) should go through ReactElementWrapper
+	else if (typeof typeName === "function" && !typeName.isComponentType && !typeName.$isComponentFactory) {
+		props.componentType = typeName;
+		typeName = ReactElementWrapper;
+	}
 	return {
 		$type: typeName,
 		...props,