@hpcc-js/dgrid2 2.5.0 → 3.1.1

package/package.json

@@ -1,52 +1,48 @@
 {
     "name": "@hpcc-js/dgrid2",
-    "version": "2.5.0",
+    "version": "3.1.1",
     "description": "hpcc-js - DGrid2",
-    "main": "dist/index.js",
-    "module": "dist/index.es6",
-    "unpkg": "dist/index.min.js",
-    "jsdelivr": "dist/index.min.js",
-    "types": "types/index.d.ts",
-    "typesVersions": {
-        "<3.8": {
-            "*": [
-                "types-3.4/index.d.ts"
-            ]
-        }
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./dist/*": "./dist/*"
     },
+    "module": "./dist/index.js",
+    "browser": "./dist/index.js",
+    "types": "./types/index.d.ts",
     "files": [
         "dist/*",
+        "src/*",
         "types/*",
-        "types-3.4/*",
-        "src/*"
+        "font-awesome/**/*"
     ],
     "scripts": {
-        "clean": "rimraf --glob lib* types dist *.tsbuildinfo",
-        "compile-es6": "tsc --module es6 --outDir ./lib-es6",
-        "compile-es6-watch": "npm run compile-es6 -- -w",
-        "compile-umd": "tsc --module umd --outDir ./lib-umd",
-        "compile-umd-watch": "npm run compile-umd -- -w",
-        "bundle": "rollup -c",
-        "bundle-watch": "npm run bundle -- -w",
-        "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-        "gen-legacy-types": "downlevel-dts ./types ./types-3.4",
-        "build": "npm run compile-es6 && npm run bundle",
-        "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
-        "serve-vite": "vite --config ../../vite.config.js",
-        "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
-        "lint": "eslint src/**/*.ts",
+        "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
+        "bundle": "node esbuild.js",
+        "bundle-watch": "npm run bundle -- --development --watch",
+        "gen-types": "tsc --project tsconfig.json",
+        "gen-types-watch": "npm run gen-types -- --watch",
+        "build": "run-p gen-types bundle",
+        "lint": "eslint ./src",
+        "lint-fix": "eslint --fix src/**/*.ts",
         "docs": "typedoc --options tdoptions.json .",
-        "update": "npx --yes npm-check-updates -u -t minor"
+        "test-browser": "vitest run --project browser",
+        "test": "vitest run",
+        "coverage": "vitest run --coverage",
+        "update": "npx --yes npm-check-updates -u -t minor",
+        "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^2.73.0",
-        "@hpcc-js/preact-shim": "^2.18.0",
-        "@hpcc-js/util": "^2.53.0"
+        "@hpcc-js/common": "^3.2.0",
+        "@hpcc-js/util": "^3.2.0"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.12.0",
-        "react-data-grid": "7.0.0-canary.49",
-        "tslib": "2.7.0"
+        "@hpcc-js/esbuild-plugins": "^1.3.0",
+        "@hpcc-js/preact-shim": "^3.0.0",
+        "react-data-grid": "7.0.0-beta.47"
     },
     "repository": {
         "type": "git",
@@ -59,5 +55,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "fbbef050700b0e9d76ef99714856383d95155149"
+    "gitHead": "b4f63e027feea45ebdfc578ef9c85d107bd97322"
 }

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/dgrid2";
-export const PKG_VERSION = "2.5.0";
-export const BUILD_VERSION = "2.107.0";
+export const PKG_VERSION = "3.1.1";
+export const BUILD_VERSION = "3.2.1";

package/src/index.ts

@@ -1,2 +1,2 @@
-export * from "./__package__";
-export * from "./table";
+export * from "./__package__.ts";
+export * from "./table.ts";

package/src/reactTable.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
 import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
 import { format, timeFormat, timeParse } from "@hpcc-js/common";
-import { useData } from "./hooks";
-import type { Table } from "./table";
+import { useData } from "./hooks.ts";
+import type { Table } from "./table.ts";
+
+import "react-data-grid/lib/styles.css";
 
 export type QuerySortItem = { attribute: string, descending: boolean };
 function copyAndSort<T>(items: T[], attribute: string, descending?: boolean): T[] {
@@ -31,7 +33,7 @@ const EmptyRowsRenderer: React.FunctionComponent<EmptyRowsRendererProps> = ({
 };
 
 interface ColumnEx<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
-    renderCell?: (props: any) => React.JSX.Element;
+    renderCell?: (props: any) => any;
     __hpcc_pattern?: ReturnType<typeof timeParse>;
     __hpcc_format?: ReturnType<typeof format> | ReturnType<typeof timeFormat>;
 }
@@ -59,7 +61,7 @@ export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
     //  Columns  ---
     React.useEffect(() => {
         setListColumns([
-            ...multiSelect ? [SelectColumn] : [],
+            ...multiSelect ? [SelectColumn as ColumnEx<any[]>] : [],
             ...columns.map((column): ColumnEx<any[]> => {
                 const type = columnTypes[column] ?? "string";
                 let formatter;
@@ -143,13 +145,13 @@ export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
         rows={rows}
         rowKeyGetter={rowKeyGetter}
         rowHeight={20}
-        emptyRowsRenderer={() => <EmptyRowsRenderer message={table.noDataMessage()} />}
+        renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> as any }}
         className={table.darkMode() ? "rdg-dark" : "rdg-light"}
         sortColumns={sortColumn ? [sortColumn] : []}
         onSortColumnsChange={onSortColumnsChange}
         selectedRows={selectedRows}
         onSelectedRowsChange={multiSelect ? onSelectedRowsChange : undefined}
-        onRowClick={multiSelect ? undefined : (rowIdx, row, column) => onCellClick(row, column)}
+        onCellClick={multiSelect ? undefined : (args, event) => onCellClick(args.row, args.column)}
         aria-describedby={""}
         aria-label={""}
         aria-labelledby={""}

package/src/table.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { HTMLWidget, publish } from "@hpcc-js/common";
+import { HTMLWidget } from "@hpcc-js/common";
 import { render, unmountComponentAtNode } from "react-dom";
-import { ReactTable } from "./reactTable";
+import { ReactTable } from "./reactTable.tsx";
 
-import "../src/table.css";
+import "./table.css";
 
 export type ColumnType = "boolean" | "number" | "string" | "time";
 
@@ -15,19 +15,6 @@ export class Table extends HTMLWidget {
         super();
     }
 
-    @publish("...empty...", "string", "No Data Message")
-    noDataMessage: publish<this, string>;
-    @publish(false, "boolean", "Dark Mode")
-    darkMode: publish<this, boolean>;
-    @publish(false, "boolean", "Multiple Selection")
-    multiSelect: publish<this, boolean>;
-    @publish({}, "object", "Column Types (\"boolean\" | \"number\" | \"string\" | \"time\"")
-    columnTypes: publish<this, { [column: string]: ColumnType }>;
-    @publish({}, "object", "Column Patterns")
-    columnPatterns: publish<this, { [column: string]: string }>;
-    @publish({}, "object", "Column Formats")
-    columnFormats: publish<this, { [column: string]: string }>;
-
     columnType(column: string): ColumnType;
     columnType(column: string, type: ColumnType): this;
     columnType(column: string, type?: ColumnType): ColumnType | this {
@@ -69,6 +56,7 @@ export class Table extends HTMLWidget {
         super.enter(domNode, element);
         this._div = element
             .append("div")
+            .style("display", "grid")
             ;
     }
 
@@ -90,3 +78,26 @@ export class Table extends HTMLWidget {
     }
 }
 Table.prototype._class += " dgrid2_Table";
+
+export interface Table {
+    noDataMessage(): string;
+    noDataMessage(_: string): this;
+    darkMode(): boolean;
+    darkMode(_: boolean): this;
+    multiSelect(): boolean;
+    multiSelect(_: boolean): this;
+    columnTypes(): { [column: string]: ColumnType };
+    columnTypes(_: { [column: string]: ColumnType }): this;
+    columnPatterns(): { [column: string]: string };
+    columnPatterns(_: { [column: string]: string }): this;
+    columnFormats(): { [column: string]: string };
+    columnFormats(_: { [column: string]: string }): this;
+}
+
+Table.prototype.publish("noDataMessage", "...empty...", "string", "No Data Message");
+Table.prototype.publish("darkMode", false, "boolean", "Dark Mode");
+Table.prototype.publish("multiSelect", false, "boolean", "Multiple Selection");
+Table.prototype.publish("columnTypes", {}, "object", "Column Types (\"boolean\" | \"number\" | \"string\" | \"time\"");
+Table.prototype.publish("columnPatterns", {}, "object", "Column Patterns");
+Table.prototype.publish("columnFormats", {}, "object", "Column Formats");
+

package/types/__package__.d.ts

@@ -1,4 +1,3 @@
 export declare const PKG_NAME = "@hpcc-js/dgrid2";
-export declare const PKG_VERSION = "2.5.0";
-export declare const BUILD_VERSION = "2.107.0";
-//# sourceMappingURL=__package__.d.ts.map
+export declare const PKG_VERSION = "3.1.1";
+export declare const BUILD_VERSION = "3.2.1";

package/types/hooks.d.ts

@@ -1,3 +1,2 @@
 import { Widget } from "@hpcc-js/common";
 export declare function useData(widget: Widget): [string[], Array<string | number>[]];
-//# sourceMappingURL=hooks.d.ts.map

package/types/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./__package__";
-export * from "./table";
-//# sourceMappingURL=index.d.ts.map
+export * from "./__package__.ts";
+export * from "./table.ts";

package/types/reactTable.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-import type { Table } from "./table";
+import type { Table } from "./table.ts";
+import "react-data-grid/lib/styles.css";
 export type QuerySortItem = {
     attribute: string;
     descending: boolean;
@@ -9,4 +10,3 @@ export interface ReactTableProps {
     sort?: QuerySortItem;
 }
 export declare const ReactTable: React.FunctionComponent<ReactTableProps>;
-//# sourceMappingURL=reactTable.d.ts.map

package/types/table.d.ts

@@ -1,21 +1,9 @@
-import { HTMLWidget, publish } from "@hpcc-js/common";
-import "../src/table.css";
+import { HTMLWidget } from "@hpcc-js/common";
+import "./table.css";
 export type ColumnType = "boolean" | "number" | "string" | "time";
 export declare class Table extends HTMLWidget {
     protected _div: any;
     constructor();
-    noDataMessage: publish<this, string>;
-    darkMode: publish<this, boolean>;
-    multiSelect: publish<this, boolean>;
-    columnTypes: publish<this, {
-        [column: string]: ColumnType;
-    }>;
-    columnPatterns: publish<this, {
-        [column: string]: string;
-    }>;
-    columnFormats: publish<this, {
-        [column: string]: string;
-    }>;
     columnType(column: string): ColumnType;
     columnType(column: string, type: ColumnType): this;
     columnPattern(column: string): string;
@@ -30,4 +18,29 @@ export declare class Table extends HTMLWidget {
     exit(domNode: any, element: any): void;
     click(row: any, col: any, sel: any): void;
 }
-//# sourceMappingURL=table.d.ts.map
+export interface Table {
+    noDataMessage(): string;
+    noDataMessage(_: string): this;
+    darkMode(): boolean;
+    darkMode(_: boolean): this;
+    multiSelect(): boolean;
+    multiSelect(_: boolean): this;
+    columnTypes(): {
+        [column: string]: ColumnType;
+    };
+    columnTypes(_: {
+        [column: string]: ColumnType;
+    }): this;
+    columnPatterns(): {
+        [column: string]: string;
+    };
+    columnPatterns(_: {
+        [column: string]: string;
+    }): this;
+    columnFormats(): {
+        [column: string]: string;
+    };
+    columnFormats(_: {
+        [column: string]: string;
+    }): this;
+}