✨ new multi select tag input

src/components/machines-selector.tsx

@@ -5,10 +5,7 @@ import { useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
 
 import { useTranslations } from "next-intl";
-import {
-    SuggestionsTagInput,
-    type SuggestionsTagInputProps
-} from "./tags/suggestions-tag-input";
+import { MultiSelectInput } from "./multi-select/multi-select-input";
 
 export type SelectedMachine = Pick<
     ListClientsResponse["clients"][number],
@@ -19,22 +16,12 @@ export type MachineSelectorProps = {
     orgId: string;
     selectedMachines?: SelectedMachine[];
     onSelectMachines: (machine: SelectedMachine[]) => void;
-} & Omit<
-    SuggestionsTagInputProps,
-    | "tags"
-    | "setTags"
-    | "suggestedOptions"
-    | "searchQuery"
-    | "onSearchQueryChange"
-    | "activeTagIndex"
-    | "setActiveTagIndex"
->;
+};
 
 export function MachinesSelector({
     orgId,
     selectedMachines = [],
-    onSelectMachines,
-    ...props
+    onSelectMachines
 }: MachineSelectorProps) {
     const t = useTranslations();
     const [machineSearchQuery, setMachineSearchQuery] = useState("");
@@ -60,42 +47,29 @@ export function MachinesSelector({
         return allMachines;
     }, [machines, selectedMachines, debouncedValue]);
 
-    const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
-
     return (
-        <SuggestionsTagInput
-            {...props}
-            activeTagIndex={activeTagIndex}
-            setActiveTagIndex={setActiveTagIndex}
-            placeholder={t("accessClientSelect")}
-            tags={selectedMachines.map((mc) => ({
+        <MultiSelectInput
+            buttonText={t("accessClientSelect")}
+            searchPlaceholder={t("search")}
+            emptyPlaceholder={t("machineNotFound")}
+            searchQuery={machineSearchQuery}
+            onSearch={setMachineSearchQuery}
+            options={machinesShown.map((mc) => ({
                 id: mc.clientId.toString(),
                 text: mc.name
             }))}
-            setTags={(newTags) => {
-                const tags =
-                    typeof newTags === "function"
-                        ? newTags(
-                              selectedMachines.map((mc) => ({
-                                  id: mc.clientId.toString(),
-                                  text: mc.name
-                              }))
-                          )
-                        : newTags;
+            value={selectedMachines.map((mc) => ({
+                id: mc.clientId.toString(),
+                text: mc.name
+            }))}
+            onChange={(newValues) => {
                 onSelectMachines(
-                    tags.map((tag) => ({
-                        clientId: Number(tag.id),
-                        name: tag.text
+                    newValues.map((v) => ({
+                        clientId: Number(v.id),
+                        name: v.text
                     }))
                 );
             }}
-            searchQuery={machineSearchQuery}
-            onSearchQueryChange={setMachineSearchQuery}
-            suggestedOptions={machinesShown.map((mc) => ({
-                id: mc.clientId.toString(),
-                text: mc.name
-            }))}
-            allowDuplicates={false}
         />
     );
 }

src/components/multi-select/multi-select-input.tsx

@@ -3,14 +3,15 @@ import {
     PopoverContent,
     PopoverTrigger
 } from "@app/components/ui/popover";
-import { Button } from "@app/components/ui/button";
+import { Button, buttonVariants } from "@app/components/ui/button";
 import { cn } from "@app/lib/cn";
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon, XIcon } from "lucide-react";
 import {
     type TagValue,
     type MultiSelectTagsProps,
     MultiSelectTags
 } from "./multi-select-tags";
+import { useState } from "react";
 
 export interface MultiSelectInputProps<
     T extends TagValue
@@ -22,13 +23,20 @@ export function MultiSelectInput<T extends TagValue>({
     buttonText,
     ...props
 }: MultiSelectInputProps<T>) {
+    const selectedValues = new Set(props.value.map((v) => v.id));
+
     return (
         <Popover>
-            <PopoverTrigger>
+            <PopoverTrigger asChild>
                 <div
+                    role="combobox"
                     className={cn(
-                        "justify-between w-full",
-                        "text-muted-foreground pl-1.5 cursor-text"
+                        buttonVariants({
+                            variant: "outline"
+                        }),
+                        "justify-between w-full inline-flex",
+                        "text-muted-foreground pl-1.5 cursor-text",
+                        "hover:bg-transparent hover:text-muted-foreground"
                     )}
                 >
                     <span
@@ -37,20 +45,41 @@ export function MultiSelectInput<T extends TagValue>({
                             "overflow-x-auto"
                         )}
                     >
-                        {/* {(field.value ?? []).map((client) => (
+                        {props.value.map((option) => (
                             <span
-                                key={client.clientId}
+                                key={option.id}
                                 className={cn(
                                     "bg-muted-foreground/20 font-normal text-foreground rounded-sm",
-                                    "py-1 px-1.5 text-xs"
+                                    "py-1 pl-1.5 pr-0.5 text-xs inline-flex items-center gap-0.5"
                                 )}
+                                onClick={(e) => e.stopPropagation()}
                             >
-                                {client.name}
+                                {option.text}
+                                <button
+                                    className="p-0.5 flex-none cursor-pointer"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        let newValues = [];
+                                        if (selectedValues.has(option.id)) {
+                                            newValues = props.value.filter(
+                                                (v) => v.id !== option.id
+                                            );
+                                        } else {
+                                            newValues = [
+                                                ...props.value,
+                                                option
+                                            ];
+                                        }
+                                        props.onChange(newValues);
+                                    }}
+                                >
+                                    <XIcon className="size-3.5" />
+                                </button>
                             </span>
-                        ))} */}
+                        ))}
                         <span className="pl-1 font-normal">{buttonText}</span>
                     </span>
-                    <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 text-muted-foreground" />
                 </div>
             </PopoverTrigger>
             <PopoverContent className="p-0">