roamjs-components 0.86.0-alpha → 0.86.0-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "roamjs-components",
   "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
-  "version": "0.86.0-alpha",
+  "version": "0.86.0-alpha.2",
   "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 || ^18.2.0",
-    "@types/react-dom": "^17.0.13 || ^18.2.0",
+    "@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 || ^18.2.0",
-    "react-dom": "^17.0.2 || ^18.2.0",
+    "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": {

package/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.
+      */

package/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

package/src/components/AutocompleteInput.tsx

@@ -1,248 +1,248 @@
-import {
-  InputGroup,
-  Menu,
-  MenuItem,
-  PopoverPosition,
-  Popover,
-  Button,
-  TextArea,
-} from "@blueprintjs/core";
-import React, {
-  useState,
-  useCallback,
-  useMemo,
-  useRef,
-  useEffect,
-} from "react";
-import useArrowKeyDown from "../hooks/useArrowKeyDown";
-import fuzzy from "fuzzy";
-
-type FilterOptions<T> = (options: T[], query: string) => T[];
-type OnNewItem<T> = (s: string) => T;
-type ItemToQuery<T> = (t?: T) => string;
-
-export type AutocompleteInputProps<T = string> = {
-  value?: T;
-  setValue: (q: T) => void;
-  showButton?: boolean;
-  onBlur?: (v: string) => void;
-  onConfirm?: () => void;
-  options?: T[];
-  placeholder?: string;
-  autoFocus?: boolean;
-  multiline?: boolean;
-  id?: string;
-  filterOptions?: FilterOptions<T>;
-  itemToQuery?: ItemToQuery<T>;
-  renderItem?: (props: {
-    item: T;
-    onClick: () => void;
-    active: boolean;
-  }) => React.ReactElement;
-  onNewItem?: OnNewItem<T>;
-  disabled?: boolean;
-  maxItemsDisplayed?: number;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-const AutocompleteInput = <T extends unknown = string>({
-  value,
-  setValue,
-  onBlur,
-  onConfirm,
-  showButton,
-  options = [],
-  placeholder = "Enter value",
-  autoFocus,
-  multiline,
-  id,
-  filterOptions: _filterOptions,
-  itemToQuery: _itemToQuery,
-  renderItem,
-  onNewItem: _onNewItem,
-  disabled,
-  maxItemsDisplayed = Infinity,
-}: AutocompleteInputProps<T>): React.ReactElement => {
-  const [isOpen, setIsOpen] = useState(false);
-  const itemToQuery = useMemo<ItemToQuery<T>>(
-    () => _itemToQuery || ((s) => (s ? `${s}` : "")),
-    [_itemToQuery]
-  );
-  const [query, setQuery] = useState<string>(() => itemToQuery(value));
-  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
-  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
-  const [isTyping, setIsTyping] = useState(false);
-  const filterOptions = useMemo<FilterOptions<T>>(
-    () =>
-      _filterOptions ||
-      ((o, q) =>
-        fuzzy
-          .filter(q, o, { extract: itemToQuery })
-          .map((f) => f.original)
-          .filter((f): f is T => !!f)),
-    [_filterOptions, itemToQuery]
-  );
-  const onNewItem = useMemo<OnNewItem<T>>(
-    () => _onNewItem || ((s) => s as T),
-    [_onNewItem]
-  );
-
-  const items = useMemo(
-    () =>
-      (query ? filterOptions(options, query) : options).slice(
-        0,
-        maxItemsDisplayed
-      ),
-    [query, options, filterOptions, maxItemsDisplayed]
-  );
-  const menuRef = useRef<HTMLUListElement>(null);
-  const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
-  const onEnter = useCallback(
-    (value?: T) => {
-      if (isOpen && value) {
-        setQuery(itemToQuery(value));
-        setValue(value);
-        setIsTyping(false);
-      } else if (onConfirm) {
-        onConfirm();
-      } else {
-        setIsOpen(true);
-      }
-    },
-    [setValue, onConfirm, isOpen]
-  );
-  const { activeIndex, onKeyDown } = useArrowKeyDown({
-    onEnter,
-    results: items,
-    menuRef,
-  });
-  useEffect(() => {
-    if (!items.length || !isTyping) close();
-    else open();
-  }, [items, close, open, isTyping]);
-  useEffect(() => {
-    if (query && isOpen) setValue(items[activeIndex] || onNewItem(query));
-    else if (query) setValue(onNewItem(query));
-  }, [setValue, activeIndex, items, onNewItem, query]);
-  useEffect(() => {
-    if (
-      inputRef.current &&
-      inputRef.current === document.activeElement &&
-      value
-    ) {
-      const index = itemToQuery(value).length;
-      inputRef.current.setSelectionRange(index, index);
-    }
-    const touchEndListener = (e: TouchEvent) => {
-      if (
-        !e.target ||
-        !menuRef.current ||
-        menuRef.current.contains(e.target as Element)
-      ) {
-        return;
-      }
-      if (!inputRef.current || inputRef.current.contains(e.target as Element)) {
-        return;
-      }
-      close();
-    };
-    document.body.addEventListener("touchend", touchEndListener);
-    return () =>
-      document.body.removeEventListener("touchend", touchEndListener);
-  }, [inputRef, menuRef, close]);
-  const Input = useMemo(() => (multiline ? TextArea : InputGroup), [multiline]);
-  return (
-    <Popover
-      portalClassName={"roamjs-autocomplete-input"}
-      targetClassName={"roamjs-autocomplete-input-target"}
-      captureDismiss={true}
-      isOpen={isOpen}
-      onOpened={open}
-      minimal
-      autoFocus={false}
-      enforceFocus={false}
-      position={PopoverPosition.BOTTOM_LEFT}
-      modifiers={{
-        flip: { enabled: false },
-        preventOverflow: { enabled: false },
-      }}
-      content={
-        <Menu className={"max-h-64 overflow-auto max-w-md"} ulRef={menuRef}>
-          {items.map((t, i) => {
-            const onClick = () => {
-              setIsTyping(false);
-              setValue(t);
-              setQuery(itemToQuery(t));
-              inputRef.current?.focus();
-            };
-            const sharedProps = {
-              onClick,
-              onTouchEnd: onClick,
-              active: activeIndex === i,
-            };
-            return renderItem ? (
-              <React.Fragment key={i}>
-                {renderItem?.({
-                  item: t,
-                  ...sharedProps,
-                })}
-              </React.Fragment>
-            ) : (
-              <MenuItem
-                text={itemToQuery(t)}
-                key={i}
-                multiline
-                {...sharedProps}
-              />
-            );
-          })}
-        </Menu>
-      }
-      target={
-        <Input
-          disabled={disabled}
-          value={query}
-          onChange={(e) => {
-            setIsTyping(true);
-            setQuery(e.target.value);
-          }}
-          autoFocus={autoFocus}
-          placeholder={placeholder}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") {
-              e.stopPropagation();
-              close();
-            } else {
-              onKeyDown(e);
-            }
-          }}
-          id={id}
-          onClick={() => setIsTyping(true)}
-          onBlur={(e) => {
-            if (
-              e.relatedTarget === null ||
-              !(e.relatedTarget as HTMLElement).closest?.(
-                ".roamjs-autocomplete-input"
-              )
-            ) {
-              setIsTyping(false);
-            }
-            if (onBlur) {
-              onBlur(e.target.value);
-            }
-          }}
-          inputRef={inputRef}
-          {...(showButton
-            ? {
-                rightElement: (
-                  <Button icon={"add"} minimal onClick={() => onEnter()} />
-                ),
-              }
-            : {})}
-        />
-      }
-    />
-  );
-};
-
-export default AutocompleteInput;
+import {
+  InputGroup,
+  Menu,
+  MenuItem,
+  PopoverPosition,
+  Popover,
+  Button,
+  TextArea,
+} from "@blueprintjs/core";
+import React, {
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+} from "react";
+import useArrowKeyDown from "../hooks/useArrowKeyDown";
+import fuzzy from "fuzzy";
+
+type FilterOptions<T> = (options: T[], query: string) => T[];
+type OnNewItem<T> = (s: string) => T;
+type ItemToQuery<T> = (t?: T) => string;
+
+export type AutocompleteInputProps<T = string> = {
+  value?: T;
+  setValue: (q: T) => void;
+  showButton?: boolean;
+  onBlur?: (v: string) => void;
+  onConfirm?: () => void;
+  options?: T[];
+  placeholder?: string;
+  autoFocus?: boolean;
+  multiline?: boolean;
+  id?: string;
+  filterOptions?: FilterOptions<T>;
+  itemToQuery?: ItemToQuery<T>;
+  renderItem?: (props: {
+    item: T;
+    onClick: () => void;
+    active: boolean;
+  }) => React.ReactElement;
+  onNewItem?: OnNewItem<T>;
+  disabled?: boolean;
+  maxItemsDisplayed?: number;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+const AutocompleteInput = <T extends unknown = string>({
+  value,
+  setValue,
+  onBlur,
+  onConfirm,
+  showButton,
+  options = [],
+  placeholder = "Enter value",
+  autoFocus,
+  multiline,
+  id,
+  filterOptions: _filterOptions,
+  itemToQuery: _itemToQuery,
+  renderItem,
+  onNewItem: _onNewItem,
+  disabled,
+  maxItemsDisplayed = Infinity,
+}: AutocompleteInputProps<T>): React.ReactElement => {
+  const [isOpen, setIsOpen] = useState(false);
+  const itemToQuery = useMemo<ItemToQuery<T>>(
+    () => _itemToQuery || ((s) => (s ? `${s}` : "")),
+    [_itemToQuery]
+  );
+  const [query, setQuery] = useState<string>(() => itemToQuery(value));
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const [isTyping, setIsTyping] = useState(false);
+  const filterOptions = useMemo<FilterOptions<T>>(
+    () =>
+      _filterOptions ||
+      ((o, q) =>
+        fuzzy
+          .filter(q, o, { extract: itemToQuery })
+          .map((f) => f.original)
+          .filter((f): f is T => !!f)),
+    [_filterOptions, itemToQuery]
+  );
+  const onNewItem = useMemo<OnNewItem<T>>(
+    () => _onNewItem || ((s) => s as T),
+    [_onNewItem]
+  );
+
+  const items = useMemo(
+    () =>
+      (query ? filterOptions(options, query) : options).slice(
+        0,
+        maxItemsDisplayed
+      ),
+    [query, options, filterOptions, maxItemsDisplayed]
+  );
+  const menuRef = useRef<HTMLUListElement>(null);
+  const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+  const onEnter = useCallback(
+    (value?: T) => {
+      if (isOpen && value) {
+        setQuery(itemToQuery(value));
+        setValue(value);
+        setIsTyping(false);
+      } else if (onConfirm) {
+        onConfirm();
+      } else {
+        setIsOpen(true);
+      }
+    },
+    [setValue, onConfirm, isOpen]
+  );
+  const { activeIndex, onKeyDown } = useArrowKeyDown({
+    onEnter,
+    results: items,
+    menuRef,
+  });
+  useEffect(() => {
+    if (!items.length || !isTyping) close();
+    else open();
+  }, [items, close, open, isTyping]);
+  useEffect(() => {
+    if (query && isOpen) setValue(items[activeIndex] || onNewItem(query));
+    else if (query) setValue(onNewItem(query));
+  }, [setValue, activeIndex, items, onNewItem, query]);
+  useEffect(() => {
+    if (
+      inputRef.current &&
+      inputRef.current === document.activeElement &&
+      value
+    ) {
+      const index = itemToQuery(value).length;
+      inputRef.current.setSelectionRange(index, index);
+    }
+    const touchEndListener = (e: TouchEvent) => {
+      if (
+        !e.target ||
+        !menuRef.current ||
+        menuRef.current.contains(e.target as Element)
+      ) {
+        return;
+      }
+      if (!inputRef.current || inputRef.current.contains(e.target as Element)) {
+        return;
+      }
+      close();
+    };
+    document.body.addEventListener("touchend", touchEndListener);
+    return () =>
+      document.body.removeEventListener("touchend", touchEndListener);
+  }, [inputRef, menuRef, close]);
+  const Input = useMemo(() => (multiline ? TextArea : InputGroup), [multiline]);
+  return (
+    <Popover
+      portalClassName={"roamjs-autocomplete-input"}
+      targetClassName={"roamjs-autocomplete-input-target"}
+      captureDismiss={true}
+      isOpen={isOpen}
+      onOpened={open}
+      minimal
+      autoFocus={false}
+      enforceFocus={false}
+      position={PopoverPosition.BOTTOM_LEFT}
+      modifiers={{
+        flip: { enabled: false },
+        preventOverflow: { enabled: false },
+      }}
+      content={
+        <Menu className={"max-h-64 overflow-auto max-w-md"} ulRef={menuRef}>
+          {items.map((t, i) => {
+            const onClick = () => {
+              setIsTyping(false);
+              setValue(t);
+              setQuery(itemToQuery(t));
+              inputRef.current?.focus();
+            };
+            const sharedProps = {
+              onClick,
+              onTouchEnd: onClick,
+              active: activeIndex === i,
+            };
+            return renderItem ? (
+              <React.Fragment key={i}>
+                {renderItem?.({
+                  item: t,
+                  ...sharedProps,
+                })}
+              </React.Fragment>
+            ) : (
+              <MenuItem
+                text={itemToQuery(t)}
+                key={i}
+                multiline
+                {...sharedProps}
+              />
+            );
+          })}
+        </Menu>
+      }
+      target={
+        <Input
+          disabled={disabled}
+          value={query}
+          onChange={(e) => {
+            setIsTyping(true);
+            setQuery(e.target.value);
+          }}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              close();
+            } else {
+              onKeyDown(e);
+            }
+          }}
+          id={id}
+          onClick={() => setIsTyping(true)}
+          onBlur={(e) => {
+            if (
+              e.relatedTarget === null ||
+              !(e.relatedTarget as HTMLElement).closest?.(
+                ".roamjs-autocomplete-input"
+              )
+            ) {
+              setIsTyping(false);
+            }
+            if (onBlur) {
+              onBlur(e.target.value);
+            }
+          }}
+          inputRef={inputRef}
+          {...(showButton
+            ? {
+                rightElement: (
+                  <Button icon={"add"} minimal onClick={() => onEnter()} />
+                ),
+              }
+            : {})}
+        />
+      }
+    />
+  );
+};
+
+export default AutocompleteInput;

package/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<