React 18 (#245)

* Update to React 18

* Malloy 0.0.214

* Fix typing

package.json

@@ -35,19 +35,19 @@
     "malloy-packages": "./scripts/malloy-packages.ts"
   },
   "dependencies": {
-    "@malloydata/db-bigquery": "0.0.209",
-    "@malloydata/db-duckdb": "0.0.209",
-    "@malloydata/db-postgres": "0.0.209",
-    "@malloydata/malloy": "0.0.209",
+    "@malloydata/db-bigquery": "0.0.214",
+    "@malloydata/db-duckdb": "0.0.214",
+    "@malloydata/db-postgres": "0.0.214",
+    "@malloydata/malloy": "0.0.214",
     "@malloydata/query-composer": "*",
-    "@malloydata/render": "0.0.209",
+    "@malloydata/render": "0.0.214",
     "@popperjs/core": "^2.11.4",
     "cors": "^2.8.5",
     "duckdb": "^0.9.2",
     "express": "^4.21.1",
     "mdast-comment-marker": "^2.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hotkeys": "^2.0.0",
     "react-query": "^3.34.16",
     "react-router-dom": "^6.4.3",
@@ -65,8 +65,8 @@
     "@types/jest": "^29.5.13",
     "@types/node": "^18.11.11",
     "@types/node-fetch": "^2.6.2",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/styled-components": "^5.1.19",
     "@types/tar-stream": "^2.2.2",
     "@typescript-eslint/eslint-plugin": "v6.21.0",

packages/query-composer/example/example.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {ExploreQueryEditor, useQueryBuilder, useRunQuery} from '../src/index';
 
 import {model as exampleModel, modelPath, topValues} from './example_model';
@@ -101,4 +101,5 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-ReactDOM.render(<App />, document.getElementById('app'));
+const root = createRoot(document.getElementById('app')!);
+root.render(<App />);

packages/query-composer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/query-composer",
-  "version": "0.0.209",
+  "version": "0.0.214",
   "description": "A query composer component for Malloy",
   "main": "dist/cjs/index.cjs",
   "type": "module",
@@ -37,8 +37,8 @@
   },
   "devDependencies": {
     "@types/moment": "^2.13.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.25",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.1",
     "jest": "^29.3.1",
     "ts-jest": "^29.0.5",
@@ -49,8 +49,8 @@
   "peerDependencies": {
     "@malloydata/malloy": ">=0.0.209",
     "@malloydata/render": ">=0.0.209",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": ">=18",
+    "react-dom": ">=18",
     "styled-components": "^5.3.3"
   }
 }

packages/query-composer/src/components/GroupByContextBar/GroupByContextBar.tsx

@@ -73,7 +73,7 @@ export const GroupByContextBar: React.FC<GroupByContextBarProps> = ({
   const [searchTerm, setSearchTerm] = useState('');
 
   const maybeSelectField = useCallback(
-    (path, field) => {
+    (path: string, field: FieldDef) => {
       if (field.type === 'date') {
         setSelectingGranularity({field, path});
       } else if (field.type === 'timestamp') {

packages/query-composer/src/components/SelectContextBar/SelectContextBar.tsx

@@ -73,7 +73,7 @@ export const SelectContextBar: React.FC<SelectContextBarProps> = ({
   const [searchTerm, setSearchTerm] = useState('');
 
   const maybeSelectField = useCallback(
-    (path, field) => {
+    (path: string, field: FieldDef) => {
       if (field.type === 'date') {
         setSelectingGranularity({field, path});
       } else if (field.type === 'timestamp') {

src/core/markdown.ts

@@ -148,7 +148,8 @@ export interface ListItem {
 
 export interface Table {
   type: 'table';
-  align: ('left' | 'right' | 'center' | null)[];
+  align: ('left' | 'right' | 'center' | undefined) &
+    ('left' | 'right' | 'center' | null)[];
   children: Markdown[];
 }
 

src/index.tsx

@@ -22,7 +22,7 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
 import {QueryClient, QueryClientProvider} from 'react-query';
@@ -45,13 +45,13 @@ const router = createHashRouter([
   },
 ]);
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root')!);
+root.render(
   <React.StrictMode>
     <QueryClientProvider client={client}>
       <RouterProvider router={router} />
     </QueryClientProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function