@hpcc-js/dgrid2 3.2.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/dgrid2",
-    "version": "3.2.0",
+    "version": "3.2.1",
     "description": "hpcc-js - DGrid2",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -37,14 +37,20 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^3.3.0",
-        "@hpcc-js/util": "^3.3.0"
+        "@hpcc-js/common": "^3.3.1",
+        "@hpcc-js/util": "^3.3.1"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.4.0",
-        "@preact/preset-vite": "2.9.2",
-        "preact": "10.25.0",
-        "react-data-grid": "7.0.0-beta.47"
+        "@hpcc-js/esbuild-plugins": "^1.4.1",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "@vitejs/plugin-react": "4.3.4",
+        "react-data-grid": "7.0.0-beta.47",
+        "vite-plugin-html": "3.2.2"
     },
     "repository": {
         "type": "git",
@@ -57,5 +63,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "145a4d4c8189c70f08e9804e63959d6dd398bd9f"
+    "gitHead": "521692e7cfd01c274d5cfff0c54e79d1686d3dd6"
 }

package/src/hooks.ts

@@ -1,4 +1,4 @@
-import React from "preact/compat";
+import React from "react";
 import { Widget } from "@hpcc-js/common";
 
 export function useData(widget: Widget): [string[], Array<string | number>[]] {

package/src/reactTable.tsx

@@ -1,5 +1,4 @@
-import { FunctionComponent } from "preact";
-import { useCallback, useEffect, useState } from "preact/hooks";
+import React, { FunctionComponent, useCallback, useEffect, useState } from "react";
 import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
 import { format, timeFormat, timeParse } from "@hpcc-js/common";
 import { useData } from "./hooks.ts";

package/src/table.ts

@@ -1,4 +1,5 @@
-import { render, createElement } from "preact";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
 import { HTMLWidget } from "@hpcc-js/common";
 import { ReactTable } from "./reactTable.tsx";
 
@@ -9,6 +10,8 @@ export type ColumnType = "boolean" | "number" | "string" | "time";
 export class Table extends HTMLWidget {
 
     protected _div;
+    protected _root: any;
+    protected _component: any;
 
     constructor() {
         super();
@@ -57,13 +60,15 @@ export class Table extends HTMLWidget {
             .append("div")
             .style("display", "grid")
             ;
+        this._root = createRoot(this._div.node(), { identifierPrefix: this.id() });
+        this._component = createElement(ReactTable, { table: this });
     }
 
     update(domNode, element) {
         super.update(domNode, element);
         this._div.style("width", this.width() + "px");
         this._div.style("height", this.height() + "px");
-        render(createElement(ReactTable, { table: this }), this._div.node());
+        this._root.render(this._component);
     }
 
     exit(domNode, element) {

package/types/reactTable.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "preact";
+import { FunctionComponent } from "react";
 import type { Table } from "./table.ts";
 import "react-data-grid/lib/styles.css";
 export type QuerySortItem = {

package/types/table.d.ts

@@ -3,6 +3,8 @@ import "./table.css";
 export type ColumnType = "boolean" | "number" | "string" | "time";
 export declare class Table extends HTMLWidget {
     protected _div: any;
+    protected _root: any;
+    protected _component: any;
     constructor();
     columnType(column: string): ColumnType;
     columnType(column: string, type: ColumnType): this;