roamjs-components 0.82.8 → 0.82.10

package/components/AutocompleteInput.d.ts

@@ -21,6 +21,8 @@ export declare type AutocompleteInputProps<T = string> = {
         active: boolean;
     }) => React.ReactElement;
     onNewItem?: OnNewItem<T>;
+    disabled?: boolean;
+    maxItemsDisplayed?: number;
 };
-declare const AutocompleteInput: <T extends unknown = string>({ value, setValue, onBlur, onConfirm, showButton, options, placeholder, autoFocus, multiline, id, filterOptions: _filterOptions, itemToQuery: _itemToQuery, renderItem, onNewItem: _onNewItem, }: AutocompleteInputProps<T>) => React.ReactElement;
+declare const AutocompleteInput: <T extends unknown = string>({ value, setValue, onBlur, onConfirm, showButton, options, placeholder, autoFocus, multiline, id, filterOptions: _filterOptions, itemToQuery: _itemToQuery, renderItem, onNewItem: _onNewItem, disabled, maxItemsDisplayed, }: AutocompleteInputProps<T>) => React.ReactElement;
 export default AutocompleteInput;

package/components/AutocompleteInput.js

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const useArrowKeyDown_1 = tslib_1.__importDefault(require("../hooks/useArrowKeyDown"));
 const fuzzy_1 = tslib_1.__importDefault(require("fuzzy"));
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, options = [], placeholder = "Enter value", autoFocus, multiline, id, filterOptions: _filterOptions, itemToQuery: _itemToQuery, renderItem, onNewItem: _onNewItem, }) => {
+const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, options = [], placeholder = "Enter value", autoFocus, multiline, id, filterOptions: _filterOptions, itemToQuery: _itemToQuery, renderItem, onNewItem: _onNewItem, disabled, maxItemsDisplayed = Infinity, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const itemToQuery = (0, react_1.useMemo)(() => _itemToQuery || ((s) => (s ? `${s}` : "")), [_itemToQuery]);
     const [query, setQuery] = (0, react_1.useState)(() => itemToQuery(value));
@@ -19,7 +19,7 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
             .map((f) => f.original)
             .filter((f) => !!f)), [_filterOptions, itemToQuery]);
     const onNewItem = (0, react_1.useMemo)(() => _onNewItem || ((s) => s), [_onNewItem]);
-    const items = (0, react_1.useMemo)(() => (query ? filterOptions(options, query) : options), [query, options, filterOptions]);
+    const items = (0, react_1.useMemo)(() => (query ? filterOptions(options, query) : options).slice(0, maxItemsDisplayed), [query, options, filterOptions, maxItemsDisplayed]);
     const menuRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const onEnter = (0, react_1.useCallback)((value) => {
@@ -91,7 +91,7 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
                 active: activeIndex === i,
             };
             return renderItem ? (react_1.default.createElement(react_1.default.Fragment, { key: i }, renderItem === null || renderItem === void 0 ? void 0 : renderItem(Object.assign({ item: t }, sharedProps)))) : (react_1.default.createElement(core_1.MenuItem, Object.assign({ text: itemToQuery(t), key: i, multiline: true }, sharedProps)));
-        })), target: react_1.default.createElement(Input, Object.assign({ value: query, onChange: (e) => {
+        })), target: react_1.default.createElement(Input, Object.assign({ disabled: disabled, value: query, onChange: (e) => {
                 setIsTyping(true);
                 setQuery(e.target.value);
             }, autoFocus: autoFocus, placeholder: placeholder, onKeyDown: (e) => {

package/components/AutocompleteInput.js.map

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

package/components.js

@@ -48,12 +48,30 @@ const components = [
     {
         callback: () => rootRender(() => {
             const [value, setValue] = (0, react_1.useState)("");
-            const options = (0, react_1.useMemo)(() => ["apple", "banana", "orange"], []);
+            const [numResults, setNumResults] = (0, react_1.useState)(100);
+            const [disabled, setDisabled] = (0, react_1.useState)(false);
+            const [maxItemsDisplayed, setMaxItemsDisplayed] = (0, react_1.useState)(0);
+            const options = (0, react_1.useMemo)(() => {
+                const items = [];
+                for (let i = 0; i < numResults; i++) {
+                    items.push(Math.random().toString(36).substring(7));
+                }
+                return items;
+            }, [numResults]);
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(AutocompleteInput_1.default, { value: value, setValue: setValue, options: options }),
-                react_1.default.createElement("div", null,
+                react_1.default.createElement(core_1.Label, null,
+                    "Number of Results",
+                    react_1.default.createElement(core_1.NumericInput, { value: numResults, onValueChange: (e) => setNumResults(e), buttonPosition: "none" })),
+                react_1.default.createElement(core_1.Label, null,
+                    "Max Items Displayed (0 for all)",
+                    react_1.default.createElement(core_1.NumericInput, { value: maxItemsDisplayed, onValueChange: (e) => setMaxItemsDisplayed(e), buttonPosition: "none" })),
+                react_1.default.createElement(core_1.Label, null,
                     "Chosen value: ",
-                    value)));
+                    value),
+                react_1.default.createElement(core_1.Checkbox, { checked: disabled, onChange: (e) => setDisabled(e.target.checked), label: "Disabled" }),
+                react_1.default.createElement(core_1.Label, null,
+                    "Autocomplete",
+                    react_1.default.createElement(AutocompleteInput_1.default, { disabled: disabled, value: value, setValue: setValue, options: options, maxItemsDisplayed: maxItemsDisplayed === 0 ? undefined : maxItemsDisplayed }))));
         }),
         label: "AutocompleteInput",
     },

package/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"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","sourcesContent":["import ReactDOM from \"react-dom\";\nimport React, { useState, useMemo } from \"react\";\nimport { Button, Checkbox } from \"@blueprintjs/core\";\n\nimport AutocompleteInput from \"./components/AutocompleteInput\";\nimport FormDialog from \"./components/FormDialog\";\nimport PageInput from \"./components/PageInput\";\nimport renderToast from \"./components/Toast\";\n\nimport renderOverlay from \"./util/renderOverlay\";\nimport runExtension from \"./util/runExtension\";\n\nimport { createBlock } from \"./writes\";\nimport MenuItemSelect from \"./components/MenuItemSelect\";\n\n// const blockRender = (Component: React.FC) => {\n//   const block = window.roamAlphaAPI.ui.getFocusedBlock();\n//   const parent = document.getElementById(\n//     `block-input-${block?.[\"window-id\"]}-${block?.[\"block-uid\"]}`\n//   );\n//   ReactDOM.render(<Component />, parent);\n// };\n\nconst unloads = new Set<() => void>();\n\nconst rootRender = (Component: React.FC) => {\n  const root = document.querySelector(\".roam-article\");\n  const parent = document.createElement(\"div\");\n  root?.insertBefore(parent, root.firstElementChild);\n  ReactDOM.render(<Component />, parent);\n  unloads.add(() => {\n    ReactDOM.unmountComponentAtNode(parent);\n    parent.remove();\n  });\n};\n\nconst components = [\n  {\n    callback: () =>\n      rootRender(() => {\n        const [value, setValue] = useState(\"\");\n        const [filterable, setFilterable] = useState(false);\n        const options = useMemo(() => [\"apple\", \"banana\", \"orange\"], []);\n        return (\n          <>\n            <div>Chosen value: {value}</div>\n            <Checkbox\n              checked={filterable as boolean}\n              onChange={(e) =>\n                setFilterable((e.target as HTMLInputElement).checked)\n              }\n              label={\"Filterable\"}\n            />\n            <MenuItemSelect\n              activeItem={value}\n              items={options}\n              onItemSelect={(item) => setValue(item)}\n              filterable={filterable}\n            />\n          </>\n        );\n      }),\n    label: \"MenuItemSelect\",\n  },\n  {\n    callback: () =>\n      rootRender(() => {\n        const [value, setValue] = useState(\"\");\n        const options = useMemo(() => [\"apple\", \"banana\", \"orange\"], []);\n        return (\n          <>\n            <AutocompleteInput\n              value={value}\n              setValue={setValue}\n              options={options}\n            />\n            <div>Chosen value: {value}</div>\n          </>\n        );\n      }),\n    label: \"AutocompleteInput\",\n  },\n  {\n    callback: () =>\n      rootRender(() => {\n        const [isOpen, setIsOpen] = useState(false);\n        return (\n          <>\n            <Button onClick={() => setIsOpen(true)} text={\"Open Form\"} />\n            <FormDialog\n              isOpen={isOpen}\n              onClose={() => setIsOpen(false)}\n              onSubmit={(data) =>\n                window.roamAlphaAPI.ui.mainWindow\n                  .getOpenPageOrBlockUid()\n                  .then((parentUid) =>\n                    createBlock({\n                      parentUid:\n                        parentUid ||\n                        window.roamAlphaAPI.util.dateToPageUid(new Date()),\n                      node: {\n                        text: \"Response\",\n                        children: Object.entries(data).map(([k, v]) => ({\n                          text: k,\n                          children: Array.isArray(v) ? v : [{ text: `${v}` }],\n                        })),\n                      },\n                    })\n                  )\n              }\n              fields={{\n                text: { type: \"text\", label: \"Text Field\" },\n                number: { type: \"number\", label: \"Number Field\" },\n                info: { type: \"info\", label: \"Read Only Info Text\" },\n                flag: { type: \"flag\", label: \"Flag Field\" },\n                conditionalText: {\n                  type: \"text\",\n                  label: \"Conditional Text Field\",\n                  conditional: \"flag\",\n                },\n                page: { type: \"page\", label: \"Page Field\" },\n                block: { type: \"block\", label: \"Block Field\" },\n                select: {\n                  type: \"select\",\n                  label: \"Select Field\",\n                  options: [\n                    \"apple\",\n                    \"banana\",\n                    \"orange\",\n                    \"conditional select 1\",\n                  ],\n                },\n                conditionalSelect: {\n                  type: \"text\",\n                  label: \"Conditional Text Field\",\n                  conditional: \"select\",\n                  conditionalValues: [\"conditional select 1\"],\n                },\n                autocomplete: {\n                  type: \"autocomplete\",\n                  label: \"Autocomplete Field\",\n                  options: [\"apple\", \"banana\", \"orange\"],\n                },\n                embed: {\n                  type: \"embed\",\n                  label: \"Embed Field\",\n                },\n              }}\n            />\n          </>\n        );\n      }),\n    label: \"FormDialog\",\n  },\n  {\n    callback: () =>\n      rootRender(() => {\n        const [value, setValue] = useState(\"\");\n        const [multiline, setMultiline] = useState(false);\n        return (\n          <>\n            <PageInput\n              value={value}\n              setValue={setValue}\n              multiline={multiline}\n            />\n            <input\n              className=\"ml-8 inline-block\"\n              checked={multiline}\n              onChange={(e) => setMultiline(e.target.checked)}\n              type={\"checkbox\"}\n            />\n          </>\n        );\n      }),\n    label: \"PageInput\",\n  },\n];\n\nexport default runExtension(async (args) => {\n  components.forEach(({ callback, label }) => {\n    args.extensionAPI.ui.commandPalette.addCommand({\n      label: `Render RoamJS component ${label}`,\n      callback,\n    });\n  });\n  window.roamjs.extension.developer = {\n    components: {\n      AutocompleteInput,\n      FormDialog,\n      PageInput,\n      renderToast,\n    },\n    util: {\n      renderOverlay,\n      runExtension,\n    },\n    args,\n  };\n  return () => {\n    unloads.forEach((unload) => unload());\n  };\n});\n"]}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"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","sourcesContent":["import ReactDOM from \"react-dom\";\nimport React, { useState, useMemo } from \"react\";\nimport { Button, Checkbox, NumericInput, Label } from \"@blueprintjs/core\";\n\nimport AutocompleteInput from \"./components/AutocompleteInput\";\nimport FormDialog from \"./components/FormDialog\";\nimport PageInput from \"./components/PageInput\";\nimport renderToast from \"./components/Toast\";\n\nimport renderOverlay from \"./util/renderOverlay\";\nimport runExtension from \"./util/runExtension\";\n\nimport { createBlock } from \"./writes\";\nimport MenuItemSelect from \"./components/MenuItemSelect\";\n\n// const blockRender = (Component: React.FC) => {\n//   const block = window.roamAlphaAPI.ui.getFocusedBlock();\n//   const parent = document.getElementById(\n//     `block-input-${block?.[\"window-id\"]}-${block?.[\"block-uid\"]}`\n//   );\n//   ReactDOM.render(<Component />, parent);\n// };\n\nconst unloads = new Set<() => void>();\n\nconst rootRender = (Component: React.FC) => {\n  const root = document.querySelector(\".roam-article\");\n  const parent = document.createElement(\"div\");\n  root?.insertBefore(parent, root.firstElementChild);\n  ReactDOM.render(<Component />, parent);\n  unloads.add(() => {\n    ReactDOM.unmountComponentAtNode(parent);\n    parent.remove();\n  });\n};\n\nconst components = [\n  {\n    callback: () =>\n      rootRender(() => {\n        const [value, setValue] = useState(\"\");\n        const [filterable, setFilterable] = useState(false);\n        const options = useMemo(() => [\"apple\", \"banana\", \"orange\"], []);\n        return (\n          <>\n            <div>Chosen value: {value}</div>\n            <Checkbox\n              checked={filterable as boolean}\n              onChange={(e) =>\n                setFilterable((e.target as HTMLInputElement).checked)\n              }\n              label={\"Filterable\"}\n            />\n            <MenuItemSelect\n              activeItem={value}\n              items={options}\n              onItemSelect={(item) => setValue(item)}\n              filterable={filterable}\n            />\n          </>\n        );\n      }),\n    label: \"MenuItemSelect\",\n  },\n  {\n    callback: () =>\n      rootRender(() => {\n        const [value, setValue] = useState(\"\");\n        const [numResults, setNumResults] = useState(100);\n        const [disabled, setDisabled] = useState(false);\n        const [maxItemsDisplayed, setMaxItemsDisplayed] = useState(0);\n        const options = useMemo(() => {\n          const items = [];\n          for (let i = 0; i < numResults; i++) {\n            items.push(Math.random().toString(36).substring(7));\n          }\n          return items;\n        }, [numResults]);\n        return (\n          <>\n            <Label>\n              Number of Results\n              <NumericInput\n                value={numResults}\n                onValueChange={(e) => setNumResults(e)}\n                buttonPosition={\"none\"}\n              />\n            </Label>\n            <Label>\n              Max Items Displayed (0 for all)\n              <NumericInput\n                value={maxItemsDisplayed}\n                onValueChange={(e) => setMaxItemsDisplayed(e)}\n                buttonPosition={\"none\"}\n              />\n            </Label>\n            <Label>Chosen value: {value}</Label>\n            <Checkbox\n              checked={disabled}\n              onChange={(e) =>\n                setDisabled((e.target as HTMLInputElement).checked)\n              }\n              label={\"Disabled\"}\n            />\n            <Label>\n              Autocomplete\n              <AutocompleteInput\n                disabled={disabled}\n                value={value}\n                setValue={setValue}\n                options={options}\n                maxItemsDisplayed={\n                  maxItemsDisplayed === 0 ? undefined : maxItemsDisplayed\n                }\n              />\n            </Label>\n          </>\n        );\n      }),\n    label: \"AutocompleteInput\",\n  },\n  {\n    callback: () =>\n      rootRender(() => {\n        const [isOpen, setIsOpen] = useState(false);\n        return (\n          <>\n            <Button onClick={() => setIsOpen(true)} text={\"Open Form\"} />\n            <FormDialog\n              isOpen={isOpen}\n              onClose={() => setIsOpen(false)}\n              onSubmit={(data) =>\n                window.roamAlphaAPI.ui.mainWindow\n                  .getOpenPageOrBlockUid()\n                  .then((parentUid) =>\n                    createBlock({\n                      parentUid:\n                        parentUid ||\n                        window.roamAlphaAPI.util.dateToPageUid(new Date()),\n                      node: {\n                        text: \"Response\",\n                        children: Object.entries(data).map(([k, v]) => ({\n                          text: k,\n                          children: Array.isArray(v) ? v : [{ text: `${v}` }],\n                        })),\n                      },\n                    })\n                  )\n              }\n              fields={{\n                text: { type: \"text\", label: \"Text Field\" },\n                number: { type: \"number\", label: \"Number Field\" },\n                info: { type: \"info\", label: \"Read Only Info Text\" },\n                flag: { type: \"flag\", label: \"Flag Field\" },\n                conditionalText: {\n                  type: \"text\",\n                  label: \"Conditional Text Field\",\n                  conditional: \"flag\",\n                },\n                page: { type: \"page\", label: \"Page Field\" },\n                block: { type: \"block\", label: \"Block Field\" },\n                select: {\n                  type: \"select\",\n                  label: \"Select Field\",\n                  options: [\n                    \"apple\",\n                    \"banana\",\n                    \"orange\",\n                    \"conditional select 1\",\n                  ],\n                },\n                conditionalSelect: {\n                  type: \"text\",\n                  label: \"Conditional Text Field\",\n                  conditional: \"select\",\n                  conditionalValues: [\"conditional select 1\"],\n                },\n                autocomplete: {\n                  type: \"autocomplete\",\n                  label: \"Autocomplete Field\",\n                  options: [\"apple\", \"banana\", \"orange\"],\n                },\n                embed: {\n                  type: \"embed\",\n                  label: \"Embed Field\",\n                },\n              }}\n            />\n          </>\n        );\n      }),\n    label: \"FormDialog\",\n  },\n  {\n    callback: () =>\n      rootRender(() => {\n        const [value, setValue] = useState(\"\");\n        const [multiline, setMultiline] = useState(false);\n        return (\n          <>\n            <PageInput\n              value={value}\n              setValue={setValue}\n              multiline={multiline}\n            />\n            <input\n              className=\"ml-8 inline-block\"\n              checked={multiline}\n              onChange={(e) => setMultiline(e.target.checked)}\n              type={\"checkbox\"}\n            />\n          </>\n        );\n      }),\n    label: \"PageInput\",\n  },\n];\n\nexport default runExtension(async (args) => {\n  components.forEach(({ callback, label }) => {\n    args.extensionAPI.ui.commandPalette.addCommand({\n      label: `Render RoamJS component ${label}`,\n      callback,\n    });\n  });\n  window.roamjs.extension.developer = {\n    components: {\n      AutocompleteInput,\n      FormDialog,\n      PageInput,\n      renderToast,\n    },\n    util: {\n      renderOverlay,\n      runExtension,\n    },\n    args,\n  };\n  return () => {\n    unloads.forEach((unload) => unload());\n  };\n});\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "roamjs-components",
   "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
-  "version": "0.82.8",
+  "version": "0.82.10",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {

package/util/stripUid.d.ts

@@ -0,0 +1,3 @@
+import { InputTextNode, RoamBasicNode } from "../types";
+declare const stripUid: (n: RoamBasicNode[]) => InputTextNode[];
+export default stripUid;

package/util/stripUid.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const stripUid = (n) => {
+    return n.map((_a) => {
+        var { uid: _uid, children } = _a, c = tslib_1.__rest(_a, ["uid", "children"]);
+        return (Object.assign(Object.assign({}, c), { children: stripUid(children) }));
+    });
+};
+exports.default = stripUid;
+//# sourceMappingURL=stripUid.js.map

package/util/stripUid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stripUid.js","sourceRoot":"","sources":["../../src/util/stripUid.ts"],"names":[],"mappings":";;;AAEA,MAAM,QAAQ,GAAG,CAAC,CAAkB,EAAmB,EAAE;IACvD,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,EAA6B,EAAE,EAAE;YAAjC,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,OAAQ,EAAH,CAAC,sBAA3B,mBAA6B,CAAF;QAAO,OAAA,iCAC3C,CAAC,KACJ,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAC5B,CAAA;KAAA,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC","sourcesContent":["import { InputTextNode, RoamBasicNode } from \"../types\";\n\nconst stripUid = (n: RoamBasicNode[]): InputTextNode[] => {\n  return n.map(({ uid: _uid, children, ...c }) => ({\n    ...c,\n    children: stripUid(children),\n  }));\n};\n\nexport default stripUid;\n"]}