roamjs-components 0.78.3 → 0.78.6

package/components/AutocompleteInput.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
+declare type FilterOptions<T> = (options: T[], query: string) => T[];
+declare type OnNewItem<T> = (s: string) => T;
 export declare type AutocompleteInputProps<T = string> = {
-    value: T;
+    value?: T;
     setValue: (q: T) => void;
     showButton?: boolean;
     onBlur?: (v: string) => void;
@@ -10,14 +12,14 @@ export declare type AutocompleteInputProps<T = string> = {
     autoFocus?: boolean;
     multiline?: boolean;
     id?: string;
-    filterOptions?: (options: T[], query: string) => T[];
-    itemToString?: (item: T) => string;
+    filterOptions?: FilterOptions<T>;
+    itemToQuery?: (item?: T) => string;
     renderItem?: (props: {
         item: T;
         onClick: () => void;
         active: boolean;
     }) => React.ReactElement;
-    onNewItem?: (s: string) => T;
+    onNewItem?: OnNewItem<T>;
 };
-declare const AutocompleteInput: <T extends unknown = string>({ value, setValue, onBlur, onConfirm, showButton, options, placeholder, autoFocus, multiline, id, filterOptions, itemToString, renderItem, 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, renderItem, onNewItem: _onNewItem, }: AutocompleteInputProps<T>) => React.ReactElement;
 export default AutocompleteInput;

package/components/AutocompleteInput.js

@@ -6,20 +6,23 @@ 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 = (o, q) => typeof o[0] === "string"
-    ? fuzzy_1.default.filter(q, o).map((e) => e.string)
-    : o, itemToString = (i) => `${i}`, renderItem, onNewItem = (s) => s, }) => {
+const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, options = [], placeholder = "Enter value", autoFocus, multiline, id, filterOptions: _filterOptions, itemToQuery = (i) => `${i}`, renderItem, onNewItem: _onNewItem, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [query, setQuery] = (0, react_1.useState)(() => itemToString(value));
+    const [query, setQuery] = (0, react_1.useState)(() => itemToQuery(value));
     const open = (0, react_1.useCallback)(() => setIsOpen(true), [setIsOpen]);
     const close = (0, react_1.useCallback)(() => setIsOpen(false), [setIsOpen]);
     const [isTyping, setIsTyping] = (0, react_1.useState)(false);
+    const filterOptions = (0, react_1.useMemo)(() => _filterOptions ||
+        ((o, q) => typeof o[0] === "string"
+            ? fuzzy_1.default.filter(q, o).map((e) => e.string)
+            : o), [_filterOptions]);
+    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 menuRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const onEnter = (0, react_1.useCallback)((value) => {
         if (isOpen && value) {
-            setQuery(itemToString(value));
+            setQuery(itemToQuery(value));
             setValue(value);
             setIsTyping(false);
         }
@@ -55,12 +58,12 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
                     var _a;
                     setIsTyping(false);
                     setValue(t);
-                    setQuery(itemToString(t));
+                    setQuery(itemToQuery(t));
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 },
                 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: itemToString(t), key: i, multiline: true }, sharedProps)));
+            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) => {
                 setIsTyping(true);
                 setQuery(e.target.value);

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\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?: (options: T[], query: string) => T[];\n  itemToString?: (item: T) => string;\n  renderItem?: (props: {\n    item: T;\n    onClick: () => void;\n    active: boolean;\n  }) => React.ReactElement;\n  onNewItem?: (s: string) => 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 = (o, q) =>\n    typeof o[0] === \"string\"\n      ? (fuzzy.filter(q, o).map((e) => e.string) as T[])\n      : o,\n  itemToString = (i) => `${i}`,\n  renderItem,\n  onNewItem = (s) => s as T,\n}: AutocompleteInputProps<T>): React.ReactElement => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [query, setQuery] = useState<string>(() => itemToString(value));\n  const open = useCallback(() => setIsOpen(true), [setIsOpen]);\n  const close = useCallback(() => setIsOpen(false), [setIsOpen]);\n  const [isTyping, setIsTyping] = useState(false);\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(itemToString(value));\n        setValue(value);\n        setIsTyping(false);\n      } else if (onConfirm) {\n        onConfirm();\n      } else {\n        setIsOpen(true);\n      }\n    },\n    [setValue, close, 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) setValue(items[activeIndex] || onNewItem(query));\n  }, [setValue, activeIndex, items, onNewItem, query]);\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 sharedProps = {\n              onClick: () => {\n                setIsTyping(false);\n                setValue(t);\n                setQuery(itemToString(t));\n                inputRef.current?.focus();\n              },\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={itemToString(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;\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?: (item?: T) => string;\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 = (i) => `${i}`,\n  renderItem,\n  onNewItem: _onNewItem,\n}: AutocompleteInputProps<T>): React.ReactElement => {\n  const [isOpen, setIsOpen] = useState(false);\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        typeof o[0] === \"string\"\n          ? (fuzzy.filter(q, o).map((e) => e.string) as T[])\n          : o),\n    [_filterOptions]\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, close, 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) setValue(items[activeIndex] || onNewItem(query));\n  }, [setValue, activeIndex, items, onNewItem, query]);\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 sharedProps = {\n              onClick: () => {\n                setIsTyping(false);\n                setValue(t);\n                setQuery(itemToQuery(t));\n                inputRef.current?.focus();\n              },\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"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "roamjs-components",
   "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
-  "version": "0.78.3",
+  "version": "0.78.6",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
@@ -45,7 +45,7 @@
     "use-sync-external-store": "^1.2.0"
   },
   "dependencies": {
-    "@samepage/scripts": "^0.66.4",
+    "@samepage/scripts": "^0.66.6",
     "@testing-library/react": "^12.1.5",
     "aws-sdk-plus": "^0.5.3",
     "color": "^4.0.1",