@camped-ui/autocomplete 1.0.4

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.
package/README.md ADDED
@@ -0,0 +1,13 @@
1
+ # Auto Complete
2
+
3
+ An autocomplete component suggests possible options as users type, helping them quickly complete their input. It enhances usability by offering relevant matches based on the input field context.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ yarn add @camped-ui/autocomplete
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ View docs [here](https://ui.camped.academy/docs/components/autocomplete).
@@ -0,0 +1,13 @@
1
+ export type Option = Record<"value" | "label", string> & Record<string, string>;
2
+ type AutoCompleteProps = {
3
+ options: Option[];
4
+ emptyMessage: string;
5
+ value?: Option;
6
+ onValueChange?: (value: Option) => void;
7
+ isLoading?: boolean;
8
+ disabled?: boolean;
9
+ placeholder?: string;
10
+ };
11
+ export declare const AutoComplete: ({ options, placeholder, emptyMessage, value, onValueChange, disabled, isLoading }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
12
+ export {};
13
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaE,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,OAAO,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhF,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,YAAY,sFAQtB,iBAAiB,4CA4HnB,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.AutoComplete = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const command_1 = require("@camped-ui/command");
6
+ const cmdk_1 = require("cmdk");
7
+ const react_1 = require("react");
8
+ const skeleton_1 = require("@camped-ui/skeleton");
9
+ const lucide_react_1 = require("lucide-react");
10
+ const lib_1 = require("@camped-ui/lib");
11
+ const AutoComplete = ({ options, placeholder, emptyMessage, value, onValueChange, disabled, isLoading = false }) => {
12
+ const inputRef = (0, react_1.useRef)(null);
13
+ const [isOpen, setOpen] = (0, react_1.useState)(false);
14
+ const [selected, setSelected] = (0, react_1.useState)(value);
15
+ const [inputValue, setInputValue] = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.label) || "");
16
+ const handleKeyDown = (0, react_1.useCallback)((event) => {
17
+ const input = inputRef.current;
18
+ if (!input) {
19
+ return;
20
+ }
21
+ // Keep the options displayed when the user is typing
22
+ if (!isOpen) {
23
+ setOpen(true);
24
+ }
25
+ // This is not a default behaviour of the <input /> field
26
+ if (event.key === "Enter" && input.value !== "") {
27
+ const optionToSelect = options.find((option) => option.label === input.value);
28
+ if (optionToSelect) {
29
+ setSelected(optionToSelect);
30
+ onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(optionToSelect);
31
+ }
32
+ }
33
+ if (event.key === "Escape") {
34
+ input.blur();
35
+ }
36
+ }, [isOpen, options, onValueChange]);
37
+ const handleBlur = (0, react_1.useCallback)(() => {
38
+ setOpen(false);
39
+ setInputValue(selected === null || selected === void 0 ? void 0 : selected.label);
40
+ }, [selected]);
41
+ const handleSelectOption = (0, react_1.useCallback)((selectedOption) => {
42
+ setInputValue(selectedOption.label);
43
+ setSelected(selectedOption);
44
+ onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(selectedOption);
45
+ // This is a hack to prevent the input from being focused after the user selects an option
46
+ // We can call this hack: "The next tick"
47
+ setTimeout(() => {
48
+ var _a;
49
+ (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
50
+ }, 0);
51
+ }, [onValueChange]);
52
+ return ((0, jsx_runtime_1.jsxs)(cmdk_1.Command, { onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(cmdk_1.Command.Input, { ref: inputRef, value: inputValue, onValueChange: isLoading ? undefined : setInputValue, onBlur: handleBlur, onFocus: () => setOpen(true), placeholder: placeholder, disabled: disabled, className: "flex h-9 w-full rounded-md border border-input bg-transparent py-3 pl-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)("div", { className: (0, lib_1.cn)("animate-in fade-in-0 zoom-in-95 absolute top-0 z-10 w-full rounded-xl bg-background outline-none", isOpen ? "block" : "hidden"), children: (0, jsx_runtime_1.jsxs)(command_1.CommandList, { className: "rounded-lg ring-1 ring-slate-200 h-48 overflow-scroll", children: [isLoading ? ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Loading, { children: (0, jsx_runtime_1.jsx)("div", { className: "p-1", children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-8 w-full" }) }) })) : null, (options === null || options === void 0 ? void 0 : options.length) > 0 && !isLoading ? ((0, jsx_runtime_1.jsx)(command_1.CommandGroup, { children: options.map((option) => {
53
+ const isSelected = (selected === null || selected === void 0 ? void 0 : selected.value) === option.value;
54
+ return ((0, jsx_runtime_1.jsxs)(command_1.CommandItem, { value: option.label, onMouseDown: (event) => {
55
+ event.preventDefault();
56
+ event.stopPropagation();
57
+ }, onSelect: () => handleSelectOption(option), className: (0, lib_1.cn)("flex w-full items-center justify-between gap-2", !isSelected ? "pr-8 " : null), children: [option.label, isSelected ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-4" }) : null] }, option.value));
58
+ }) })) : null, !isLoading ? ((0, jsx_runtime_1.jsx)(cmdk_1.Command.Empty, { className: "select-none rounded-sm px-2 py-3 text-center text-sm", children: emptyMessage })) : null] }) }) })] }));
59
+ };
60
+ exports.AutoComplete = AutoComplete;
61
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@camped-ui/autocomplete",
3
+ "version": "1.0.4",
4
+ "main": "dist/index.js",
5
+ "scripts": {
6
+ "publish-package": "npm publish --access public",
7
+ "build": "rimraf dist && tsc",
8
+ "clean": "rimraf dist"
9
+ },
10
+ "dependencies": {
11
+ "@camped-ui/command": "3.0.1",
12
+ "cmdk": "1.0.0",
13
+ "@camped-ui/lib": "^2.0.2"
14
+ },
15
+ "peerDependencies": {
16
+ "react": "*",
17
+ "react-easy-sort": "^1.6.0"
18
+ },
19
+ "publishConfig": {
20
+ "registry": "https://registry.npmjs.org/",
21
+ "access": "public"
22
+ },
23
+ "author": "incresco",
24
+ "homepage": "https://ui.camped.academy",
25
+ "keywords": [
26
+ "camped",
27
+ "camped-ui",
28
+ "next.js",
29
+ "autocomplete",
30
+ "components"
31
+ ]
32
+ }