roamjs-components 0.85.2 → 0.85.3

package/components/ConfigPanels/TimePanel.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const datetime_1 = require("@blueprintjs/datetime");
+const format_1 = tslib_1.__importDefault(require("date-fns/format"));
+const startOfDay_1 = tslib_1.__importDefault(require("date-fns/startOfDay"));
+const react_1 = tslib_1.__importDefault(require("react"));
+const idToTitle_1 = tslib_1.__importDefault(require("../../util/idToTitle"));
+const Description_1 = tslib_1.__importDefault(require("../Description"));
+const useSingleChildValue_1 = tslib_1.__importDefault(require("./useSingleChildValue"));
+const TimePanel = ({ title, uid, parentUid, order, description, defaultValue = (0, startOfDay_1.default)(new Date()), }) => {
+    const { value, onChange } = (0, useSingleChildValue_1.default)({
+        defaultValue,
+        title,
+        uid,
+        parentUid,
+        order,
+        transform: (s) => {
+            const d = new Date();
+            const [hours, minutes] = s.split(":");
+            d.setHours(Number(hours));
+            d.setMinutes(Number(minutes));
+            return d;
+        },
+        toStr: (v) => (0, format_1.default)(v, "HH:mm"),
+    });
+    return (react_1.default.createElement(core_1.Label, null,
+        (0, idToTitle_1.default)(title),
+        react_1.default.createElement(Description_1.default, { description: description }),
+        react_1.default.createElement(datetime_1.TimePicker, { value: value, onChange: onChange, showArrowButtons: true })));
+};
+TimePanel.type = "time";
+exports.default = TimePanel;
+//# sourceMappingURL=TimePanel.js.map

package/components/ConfigPanels/TimePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePanel.js","sourceRoot":"","sources":["../../../src/components/ConfigPanels/TimePanel.tsx"],"names":[],"mappings":";;;AAAA,4CAA0C;AAC1C,oDAAmD;AACnD,qEAAqC;AACrC,6EAA6C;AAC7C,0DAA0B;AAC1B,6EAA6C;AAC7C,yEAAyC;AAEzC,wFAAwD;AAExD,MAAM,SAAS,GAA0B,CAAC,EACxC,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,WAAW,EACX,YAAY,GAAG,IAAA,oBAAU,EAAC,IAAI,IAAI,EAAE,CAAC,GACtC,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAA,6BAAmB,EAAC;QAC9C,YAAY;QACZ,KAAK;QACL,GAAG;QACH,SAAS;QACT,KAAK;QACL,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;YACrB,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAC1B,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;YAC9B,OAAO,CAAC,CAAC;QACX,CAAC;QACD,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAA,gBAAM,EAAC,CAAC,EAAE,OAAO,CAAC;KACjC,CAAC,CAAC;IACH,OAAO,CACL,8BAAC,YAAK;QACH,IAAA,mBAAS,EAAC,KAAK,CAAC;QACjB,8BAAC,qBAAW,IAAC,WAAW,EAAE,WAAW,GAAI;QACzC,8BAAC,qBAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,SAAG,CAC3D,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;AAExB,kBAAe,SAAS,CAAC","sourcesContent":["import { Label } from \"@blueprintjs/core\";\nimport { TimePicker } from \"@blueprintjs/datetime\";\nimport format from \"date-fns/format\";\nimport startOfDay from \"date-fns/startOfDay\";\nimport React from \"react\";\nimport idToTitle from \"../../util/idToTitle\";\nimport Description from \"../Description\";\nimport type { FieldPanel, TimeField } from \"./types\";\nimport useSingleChildValue from \"./useSingleChildValue\";\n\nconst TimePanel: FieldPanel<TimeField> = ({\n  title,\n  uid,\n  parentUid,\n  order,\n  description,\n  defaultValue = startOfDay(new Date()),\n}) => {\n  const { value, onChange } = useSingleChildValue({\n    defaultValue,\n    title,\n    uid,\n    parentUid,\n    order,\n    transform: (s) => {\n      const d = new Date();\n      const [hours, minutes] = s.split(\":\");\n      d.setHours(Number(hours));\n      d.setMinutes(Number(minutes));\n      return d;\n    },\n    toStr: (v) => format(v, \"HH:mm\"),\n  });\n  return (\n    <Label>\n      {idToTitle(title)}\n      <Description description={description} />\n      <TimePicker value={value} onChange={onChange} showArrowButtons />\n    </Label>\n  );\n};\n\nTimePanel.type = \"time\";\n\nexport default TimePanel;\n"]}

package/components/ConfigPanels/getBrandColors.d.ts

@@ -0,0 +1,7 @@
+export declare type Brand = {
+    base: string;
+    bright: string;
+    faded: string;
+};
+declare const getBrandColors: (base?: string) => Brand | undefined;
+export default getBrandColors;

package/components/ConfigPanels/getBrandColors.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const color_1 = tslib_1.__importDefault(require("color"));
+const tryColor = (s) => {
+    if (!s)
+        return undefined;
+    try {
+        return (0, color_1.default)(s);
+    }
+    catch (e) {
+        return undefined;
+    }
+};
+const getBrandColors = (base) => {
+    const brandColor = tryColor(base);
+    if (!brandColor)
+        return undefined;
+    return {
+        base: brandColor.toString(),
+        faded: brandColor
+            .alpha(0.2)
+            .lightness(brandColor.lightness() + 5)
+            .toString(),
+        bright: brandColor.lightness(brandColor.lightness() + 5).toString(),
+    };
+};
+exports.default = getBrandColors;
+//# sourceMappingURL=getBrandColors.js.map

package/components/ConfigPanels/getBrandColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBrandColors.js","sourceRoot":"","sources":["../../../src/components/ConfigPanels/getBrandColors.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAQ1B,MAAM,QAAQ,GAAG,CAAC,CAAU,EAAE,EAAE;IAC9B,IAAI,CAAC,CAAC;QAAE,OAAO,SAAS,CAAC;IACzB,IAAI;QACF,OAAO,IAAA,eAAK,EAAC,CAAC,CAAC,CAAC;KACjB;IAAC,OAAO,CAAC,EAAE;QACV,OAAO,SAAS,CAAC;KAClB;AACH,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,IAAa,EAAqB,EAAE;IAC1D,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAClC,IAAI,CAAC,UAAU;QAAE,OAAO,SAAS,CAAC;IAClC,OAAO;QACL,IAAI,EAAE,UAAU,CAAC,QAAQ,EAAE;QAC3B,KAAK,EAAE,UAAU;aACd,KAAK,CAAC,GAAG,CAAC;aACV,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;aACrC,QAAQ,EAAE;QACb,MAAM,EAAE,UAAU,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE;KACpE,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,cAAc,CAAC","sourcesContent":["import Color from \"color\";\n\nexport type Brand = {\n  base: string;\n  bright: string;\n  faded: string;\n};\n\nconst tryColor = (s?: string) => {\n  if (!s) return undefined;\n  try {\n    return Color(s);\n  } catch (e) {\n    return undefined;\n  }\n};\n\nconst getBrandColors = (base?: string): Brand | undefined => {\n  const brandColor = tryColor(base);\n  if (!brandColor) return undefined;\n  return {\n    base: brandColor.toString(),\n    faded: brandColor\n      .alpha(0.2)\n      .lightness(brandColor.lightness() + 5)\n      .toString(),\n    bright: brandColor.lightness(brandColor.lightness() + 5).toString(),\n  };\n};\n\nexport default getBrandColors;\n"]}

package/components/ConfigPanels/types.d.ts

@@ -0,0 +1,84 @@
+import React from "react";
+import type { InputTextNode } from "../../types/native";
+import type { ExternalLoginOptions } from "../ExternalLogin";
+export declare type OauthField = {
+    type: "oauth";
+    defaultValue?: [];
+    options: ExternalLoginOptions;
+};
+export declare type FieldPanel<T extends UnionField, U = Record<string, unknown>> = ((props: {
+    order: number;
+    uid?: string;
+    parentUid: string;
+} & Omit<Field<T>, "Panel"> & U) => React.ReactElement) & {
+    type: T["type"];
+};
+export declare type TextField = {
+    type: "text";
+    defaultValue?: string;
+    options?: {
+        placeholder?: string;
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+};
+export declare type TimeField = {
+    type: "time";
+    defaultValue?: Date;
+};
+export declare type NumberField = {
+    type: "number";
+    defaultValue?: number;
+};
+export declare type FlagField = {
+    type: "flag";
+    defaultValue?: boolean;
+    disabled?: boolean;
+    options?: {
+        onChange?: (f: boolean, e: React.FormEvent<HTMLInputElement>) => void;
+    };
+};
+export declare type MultiTextField = {
+    type: "multitext";
+    defaultValue?: string[];
+    options?: {
+        placeholder?: string;
+    };
+};
+export declare type PagesField = {
+    type: "pages";
+    defaultValue?: string[];
+};
+export declare type SelectField = {
+    type: "select";
+    defaultValue?: string;
+    options: {
+        items: string[] | (() => string[]);
+    };
+};
+export declare type BlockField = {
+    type: "block";
+    defaultValue?: InputTextNode;
+};
+export declare type BlocksField = {
+    type: "blocks";
+    defaultValue?: InputTextNode[];
+};
+export declare type CustomField = {
+    type: "custom";
+    defaultValue?: InputTextNode[];
+    options: {
+        component: React.FC<{
+            parentUid: string;
+            uid: string;
+            defaultValue: InputTextNode[];
+            title: string;
+        }>;
+    };
+};
+export declare type ArrayField = PagesField | MultiTextField | CustomField | BlocksField;
+export declare type UnionField = ArrayField | TextField | TimeField | NumberField | OauthField | FlagField | SelectField | BlockField;
+export declare type Field<T extends UnionField> = Omit<T, "type"> & {
+    title: string;
+    description: string;
+    Panel: FieldPanel<T>;
+};

package/components/ConfigPanels/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/components/ConfigPanels/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/ConfigPanels/types.ts"],"names":[],"mappings":"","sourcesContent":["import React from \"react\";\r\nimport type { InputTextNode } from \"../../types/native\";\r\nimport type { ExternalLoginOptions } from \"../ExternalLogin\";\r\n\r\nexport type OauthField = {\r\n  type: \"oauth\";\r\n  defaultValue?: [];\r\n  options: ExternalLoginOptions;\r\n};\r\n\r\nexport type FieldPanel<T extends UnionField, U = Record<string, unknown>> = ((\r\n  props: {\r\n    order: number;\r\n    uid?: string;\r\n    parentUid: string;\r\n  } & Omit<Field<T>, \"Panel\"> &\r\n    U\r\n) => React.ReactElement) & { type: T[\"type\"] };\r\n\r\nexport type TextField = {\r\n  type: \"text\";\r\n  defaultValue?: string;\r\n  options?: {\r\n    placeholder?: string;\r\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\r\n  };\r\n};\r\n\r\nexport type TimeField = {\r\n  type: \"time\";\r\n  defaultValue?: Date;\r\n};\r\n\r\nexport type NumberField = {\r\n  type: \"number\";\r\n  defaultValue?: number;\r\n};\r\n\r\nexport type FlagField = {\r\n  type: \"flag\";\r\n  defaultValue?: boolean;\r\n  disabled?: boolean;\r\n  options?: {\r\n    onChange?: (f: boolean, e: React.FormEvent<HTMLInputElement>) => void;\r\n  };\r\n};\r\n\r\nexport type MultiTextField = {\r\n  type: \"multitext\";\r\n  defaultValue?: string[];\r\n  options?: {\r\n    placeholder?: string;\r\n  };\r\n};\r\n\r\nexport type PagesField = {\r\n  type: \"pages\";\r\n  defaultValue?: string[];\r\n};\r\n\r\nexport type SelectField = {\r\n  type: \"select\";\r\n  defaultValue?: string;\r\n  options: {\r\n    items: string[] | (() => string[]);\r\n  };\r\n};\r\n\r\nexport type BlockField = {\r\n  type: \"block\";\r\n  defaultValue?: InputTextNode;\r\n};\r\n\r\nexport type BlocksField = {\r\n  type: \"blocks\";\r\n  defaultValue?: InputTextNode[];\r\n};\r\n\r\nexport type CustomField = {\r\n  type: \"custom\";\r\n  defaultValue?: InputTextNode[];\r\n  options: {\r\n    component: React.FC<{\r\n      parentUid: string;\r\n      uid: string;\r\n      defaultValue: InputTextNode[];\r\n      title: string;\r\n    }>;\r\n  };\r\n};\r\n\r\nexport type ArrayField =\r\n  | PagesField\r\n  | MultiTextField\r\n  | CustomField\r\n  | BlocksField;\r\nexport type UnionField =\r\n  | ArrayField\r\n  | TextField\r\n  | TimeField\r\n  | NumberField\r\n  | OauthField\r\n  | FlagField\r\n  | SelectField\r\n  | BlockField;\r\n\r\nexport type Field<T extends UnionField> = Omit<T, \"type\"> & {\r\n  title: string;\r\n  description: string;\r\n  Panel: FieldPanel<T>;\r\n};\r\n"]}

package/components/ConfigPanels/useSingleChildValue.d.ts

@@ -0,0 +1,13 @@
+declare const useSingleChildValue: <T extends string | number | Date>({ defaultValue, uid: initialUid, title, parentUid, order, transform, toStr, }: {
+    title: string;
+    parentUid: string;
+    order: number;
+    uid?: string | undefined;
+    defaultValue: T;
+    transform: (s: string) => T;
+    toStr: (t: T) => string;
+}) => {
+    value: T;
+    onChange: (v: T) => void;
+};
+export default useSingleChildValue;

package/components/ConfigPanels/useSingleChildValue.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const getFirstChildUidByBlockUid_1 = tslib_1.__importDefault(require("../../queries/getFirstChildUidByBlockUid"));
+const getTextByBlockUid_1 = tslib_1.__importDefault(require("../../queries/getTextByBlockUid"));
+const useSingleChildValue = ({ defaultValue, uid: initialUid, title, parentUid, order, transform, toStr, }) => {
+    const [uid, setUid] = (0, react_1.useState)(initialUid);
+    const [valueUid, setValueUid] = (0, react_1.useState)(uid && (0, getFirstChildUidByBlockUid_1.default)(uid));
+    const [value, setValue] = (0, react_1.useState)((valueUid && transform((0, getTextByBlockUid_1.default)(valueUid))) || defaultValue);
+    const onChange = (0, react_1.useCallback)((v) => {
+        setValue(v);
+        if (valueUid) {
+            window.roamAlphaAPI.updateBlock({
+                block: { string: toStr(v), uid: valueUid },
+            });
+        }
+        else if (uid) {
+            const newValueUid = window.roamAlphaAPI.util.generateUID();
+            window.roamAlphaAPI.createBlock({
+                block: { string: toStr(v), uid: newValueUid },
+                location: { order: 0, "parent-uid": uid },
+            });
+            setValueUid(newValueUid);
+        }
+        else {
+            const newUid = window.roamAlphaAPI.util.generateUID();
+            window.roamAlphaAPI.createBlock({
+                block: { string: title, uid: newUid },
+                location: { order, "parent-uid": parentUid },
+            });
+            setTimeout(() => setUid(newUid));
+            const newValueUid = window.roamAlphaAPI.util.generateUID();
+            window.roamAlphaAPI.createBlock({
+                block: { string: toStr(v), uid: newValueUid },
+                location: { order: 0, "parent-uid": newUid },
+            });
+            setValueUid(newValueUid);
+        }
+    }, [setValue, setValueUid, title, parentUid, order, uid, valueUid, setUid]);
+    return { value, onChange };
+};
+exports.default = useSingleChildValue;
+//# sourceMappingURL=useSingleChildValue.js.map

package/components/ConfigPanels/useSingleChildValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSingleChildValue.js","sourceRoot":"","sources":["../../../src/components/ConfigPanels/useSingleChildValue.tsx"],"names":[],"mappings":";;;AAAA,iCAA8C;AAC9C,kHAAkF;AAClF,gGAAgE;AAEhE,MAAM,mBAAmB,GAAG,CAAmC,EAC7D,YAAY,EACZ,GAAG,EAAE,UAAU,EACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,GASN,EAA0C,EAAE;IAC3C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,CAAC;IAC3C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EACtC,GAAG,IAAI,IAAA,oCAA0B,EAAC,GAAG,CAAC,CACvC,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAChC,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAA,2BAAiB,EAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,YAAY,CACrE,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,CAAI,EAAE,EAAE;QACP,QAAQ,CAAC,CAAC,CAAC,CAAC;QACZ,IAAI,QAAQ,EAAE;YACZ,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC;gBAC9B,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE;aAC3C,CAAC,CAAC;SACJ;aAAM,IAAI,GAAG,EAAE;YACd,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAC3D,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC;gBAC9B,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE;gBAC7C,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE;aAC1C,CAAC,CAAC;YACH,WAAW,CAAC,WAAW,CAAC,CAAC;SAC1B;aAAM;YACL,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtD,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC;gBAC9B,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE;gBACrC,QAAQ,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE;aAC7C,CAAC,CAAC;YACH,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;YACjC,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAC3D,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC;gBAC9B,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE;gBAC7C,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE;aAC7C,CAAC,CAAC;YACH,WAAW,CAAC,WAAW,CAAC,CAAC;SAC1B;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CACxE,CAAC;IACF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC7B,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import { useCallback, useState } from \"react\";\nimport getFirstChildUidByBlockUid from \"../../queries/getFirstChildUidByBlockUid\";\nimport getTextByBlockUid from \"../../queries/getTextByBlockUid\";\n\nconst useSingleChildValue = <T extends string | number | Date>({\n  defaultValue,\n  uid: initialUid,\n  title,\n  parentUid,\n  order,\n  transform,\n  toStr,\n}: {\n  title: string;\n  parentUid: string;\n  order: number;\n  uid?: string;\n  defaultValue: T;\n  transform: (s: string) => T;\n  toStr: (t: T) => string;\n}): { value: T; onChange: (v: T) => void } => {\n  const [uid, setUid] = useState(initialUid);\n  const [valueUid, setValueUid] = useState(\n    uid && getFirstChildUidByBlockUid(uid)\n  );\n  const [value, setValue] = useState(\n    (valueUid && transform(getTextByBlockUid(valueUid))) || defaultValue\n  );\n  const onChange = useCallback(\n    (v: T) => {\n      setValue(v);\n      if (valueUid) {\n        window.roamAlphaAPI.updateBlock({\n          block: { string: toStr(v), uid: valueUid },\n        });\n      } else if (uid) {\n        const newValueUid = window.roamAlphaAPI.util.generateUID();\n        window.roamAlphaAPI.createBlock({\n          block: { string: toStr(v), uid: newValueUid },\n          location: { order: 0, \"parent-uid\": uid },\n        });\n        setValueUid(newValueUid);\n      } else {\n        const newUid = window.roamAlphaAPI.util.generateUID();\n        window.roamAlphaAPI.createBlock({\n          block: { string: title, uid: newUid },\n          location: { order, \"parent-uid\": parentUid },\n        });\n        setTimeout(() => setUid(newUid));\n        const newValueUid = window.roamAlphaAPI.util.generateUID();\n        window.roamAlphaAPI.createBlock({\n          block: { string: toStr(v), uid: newValueUid },\n          location: { order: 0, \"parent-uid\": newUid },\n        });\n        setValueUid(newValueUid);\n      }\n    },\n    [setValue, setValueUid, title, parentUid, order, uid, valueUid, setUid]\n  );\n  return { value, onChange };\n};\n\nexport default useSingleChildValue;\n"]}

package/components/CursorMenu.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export declare const getCoordsFromTextarea: (t: HTMLTextAreaElement) => {
+    top: number;
+    left: number;
+};
+declare type Props<T> = {
+    textarea: HTMLTextAreaElement;
+    onItemSelect: (item: {
+        text: string;
+        id: string;
+    } & T) => void;
+    initialItems: ({
+        text: string;
+        id: string;
+    } & T)[];
+};
+declare const CursorMenu: <T extends Record<string, string>>({ textarea, onClose, onItemSelect, initialItems, }: {
+    onClose: () => void;
+} & Props<T>) => React.ReactElement;
+export declare const render: <T extends Record<string, string>>(props: Props<T>) => void;
+export default CursorMenu;

package/components/CursorMenu.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = exports.getCoordsFromTextarea = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const fuzzy_1 = tslib_1.__importDefault(require("fuzzy"));
+const getUids_1 = tslib_1.__importDefault(require("../dom/getUids"));
+const updateBlock_1 = tslib_1.__importDefault(require("../writes/updateBlock"));
+// inspired by https://github.com/zurb/tribute/blob/master/src/TributeRange.js#L446-L556
+const getCoordsFromTextarea = (t) => {
+    const properties = [
+        "direction",
+        "boxSizing",
+        "width",
+        "height",
+        "overflowX",
+        "overflowY",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "paddingTop",
+        "paddingRight",
+        "paddingBottom",
+        "paddingLeft",
+        "fontStyle",
+        "fontVariant",
+        "fontWeight",
+        "fontStretch",
+        "fontSize",
+        "fontSizeAdjust",
+        "lineHeight",
+        "fontFamily",
+        "textAlign",
+        "textTransform",
+        "textIndent",
+        "textDecoration",
+        "letterSpacing",
+        "wordSpacing",
+    ];
+    const div = document.createElement("div");
+    div.id = "input-textarea-caret-position-mirror-div";
+    document.body.appendChild(div);
+    const style = div.style;
+    const computed = getComputedStyle(t);
+    style.whiteSpace = "pre-wrap";
+    style.wordWrap = "break-word";
+    // position off-screen
+    style.position = "absolute";
+    style.visibility = "hidden";
+    style.overflow = "hidden";
+    // transfer the element's properties to the div
+    properties.forEach((prop) => {
+        style[prop] = computed[prop];
+    });
+    div.textContent = t.value.substring(0, t.selectionStart);
+    const span = document.createElement("span");
+    span.textContent = t.value.substring(t.selectionStart) || ".";
+    div.appendChild(span);
+    const doc = document.documentElement;
+    const windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+    const windowTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+    const coordinates = {
+        top: windowTop +
+            span.offsetTop +
+            parseInt(computed.borderTopWidth) +
+            parseInt(computed.fontSize) -
+            t.scrollTop -
+            9,
+        left: windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth) - 1,
+    };
+    document.body.removeChild(div);
+    return coordinates;
+};
+exports.getCoordsFromTextarea = getCoordsFromTextarea;
+const VALID_FILTER = /^[\w\d\s_-]$/;
+const CursorMenu = ({ textarea, onClose, onItemSelect, initialItems, }) => {
+    const itemsById = (0, react_1.useMemo)(() => Object.fromEntries(initialItems.map((item) => [item.id, item])), [initialItems]);
+    const menuRef = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const [filter, setFilter] = (0, react_1.useState)("");
+    const onPopoverClose = (0, react_1.useCallback)(() => {
+        if (menuRef.current) {
+            const value = menuRef.current.getAttribute("data-filter");
+            const text = `${textarea.value.substring(0, textarea.selectionStart)}${value}${textarea.value.substring(textarea.selectionStart)}`;
+            (0, updateBlock_1.default)({ uid: (0, getUids_1.default)(textarea).blockUid, text });
+            setTimeout(() => {
+                textarea.setSelectionRange(textarea.selectionStart + text.length, textarea.selectionEnd + text.length);
+                onClose();
+            }, 1);
+        }
+    }, [onClose, textarea, menuRef]);
+    const items = (0, react_1.useMemo)(() => (filter
+        ? fuzzy_1.default
+            .filter(filter, initialItems, {
+            extract: (s) => s.text,
+            pre: "<b>",
+            post: "</b>",
+        })
+            .map((r) => (Object.assign(Object.assign({}, r.original), { displayName: r.string })))
+        : initialItems.map((r) => (Object.assign(Object.assign({}, r), { displayName: r.text })))).slice(0, 10), [filter, initialItems]);
+    const onSelect = (0, react_1.useCallback)((item) => {
+        if (menuRef.current) {
+            onItemSelect(item);
+            onClose();
+        }
+    }, [menuRef, onClose, textarea, onItemSelect]);
+    const keydownListener = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (menuRef.current &&
+            (e.key === "ArrowRight" || e.key === "ArrowDown")) {
+            const index = Number(menuRef.current.getAttribute("data-active-index"));
+            const count = menuRef.current.childElementCount;
+            setActiveIndex((index + 1) % count);
+        }
+        else if (menuRef.current &&
+            (e.key === "ArrowLeft" || e.key === "ArrowUp")) {
+            const index = Number(menuRef.current.getAttribute("data-active-index"));
+            const count = menuRef.current.childElementCount;
+            setActiveIndex((index - 1 + count) % count);
+        }
+        else if (menuRef.current && e.key === "Enter") {
+            const index = Number(menuRef.current.getAttribute("data-active-index"));
+            const id = ((_a = menuRef.current.children[index]
+                .querySelector(".bp3-menu-item")) === null || _a === void 0 ? void 0 : _a.getAttribute("data-id")) || "";
+            onSelect(itemsById[id]);
+        }
+        else if (menuRef.current && VALID_FILTER.test(e.key)) {
+            const value = menuRef.current.getAttribute("data-filter");
+            setFilter(`${value}${e.key}`);
+        }
+        else if (menuRef.current && e.key === "Backspace") {
+            const value = menuRef.current.getAttribute("data-filter");
+            if (value) {
+                setFilter(value.slice(0, -1));
+            }
+            else {
+                onClose();
+                return;
+            }
+        }
+        else if (e.key !== "Shift") {
+            onPopoverClose();
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }, [menuRef, setActiveIndex, onClose, onPopoverClose]);
+    (0, react_1.useEffect)(() => {
+        textarea.addEventListener("keydown", keydownListener);
+        return () => {
+            textarea.removeEventListener("keydown", keydownListener);
+        };
+    }, [keydownListener]);
+    return (react_1.default.createElement(core_1.Popover, { onClose: onPopoverClose, isOpen: true, canEscapeKeyClose: true, minimal: true, target: react_1.default.createElement("span", null), position: core_1.Position.BOTTOM_LEFT, modifiers: {
+            flip: { enabled: false },
+            preventOverflow: { enabled: false },
+        }, autoFocus: false, content: react_1.default.createElement(core_1.Menu, { ulRef: menuRef, "data-active-index": activeIndex, "data-filter": filter, style: { width: 300 } }, items.length ? (items.map(({ id, displayName }, i) => {
+            return (react_1.default.createElement(core_1.MenuItem, { key: id, "data-id": id, text: displayName
+                    .split(/<b>(.*?)<\/b>/)
+                    .map((part, i) => i % 2 === 1 ? (react_1.default.createElement("b", { key: i }, part)) : (react_1.default.createElement("span", { key: i }, part))), active: i === activeIndex, onMouseEnter: () => setActiveIndex(i), onClick: () => setTimeout(() => onSelect(itemsById[id]), 1) }));
+        })) : (react_1.default.createElement(core_1.MenuItem, { text: react_1.default.createElement("span", { style: { opacity: 0.75 } },
+                react_1.default.createElement("i", null, "None")), active: false, disabled: true }))) }));
+};
+const render = (props) => {
+    var _a;
+    const parent = document.createElement("span");
+    const coords = (0, exports.getCoordsFromTextarea)(props.textarea);
+    parent.style.position = "absolute";
+    parent.style.left = `${coords.left}px`;
+    parent.style.top = `${coords.top}px`;
+    (_a = props.textarea.parentElement) === null || _a === void 0 ? void 0 : _a.insertBefore(parent, props.textarea);
+    react_dom_1.default.render(react_1.default.createElement(CursorMenu, Object.assign({}, props, { onClose: () => {
+            react_dom_1.default.unmountComponentAtNode(parent);
+            parent.remove();
+        } })), parent);
+};
+exports.render = render;
+exports.default = CursorMenu;
+//# sourceMappingURL=CursorMenu.js.map

package/components/CursorMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CursorMenu.js","sourceRoot":"","sources":["../../src/components/CursorMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Menu, MenuItem, Popover, Position } from \"@blueprintjs/core\";\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport ReactDOM from \"react-dom\";\nimport fuzzy from \"fuzzy\";\nimport getUids from \"../dom/getUids\";\nimport updateBlock from \"../writes/updateBlock\";\n\n// inspired by https://github.com/zurb/tribute/blob/master/src/TributeRange.js#L446-L556\nexport const getCoordsFromTextarea = (\n  t: HTMLTextAreaElement\n): { top: number; left: number } => {\n  const properties = [\n    \"direction\",\n    \"boxSizing\",\n    \"width\",\n    \"height\",\n    \"overflowX\",\n    \"overflowY\",\n    \"borderTopWidth\",\n    \"borderRightWidth\",\n    \"borderBottomWidth\",\n    \"borderLeftWidth\",\n    \"paddingTop\",\n    \"paddingRight\",\n    \"paddingBottom\",\n    \"paddingLeft\",\n    \"fontStyle\",\n    \"fontVariant\",\n    \"fontWeight\",\n    \"fontStretch\",\n    \"fontSize\",\n    \"fontSizeAdjust\",\n    \"lineHeight\",\n    \"fontFamily\",\n    \"textAlign\",\n    \"textTransform\",\n    \"textIndent\",\n    \"textDecoration\",\n    \"letterSpacing\",\n    \"wordSpacing\",\n  ] as const;\n\n  const div = document.createElement(\"div\");\n  div.id = \"input-textarea-caret-position-mirror-div\";\n  document.body.appendChild(div);\n\n  const style = div.style;\n  const computed = getComputedStyle(t);\n\n  style.whiteSpace = \"pre-wrap\";\n  style.wordWrap = \"break-word\";\n\n  // position off-screen\n  style.position = \"absolute\";\n  style.visibility = \"hidden\";\n  style.overflow = \"hidden\";\n\n  // transfer the element's properties to the div\n  properties.forEach((prop) => {\n    style[prop] = computed[prop];\n  });\n\n  div.textContent = t.value.substring(0, t.selectionStart);\n\n  const span = document.createElement(\"span\");\n  span.textContent = t.value.substring(t.selectionStart) || \".\";\n  div.appendChild(span);\n\n  const doc = document.documentElement;\n  const windowLeft =\n    (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);\n  const windowTop =\n    (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);\n\n  const coordinates = {\n    top:\n      windowTop +\n      span.offsetTop +\n      parseInt(computed.borderTopWidth) +\n      parseInt(computed.fontSize) -\n      t.scrollTop -\n      9,\n    left: windowLeft + span.offsetLeft + parseInt(computed.borderLeftWidth) - 1,\n  };\n  document.body.removeChild(div);\n  return coordinates;\n};\n\ntype Props<T> = {\n  textarea: HTMLTextAreaElement;\n  onItemSelect: (item: { text: string; id: string } & T) => void;\n  initialItems: ({ text: string; id: string } & T)[];\n};\n\nconst VALID_FILTER = /^[\\w\\d\\s_-]$/;\n\nconst CursorMenu = <T extends Record<string, string>>({\n  textarea,\n  onClose,\n  onItemSelect,\n  initialItems,\n}: {\n  onClose: () => void;\n} & Props<T>): React.ReactElement => {\n  const itemsById = useMemo(\n    () => Object.fromEntries(initialItems.map((item) => [item.id, item])),\n    [initialItems]\n  );\n  const menuRef = useRef<HTMLUListElement>(null);\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [filter, setFilter] = useState(\"\");\n  const onPopoverClose = useCallback(() => {\n    if (menuRef.current) {\n      const value = menuRef.current.getAttribute(\"data-filter\");\n      const text = `${textarea.value.substring(\n        0,\n        textarea.selectionStart\n      )}${value}${textarea.value.substring(textarea.selectionStart)}`;\n      updateBlock({ uid: getUids(textarea).blockUid, text });\n      setTimeout(() => {\n        textarea.setSelectionRange(\n          textarea.selectionStart + text.length,\n          textarea.selectionEnd + text.length\n        );\n        onClose();\n      }, 1);\n    }\n  }, [onClose, textarea, menuRef]);\n  const items = useMemo(\n    () =>\n      (filter\n        ? fuzzy\n            .filter(filter, initialItems, {\n              extract: (s) => s.text,\n              pre: \"<b>\",\n              post: \"</b>\",\n            })\n            .map((r) => ({ ...r.original, displayName: r.string }))\n        : initialItems.map((r) => ({ ...r, displayName: r.text }))\n      ).slice(0, 10),\n    [filter, initialItems]\n  );\n  const onSelect = useCallback(\n    (item) => {\n      if (menuRef.current) {\n        onItemSelect(item);\n        onClose();\n      }\n    },\n    [menuRef, onClose, textarea, onItemSelect]\n  );\n  const keydownListener = useCallback(\n    (e: KeyboardEvent) => {\n      if (\n        menuRef.current &&\n        (e.key === \"ArrowRight\" || e.key === \"ArrowDown\")\n      ) {\n        const index = Number(menuRef.current.getAttribute(\"data-active-index\"));\n        const count = menuRef.current.childElementCount;\n        setActiveIndex((index + 1) % count);\n      } else if (\n        menuRef.current &&\n        (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\")\n      ) {\n        const index = Number(menuRef.current.getAttribute(\"data-active-index\"));\n        const count = menuRef.current.childElementCount;\n        setActiveIndex((index - 1 + count) % count);\n      } else if (menuRef.current && e.key === \"Enter\") {\n        const index = Number(menuRef.current.getAttribute(\"data-active-index\"));\n        const id =\n          menuRef.current.children[index]\n            .querySelector(\".bp3-menu-item\")\n            ?.getAttribute(\"data-id\") || \"\";\n        onSelect(itemsById[id]);\n      } else if (menuRef.current && VALID_FILTER.test(e.key)) {\n        const value = menuRef.current.getAttribute(\"data-filter\");\n        setFilter(`${value}${e.key}`);\n      } else if (menuRef.current && e.key === \"Backspace\") {\n        const value = menuRef.current.getAttribute(\"data-filter\");\n        if (value) {\n          setFilter(value.slice(0, -1));\n        } else {\n          onClose();\n          return;\n        }\n      } else if (e.key !== \"Shift\") {\n        onPopoverClose();\n        return;\n      }\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [menuRef, setActiveIndex, onClose, onPopoverClose]\n  );\n  useEffect(() => {\n    textarea.addEventListener(\"keydown\", keydownListener);\n    return () => {\n      textarea.removeEventListener(\"keydown\", keydownListener);\n    };\n  }, [keydownListener]);\n  return (\n    <Popover\n      onClose={onPopoverClose}\n      isOpen={true}\n      canEscapeKeyClose\n      minimal\n      target={<span />}\n      position={Position.BOTTOM_LEFT}\n      modifiers={{\n        flip: { enabled: false },\n        preventOverflow: { enabled: false },\n      }}\n      autoFocus={false}\n      content={\n        <Menu\n          ulRef={menuRef}\n          data-active-index={activeIndex}\n          data-filter={filter}\n          style={{ width: 300 }}\n        >\n          {items.length ? (\n            items.map(({ id, displayName }, i) => {\n              return (\n                <MenuItem\n                  key={id}\n                  data-id={id}\n                  text={displayName\n                    .split(/<b>(.*?)<\\/b>/)\n                    .map((part, i) =>\n                      i % 2 === 1 ? (\n                        <b key={i}>{part}</b>\n                      ) : (\n                        <span key={i}>{part}</span>\n                      )\n                    )}\n                  active={i === activeIndex}\n                  onMouseEnter={() => setActiveIndex(i)}\n                  onClick={() => setTimeout(() => onSelect(itemsById[id]), 1)}\n                />\n              );\n            })\n          ) : (\n            <MenuItem\n              text={\n                <span style={{ opacity: 0.75 }}>\n                  <i>None</i>\n                </span>\n              }\n              active={false}\n              disabled={true}\n            />\n          )}\n        </Menu>\n      }\n    />\n  );\n};\n\nexport const render = <T extends Record<string, string>>(\n  props: Props<T>\n): void => {\n  const parent = document.createElement(\"span\");\n  const coords = getCoordsFromTextarea(props.textarea);\n  parent.style.position = \"absolute\";\n  parent.style.left = `${coords.left}px`;\n  parent.style.top = `${coords.top}px`;\n  props.textarea.parentElement?.insertBefore(parent, props.textarea);\n  ReactDOM.render(\n    <CursorMenu\n      {...props}\n      onClose={() => {\n        ReactDOM.unmountComponentAtNode(parent);\n        parent.remove();\n      }}\n    />,\n    parent\n  );\n};\n\nexport default CursorMenu;\n"]}

package/components/Description.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const Description: ({ description, }: {
+    description: string;
+}) => React.ReactElement;
+export default Description;

package/components/Description.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Description = ({ description, }) => {
+    return (react_1.default.createElement("span", { style: {
+            marginLeft: 12,
+            display: "inline-block",
+            opacity: 0.8,
+            verticalAlign: "text-bottom",
+        } },
+        react_1.default.createElement(core_1.Tooltip, { content: react_1.default.createElement("span", { style: { maxWidth: 400, display: "inline-block" } }, description) },
+            react_1.default.createElement(core_1.Icon, { icon: "info-sign", iconSize: 12 }))));
+};
+exports.default = Description;
+//# sourceMappingURL=Description.js.map

package/components/Description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Description.js","sourceRoot":"","sources":["../../src/components/Description.tsx"],"names":[],"mappings":";;;AAAA,4CAAkD;AAClD,0DAA0B;AAE1B,MAAM,WAAW,GAAG,CAAC,EACnB,WAAW,GAGZ,EAAsB,EAAE;IACvB,OAAO,CACL,wCACE,KAAK,EAAE;YACL,UAAU,EAAE,EAAE;YACd,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,GAAG;YACZ,aAAa,EAAE,aAAa;SAC7B;QAED,8BAAC,cAAO,IACN,OAAO,EACL,wCAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,IACpD,WAAW,CACP;YAGT,8BAAC,WAAI,IAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,GAAI,CACjC,CACL,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC","sourcesContent":["import { Tooltip, Icon } from \"@blueprintjs/core\";\nimport React from \"react\";\n\nconst Description = ({\n  description,\n}: {\n  description: string;\n}): React.ReactElement => {\n  return (\n    <span\n      style={{\n        marginLeft: 12,\n        display: \"inline-block\",\n        opacity: 0.8,\n        verticalAlign: \"text-bottom\",\n      }}\n    >\n      <Tooltip\n        content={\n          <span style={{ maxWidth: 400, display: \"inline-block\" }}>\n            {description}\n          </span>\n        }\n      >\n        <Icon icon={\"info-sign\"} iconSize={12} />\n      </Tooltip>\n    </span>\n  );\n};\n\nexport default Description;\n"]}

package/components/ExtensionApiContext.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { OnloadArgs } from "../types";
+export declare const useExtensionAPI: () => {
+    settings: {
+        get: (k: string) => unknown;
+        getAll: () => Record<string, unknown>;
+        panel: {
+            create: (c: {
+                tabTitle: string;
+                settings: {
+                    id: string;
+                    name: string;
+                    description: string;
+                    action: import("../types").Action;
+                }[];
+            }) => void;
+        };
+        set: (k: string, v: unknown) => Promise<void>;
+    };
+    ui: {
+        commandPalette: {
+            addCommand: (c: import("../types").AddCommandOptions) => Promise<void>;
+            removeCommand: (c: {
+                label: string;
+            }) => Promise<void>;
+        };
+    };
+} | undefined;
+export declare const useVersion: () => string | undefined;
+declare const ExtensionApiContextProvider: React.FC<React.PropsWithChildren<OnloadArgs>>;
+export default ExtensionApiContextProvider;

package/components/ExtensionApiContext.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVersion = exports.useExtensionAPI = void 0;
+const tslib_1 = require("tslib");
+// @deprecated - use utils/extensionApiContext instead
+const react_1 = tslib_1.__importStar(require("react"));
+const ExtensionApiContext = react_1.default.createContext(undefined);
+const useExtensionAPI = () => { var _a; return (_a = (0, react_1.useContext)(ExtensionApiContext)) === null || _a === void 0 ? void 0 : _a.extensionAPI; };
+exports.useExtensionAPI = useExtensionAPI;
+const useVersion = () => { var _a; return (_a = (0, react_1.useContext)(ExtensionApiContext)) === null || _a === void 0 ? void 0 : _a.extension.version; };
+exports.useVersion = useVersion;
+const ExtensionApiContextProvider = (_a) => {
+    var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
+    return (react_1.default.createElement(ExtensionApiContext.Provider, { value: props }, children));
+};
+exports.default = ExtensionApiContextProvider;
+//# sourceMappingURL=ExtensionApiContext.js.map

package/components/ExtensionApiContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionApiContext.js","sourceRoot":"","sources":["../../src/components/ExtensionApiContext.tsx"],"names":[],"mappings":";;;;AAAA,sDAAsD;AACtD,uDAA0C;AAG1C,MAAM,mBAAmB,GAAG,eAAK,CAAC,aAAa,CAC7C,SAAS,CACV,CAAC;AAEK,MAAM,eAAe,GAAG,GAAG,EAAE,WAClC,OAAA,MAAA,IAAA,kBAAU,EAAC,mBAAmB,CAAC,0CAAE,YAAY,CAAA,EAAA,CAAC;AADnC,QAAA,eAAe,mBACoB;AACzC,MAAM,UAAU,GAAG,GAAG,EAAE,WAC7B,OAAA,MAAA,IAAA,kBAAU,EAAC,mBAAmB,CAAC,0CAAE,SAAS,CAAC,OAAO,CAAA,EAAA,CAAC;AADxC,QAAA,UAAU,cAC8B;AAErD,MAAM,2BAA2B,GAE7B,CAAC,EAAsB,EAAE,EAAE;QAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAApB,YAAsB,CAAF;IACvB,OAAO,CACL,8BAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACvC,QAAQ,CACoB,CAChC,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,2BAA2B,CAAC","sourcesContent":["// @deprecated - use utils/extensionApiContext instead\nimport React, { useContext } from \"react\";\nimport { OnloadArgs } from \"../types\";\n\nconst ExtensionApiContext = React.createContext<OnloadArgs | undefined>(\n  undefined\n);\n\nexport const useExtensionAPI = () =>\n  useContext(ExtensionApiContext)?.extensionAPI;\nexport const useVersion = () =>\n  useContext(ExtensionApiContext)?.extension.version;\n\nconst ExtensionApiContextProvider: React.FC<\n  React.PropsWithChildren<OnloadArgs>\n> = ({ children, ...props }) => {\n  return (\n    <ExtensionApiContext.Provider value={props}>\n      {children}\n    </ExtensionApiContext.Provider>\n  );\n};\n\nexport default ExtensionApiContextProvider;\n"]}

package/components/ExternalLogin.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export declare type ExternalLoginOptions = {
+    service: string;
+    getPopoutUrl: (state: string) => Promise<string>;
+    getAuthData: (d: string) => Promise<Record<string, string>>;
+    ServiceIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+};
+declare const ExternalLogin: ({ onSuccess, useLocal, parentUid, service, getPopoutUrl, getAuthData, ServiceIcon, loggedIn, }: {
+    onSuccess: (block: {
+        text: string;
+        uid: string;
+        data: string;
+    }) => void;
+    parentUid: string;
+    useLocal?: boolean | undefined;
+    loggedIn?: boolean | undefined;
+} & ExternalLoginOptions) => React.ReactElement;
+export default ExternalLogin;