roamjs-components 0.77.25 → 0.78.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export declare type AutocompleteInputProps<T = string> = {
|
|
3
|
-
value
|
|
3
|
+
value?: T;
|
|
4
4
|
setValue: (q: T) => void;
|
|
5
5
|
showButton?: boolean;
|
|
6
6
|
onBlur?: (v: string) => void;
|
|
@@ -19,5 +19,5 @@ export declare type AutocompleteInputProps<T = string> = {
|
|
|
19
19
|
}) => React.ReactElement;
|
|
20
20
|
onNewItem?: (s: string) => T;
|
|
21
21
|
};
|
|
22
|
-
declare const AutocompleteInput: <T extends unknown = string>({
|
|
22
|
+
declare const AutocompleteInput: <T extends unknown = string>({ setValue, onBlur, onConfirm, showButton, options, placeholder, autoFocus, multiline, id, filterOptions, itemToString, renderItem, onNewItem, }: AutocompleteInputProps<T>) => React.ReactElement;
|
|
23
23
|
export default AutocompleteInput;
|
|
@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const useArrowKeyDown_1 = tslib_1.__importDefault(require("../hooks/useArrowKeyDown"));
|
|
7
7
|
const fuzzy_1 = tslib_1.__importDefault(require("fuzzy"));
|
|
8
8
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
|
|
9
|
-
const AutocompleteInput = ({
|
|
9
|
+
const AutocompleteInput = ({ setValue, onBlur, onConfirm, showButton, options = [], placeholder = "Enter value", autoFocus, multiline, id, filterOptions = (o, q) => typeof o[0] === "string"
|
|
10
10
|
? fuzzy_1.default.filter(q, o).map((e) => e.string)
|
|
11
11
|
: o, itemToString = (i) => `${i}`, renderItem, onNewItem = (s) => s, }) => {
|
|
12
12
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
@@ -14,7 +14,7 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
|
|
|
14
14
|
const open = (0, react_1.useCallback)(() => setIsOpen(true), [setIsOpen]);
|
|
15
15
|
const close = (0, react_1.useCallback)(() => setIsOpen(false), [setIsOpen]);
|
|
16
16
|
const [isTyping, setIsTyping] = (0, react_1.useState)(false);
|
|
17
|
-
const items = (0, react_1.useMemo)(() => (query ? filterOptions(options, query) : options), [
|
|
17
|
+
const items = (0, react_1.useMemo)(() => (query ? filterOptions(options, query) : options), [query, options, filterOptions]);
|
|
18
18
|
const menuRef = (0, react_1.useRef)(null);
|
|
19
19
|
const inputRef = (0, react_1.useRef)(null);
|
|
20
20
|
const onEnter = (0, react_1.useCallback)((value) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteInput.js","sourceRoot":"","sources":["../../src/components/AutocompleteInput.tsx"],"names":[],"mappings":";;;AAAA,4CAQ2B;AAC3B,uDAMe;AACf,uFAAuD;AACvD,0DAA0B;
|
|
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 // TODO - unused\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 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>(\"\");\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 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"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "roamjs-components",
|
|
3
3
|
"description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.78.1",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
7
7
|
"scripts": {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"use-sync-external-store": "^1.2.0"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@samepage/scripts": "^0.
|
|
48
|
+
"@samepage/scripts": "^0.66.3",
|
|
49
49
|
"@testing-library/react": "^12.1.5",
|
|
50
50
|
"aws-sdk-plus": "^0.5.3",
|
|
51
51
|
"color": "^4.0.1",
|