Upgrade to React 18.2.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "roamjs-components",
   "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
-  "version": "0.85.1",
+  "version": "0.86.0-alpha.3",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
@@ -26,8 +26,8 @@
     "@types/jsdom": "^20.0.1",
     "@types/marked": "^4.0.3",
     "@types/nanoid": "2.0.0",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.13",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "@types/use-sync-external-store": "^0.0.3",
     "chrono-node": "2.3.0",
     "crypto-js": "3.1.9-1",
@@ -40,14 +40,13 @@
     "marked": "4.0.16",
     "marked-react": "1.1.2",
     "nanoid": "2.0.4",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "tslib": "2.2.0",
     "use-sync-external-store": "^1.2.0"
   },
   "dependencies": {
     "@samepage/scripts": "^0.74.2",
-    "aws-sdk-plus": "^0.5.3",
     "color": "^4.0.1",
     "date-fns": "^2.27.0",
     "edn-data": "^1.0.0",
@@ -68,7 +67,8 @@
     "http-server": "^14.1.1",
     "prettier": "^2.3.1",
     "tslint-config-prettier": "^1.18.0",
-    "tslint-react-hooks": "^2.2.2"
+    "tslint-react-hooks": "^2.2.2",
+    "dotenv": "16.3.1"
   },
   "engines": {
     "npm": ">=7.0.0",
@@ -78,9 +78,17 @@
     "roamjs": "./scripts/index.js"
   },
   "overrides": {
-    "@testing-library/react": {
-      "react": "17.0.2",
-      "react-dom": "17.0.2"
+    "@blueprintjs/core": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@blueprintjs/datetime": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@blueprintjs/select": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
     }
   },
   "samepage": {

patches/@blueprintjs+core+3.50.4.patch

@@ -0,0 +1,48 @@
+diff --git a/node_modules/@blueprintjs/core/lib/esm/components/alert/alert.d.ts b/node_modules/@blueprintjs/core/lib/esm/components/alert/alert.d.ts
+index 09b06be..f74f6a3 100644
+--- a/node_modules/@blueprintjs/core/lib/esm/components/alert/alert.d.ts
++++ b/node_modules/@blueprintjs/core/lib/esm/components/alert/alert.d.ts
+@@ -5,6 +5,7 @@ import { IOverlayLifecycleProps } from "../overlay/overlay";
+ export declare type AlertProps = IAlertProps;
+ /** @deprecated use AlertProps */
+ export interface IAlertProps extends IOverlayLifecycleProps, Props {
++    children?: React.ReactNode;
+     /**
+      * Whether pressing <kbd>escape</kbd> when focused on the Alert should cancel the alert.
+      * If this prop is enabled, then either `onCancel` or `onClose` must also be defined.
+diff --git a/node_modules/@blueprintjs/core/lib/esm/components/dialog/dialog.d.ts b/node_modules/@blueprintjs/core/lib/esm/components/dialog/dialog.d.ts
+index e90ee31..3e4f4ef 100644
+--- a/node_modules/@blueprintjs/core/lib/esm/components/dialog/dialog.d.ts
++++ b/node_modules/@blueprintjs/core/lib/esm/components/dialog/dialog.d.ts
+@@ -6,6 +6,7 @@ import { IBackdropProps, OverlayableProps } from "../overlay/overlay";
+ export declare type DialogProps = IDialogProps;
+ /** @deprecated use DialogProps */
+ export interface IDialogProps extends OverlayableProps, IBackdropProps, Props {
++    children?: React.ReactNode;
+     /**
+      * Toggles the visibility of the overlay and its children.
+      * This prop is required because the component is controlled.
+diff --git a/node_modules/@blueprintjs/core/lib/esm/components/tabs/tabs.d.ts b/node_modules/@blueprintjs/core/lib/esm/components/tabs/tabs.d.ts
+index 2ca5fe5..870a32e 100644
+--- a/node_modules/@blueprintjs/core/lib/esm/components/tabs/tabs.d.ts
++++ b/node_modules/@blueprintjs/core/lib/esm/components/tabs/tabs.d.ts
+@@ -6,6 +6,7 @@ export declare const Expander: React.FunctionComponent;
+ export declare type TabsProps = ITabsProps;
+ /** @deprecated use TabsProps */
+ export interface ITabsProps extends Props {
++    children?: React.ReactNode;
+     /**
+      * Whether the selected tab indicator should animate its movement.
+      *
+diff --git a/node_modules/@blueprintjs/core/lib/esm/components/tooltip/tooltip.d.ts b/node_modules/@blueprintjs/core/lib/esm/components/tooltip/tooltip.d.ts
+index 94f4af9..4db48a9 100644
+--- a/node_modules/@blueprintjs/core/lib/esm/components/tooltip/tooltip.d.ts
++++ b/node_modules/@blueprintjs/core/lib/esm/components/tooltip/tooltip.d.ts
+@@ -6,6 +6,7 @@ import { IPopoverSharedProps } from "../popover/popoverSharedProps";
+ export declare type TooltipProps = ITooltipProps;
+ /** @deprecated use TooltipProps */
+ export interface ITooltipProps extends IPopoverSharedProps, IntentProps {
++    children?: React.ReactNode;
+     /**
+      * The content that will be displayed inside of the tooltip.
+      */

patches/@blueprintjs+select+3.18.6.patch

@@ -0,0 +1,12 @@
+diff --git a/node_modules/@blueprintjs/select/lib/esm/components/select/select.d.ts b/node_modules/@blueprintjs/select/lib/esm/components/select/select.d.ts
+index f8b9bc6..ee0b6da 100644
+--- a/node_modules/@blueprintjs/select/lib/esm/components/select/select.d.ts
++++ b/node_modules/@blueprintjs/select/lib/esm/components/select/select.d.ts
+@@ -4,6 +4,7 @@ import { IListItemsProps } from "../../common";
+ export declare type SelectProps<T> = ISelectProps<T>;
+ /** @deprecated use SelectProps */
+ export interface ISelectProps<T> extends IListItemsProps<T> {
++    children?: React.ReactNode;
+     /**
+      * Whether the component should take up the full width of its container.
+      * This overrides `popoverProps.fill`. You also have to ensure that the child

src/components.tsx

@@ -12,6 +12,7 @@ import runExtension from "./util/runExtension";
 
 import { createBlock } from "./writes";
 import MenuItemSelect from "./components/MenuItemSelect";
+import TimePanel from "./components/ConfigPanels/TimePanel";
 
 // const blockRender = (Component: React.FC) => {
 //   const block = window.roamAlphaAPI.ui.getFocusedBlock();
@@ -214,6 +215,47 @@ const components = [
       }),
     label: "PageInput",
   },
+  {
+    callback: () =>
+      rootRender(() => {
+        const [value] = useState(new Date());
+        const [uid, setUid] = useState<string>("");
+
+        React.useEffect(() => {
+          const createUid = async () => {
+            const currentPageUid =
+              (await window.roamAlphaAPI.ui.mainWindow.getOpenPageOrBlockUid()) ||
+              window.roamAlphaAPI.util.dateToPageUid(new Date());
+
+            if (!currentPageUid) throw new Error("No current page uid");
+            console.log(currentPageUid);
+            const newUid = await createBlock({
+              parentUid: currentPageUid,
+              node: { text: "time-field" },
+            });
+            setUid(newUid);
+          };
+          createUid();
+        }, []);
+
+        if (!uid) return <div>Loading...</div>;
+
+        return (
+          <>
+            <div>Selected time: {value.toLocaleTimeString()}</div>
+            <TimePanel
+              title="time-field"
+              uid={uid}
+              parentUid="test-parent-uid"
+              order={0}
+              description="Select a time"
+              defaultValue={value}
+            />
+          </>
+        );
+      }),
+    label: "TimePanel",
+  },
 ];
 
 export default runExtension(async (args) => {
@@ -229,6 +271,7 @@ export default runExtension(async (args) => {
       FormDialog,
       PageInput,
       renderToast,
+      TimePanel,
     },
     util: {
       renderOverlay,

src/components/BlockErrorBoundary.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import createBlock from "../writes/createBlock";
 
-type BlockErrorBoundaryProps = { blockUid: string; message: string };
+type BlockErrorBoundaryProps = {
+  blockUid: string;
+  message: string;
+  children: React.ReactNode;
+};
 type BlockErrorBoundaryState = { hasError: boolean };
 
 class BlockErrorBoundary extends React.Component<

src/components/ComponentContainer.tsx

@@ -8,6 +8,7 @@ import { OnloadArgs } from "../types/native";
 const ComponentContainer: React.FunctionComponent<{
   blockId?: string;
   className?: string;
+  children?: React.ReactNode;
 }> = ({ blockId, className, children }) => {
   const [showIcons, setShowIcons] = useState(false);
   const appear = useCallback(() => setShowIcons(true), [setShowIcons]);

src/components/ConfigPanels/OauthPanel.tsx

@@ -27,7 +27,7 @@ const OauthPanel: FieldPanel<OauthField> = ({ uid, parentUid, options }) => {
       : []
   );
   const onCheck = useCallback(
-    (e) => {
+    (e: React.ChangeEvent<HTMLInputElement>) => {
       const checked = (e.target as HTMLInputElement).checked;
       setUseLocal(checked);
       if (checked) {

src/components/CursorMenu.tsx

@@ -147,7 +147,7 @@ const CursorMenu = <T extends Record<string, string>>({
     [filter, initialItems]
   );
   const onSelect = useCallback(
-    (item) => {
+    (item: { text: string; id: string } & T) => {
       if (menuRef.current) {
         onItemSelect(item);
         onClose();

src/components/MenuItemSelect.tsx

@@ -1,5 +1,10 @@
 import { Button, ButtonProps, MenuItem } from "@blueprintjs/core";
-import { SelectProps, Select, ICreateNewItem } from "@blueprintjs/select";
+import {
+  SelectProps,
+  Select,
+  ICreateNewItem,
+  isCreateNewItem,
+} from "@blueprintjs/select";
 import React, { ReactText, ButtonHTMLAttributes, ReactNode } from "react";
 
 type ActiveItem<T> = T | ICreateNewItem | null | undefined;
@@ -38,7 +43,7 @@ const MenuItemSelect = <T extends ReactText>(
   const defaultButton = (
     <Button
       text={
-        activeItem ? (
+        activeItem && !isCreateNewItem(activeItem) ? (
           transformItem ? (
             transformItem(activeItem as T)
           ) : (