roamjs-components 0.85.2 → 0.85.4

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":";;;AAAA,4CAA6E;AAC7E,uDAAsE;AACtE,0DAA0B;AAO1B,MAAM,MAAM,GAAG,CAAC,EACd,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,gBAAgB,GAAG,CAAC,CAAC,EAAE,EAAE,CACvB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,qCAAG,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,cAAa,EAC5D,kBAAkB,GAAG,2BAA2B,EAChD,kBAAkB,GAAG,sBAAsB,EAC3C,KAAK,GASN,EAAE,EAAE;IACH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IACtB,MAAM,mBAAmB,GAAG,IAAA,eAAO,EACjC,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,MAAM,CAAC,WAAW,CAC1B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YAC3B,CAAC;YACD,IAAI,GAAG,CACL,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CACZ,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,IAAI,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CACvD,CACF;SACF,CAAC,CACH;QACD,QAAQ,EAAE,MAAM,CAAC,WAAW,CAC1B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YAC3B,CAAC;YACD,IAAI,GAAG,CACL,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CACZ,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,IAAI,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CACvD,CACF;SACF,CAAC,CACH;KACF,CAAC,EACF,CAAC,YAAY,EAAE,IAAI,CAAC,CACrB,CAAC;IACF,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,mBAAmB,CAAC,CAAC;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACrD,MAAM,MAAM,GACV,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;QACvE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAC1E,OAAO,CACL,8BAAC,cAAO,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAQ,CAAC,MAAM;QACpD,8BAAC,cAAO,IACN,MAAM,EACJ,8BAAC,aAAM,IACL,IAAI,EACF,8BAAC,WAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,EAEjE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;gBACjC,CAAC,EACD,SAAS,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE,EAClE,OAAO,QACP,KAAK,EAAE,KAAK,GACZ,EAEJ,OAAO,EACL,uCACE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC7D,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;gBAEnC,uCACE,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,QAAQ;wBACvB,KAAK,EAAE,GAAG;wBACV,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,sBAAsB;wBAClC,OAAO,EAAE,CAAC;qBACX;oBAED,uCAAK,SAAS,EAAC,YAAY;wBACzB,uCACE,KAAK,EAAE;gCACL,IAAI,EAAE,UAAU;gCAChB,UAAU,EAAE,CAAC;gCACb,aAAa,EAAE,CAAC;gCAChB,WAAW,EAAE,CAAC;6BACf;4BAED;gCACE,yDAAyB;gCACzB,wCAAM,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,mBAErC;gCACP,uCACE,KAAK,EAAE;wCACL,OAAO,EAAE,SAAS;wCAClB,QAAQ,EAAE,OAAO;wCACjB,KAAK,EAAE,oBAAoB;qCAC5B,IAEA,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CACpC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CACpB;oCACC,CAAC,CAAC,kBAAkB;oCACpB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CACtC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,CACb,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5B,uCACE,KAAK,EAAE;4CACL,QAAQ,EAAE,UAAU;4CACpB,OAAO,EAAE,cAAc;yCACxB,EACD,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE;wCAE3B;4CACE,0CACE,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;oDACL,MAAM,EAAE,CAAC;oDACT,YAAY,EAAE,CAAC;oDACf,MAAM,EAAE,SAAS;oDACjB,iBAAiB,EAAE,mBAAmB;iDACvC,EACD,OAAO,EAAE,GAAG,EAAE;oDACZ,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,CACrC,CAAC,CACF,CAAC;oDACF,MAAM,OAAO,qBACR,UAAU,CAAC,OAAO,CACtB,CAAC;oDACF,UAAU,CAAC,OAAO,CAAC,CAAC;oDACpB,QAAQ,CAAC,OAAO,CAAC,CAAC;gDACpB,CAAC,IAEA,gBAAgB,CAAC,CAAC,EAAE,GAAG,CAAC,CAClB,CACL,CACF,CACP,CAAC,CACL,CACD,CACF;4BACN,uCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,GAAI,CAC7B;wBACN,uCACE,SAAS,EAAC,SAAS,EACnB,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,GACxC;wBACF,uCACE,KAAK,EAAE;gCACL,IAAI,EAAE,UAAU;gCAChB,UAAU,EAAE,CAAC;gCACb,aAAa,EAAE,CAAC;gCAChB,WAAW,EAAE,CAAC;6BACf;4BAED;gCACE,wDAAwB;gCACxB,wCAAM,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,yBAErC;gCACP,uCACE,KAAK,EAAE;wCACL,OAAO,EAAE,SAAS;wCAClB,QAAQ,EAAE,OAAO;wCACjB,KAAK,EAAE,oBAAoB;qCAC5B,IAEA,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CACpC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CACpB;oCACC,CAAC,CAAC,kBAAkB;oCACpB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CACtC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,CACb,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5B,uCACE,KAAK,EAAE;4CACL,QAAQ,EAAE,UAAU;4CACpB,OAAO,EAAE,cAAc;yCACxB,EACD,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE;wCAE3B;4CACE,0CACE,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;oDACL,MAAM,EAAE,CAAC;oDACT,YAAY,EAAE,CAAC;oDACf,MAAM,EAAE,SAAS;oDACjB,iBAAiB,EAAE,mBAAmB;iDACvC,EACD,OAAO,EAAE,GAAG,EAAE;oDACZ,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,CACrC,CAAC,CACF,CAAC;oDACF,MAAM,OAAO,qBACR,UAAU,CAAC,OAAO,CACtB,CAAC;oDACF,UAAU,CAAC,OAAO,CAAC,CAAC;oDACpB,QAAQ,CAAC,OAAO,CAAC,CAAC;gDACpB,CAAC,IAEA,gBAAgB,CAAC,CAAC,EAAE,GAAG,CAAC,CAClB,CACL,CACF,CACP,CAAC,CACL,CACD,CACF;4BACN,uCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,GAAI,CAC7B,CACF;oBACN,uCACE,SAAS,EAAC,SAAS,EACnB,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,WAAW,EAAE,iBAAiB,EAAE,GACvD;oBACF,yCACE,WAAW,EAAC,mBAAmB,EAC/B,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACpB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAChD;oBACF,uCAAK,SAAS,EAAC,YAAY,IACxB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACpC,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,CAAC;wBACpB,uCACE,KAAK,EAAE;gCACL,IAAI,EAAE,UAAU;gCAChB,UAAU,EAAE,CAAC;gCACb,aAAa,EAAE,CAAC;gCAChB,WAAW,EAAE,CAAC;6BACf,IAEA,CAAC,YAAY;4BACZ,CAAC,CAAC,eAAK;iCACF,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;iCAC7B,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;4BACzB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACV;6BACE,MAAM,CACL,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;4BAC3B,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAC9B;6BACA,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACb,uCACE,KAAK,EAAE;gCACL,QAAQ,EAAE,UAAU;gCACpB,OAAO,EAAE,cAAc;6BACxB,EACD,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE;4BAE3B;gCACE,0CACE,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;wCACL,MAAM,EAAE,CAAC;wCACT,YAAY,EAAE,CAAC;wCACf,MAAM,EAAE,SAAS;wCACjB,iBAAiB,EAAE,mBAAmB;qCACvC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wCACb,IAAI,CAAC,CAAC,QAAQ;4CACZ,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;4CACnC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;wCAC3C,MAAM,OAAO,qBAAQ,UAAU,CAAC,OAAO,CAAE,CAAC;wCAC1C,UAAU,CAAC,OAAO,CAAC,CAAC;wCACpB,QAAQ,CAAC,OAAO,CAAC,CAAC;oCACpB,CAAC,IAEA,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAChB,CACL,CACF,CACP,CAAC,CACA;wBACL,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,uCACE,SAAS,EAAC,SAAS,EACnB,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,GACxC,CACH,CACc,CAClB,CAAC,CACE,CACF,CACF,EAER,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,YAAY,GACpB,CACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC","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;

package/components/FormDialog.js

@@ -0,0 +1,224 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prompt = exports.render = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importStar(require("react"));
+const getTextByBlockUid_1 = tslib_1.__importDefault(require("../queries/getTextByBlockUid"));
+const createOverlayRender_1 = tslib_1.__importDefault(require("../util/createOverlayRender"));
+const BlockInput_1 = tslib_1.__importDefault(require("./BlockInput"));
+const MenuItemSelect_1 = tslib_1.__importDefault(require("./MenuItemSelect"));
+const PageInput_1 = tslib_1.__importDefault(require("./PageInput"));
+const nanoid_1 = tslib_1.__importDefault(require("nanoid"));
+const dom_1 = require("../dom");
+const getFullTreeByParentUid_1 = tslib_1.__importDefault(require("../queries/getFullTreeByParentUid"));
+const createPage_1 = tslib_1.__importDefault(require("../writes/createPage"));
+const writes_1 = require("../writes");
+const AutocompleteInput_1 = tslib_1.__importDefault(require("./AutocompleteInput"));
+const EmbedInput = ({ defaultValue, onChange, autoFocus, }) => {
+    const defaultEmbed = (0, react_1.useMemo)(() => defaultValue || [], [defaultValue]);
+    const elRef = (0, react_1.useRef)(null);
+    const parentUid = (0, react_1.useMemo)(window.roamAlphaAPI.util.generateUID, []);
+    const realFocus = (0, react_1.useCallback)(() => {
+        if (!elRef.current)
+            return;
+        if (elRef.current.contains(document.activeElement) &&
+            elRef.current !== document.activeElement)
+            return;
+        const block = elRef.current.querySelector(`div[id*="block-input"],textarea[id*="block-input"]`);
+        if ((block === null || block === void 0 ? void 0 : block.id) === "block-input-ghost")
+            (0, writes_1.createBlock)({ parentUid, node: { text: "" } }).then(() => setTimeout(realFocus, 500));
+        const { windowId, blockUid } = (0, dom_1.getUids)(block);
+        if (blockUid)
+            window.roamAlphaAPI.ui.setBlockFocusAndSelection({
+                location: {
+                    "block-uid": blockUid,
+                    "window-id": windowId,
+                },
+            });
+    }, [elRef]);
+    (0, react_1.useEffect)(() => {
+        const el = elRef.current;
+        if (el) {
+            (0, createPage_1.default)({
+                uid: parentUid,
+                title: (0, nanoid_1.default)(),
+                tree: defaultEmbed,
+            }).then(() => {
+                window.roamAlphaAPI.ui.components.renderPage({
+                    uid: parentUid,
+                    el,
+                    "hide-mentions?": true,
+                });
+                if (autoFocus)
+                    realFocus();
+            });
+            // In the future, we can return the whole tree of data from `parentUid`
+            onChange(() => (0, getFullTreeByParentUid_1.default)(parentUid).children);
+            return () => {
+                window.roamAlphaAPI.deletePage({ page: { uid: parentUid } });
+            };
+        }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return () => { };
+    }, [
+        elRef,
+        defaultEmbed,
+        autoFocus,
+        realFocus,
+        parentUid,
+        // Triggering infinite rerender
+        // onChange
+    ]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("style", null, `div.rm-autocomplete__results {
+  z-index: 1000;
+}
+.roamjs-form-embed div div:has(> h1.rm-title-display),
+.roamjs-form-embed .rm-api-render--page > div:has(.rm-reference-main) {
+  display: none;
+}`),
+        react_1.default.createElement("div", { ref: elRef, className: "rounded-md bg-white font-normal mt-1 bp3-input h-32 overflow-scroll roamjs-form-embed py-2 px-4", tabIndex: 0, onFocus: realFocus, onKeyDown: (e) => {
+                var _a, _b, _c, _d;
+                if (e.key !== "Tab")
+                    return;
+                const { blockUid } = (0, dom_1.getUids)(e.target);
+                if (!blockUid)
+                    return;
+                const { [":block/order"]: order, [":block/parents"]: parents } = window.roamAlphaAPI.pull("[:block/order {:block/parents [:block/uid]}]", [":block/uid", blockUid]);
+                if (!(order === 0 &&
+                    (parents === null || parents === void 0 ? void 0 : parents.length) === 1 &&
+                    parents[0][":block/uid"] === parentUid))
+                    return;
+                e.stopPropagation();
+                e.preventDefault();
+                const label = (_a = elRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+                if (!label)
+                    return;
+                const nextElToFocus = e.shiftKey
+                    ? label.previousElementSibling ||
+                        ((_b = label
+                            .closest(".bp3-dialog")) === null || _b === void 0 ? void 0 : _b.querySelector(".bp3-dialog-footer .bp3-button.roamjs-cancel"))
+                    : label.nextElementSibling ||
+                        ((_c = label
+                            .closest(".bp3-dialog")) === null || _c === void 0 ? void 0 : _c.querySelector(".bp3-dialog-footer .bp3-button.bp3-intent-primary"));
+                if (!nextElToFocus)
+                    return;
+                const focusQuery = "input,button,div.roamjs-form-embed";
+                if (nextElToFocus.matches(focusQuery))
+                    nextElToFocus.focus();
+                else
+                    (_d = nextElToFocus.querySelector(focusQuery)) === null || _d === void 0 ? void 0 : _d.focus();
+            } })));
+};
+const FormDialog = ({ title, content, isOpen, onClose, onSubmit = () => Promise.resolve(), fields = {}, submitButtonText = "Submit", cancelButtonText = "Cancel", enforceFocus, className, style, }) => {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)("");
+    const [data, setData] = (0, react_1.useState)(() => Object.fromEntries(Object.entries(fields)
+        .filter(([, meta]) => typeof meta.defaultValue !== "undefined")
+        .map(([key, meta]) => [key, meta.defaultValue])));
+    const onClick = (0, react_1.useCallback)(() => Promise.resolve(onSubmit(Object.fromEntries(Object.entries(data)
+        .filter(([key]) => {
+        const { conditional } = fields[key];
+        return !conditional || !!data[conditional];
+    })
+        .map(([key, value]) => [key, typeof value === "function" ? value() : value]))))
+        .then(onClose)
+        .catch((e) => {
+        setError(e.message);
+        setLoading(false);
+    }), [data, onClose, setError, setLoading]);
+    const getFieldAttributes = (name, meta) => {
+        const attributes = {
+            "data-field-name": name,
+            "data-field-type": meta.type,
+        };
+        if (meta.label)
+            attributes["data-field-label"] = meta.label;
+        return attributes;
+    };
+    return (react_1.default.createElement(core_1.Dialog, { isOpen: isOpen, onClose: onClose, title: title, enforceFocus: !title || enforceFocus, autoFocus: !title, className: className, style: style },
+        react_1.default.createElement("div", { className: core_1.Classes.DIALOG_BODY },
+            content,
+            Object.entries(fields).map(([name, meta], index) => {
+                const fieldClassName = `roamjs-form-field`;
+                const setValue = (0, react_1.useCallback)((value) => setData((d) => (Object.assign(Object.assign({}, d), { [name]: value }))), [setData, name]);
+                if (meta.conditional && !data[meta.conditional]) {
+                    return react_1.default.createElement("div", { key: name });
+                }
+                else if (meta.conditional &&
+                    meta.conditionalValues &&
+                    typeof data[meta.conditional] === "string" &&
+                    !meta.conditionalValues.includes(data[meta.conditional])) {
+                    return react_1.default.createElement("div", { key: name });
+                }
+                if (meta.type === "text") {
+                    return (react_1.default.createElement(core_1.Label, Object.assign({ key: name, className: fieldClassName }, getFieldAttributes(name, meta)),
+                        meta.label,
+                        react_1.default.createElement(core_1.InputGroup, { value: data[name], onChange: (e) => setValue(e.target.value), autoFocus: index === 0 })));
+                }
+                else if (meta.type === "number") {
+                    return (react_1.default.createElement(core_1.Label, Object.assign({ key: name, className: fieldClassName }, getFieldAttributes(name, meta)),
+                        meta.label,
+                        react_1.default.createElement(core_1.NumericInput, { value: data[name], onValueChange: (v) => setValue(v), autoFocus: index === 0 })));
+                }
+                else if (meta.type === "info") {
+                    return (react_1.default.createElement("div", Object.assign({ key: name, className: `${fieldClassName} mb-4` }, getFieldAttributes(name, meta)), meta.label));
+                }
+                else if (meta.type === "flag") {
+                    return (react_1.default.createElement(core_1.Checkbox, Object.assign({ label: meta.label, value: data[name], onChange: (e) => setValue(e.target.checked), key: name, autoFocus: index === 0, className: fieldClassName }, getFieldAttributes(name, meta))));
+                }
+                else if (meta.type === "select") {
+                    return (react_1.default.createElement(core_1.Label, Object.assign({ key: name, className: fieldClassName }, getFieldAttributes(name, meta)),
+                        meta.label,
+                        react_1.default.createElement(MenuItemSelect_1.default, { activeItem: data[name], onItemSelect: setValue, items: meta.options || [], ButtonProps: {
+                                autoFocus: index === 0,
+                            } })));
+                }
+                else if (meta.type === "page") {
+                    return (react_1.default.createElement(core_1.Label, Object.assign({ key: name, className: fieldClassName }, getFieldAttributes(name, meta)),
+                        meta.label,
+                        react_1.default.createElement(PageInput_1.default, { key: name, value: data[name], setValue: setValue, autoFocus: index === 0 })));
+                }
+                else if (meta.type === "block") {
+                    return (react_1.default.createElement(core_1.Label, Object.assign({ key: name, className: fieldClassName }, getFieldAttributes(name, meta)),
+                        meta.label,
+                        react_1.default.createElement(BlockInput_1.default, { value: (0, getTextByBlockUid_1.default)(data[name]) ||
+                                data[name], setValue: (text, uid) => setValue(window.roamAlphaAPI.pull("[:db/id]", [
+                                ":block/uid",
+                                uid || "",
+                            ])
+                                ? uid
+                                : text), autoFocus: index === 0 })));
+                }
+                else if (meta.type === "autocomplete") {
+                    return (react_1.default.createElement(core_1.Label, Object.assign({ key: name, className: fieldClassName }, getFieldAttributes(name, meta)),
+                        meta.label,
+                        react_1.default.createElement(AutocompleteInput_1.default, { value: data[name], options: meta.options, setValue: setValue, autoFocus: index === 0 })));
+                }
+                else if (meta.type === "embed") {
+                    return (react_1.default.createElement(core_1.Label, Object.assign({ key: name, className: fieldClassName }, getFieldAttributes(name, meta)),
+                        meta.label,
+                        react_1.default.createElement(EmbedInput, { defaultValue: meta.defaultValue, onChange: setValue, autoFocus: index === 0 })));
+                }
+                else {
+                    return react_1.default.createElement("div", { key: name });
+                }
+            })),
+        react_1.default.createElement("div", { className: core_1.Classes.DIALOG_FOOTER },
+            react_1.default.createElement("div", { className: `${core_1.Classes.DIALOG_FOOTER_ACTIONS} items-center flex-row-reverse` },
+                react_1.default.createElement(core_1.Button, { text: submitButtonText, intent: core_1.Intent.PRIMARY, onClick: onClick, disabled: loading, className: "flex-shrink-0" }),
+                react_1.default.createElement(core_1.Button, { text: cancelButtonText, onClick: onClose, disabled: loading, className: "flex-shrink-0 roamjs-cancel" }),
+                react_1.default.createElement("span", { className: "text-red-700 flex-grow" }, error),
+                loading && react_1.default.createElement(core_1.Spinner, { size: core_1.SpinnerSize.SMALL })))));
+};
+exports.render = (0, createOverlayRender_1.default)("form-dialog", FormDialog);
+const prompt = ({ defaultAnswer, question, title, }) => new Promise((resolve) => (0, exports.render)({
+    onSubmit: (data) => resolve(data.value),
+    fields: { value: { type: "text", defaultValue: defaultAnswer } },
+    title,
+    content: (react_1.default.createElement("div", { className: "whitespace-pre-wrap font-semibold text-lg mb-4" }, question)),
+}));
+exports.prompt = prompt;
+exports.default = FormDialog;
+//# sourceMappingURL=FormDialog.js.map

package/components/FormDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../src/components/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Button,\n  Checkbox,\n  Classes,\n  Dialog,\n  InputGroup,\n  Intent,\n  Label,\n  NumericInput,\n  Spinner,\n  SpinnerSize,\n} from \"@blueprintjs/core\";\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport getTextByBlockUid from \"../queries/getTextByBlockUid\";\nimport createOverlayRender from \"../util/createOverlayRender\";\nimport type { RoamOverlayProps } from \"../util/renderOverlay\";\nimport BlockInput from \"./BlockInput\";\nimport MenuItemSelect from \"./MenuItemSelect\";\nimport PageInput from \"./PageInput\";\nimport nanoid from \"nanoid\";\nimport { getUids } from \"../dom\";\nimport { InputTextNode, PullBlock } from \"../types\";\nimport getFullTreeByParentUid from \"../queries/getFullTreeByParentUid\";\nimport createPage from \"../writes/createPage\";\nimport { createBlock } from \"../writes\";\nimport AutocompleteInput from \"./AutocompleteInput\";\n\ntype Props<T> = {\n  title?: React.ReactNode;\n  content?: React.ReactNode;\n  onSubmit?: (data: T) => Promise<unknown> | unknown;\n  submitButtonText?: string;\n  cancelButtonText?: string;\n  enforceFocus?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  fields?: Record<\n    string,\n    (\n      | {\n          defaultValue?: string;\n          type: \"text\";\n        }\n      | {\n          defaultValue?: string;\n          type: \"info\";\n        }\n      | {\n          defaultValue?: number;\n          type: \"number\";\n        }\n      | {\n          defaultValue?: string;\n          type: \"select\";\n          options?: string[];\n        }\n      | {\n          defaultValue?: string;\n          type: \"page\";\n        }\n      | {\n          defaultValue?: string;\n          type: \"block\";\n        }\n      | {\n          defaultValue?: string;\n          type: \"autocomplete\";\n          options?: string[];\n        }\n      | {\n          defaultValue?: boolean;\n          type: \"flag\";\n        }\n      | {\n          defaultValue?: InputTextNode[];\n          type: \"embed\";\n        }\n    ) & { label?: string; conditional?: string; conditionalValues?: string[] }\n  >;\n};\n\nconst EmbedInput = ({\n  defaultValue,\n  onChange,\n  autoFocus,\n}: {\n  defaultValue?: InputTextNode[];\n  onChange: (s: () => InputTextNode[]) => void;\n  autoFocus: boolean;\n}) => {\n  const defaultEmbed = useMemo(() => defaultValue || [], [defaultValue]);\n  const elRef = useRef<HTMLDivElement>(null);\n  const parentUid = useMemo(window.roamAlphaAPI.util.generateUID, []);\n  const realFocus = useCallback(() => {\n    if (!elRef.current) return;\n    if (\n      elRef.current.contains(document.activeElement) &&\n      elRef.current !== document.activeElement\n    )\n      return;\n    const block = elRef.current.querySelector<\n      HTMLDivElement | HTMLTextAreaElement\n    >(`div[id*=\"block-input\"],textarea[id*=\"block-input\"]`);\n    if (block?.id === \"block-input-ghost\")\n      createBlock({ parentUid, node: { text: \"\" } }).then(() =>\n        setTimeout(realFocus, 500)\n      );\n    const { windowId, blockUid } = getUids(block);\n    if (blockUid)\n      window.roamAlphaAPI.ui.setBlockFocusAndSelection({\n        location: {\n          \"block-uid\": blockUid,\n          \"window-id\": windowId,\n        },\n      });\n  }, [elRef]);\n  useEffect(() => {\n    const el = elRef.current;\n    if (el) {\n      createPage({\n        uid: parentUid,\n        title: nanoid(),\n        tree: defaultEmbed,\n      }).then(() => {\n        window.roamAlphaAPI.ui.components.renderPage({\n          uid: parentUid,\n          el,\n          \"hide-mentions?\": true,\n        });\n        if (autoFocus) realFocus();\n      });\n      // In the future, we can return the whole tree of data from `parentUid`\n      onChange(() => getFullTreeByParentUid(parentUid).children);\n      return () => {\n        window.roamAlphaAPI.deletePage({ page: { uid: parentUid } });\n      };\n    }\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {};\n  }, [\n    elRef,\n    defaultEmbed,\n    autoFocus,\n    realFocus,\n    parentUid,\n    // Triggering infinite rerender\n    // onChange\n  ]);\n  return (\n    <>\n      <style>{`div.rm-autocomplete__results {\n  z-index: 1000;\n}\n.roamjs-form-embed div div:has(> h1.rm-title-display),\n.roamjs-form-embed .rm-api-render--page > div:has(.rm-reference-main) {\n  display: none;\n}`}</style>\n      <div\n        ref={elRef}\n        className=\"rounded-md bg-white font-normal mt-1 bp3-input h-32 overflow-scroll roamjs-form-embed py-2 px-4\"\n        tabIndex={0}\n        onFocus={realFocus}\n        onKeyDown={(e) => {\n          if (e.key !== \"Tab\") return;\n          const { blockUid } = getUids(e.target as HTMLTextAreaElement);\n          if (!blockUid) return;\n          const { [\":block/order\"]: order, [\":block/parents\"]: parents } =\n            window.roamAlphaAPI.pull(\n              \"[:block/order {:block/parents [:block/uid]}]\",\n              [\":block/uid\", blockUid]\n            ) as PullBlock;\n          if (\n            !(\n              order === 0 &&\n              parents?.length === 1 &&\n              parents[0][\":block/uid\"] === parentUid\n            )\n          )\n            return;\n          e.stopPropagation();\n          e.preventDefault();\n          const label = elRef.current?.parentElement;\n          if (!label) return;\n          const nextElToFocus = e.shiftKey\n            ? label.previousElementSibling ||\n              label\n                .closest(\".bp3-dialog\")\n                ?.querySelector(\".bp3-dialog-footer .bp3-button.roamjs-cancel\")\n            : label.nextElementSibling ||\n              label\n                .closest(\".bp3-dialog\")\n                ?.querySelector(\n                  \".bp3-dialog-footer .bp3-button.bp3-intent-primary\"\n                );\n          if (!nextElToFocus) return;\n          const focusQuery = \"input,button,div.roamjs-form-embed\";\n          if (nextElToFocus.matches(focusQuery))\n            (nextElToFocus as HTMLElement).focus();\n          else nextElToFocus.querySelector<HTMLElement>(focusQuery)?.focus();\n        }}\n      />\n    </>\n  );\n};\n\nconst FormDialog = <T extends Record<string, unknown>>({\n  title,\n  content,\n  isOpen,\n  onClose,\n  onSubmit = () => Promise.resolve(),\n  fields = {},\n  submitButtonText = \"Submit\",\n  cancelButtonText = \"Cancel\",\n  enforceFocus,\n  className,\n  style,\n}: RoamOverlayProps<Props<T>>) => {\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState(\"\");\n  const [data, setData] = useState<T>(\n    () =>\n      Object.fromEntries(\n        Object.entries(fields)\n          .filter(([, meta]) => typeof meta.defaultValue !== \"undefined\")\n          .map(([key, meta]) => [key, meta.defaultValue])\n      ) as T\n  );\n  const onClick = useCallback(\n    () =>\n      Promise.resolve(\n        onSubmit(\n          Object.fromEntries(\n            Object.entries(data)\n              .filter(([key]) => {\n                const { conditional } = fields[key];\n                return !conditional || !!data[conditional];\n              })\n              .map(\n                ([key, value]) =>\n                  [key, typeof value === \"function\" ? value() : value] as const\n              )\n          ) as T\n        )\n      )\n        .then(onClose)\n        .catch((e) => {\n          setError(e.message);\n          setLoading(false);\n        }),\n    [data, onClose, setError, setLoading]\n  );\n\n  const getFieldAttributes = (\n    name: string,\n    meta: { type: string; label?: string }\n  ) => {\n    const attributes: Record<string, string> = {\n      \"data-field-name\": name,\n      \"data-field-type\": meta.type,\n    };\n    if (meta.label) attributes[\"data-field-label\"] = meta.label;\n    return attributes;\n  };\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onClose={onClose}\n      title={title}\n      enforceFocus={!title || enforceFocus}\n      autoFocus={!title}\n      className={className}\n      style={style}\n    >\n      <div className={Classes.DIALOG_BODY}>\n        {content}\n        {Object.entries(fields).map(([name, meta], index) => {\n          const fieldClassName = `roamjs-form-field`;\n          const setValue = useCallback(\n            (value: unknown) => setData((d) => ({ ...d, [name]: value })),\n            [setData, name]\n          );\n          if (meta.conditional && !data[meta.conditional]) {\n            return <div key={name} />;\n          } else if (\n            meta.conditional &&\n            meta.conditionalValues &&\n            typeof data[meta.conditional] === \"string\" &&\n            !meta.conditionalValues.includes(data[meta.conditional] as string)\n          ) {\n            return <div key={name} />;\n          }\n          if (meta.type === \"text\") {\n            return (\n              <Label\n                key={name}\n                className={fieldClassName}\n                {...getFieldAttributes(name, meta)}\n              >\n                {meta.label}\n                <InputGroup\n                  value={data[name] as string}\n                  onChange={(e) => setValue(e.target.value)}\n                  autoFocus={index === 0}\n                />\n              </Label>\n            );\n          } else if (meta.type === \"number\") {\n            return (\n              <Label\n                key={name}\n                className={fieldClassName}\n                {...getFieldAttributes(name, meta)}\n              >\n                {meta.label}\n                <NumericInput\n                  value={data[name] as string}\n                  onValueChange={(v) => setValue(v)}\n                  autoFocus={index === 0}\n                />\n              </Label>\n            );\n          } else if (meta.type === \"info\") {\n            return (\n              <div\n                key={name}\n                className={`${fieldClassName} mb-4`}\n                {...getFieldAttributes(name, meta)}\n              >\n                {meta.label}\n              </div>\n            );\n          } else if (meta.type === \"flag\") {\n            return (\n              <Checkbox\n                label={meta.label}\n                value={data[name] as string}\n                onChange={(e) =>\n                  setValue((e.target as HTMLInputElement).checked)\n                }\n                key={name}\n                autoFocus={index === 0}\n                className={fieldClassName}\n                {...getFieldAttributes(name, meta)}\n              />\n            );\n          } else if (meta.type === \"select\") {\n            return (\n              <Label\n                key={name}\n                className={fieldClassName}\n                {...getFieldAttributes(name, meta)}\n              >\n                {meta.label}\n                <MenuItemSelect\n                  activeItem={data[name] as string}\n                  onItemSelect={setValue}\n                  items={meta.options || []}\n                  ButtonProps={{\n                    autoFocus: index === 0,\n                  }}\n                />\n              </Label>\n            );\n          } else if (meta.type === \"page\") {\n            return (\n              <Label\n                key={name}\n                className={fieldClassName}\n                {...getFieldAttributes(name, meta)}\n              >\n                {meta.label}\n                <PageInput\n                  key={name}\n                  value={data[name] as string}\n                  setValue={setValue}\n                  autoFocus={index === 0}\n                />\n              </Label>\n            );\n          } else if (meta.type === \"block\") {\n            return (\n              <Label\n                key={name}\n                className={fieldClassName}\n                {...getFieldAttributes(name, meta)}\n              >\n                {meta.label}\n                <BlockInput\n                  value={\n                    getTextByBlockUid(data[name] as string) ||\n                    (data[name] as string)\n                  }\n                  setValue={(text, uid) =>\n                    setValue(\n                      window.roamAlphaAPI.pull(\"[:db/id]\", [\n                        \":block/uid\",\n                        uid || \"\",\n                      ])\n                        ? uid\n                        : text\n                    )\n                  }\n                  autoFocus={index === 0}\n                />\n              </Label>\n            );\n          } else if (meta.type === \"autocomplete\") {\n            return (\n              <Label\n                key={name}\n                className={fieldClassName}\n                {...getFieldAttributes(name, meta)}\n              >\n                {meta.label}\n                <AutocompleteInput\n                  value={data[name] as string}\n                  options={meta.options}\n                  setValue={setValue}\n                  autoFocus={index === 0}\n                />\n              </Label>\n            );\n          } else if (meta.type === \"embed\") {\n            return (\n              <Label\n                key={name}\n                className={fieldClassName}\n                {...getFieldAttributes(name, meta)}\n              >\n                {meta.label}\n                <EmbedInput\n                  defaultValue={meta.defaultValue}\n                  onChange={setValue}\n                  autoFocus={index === 0}\n                />\n              </Label>\n            );\n          } else {\n            return <div key={name} />;\n          }\n        })}\n      </div>\n      <div className={Classes.DIALOG_FOOTER}>\n        <div\n          className={`${Classes.DIALOG_FOOTER_ACTIONS} items-center flex-row-reverse`}\n        >\n          <Button\n            text={submitButtonText}\n            intent={Intent.PRIMARY}\n            onClick={onClick}\n            disabled={loading}\n            className=\"flex-shrink-0\"\n          />\n          <Button\n            text={cancelButtonText}\n            onClick={onClose}\n            disabled={loading}\n            className=\"flex-shrink-0 roamjs-cancel\"\n          />\n          <span className=\"text-red-700 flex-grow\">{error}</span>\n          {loading && <Spinner size={SpinnerSize.SMALL} />}\n        </div>\n      </div>\n    </Dialog>\n  );\n};\n\nexport const render = createOverlayRender<Props<Record<string, unknown>>>(\n  \"form-dialog\",\n  FormDialog\n);\n\nexport const prompt = ({\n  defaultAnswer,\n  question,\n  title,\n}: {\n  title: string;\n  question: string;\n  defaultAnswer: string;\n}) =>\n  new Promise<string>((resolve) =>\n    render({\n      onSubmit: (data) => resolve(data.value as string),\n      fields: { value: { type: \"text\", defaultValue: defaultAnswer } },\n      title,\n      content: (\n        <div className=\"whitespace-pre-wrap font-semibold text-lg mb-4\">\n          {question}\n        </div>\n      ),\n    })\n  );\n\nexport default FormDialog;\n"]}

package/components/Loading.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Loading: () => JSX.Element;
+export declare const renderLoading: (targetUid?: string) => () => void;
+export default Loading;

package/components/Loading.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderLoading = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const Loading = () => {
+    return react_1.default.createElement(core_1.Spinner, { size: core_1.SpinnerSize.SMALL });
+};
+const renderLoading = (targetUid) => {
+    var _a;
+    const reactParent = document.createElement("div");
+    reactParent.style.position = "absolute";
+    reactParent.style.bottom = "0";
+    reactParent.style.right = "0";
+    const parent = targetUid
+        ? ((_a = document.querySelector(`.rm-block__input[id$="${targetUid}"]`)) === null || _a === void 0 ? void 0 : _a.parentElement) || document.querySelector(".roam-article")
+        : document.querySelector(".roam-article");
+    if (parent) {
+        parent.appendChild(reactParent);
+        react_dom_1.default.render(react_1.default.createElement(Loading, null), reactParent);
+        return () => {
+            react_dom_1.default.unmountComponentAtNode(reactParent);
+            reactParent.remove();
+        };
+    }
+    else {
+        return () => {
+            // no parent found
+        };
+    }
+};
+exports.renderLoading = renderLoading;
+exports.default = Loading;
+//# sourceMappingURL=Loading.js.map

package/components/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../src/components/Loading.tsx"],"names":[],"mappings":";;;;AAAA,4CAAyD;AACzD,0DAA0B;AAC1B,kEAAiC;AAEjC,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,OAAO,8BAAC,cAAO,IAAC,IAAI,EAAE,kBAAW,CAAC,KAAK,GAAI,CAAC;AAC9C,CAAC,CAAC;AAEK,MAAM,aAAa,GAAG,CAAC,SAAkB,EAAE,EAAE;;IAClD,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAClD,WAAW,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IACxC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IAC/B,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;IAC9B,MAAM,MAAM,GAAG,SAAS;QACtB,CAAC,CAAC,CAAA,MAAA,QAAQ,CAAC,aAAa,CACpB,yBAAyB,SAAS,IAAI,CACvC,0CAAE,aAAa,KAAI,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC;QAC7D,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5C,IAAI,MAAM,EAAE;QACV,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAChC,mBAAQ,CAAC,MAAM,CAAC,8BAAC,OAAO,OAAG,EAAE,WAAW,CAAC,CAAC;QAC1C,OAAO,GAAG,EAAE;YACV,mBAAQ,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC;YAC7C,WAAW,CAAC,MAAM,EAAE,CAAC;QACvB,CAAC,CAAC;KACH;SAAM;QACL,OAAO,GAAG,EAAE;YACV,kBAAkB;QACpB,CAAC,CAAC;KACH;AACH,CAAC,CAAC;AAtBW,QAAA,aAAa,iBAsBxB;AAEF,kBAAe,OAAO,CAAC","sourcesContent":["import { Spinner, SpinnerSize } from \"@blueprintjs/core\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nconst Loading = () => {\n  return <Spinner size={SpinnerSize.SMALL} />;\n};\n\nexport const renderLoading = (targetUid?: string) => {\n  const reactParent = document.createElement(\"div\");\n  reactParent.style.position = \"absolute\";\n  reactParent.style.bottom = \"0\";\n  reactParent.style.right = \"0\";\n  const parent = targetUid\n    ? document.querySelector<HTMLDivElement>(\n        `.rm-block__input[id$=\"${targetUid}\"]`\n      )?.parentElement || document.querySelector(\".roam-article\")\n    : document.querySelector(\".roam-article\");\n  if (parent) {\n    parent.appendChild(reactParent);\n    ReactDOM.render(<Loading />, reactParent);\n    return () => {\n      ReactDOM.unmountComponentAtNode(reactParent);\n      reactParent.remove();\n    };\n  } else {\n    return () => {\n      // no parent found\n    };\n  }\n};\n\nexport default Loading;\n"]}

package/components/MenuItemSelect.d.ts

@@ -0,0 +1,17 @@
+import { ButtonProps } from "@blueprintjs/core";
+import { SelectProps, ICreateNewItem } from "@blueprintjs/select";
+import React, { ReactText, ButtonHTMLAttributes, ReactNode } from "react";
+declare type ActiveItem<T> = T | ICreateNewItem | null | undefined;
+declare type TransformItem<T> = (s: T) => ReactNode;
+declare type MenuItemSelectProps<T extends ReactText> = Omit<SelectProps<T>, "itemRenderer"> & {
+    ButtonProps?: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+    emptyValueText?: string;
+    transformItem?: TransformItem<T>;
+    children?: (props: {
+        activeItem: ActiveItem<T>;
+        emptyValueText?: string;
+        transformItem?: TransformItem<T>;
+    }) => ReactNode;
+};
+declare const MenuItemSelect: <T extends React.ReactText>(props: MenuItemSelectProps<T>) => JSX.Element;
+export default MenuItemSelect;

package/components/MenuItemSelect.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const select_1 = require("@blueprintjs/select");
+const react_1 = tslib_1.__importDefault(require("react"));
+const MenuItemSelect = (props) => {
+    const TypeSelect = select_1.Select.ofType();
+    const itemPredicate = (query, item) => {
+        const text = props.transformItem ? props.transformItem(item) : item;
+        return String(text).toLowerCase().includes(query.toLowerCase());
+    };
+    const { activeItem, filterable = false, children, transformItem, emptyValueText } = props, selectProps = tslib_1.__rest(props, ["activeItem", "filterable", "children", "transformItem", "emptyValueText"]);
+    const defaultButton = (react_1.default.createElement(core_1.Button, Object.assign({ text: activeItem ? (transformItem ? (transformItem(activeItem)) : (activeItem)) : (react_1.default.createElement("span", { className: "opacity-50 italic" }, emptyValueText || "Choose...")), rightIcon: "double-caret-vertical" }, props.ButtonProps)));
+    return (react_1.default.createElement(TypeSelect, Object.assign({}, selectProps, { itemRenderer: (item, { modifiers, handleClick }) => (react_1.default.createElement(core_1.MenuItem, { key: item, text: transformItem ? transformItem(item) : item, active: modifiers.active, onClick: handleClick })), filterable: filterable, itemPredicate: filterable ? itemPredicate : undefined, popoverProps: Object.assign({ minimal: true, captureDismiss: true }, props.popoverProps) }), children
+        ? children({
+            activeItem,
+            emptyValueText,
+            transformItem,
+        })
+        : defaultButton));
+};
+exports.default = MenuItemSelect;
+//# sourceMappingURL=MenuItemSelect.js.map