roamjs-components 0.85.2 → 0.85.3

package/components/ExternalLogin.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importStar(require("react"));
+const createBlock_1 = tslib_1.__importDefault(require("../writes/createBlock"));
+const getBasicTreeByParentUid_1 = tslib_1.__importDefault(require("../queries/getBasicTreeByParentUid"));
+const idToTitle_1 = tslib_1.__importDefault(require("../util/idToTitle"));
+const nanoid_1 = tslib_1.__importDefault(require("nanoid"));
+const crypto_js_1 = tslib_1.__importDefault(require("crypto-js"));
+const localStorageGet_1 = tslib_1.__importDefault(require("../util/localStorageGet"));
+const localStorageSet_1 = tslib_1.__importDefault(require("../util/localStorageSet"));
+const apiPost_1 = tslib_1.__importDefault(require("../util/apiPost"));
+const getTargetOrigin = () => {
+    try {
+        // This is for debugging purposes - should probably remove
+        return process.env.CUSTOM_ROAMJS_ORIGIN;
+    }
+    catch (_a) {
+        return "https://roamjs.com";
+    }
+};
+const ExternalLogin = ({ onSuccess, useLocal, parentUid, service, getPopoutUrl, getAuthData, ServiceIcon, loggedIn = false, }) => {
+    const targetOrigin = getTargetOrigin();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)("");
+    const onClick = (0, react_1.useCallback)(() => {
+        const otp = (0, nanoid_1.default)().replace(/_/g, "-");
+        const key = (0, nanoid_1.default)().replace(/_/g, "-");
+        const state = `${service}_${otp}_${key}`;
+        setLoading(true);
+        getPopoutUrl(state)
+            .then((url) => {
+            const width = 600;
+            const height = 525;
+            const left = window.screenX + (window.innerWidth - width) / 2;
+            const top = window.screenY + (window.innerHeight - height) / 2;
+            const loginWindow = window.open(`${url}&state=${state}`, `roamjs:${service}:login`, `left=${left},top=${top},width=${width},height=${height},status=1`);
+            let intervalListener = 0;
+            const processAuthData = (data) => {
+                var _a;
+                (_a = loginWindow === null || loginWindow === void 0 ? void 0 : loginWindow.close) === null || _a === void 0 ? void 0 : _a.call(loginWindow);
+                getAuthData(data)
+                    .then((rr) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+                    var _b;
+                    const labelUid = window.roamAlphaAPI.util.generateUID();
+                    const { label = "Default Account" } = rr, rawData = tslib_1.__rest(rr, ["label"]);
+                    const oauthData = JSON.stringify(rawData);
+                    const account = {
+                        text: label,
+                        uid: labelUid,
+                        data: oauthData,
+                        time: new Date().valueOf(),
+                    };
+                    if (useLocal) {
+                        const key = `oauth-${service}`;
+                        const accounts = JSON.parse((0, localStorageGet_1.default)(key) || "[]");
+                        (0, localStorageSet_1.default)(key, JSON.stringify([...accounts, account]));
+                    }
+                    else {
+                        const existingTree = (0, getBasicTreeByParentUid_1.default)(parentUid).find((t) => /oauth/i.test(t.text));
+                        const blockUid = (existingTree === null || existingTree === void 0 ? void 0 : existingTree.uid) ||
+                            (yield (0, createBlock_1.default)({ node: { text: "oauth" }, parentUid }));
+                        window.roamAlphaAPI.createBlock({
+                            block: { string: label, uid: labelUid },
+                            location: {
+                                "parent-uid": blockUid,
+                                order: ((_b = existingTree === null || existingTree === void 0 ? void 0 : existingTree.children) === null || _b === void 0 ? void 0 : _b.length) || 0,
+                            },
+                        });
+                        const valueUid = window.roamAlphaAPI.util.generateUID();
+                        const block = {
+                            string: oauthData,
+                            uid: valueUid,
+                        };
+                        window.roamAlphaAPI.createBlock({
+                            location: { "parent-uid": labelUid, order: 0 },
+                            block,
+                        });
+                        window.roamAlphaAPI.updateBlock({
+                            block: { open: false, string: "oauth", uid: blockUid },
+                        });
+                    }
+                    onSuccess(account);
+                }))
+                    .finally(() => {
+                    window.removeEventListener("message", messageEventListener);
+                    window.clearTimeout(intervalListener);
+                    setLoading(false);
+                });
+            };
+            const messageEventListener = (e) => {
+                if (e.origin === targetOrigin && loginWindow) {
+                    processAuthData(e.data);
+                }
+            };
+            const authInterval = () => {
+                (0, apiPost_1.default)({
+                    path: "auth",
+                    data: {
+                        service,
+                        otp,
+                    },
+                    anonymous: true,
+                })
+                    .then((r) => {
+                    if (r.auth) {
+                        const auth = crypto_js_1.default.AES.decrypt(r.auth, key).toString(crypto_js_1.default.enc.Utf8);
+                        processAuthData(auth);
+                    }
+                    else {
+                        intervalListener = window.setTimeout(authInterval, 1000);
+                    }
+                })
+                    .catch((e) => {
+                    var _a;
+                    if (((_a = e.response) === null || _a === void 0 ? void 0 : _a.status) !== 400) {
+                        intervalListener = window.setTimeout(authInterval, 1000);
+                    }
+                });
+            };
+            authInterval();
+            window.addEventListener("message", messageEventListener);
+        })
+            .catch((e) => {
+            setError(e.message);
+            setLoading(false);
+        });
+    }, [onSuccess, parentUid, setLoading, setError]);
+    return (react_1.default.createElement("div", { style: { display: "flex" } },
+        react_1.default.createElement(core_1.Button, { icon: react_1.default.createElement(core_1.Icon, { icon: react_1.default.createElement(ServiceIcon, { style: {
+                        width: 15,
+                        height: 15,
+                        marginLeft: 4,
+                        cursor: "pointer",
+                    } }) }), onClick: onClick, disabled: loading, className: "roamjs-external-login", rightIcon: loading && react_1.default.createElement(core_1.Spinner, { size: core_1.Spinner.SIZE_SMALL }) }, loggedIn
+            ? `Add Another ${(0, idToTitle_1.default)(service)} Account`
+            : `Login With ${(0, idToTitle_1.default)(service)}`),
+        error && (react_1.default.createElement("div", { style: { color: "red", whiteSpace: "pre-line" } }, error))));
+};
+exports.default = ExternalLogin;
+//# sourceMappingURL=ExternalLogin.js.map

package/components/ExternalLogin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalLogin.js","sourceRoot":"","sources":["../../src/components/ExternalLogin.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Button, Icon, Spinner } from \"@blueprintjs/core\";\nimport React, { useState, useCallback } from \"react\";\nimport createBlock from \"../writes/createBlock\";\nimport getBasicTreeByParentUid from \"../queries/getBasicTreeByParentUid\";\nimport idToTitle from \"../util/idToTitle\";\nimport nanoid from \"nanoid\";\nimport CryptoJS from \"crypto-js\";\nimport localStorageGet from \"../util/localStorageGet\";\nimport localStorageSet from \"../util/localStorageSet\";\nimport apiPost from \"../util/apiPost\";\n\nexport type ExternalLoginOptions = {\n  service: string;\n  getPopoutUrl: (state: string) => Promise<string>;\n  getAuthData: (d: string) => Promise<Record<string, string>>;\n  ServiceIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n};\n\nconst getTargetOrigin = () => {\n  try {\n    // This is for debugging purposes - should probably remove\n    return process.env.CUSTOM_ROAMJS_ORIGIN;\n  } catch {\n    return \"https://roamjs.com\";\n  }\n};\n\nconst ExternalLogin = ({\n  onSuccess,\n  useLocal,\n  parentUid,\n  service,\n  getPopoutUrl,\n  getAuthData,\n  ServiceIcon,\n  loggedIn = false,\n}: {\n  onSuccess: (block: { text: string; uid: string; data: string }) => void;\n  parentUid: string;\n  useLocal?: boolean;\n  loggedIn?: boolean;\n} & ExternalLoginOptions): React.ReactElement => {\n  const targetOrigin = getTargetOrigin();\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState(\"\");\n  const onClick = useCallback(() => {\n    const otp = nanoid().replace(/_/g, \"-\");\n    const key = nanoid().replace(/_/g, \"-\");\n    const state = `${service}_${otp}_${key}`;\n    setLoading(true);\n    getPopoutUrl(state)\n      .then((url) => {\n        const width = 600;\n        const height = 525;\n        const left = window.screenX + (window.innerWidth - width) / 2;\n        const top = window.screenY + (window.innerHeight - height) / 2;\n        const loginWindow = window.open(\n          `${url}&state=${state}`,\n          `roamjs:${service}:login`,\n          `left=${left},top=${top},width=${width},height=${height},status=1`\n        );\n        let intervalListener = 0;\n        const processAuthData = (data: string) => {\n          loginWindow?.close?.();\n          getAuthData(data)\n            .then(async (rr) => {\n              const labelUid = window.roamAlphaAPI.util.generateUID();\n              const { label = \"Default Account\", ...rawData } = rr;\n              const oauthData = JSON.stringify(rawData);\n              const account = {\n                text: label,\n                uid: labelUid,\n                data: oauthData,\n                time: new Date().valueOf(),\n              };\n\n              if (useLocal) {\n                const key = `oauth-${service}`;\n                const accounts = JSON.parse(\n                  (localStorageGet(key) as string) || \"[]\"\n                );\n                localStorageSet(key, JSON.stringify([...accounts, account]));\n              } else {\n                const existingTree = getBasicTreeByParentUid(parentUid).find(\n                  (t) => /oauth/i.test(t.text)\n                );\n                const blockUid =\n                  existingTree?.uid ||\n                  (await createBlock({ node: { text: \"oauth\" }, parentUid }));\n                window.roamAlphaAPI.createBlock({\n                  block: { string: label, uid: labelUid },\n                  location: {\n                    \"parent-uid\": blockUid,\n                    order: existingTree?.children?.length || 0,\n                  },\n                });\n\n                const valueUid = window.roamAlphaAPI.util.generateUID();\n                const block = {\n                  string: oauthData,\n                  uid: valueUid,\n                };\n                window.roamAlphaAPI.createBlock({\n                  location: { \"parent-uid\": labelUid, order: 0 },\n                  block,\n                });\n                window.roamAlphaAPI.updateBlock({\n                  block: { open: false, string: \"oauth\", uid: blockUid },\n                });\n              }\n              onSuccess(account);\n            })\n            .finally(() => {\n              window.removeEventListener(\"message\", messageEventListener);\n              window.clearTimeout(intervalListener);\n              setLoading(false);\n            });\n        };\n        const messageEventListener = (e: MessageEvent) => {\n          if (e.origin === targetOrigin && loginWindow) {\n            processAuthData(e.data);\n          }\n        };\n        const authInterval = () => {\n          apiPost<{ auth: string }>({\n            path: \"auth\",\n            data: {\n              service,\n              otp,\n            },\n            anonymous: true,\n          })\n            .then((r) => {\n              if (r.auth) {\n                const auth = CryptoJS.AES.decrypt(r.auth, key).toString(\n                  CryptoJS.enc.Utf8\n                );\n                processAuthData(auth);\n              } else {\n                intervalListener = window.setTimeout(authInterval, 1000);\n              }\n            })\n            .catch((e) => {\n              if (e.response?.status !== 400) {\n                intervalListener = window.setTimeout(authInterval, 1000);\n              }\n            });\n        };\n        authInterval();\n        window.addEventListener(\"message\", messageEventListener);\n      })\n      .catch((e) => {\n        setError(e.message);\n        setLoading(false);\n      });\n  }, [onSuccess, parentUid, setLoading, setError]);\n  return (\n    <div style={{ display: \"flex\" }}>\n      <Button\n        icon={\n          <Icon\n            icon={\n              <ServiceIcon\n                style={{\n                  width: 15,\n                  height: 15,\n                  marginLeft: 4,\n                  cursor: \"pointer\",\n                }}\n              />\n            }\n          />\n        }\n        onClick={onClick}\n        disabled={loading}\n        className={\"roamjs-external-login\"}\n        rightIcon={loading && <Spinner size={Spinner.SIZE_SMALL} />}\n      >\n        {loggedIn\n          ? `Add Another ${idToTitle(service)} Account`\n          : `Login With ${idToTitle(service)}`}\n      </Button>\n      {error && (\n        <div style={{ color: \"red\", whiteSpace: \"pre-line\" }}>{error}</div>\n      )}\n    </div>\n  );\n};\n\nexport default ExternalLogin;\n"]}

package/components/Filter.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export declare type Filters = {
+    includes: Record<string, Set<string>>;
+    excludes: Record<string, Set<string>>;
+};
+declare const Filter: ({ data, initialValue, onChange, renderButtonText, includeHelpMessage, excludeHelpMessage, small, }: {
+    initialValue?: Filters | undefined;
+    data: Record<string, string[]>;
+    onChange: (filters: Filters) => void;
+    renderButtonText?: ((s: string, key: string) => React.ReactNode) | undefined;
+    includeHelpMessage?: string | undefined;
+    excludeHelpMessage?: string | undefined;
+    small?: boolean | undefined;
+}) => JSX.Element;
+export default Filter;

package/components/Filter.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importStar(require("react"));
+const fuzzy_1 = tslib_1.__importDefault(require("fuzzy"));
+const Filter = ({ data, initialValue, onChange, renderButtonText = (s) => s ? s.toString() : react_1.default.createElement("i", { style: { opacity: 0.5 } }, "(Empty)"), includeHelpMessage = "Only include these values", excludeHelpMessage = "Exclude these values", small, }) => {
+    const [isFilterOpen, setIsFilterOpen] = (0, react_1.useState)(false);
+    const closeFilter = (0, react_1.useCallback)(() => {
+        setIsFilterOpen(false);
+    }, [setIsFilterOpen]);
+    const initialFiltersValue = (0, react_1.useMemo)(() => ({
+        includes: Object.fromEntries(Object.keys(data).map((k) => [
+            k,
+            new Set(data[k].filter((d) => initialValue && initialValue.includes[k].has(d))),
+        ])),
+        excludes: Object.fromEntries(Object.keys(data).map((k) => [
+            k,
+            new Set(data[k].filter((d) => initialValue && initialValue.excludes[k].has(d))),
+        ])),
+    }), [initialValue, data]);
+    const filtersRef = (0, react_1.useRef)(initialFiltersValue);
+    const [filters, setFilters] = (0, react_1.useState)(filtersRef.current);
+    const [filterSearch, setFilterSearch] = (0, react_1.useState)("");
+    const active = Object.keys(filters.includes).some((k) => filters.includes[k].size > 0) ||
+        Object.keys(filters.excludes).some((k) => filters.excludes[k].size > 0);
+    return (react_1.default.createElement(core_1.Tooltip, { content: "Filters", position: core_1.Position.BOTTOM },
+        react_1.default.createElement(core_1.Popover, { target: react_1.default.createElement(core_1.Button, { icon: react_1.default.createElement(core_1.Icon, { icon: "filter", color: active ? "#a82a2a" : "#5c7080" }), onClick: (e) => {
+                    e.stopPropagation();
+                    setIsFilterOpen(!isFilterOpen);
+                }, className: `roamjs-filter ${active ? "roamjs-filter-active" : ""}`, minimal: true, small: small }), content: react_1.default.createElement("div", { style: { maxWidth: 600, maxHeight: 245, overflowY: "scroll" }, onClick: (e) => e.stopPropagation() },
+                react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        width: 500,
+                        maxWidth: "90vw",
+                        transition: "all 300ms ease-in 0s",
+                        padding: 8,
+                    } },
+                    react_1.default.createElement("div", { className: "flex-h-box" },
+                        react_1.default.createElement("div", { style: {
+                                flex: "1 1 100%",
+                                paddingTop: 4,
+                                paddingBottom: 4,
+                                paddingLeft: 4,
+                            } },
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("strong", null, "Includes"),
+                                react_1.default.createElement("span", { style: { marginLeft: 4, fontSize: 12 } }, "Click to Add"),
+                                react_1.default.createElement("div", { style: {
+                                        padding: "8px 0px",
+                                        fontSize: "0.8em",
+                                        color: "rgb(167, 182, 194)",
+                                    } }, Object.values(filters.includes).every((v) => v.size === 0)
+                                    ? includeHelpMessage
+                                    : Object.entries(filters.includes).flatMap(([key, col]) => Array.from(col).map((n, i) => (react_1.default.createElement("div", { style: {
+                                            position: "relative",
+                                            display: "inline-block",
+                                        }, key: `${n.toString()}-${i}` },
+                                        react_1.default.createElement("div", null,
+                                            react_1.default.createElement("button", { className: "bp3-button", style: {
+                                                    margin: 4,
+                                                    paddingRight: 4,
+                                                    cursor: "pointer",
+                                                    borderBottomColor: "rgb(92, 112, 128)",
+                                                }, onClick: () => {
+                                                    filtersRef.current.includes[key].delete(n);
+                                                    const filters = Object.assign({}, filtersRef.current);
+                                                    setFilters(filters);
+                                                    onChange(filters);
+                                                } }, renderButtonText(n, key))))))))),
+                            react_1.default.createElement("div", { style: { paddingTop: 8 } })),
+                        react_1.default.createElement("div", { className: "rm-line", style: { marginTop: 8, marginBottom: 8 } }),
+                        react_1.default.createElement("div", { style: {
+                                flex: "1 1 100%",
+                                paddingTop: 4,
+                                paddingBottom: 4,
+                                paddingLeft: 8,
+                            } },
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("strong", null, "Removes"),
+                                react_1.default.createElement("span", { style: { marginLeft: 4, fontSize: 12 } }, "Shift-Click to Add"),
+                                react_1.default.createElement("div", { style: {
+                                        padding: "8px 0px",
+                                        fontSize: "0.8em",
+                                        color: "rgb(167, 182, 194)",
+                                    } }, Object.values(filters.excludes).every((v) => v.size === 0)
+                                    ? excludeHelpMessage
+                                    : Object.entries(filters.excludes).flatMap(([key, col]) => Array.from(col).map((n, i) => (react_1.default.createElement("div", { style: {
+                                            position: "relative",
+                                            display: "inline-block",
+                                        }, key: `${n.toString()}-${i}` },
+                                        react_1.default.createElement("div", null,
+                                            react_1.default.createElement("button", { className: "bp3-button", style: {
+                                                    margin: 4,
+                                                    paddingRight: 4,
+                                                    cursor: "pointer",
+                                                    borderBottomColor: "rgb(92, 112, 128)",
+                                                }, onClick: () => {
+                                                    filtersRef.current.excludes[key].delete(n);
+                                                    const filters = Object.assign({}, filtersRef.current);
+                                                    setFilters(filters);
+                                                    onChange(filters);
+                                                } }, renderButtonText(n, key))))))))),
+                            react_1.default.createElement("div", { style: { paddingTop: 8 } }))),
+                    react_1.default.createElement("div", { className: "rm-line", style: { marginTop: 4, borderColor: "rgb(41, 55, 66)" } }),
+                    react_1.default.createElement("input", { placeholder: "Search References", className: "bp3-input bp3-minimal search-input", style: { margin: 8 }, value: filterSearch, onChange: (e) => setFilterSearch(e.target.value) }),
+                    react_1.default.createElement("div", { className: "flex-h-box" }, Object.keys(data).map((k, i, all) => (react_1.default.createElement(react_1.default.Fragment, { key: k },
+                        react_1.default.createElement("div", { style: {
+                                flex: "1 1 100%",
+                                paddingTop: 4,
+                                paddingBottom: 4,
+                                paddingLeft: 4,
+                            } }, (filterSearch
+                            ? fuzzy_1.default
+                                .filter(filterSearch, data[k])
+                                .map((s) => s.string)
+                            : data[k])
+                            .filter((n) => !filters.includes[k].has(n) &&
+                            !filters.excludes[k].has(n))
+                            .map((n, i) => (react_1.default.createElement("div", { style: {
+                                position: "relative",
+                                display: "inline-block",
+                            }, key: `${n.toString()}-${i}` },
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("button", { className: "bp3-button", style: {
+                                        margin: 4,
+                                        paddingRight: 4,
+                                        cursor: "pointer",
+                                        borderBottomColor: "rgb(92, 112, 128)",
+                                    }, onClick: (e) => {
+                                        if (e.shiftKey)
+                                            filtersRef.current.excludes[k].add(n);
+                                        else
+                                            filtersRef.current.includes[k].add(n);
+                                        const filters = Object.assign({}, filtersRef.current);
+                                        setFilters(filters);
+                                        onChange(filters);
+                                    } }, renderButtonText(n, k))))))),
+                        i < all.length - 1 && (react_1.default.createElement("div", { className: "rm-line", style: { marginTop: 8, marginBottom: 8 } })))))))), onClose: closeFilter, isOpen: isFilterOpen })));
+};
+exports.default = Filter;
+//# sourceMappingURL=Filter.js.map

package/components/Filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../src/components/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Tooltip, Position, Popover, Button, Icon } from \"@blueprintjs/core\";\nimport React, { useCallback, useRef, useState, useMemo } from \"react\";\nimport fuzzy from \"fuzzy\";\n\nexport type Filters = {\n  includes: Record<string, Set<string>>;\n  excludes: Record<string, Set<string>>;\n};\n\nconst Filter = ({\n  data,\n  initialValue,\n  onChange,\n  renderButtonText = (s) =>\n    s ? s.toString() : <i style={{ opacity: 0.5 }}>(Empty)</i>,\n  includeHelpMessage = \"Only include these values\",\n  excludeHelpMessage = \"Exclude these values\",\n  small,\n}: {\n  initialValue?: Filters;\n  data: Record<string, string[]>;\n  onChange: (filters: Filters) => void;\n  renderButtonText?: (s: string, key: string) => React.ReactNode;\n  includeHelpMessage?: string;\n  excludeHelpMessage?: string;\n  small?: boolean;\n}) => {\n  const [isFilterOpen, setIsFilterOpen] = useState(false);\n  const closeFilter = useCallback(() => {\n    setIsFilterOpen(false);\n  }, [setIsFilterOpen]);\n  const initialFiltersValue = useMemo(\n    () => ({\n      includes: Object.fromEntries(\n        Object.keys(data).map((k) => [\n          k,\n          new Set<string>(\n            data[k].filter(\n              (d) => initialValue && initialValue.includes[k].has(d)\n            )\n          ),\n        ])\n      ),\n      excludes: Object.fromEntries(\n        Object.keys(data).map((k) => [\n          k,\n          new Set<string>(\n            data[k].filter(\n              (d) => initialValue && initialValue.excludes[k].has(d)\n            )\n          ),\n        ])\n      ),\n    }),\n    [initialValue, data]\n  );\n  const filtersRef = useRef(initialFiltersValue);\n  const [filters, setFilters] = useState(filtersRef.current);\n  const [filterSearch, setFilterSearch] = useState(\"\");\n  const active =\n    Object.keys(filters.includes).some((k) => filters.includes[k].size > 0) ||\n    Object.keys(filters.excludes).some((k) => filters.excludes[k].size > 0);\n  return (\n    <Tooltip content={\"Filters\"} position={Position.BOTTOM}>\n      <Popover\n        target={\n          <Button\n            icon={\n              <Icon icon={\"filter\"} color={active ? \"#a82a2a\" : \"#5c7080\"} />\n            }\n            onClick={(e) => {\n              e.stopPropagation();\n              setIsFilterOpen(!isFilterOpen);\n            }}\n            className={`roamjs-filter ${active ? \"roamjs-filter-active\" : \"\"}`}\n            minimal\n            small={small}\n          />\n        }\n        content={\n          <div\n            style={{ maxWidth: 600, maxHeight: 245, overflowY: \"scroll\" }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div\n              style={{\n                display: \"flex\",\n                flexDirection: \"column\",\n                width: 500,\n                maxWidth: \"90vw\",\n                transition: \"all 300ms ease-in 0s\",\n                padding: 8,\n              }}\n            >\n              <div className=\"flex-h-box\">\n                <div\n                  style={{\n                    flex: \"1 1 100%\",\n                    paddingTop: 4,\n                    paddingBottom: 4,\n                    paddingLeft: 4,\n                  }}\n                >\n                  <div>\n                    <strong>Includes</strong>\n                    <span style={{ marginLeft: 4, fontSize: 12 }}>\n                      Click to Add\n                    </span>\n                    <div\n                      style={{\n                        padding: \"8px 0px\",\n                        fontSize: \"0.8em\",\n                        color: \"rgb(167, 182, 194)\",\n                      }}\n                    >\n                      {Object.values(filters.includes).every(\n                        (v) => v.size === 0\n                      )\n                        ? includeHelpMessage\n                        : Object.entries(filters.includes).flatMap(\n                            ([key, col]) =>\n                              Array.from(col).map((n, i) => (\n                                <div\n                                  style={{\n                                    position: \"relative\",\n                                    display: \"inline-block\",\n                                  }}\n                                  key={`${n.toString()}-${i}`}\n                                >\n                                  <div>\n                                    <button\n                                      className=\"bp3-button\"\n                                      style={{\n                                        margin: 4,\n                                        paddingRight: 4,\n                                        cursor: \"pointer\",\n                                        borderBottomColor: \"rgb(92, 112, 128)\",\n                                      }}\n                                      onClick={() => {\n                                        filtersRef.current.includes[key].delete(\n                                          n\n                                        );\n                                        const filters = {\n                                          ...filtersRef.current,\n                                        };\n                                        setFilters(filters);\n                                        onChange(filters);\n                                      }}\n                                    >\n                                      {renderButtonText(n, key)}\n                                    </button>\n                                  </div>\n                                </div>\n                              ))\n                          )}\n                    </div>\n                  </div>\n                  <div style={{ paddingTop: 8 }} />\n                </div>\n                <div\n                  className=\"rm-line\"\n                  style={{ marginTop: 8, marginBottom: 8 }}\n                />\n                <div\n                  style={{\n                    flex: \"1 1 100%\",\n                    paddingTop: 4,\n                    paddingBottom: 4,\n                    paddingLeft: 8,\n                  }}\n                >\n                  <div>\n                    <strong>Removes</strong>\n                    <span style={{ marginLeft: 4, fontSize: 12 }}>\n                      Shift-Click to Add\n                    </span>\n                    <div\n                      style={{\n                        padding: \"8px 0px\",\n                        fontSize: \"0.8em\",\n                        color: \"rgb(167, 182, 194)\",\n                      }}\n                    >\n                      {Object.values(filters.excludes).every(\n                        (v) => v.size === 0\n                      )\n                        ? excludeHelpMessage\n                        : Object.entries(filters.excludes).flatMap(\n                            ([key, col]) =>\n                              Array.from(col).map((n, i) => (\n                                <div\n                                  style={{\n                                    position: \"relative\",\n                                    display: \"inline-block\",\n                                  }}\n                                  key={`${n.toString()}-${i}`}\n                                >\n                                  <div>\n                                    <button\n                                      className=\"bp3-button\"\n                                      style={{\n                                        margin: 4,\n                                        paddingRight: 4,\n                                        cursor: \"pointer\",\n                                        borderBottomColor: \"rgb(92, 112, 128)\",\n                                      }}\n                                      onClick={() => {\n                                        filtersRef.current.excludes[key].delete(\n                                          n\n                                        );\n                                        const filters = {\n                                          ...filtersRef.current,\n                                        };\n                                        setFilters(filters);\n                                        onChange(filters);\n                                      }}\n                                    >\n                                      {renderButtonText(n, key)}\n                                    </button>\n                                  </div>\n                                </div>\n                              ))\n                          )}\n                    </div>\n                  </div>\n                  <div style={{ paddingTop: 8 }} />\n                </div>\n              </div>\n              <div\n                className=\"rm-line\"\n                style={{ marginTop: 4, borderColor: \"rgb(41, 55, 66)\" }}\n              />\n              <input\n                placeholder=\"Search References\"\n                className=\"bp3-input bp3-minimal search-input\"\n                style={{ margin: 8 }}\n                value={filterSearch}\n                onChange={(e) => setFilterSearch(e.target.value)}\n              />\n              <div className=\"flex-h-box\">\n                {Object.keys(data).map((k, i, all) => (\n                  <React.Fragment key={k}>\n                    <div\n                      style={{\n                        flex: \"1 1 100%\",\n                        paddingTop: 4,\n                        paddingBottom: 4,\n                        paddingLeft: 4,\n                      }}\n                    >\n                      {(filterSearch\n                        ? fuzzy\n                            .filter(filterSearch, data[k])\n                            .map((s) => s.string)\n                        : data[k]\n                      )\n                        .filter(\n                          (n) =>\n                            !filters.includes[k].has(n) &&\n                            !filters.excludes[k].has(n)\n                        )\n                        .map((n, i) => (\n                          <div\n                            style={{\n                              position: \"relative\",\n                              display: \"inline-block\",\n                            }}\n                            key={`${n.toString()}-${i}`}\n                          >\n                            <div>\n                              <button\n                                className=\"bp3-button\"\n                                style={{\n                                  margin: 4,\n                                  paddingRight: 4,\n                                  cursor: \"pointer\",\n                                  borderBottomColor: \"rgb(92, 112, 128)\",\n                                }}\n                                onClick={(e) => {\n                                  if (e.shiftKey)\n                                    filtersRef.current.excludes[k].add(n);\n                                  else filtersRef.current.includes[k].add(n);\n                                  const filters = { ...filtersRef.current };\n                                  setFilters(filters);\n                                  onChange(filters);\n                                }}\n                              >\n                                {renderButtonText(n, k)}\n                              </button>\n                            </div>\n                          </div>\n                        ))}\n                    </div>\n                    {i < all.length - 1 && (\n                      <div\n                        className=\"rm-line\"\n                        style={{ marginTop: 8, marginBottom: 8 }}\n                      />\n                    )}\n                  </React.Fragment>\n                ))}\n              </div>\n            </div>\n          </div>\n        }\n        onClose={closeFilter}\n        isOpen={isFilterOpen}\n      />\n    </Tooltip>\n  );\n};\n\nexport default Filter;\n"]}

package/components/FormDialog.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import type { RoamOverlayProps } from "../util/renderOverlay";
+import { InputTextNode } from "../types";
+declare type Props<T> = {
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    onSubmit?: (data: T) => Promise<unknown> | unknown;
+    submitButtonText?: string;
+    cancelButtonText?: string;
+    enforceFocus?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    fields?: Record<string, ({
+        defaultValue?: string;
+        type: "text";
+    } | {
+        defaultValue?: string;
+        type: "info";
+    } | {
+        defaultValue?: number;
+        type: "number";
+    } | {
+        defaultValue?: string;
+        type: "select";
+        options?: string[];
+    } | {
+        defaultValue?: string;
+        type: "page";
+    } | {
+        defaultValue?: string;
+        type: "block";
+    } | {
+        defaultValue?: string;
+        type: "autocomplete";
+        options?: string[];
+    } | {
+        defaultValue?: boolean;
+        type: "flag";
+    } | {
+        defaultValue?: InputTextNode[];
+        type: "embed";
+    }) & {
+        label?: string;
+        conditional?: string;
+        conditionalValues?: string[];
+    }>;
+};
+declare const FormDialog: <T extends Record<string, unknown>>({ title, content, isOpen, onClose, onSubmit, fields, submitButtonText, cancelButtonText, enforceFocus, className, style, }: RoamOverlayProps<Props<T>>) => JSX.Element;
+export declare const render: (props: Props<Record<string, unknown>>) => (() => void) | undefined;
+export declare const prompt: ({ defaultAnswer, question, title, }: {
+    title: string;
+    question: string;
+    defaultAnswer: string;
+}) => Promise<string>;
+export default FormDialog;