@camped-ui/autocomplete 1.0.4

package/README.md

@@ -0,0 +1,13 @@
+# Auto Complete
+
+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.
+
+## Installation
+
+```bash
+yarn add @camped-ui/autocomplete
+```
+
+## Usage
+
+View docs [here](https://ui.camped.academy/docs/components/autocomplete).

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export type Option = Record<"value" | "label", string> & Record<string, string>;
+type AutoCompleteProps = {
+    options: Option[];
+    emptyMessage: string;
+    value?: Option;
+    onValueChange?: (value: Option) => void;
+    isLoading?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+};
+export declare const AutoComplete: ({ options, placeholder, emptyMessage, value, onValueChange, disabled, isLoading }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoComplete = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const command_1 = require("@camped-ui/command");
+const cmdk_1 = require("cmdk");
+const react_1 = require("react");
+const skeleton_1 = require("@camped-ui/skeleton");
+const lucide_react_1 = require("lucide-react");
+const lib_1 = require("@camped-ui/lib");
+const AutoComplete = ({ options, placeholder, emptyMessage, value, onValueChange, disabled, isLoading = false }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [isOpen, setOpen] = (0, react_1.useState)(false);
+    const [selected, setSelected] = (0, react_1.useState)(value);
+    const [inputValue, setInputValue] = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.label) || "");
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        const input = inputRef.current;
+        if (!input) {
+            return;
+        }
+        // Keep the options displayed when the user is typing
+        if (!isOpen) {
+            setOpen(true);
+        }
+        // This is not a default behaviour of the <input /> field
+        if (event.key === "Enter" && input.value !== "") {
+            const optionToSelect = options.find((option) => option.label === input.value);
+            if (optionToSelect) {
+                setSelected(optionToSelect);
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(optionToSelect);
+            }
+        }
+        if (event.key === "Escape") {
+            input.blur();
+        }
+    }, [isOpen, options, onValueChange]);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        setInputValue(selected === null || selected === void 0 ? void 0 : selected.label);
+    }, [selected]);
+    const handleSelectOption = (0, react_1.useCallback)((selectedOption) => {
+        setInputValue(selectedOption.label);
+        setSelected(selectedOption);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(selectedOption);
+        // This is a hack to prevent the input from being focused after the user selects an option
+        // We can call this hack: "The next tick"
+        setTimeout(() => {
+            var _a;
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }, 0);
+    }, [onValueChange]);
+    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) => {
+                                    const isSelected = (selected === null || selected === void 0 ? void 0 : selected.value) === option.value;
+                                    return ((0, jsx_runtime_1.jsxs)(command_1.CommandItem, { value: option.label, onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                        }, 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));
+                                }) })) : 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] }) }) })] }));
+};
+exports.AutoComplete = AutoComplete;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@camped-ui/autocomplete",
+  "version": "1.0.4",
+  "main": "dist/index.js",
+  "scripts": {
+    "publish-package": "npm publish --access public",
+    "build": "rimraf dist && tsc",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@camped-ui/command": "3.0.1",
+    "cmdk": "1.0.0",
+    "@camped-ui/lib": "^2.0.2" 
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-easy-sort": "^1.6.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "author": "incresco",
+  "homepage": "https://ui.camped.academy",
+  "keywords": [
+    "camped",
+    "camped-ui",
+    "next.js",
+    "autocomplete",
+    "components"
+  ]
+}