🚧 wip

src/components/InternalResourceForm.tsx

@@ -1572,7 +1572,22 @@ export function InternalResourceForm({
                                                 <FormLabel>
                                                     {t("machineClients")}
                                                 </FormLabel>
-                                                <Popover>
+                                                <MachinesSelector
+                                                    {...field}
+                                                    selectedMachines={
+                                                        field.value ?? []
+                                                    }
+                                                    orgId={orgId}
+                                                    onSelectMachines={(
+                                                        machines
+                                                    ) => {
+                                                        form.setValue(
+                                                            "clients",
+                                                            machines
+                                                        );
+                                                    }}
+                                                />
+                                                {/* <Popover>
                                                     <PopoverTrigger asChild>
                                                         <FormControl>
                                                             <Button
@@ -1638,7 +1653,7 @@ export function InternalResourceForm({
                                                             }}
                                                         />
                                                     </PopoverContent>
-                                                </Popover>
+                                                </Popover> */}
                                                 <FormMessage />
                                             </FormItem>
                                         )}

src/components/machines-selector.tsx

@@ -6,6 +6,7 @@ import { useDebounce } from "use-debounce";
 
 import { useTranslations } from "next-intl";
 import { MultiSelectTags } from "./multi-select/multi-select-tags";
+import { TagInput, type TagInputProps } from "./tags/tag-input";
 
 export type SelectedMachine = Pick<
     ListClientsResponse["clients"][number],
@@ -16,12 +17,27 @@ export type MachineSelectorProps = {
     orgId: string;
     selectedMachines?: SelectedMachine[];
     onSelectMachines: (machine: SelectedMachine[]) => void;
-};
+} & Omit<
+    TagInputProps,
+    | "activeTagIndex"
+    | "setActiveTagIndex"
+    | "placeholder"
+    | "size"
+    | "tags"
+    | "setTags"
+    | "value"
+    | "searchQuery"
+    | "onSearchQueryChange"
+    | "suggestedOptions"
+    | "enableAutocomplete"
+    | "autocompleteOptions"
+>;
 
 export function MachinesSelector({
     orgId,
     selectedMachines = [],
-    onSelectMachines
+    onSelectMachines,
+    ...props
 }: MachineSelectorProps) {
     const t = useTranslations();
     const [machineSearchQuery, setMachineSearchQuery] = useState("");
@@ -29,7 +45,7 @@ export function MachinesSelector({
     const [debouncedValue] = useDebounce(machineSearchQuery, 150);
 
     const { data: machines = [] } = useQuery(
-        orgQueries.machineClients({ orgId, perPage: 10, query: debouncedValue })
+        orgQueries.machineClients({ orgId, perPage: 3, query: debouncedValue })
     );
 
     // always include the selected machines in the list of machines shown (if the user isn't searching)
@@ -52,26 +68,68 @@ export function MachinesSelector({
     //     selectedMachines.map((m) => m.clientId)
     // );
 
+    const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+
     return (
-        <MultiSelectTags
+        <>
-            emptyPlaceholder={t("machineNotFound")}
+            <TagInput
-            searchPlaceholder={t("machineSearch")}
+                {...props}
-            value={selectedMachines.map((m) => ({
+                activeTagIndex={activeTagIndex}
-                ...m,
+                setActiveTagIndex={setActiveTagIndex}
-                text: m.name,
+                placeholder={t("accessClientSelect")}
-                id: m.clientId.toString()
+                size="sm"
-            }))}
+                tags={selectedMachines.map((mc) => ({
-            onChange={(values) => {
+                    id: mc.clientId.toString(),
-                onSelectMachines(values);
+                    text: mc.name
-            }}
+                }))}
-            options={machinesShown.map((m) => ({
+                setTags={(newTags) => {
-                ...m,
+                    const tags =
-                id: m.clientId.toString(),
+                        typeof newTags === "function"
-                text: m.name
+                            ? newTags(
-            }))}
+                                  selectedMachines.map((mc) => ({
-            onSearch={setMachineSearchQuery}
+                                      id: mc.clientId.toString(),
-            searchQuery={machineSearchQuery}
+                                      text: mc.name
-        />
+                                  }))
+                              )
+                            : newTags;
+                    onSelectMachines(
+                        tags.map((tag) => ({
+                            clientId: Number(tag.id),
+                            name: tag.text
+                        }))
+                    );
+                }}
+                searchQuery={machineSearchQuery}
+                onSearchQueryChange={setMachineSearchQuery}
+                suggestedOptions={machinesShown.map((mc) => ({
+                    id: mc.clientId.toString(),
+                    text: mc.name
+                }))}
+                allowDuplicates={false}
+                restrictTagsToAutocompleteOptions
+                sortTags
+            />
+        </>
+        //    <MultiSelectTags
+        //         emptyPlaceholder={t("machineNotFound")}
+        //         searchPlaceholder={t("machineSearch")}
+        //         value={selectedMachines.map((m) => ({
+        //             ...m,
+        //             text: m.name,
+        //             id: m.clientId.toString()
+        //         }))}
+        //         onChange={(values) => {
+        //             onSelectMachines(values);
+        //         }}
+        //         options={machinesShown.map((m) => ({
+        //             ...m,
+        //             id: m.clientId.toString(),
+        //             text: m.name
+        //         }))}
+        //         onSearch={setMachineSearchQuery}
+        //         searchQuery={machineSearchQuery}
+        //     />
+
         // <Command shouldFilter={false}>
         //     <CommandInput
         //         placeholder={t("machineSearch")}

src/components/tags/autocomplete.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState
+} from "react";
 import { TagInputStyleClassesProps, type Tag as TagType } from "./tag-input";
 import {
     Command,
@@ -35,6 +41,9 @@ type AutocompleteProps = {
     usePortal?: boolean;
     /** Narrows the dropdown list from the main field (cmdk search filters further). */
     filterQuery?: string;
+    /** When true, skip internal filtering and make the CommandInput controlled — parent owns filtering. */
+    disableSearch?: boolean;
+    onFilterQueryChange?: (value: string) => void;
 };
 
 export const Autocomplete: React.FC<AutocompleteProps> = ({
@@ -51,7 +60,9 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
     children,
     classStyleProps,
     usePortal,
-    filterQuery = ""
+    filterQuery = "",
+    disableSearch = false,
+    onFilterQueryChange
 }) => {
     const triggerContainerRef = useRef<HTMLDivElement | null>(null);
     const inputRef = useRef<HTMLInputElement | null>(null);
@@ -64,12 +75,13 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
     const [commandResetKey, setCommandResetKey] = useState(0);
 
     const visibleOptions = useMemo(() => {
+        if (disableSearch) return autocompleteOptions;
         const q = filterQuery.trim().toLowerCase();
         if (!q) return autocompleteOptions;
         return autocompleteOptions.filter((option) =>
             option.text.toLowerCase().includes(q)
         );
-    }, [autocompleteOptions, filterQuery]);
+    }, [autocompleteOptions, filterQuery, disableSearch]);
 
     useEffect(() => {
         if (isPopoverOpen) {
@@ -220,7 +232,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
             >
                 <PopoverAnchor asChild>
                     <div
-                        className="relative h-full flex items-center rounded-md border border-input bg-transparent pr-3"
+                        className="relative h-full flex items-center rounded-md border border-input bg-transparent pr-1"
                         ref={triggerContainerRef}
                     >
                         {childrenWithProps}
@@ -260,10 +272,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                     side="bottom"
                     align="start"
                     forceMount
-                    className={cn(
+                    className={cn("p-0", classStyleProps?.popoverContent)}
-                        "p-0",
-                        classStyleProps?.popoverContent
-                    )}
                     style={{
                         width: `${popoverWidth}px`,
                         minWidth: `${popoverWidth}px`,
@@ -272,15 +281,25 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                 >
                     <Command
                         key={commandResetKey}
+                        shouldFilter={!disableSearch}
                         className={cn(
                             "rounded-lg border-0 shadow-none",
                             classStyleProps?.command
                         )}
                     >
-                        <CommandInput
+                        {disableSearch ? (
-                            placeholder={t("searchPlaceholder")}
+                            <CommandInput
-                            className="h-9"
+                                placeholder={t("searchPlaceholder")}
-                        />
+                                className="h-9"
+                                value={filterQuery}
+                                onValueChange={onFilterQueryChange}
+                            />
+                        ) : (
+                            <CommandInput
+                                placeholder={t("searchPlaceholder")}
+                                className="h-9"
+                            />
+                        )}
                         <CommandList
                             className={cn(
                                 "max-h-[300px]",
@@ -300,7 +319,9 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                                             key={option.id}
                                             value={`${option.text} ${option.id}`}
                                             onSelect={() => toggleTag(option)}
-                                            className={classStyleProps?.commandItem}
+                                            className={
+                                                classStyleProps?.commandItem
+                                            }
                                         >
                                             <Check
                                                 className={cn(

src/components/tags/tag-input.tsx

@@ -85,6 +85,10 @@ export interface TagInputProps
     autocompleteFilter?: (option: string) => boolean;
     direction?: "row" | "column";
     onInputChange?: (value: string) => void;
+    searchQuery?: string;
+    onSearchQueryChange?: (value: string) => void;
+    autocompleteContent?: React.ReactNode;
+    suggestedOptions?: Tag[];
     customTagRenderer?: (tag: Tag, isActiveTag: boolean) => React.ReactNode;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
@@ -157,10 +161,26 @@ export function TagInput({ ref, ...props }: TagInputProps) {
         disabled = false,
         usePortal = false,
         addOnPaste = false,
-        generateTagId = uuid
+        generateTagId = uuid,
+        searchQuery,
+        onSearchQueryChange,
+        autocompleteContent,
+        suggestedOptions
     } = props;
 
     const [inputValue, setInputValue] = React.useState("");
+    const isControlled = searchQuery !== undefined;
+    const effectiveQuery = isControlled ? searchQuery : inputValue;
+
+    const updateQuery = React.useCallback(
+        (action: React.SetStateAction<string>) => {
+            const resolved =
+                typeof action === "function" ? action(effectiveQuery) : action;
+            if (!isControlled) setInputValue(resolved);
+            onSearchQueryChange?.(resolved);
+        },
+        [isControlled, effectiveQuery, onSearchQueryChange]
+    );
     const [tagCount, setTagCount] = React.useState(Math.max(0, tags.length));
     const inputRef = React.useRef<HTMLInputElement>(null);
 
@@ -176,6 +196,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
     }
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (suggestedOptions !== undefined) return;
         const newValue = e.target.value;
         if (addOnPaste && newValue.includes(delimiter)) {
             const splitValues = newValue
@@ -234,9 +255,9 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                     );
                 }
             });
-            setInputValue("");
+            updateQuery("");
         } else {
-            setInputValue(newValue);
+            updateQuery(newValue);
         }
         onInputChange?.(newValue);
     };
@@ -247,8 +268,8 @@ export function TagInput({ ref, ...props }: TagInputProps) {
     };
 
     const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-        if (addTagsOnBlur && inputValue.trim()) {
+        if (addTagsOnBlur && effectiveQuery.trim()) {
-            const newTagText = inputValue.trim();
+            const newTagText = effectiveQuery.trim();
 
             if (validateTag && !validateTag(newTagText)) {
                 return;
@@ -273,7 +294,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                 setTags([...tags, { id: newTagId, text: newTagText }]);
                 onTagAdd?.(newTagText);
                 setTagCount((prevTagCount) => prevTagCount + 1);
-                setInputValue("");
+                updateQuery("");
             }
         }
 
@@ -287,7 +308,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                 : e.key === delimiter || e.key === Delimiter.Enter
         ) {
             e.preventDefault();
-            const newTagText = inputValue.trim();
+            const newTagText = effectiveQuery.trim();
 
             // Check if the tag is in the autocomplete options if restrictTagsToAutocomplete is true
             if (
@@ -329,7 +350,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                 onTagAdd?.(newTagText);
                 setTagCount((prevTagCount) => prevTagCount + 1);
             }
-            setInputValue("");
+            updateQuery("");
         } else {
             switch (e.key) {
                 case "Delete":
@@ -419,9 +440,14 @@ export function TagInput({ ref, ...props }: TagInputProps) {
         onClearAll?.();
     };
 
-    // const filteredAutocompleteOptions = autocompleteFilter
+    const mainInputValue =
-    //   ? autocompleteOptions?.filter((option) => autocompleteFilter(option.text))
+        suggestedOptions !== undefined ? "" : effectiveQuery;
-    //   : autocompleteOptions;
+
+    const useAutocompleteComponent =
+        enableAutocomplete || suggestedOptions !== undefined;
+    const resolvedAutocompleteOptions = suggestedOptions ?? autocompleteOptions;
+    const disableAutocompleteSearch = suggestedOptions !== undefined;
+
     const displayedTags = sortTags ? [...tags].sort() : tags;
 
     const truncatedTags = truncate
@@ -436,13 +462,15 @@ export function TagInput({ ref, ...props }: TagInputProps) {
 
     return (
         <div
-            className={`w-full flex ${!inlineTags && tags.length > 0 ? "gap-3" : ""} ${
+            className={cn(
+                `w-full flex`,
+                !inlineTags && tags.length > 0 && "gap-3",
                 inputFieldPosition === "bottom"
                     ? "flex-col"
                     : inputFieldPosition === "top"
                       ? "flex-col-reverse"
                       : "flex-row"
-            }`}
+            )}
         >
             {!usePopoverForTags &&
                 (!inlineTags ? (
@@ -472,7 +500,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                         disabled={disabled}
                     />
                 ) : (
-                    !enableAutocomplete && (
+                    !useAutocompleteComponent && !autocompleteContent && (
                         <div className="w-full">
                             <div
                                 className={cn(
@@ -515,14 +543,14 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                             ? placeholderWhenFull
                                             : placeholder
                                     }
-                                    value={inputValue}
+                                    value={mainInputValue}
                                     onChange={handleInputChange}
                                     onKeyDown={handleKeyDown}
                                     onFocus={handleInputFocus}
                                     onBlur={handleInputBlur}
                                     {...inputProps}
                                     className={cn(
-                                        "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                        "border-0 px-2 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                         // className,
                                         styleClasses?.input
                                     )}
@@ -544,16 +572,84 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                         </div>
                     )
                 ))}
-            {enableAutocomplete ? (
+            {!useAutocompleteComponent && autocompleteContent && (
+                <div className="w-full">
+                    <div
+                        className={cn(
+                            `flex flex-row flex-wrap items-center gap-1.5 p-1.5 w-full rounded-md border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50`,
+                            styleClasses?.inlineTagsContainer
+                        )}
+                    >
+                        <TagList
+                            tags={truncatedTags}
+                            customTagRenderer={customTagRenderer}
+                            variant={variant}
+                            size={size}
+                            shape={shape}
+                            borderStyle={borderStyle}
+                            textCase={textCase}
+                            interaction={interaction}
+                            animation={animation}
+                            textStyle={textStyle}
+                            onTagClick={onTagClick}
+                            draggable={draggable}
+                            onSortEnd={onSortEnd}
+                            onRemoveTag={removeTag}
+                            direction={direction}
+                            inlineTags={inlineTags}
+                            activeTagIndex={activeTagIndex}
+                            setActiveTagIndex={setActiveTagIndex}
+                            classStyleProps={{
+                                tagListClasses: styleClasses?.tagList,
+                                tagClasses: styleClasses?.tag
+                            }}
+                            disabled={disabled}
+                        />
+                        <Input
+                            ref={inputRef}
+                            id={id}
+                            type="text"
+                            placeholder={
+                                maxTags !== undefined && tags.length >= maxTags
+                                    ? placeholderWhenFull
+                                    : placeholder
+                            }
+                            value={mainInputValue}
+                            onChange={handleInputChange}
+                            onKeyDown={handleKeyDown}
+                            onFocus={handleInputFocus}
+                            onBlur={handleInputBlur}
+                            {...inputProps}
+                            className={cn(
+                                "border-0 px-2 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                styleClasses?.input
+                            )}
+                            autoComplete="off"
+                            disabled={
+                                disabled ||
+                                (maxTags !== undefined && tags.length >= maxTags)
+                            }
+                        />
+                    </div>
+                    {autocompleteContent}
+                </div>
+            )}
+            {useAutocompleteComponent ? (
                 <div className="w-full">
                     <Autocomplete
                         tags={tags}
                         setTags={setTags}
-                        setInputValue={setInputValue}
+                        setInputValue={updateQuery}
                         autocompleteOptions={
-                            (autocompleteOptions || []) as Tag[]
+                            (resolvedAutocompleteOptions || []) as Tag[]
+                        }
+                        filterQuery={effectiveQuery}
+                        disableSearch={disableAutocompleteSearch}
+                        onFilterQueryChange={
+                            disableAutocompleteSearch
+                                ? onSearchQueryChange
+                                : undefined
                         }
-                        filterQuery={inputValue}
                         setTagCount={setTagCount}
                         maxTags={maxTags}
                         onTagAdd={onTagAdd}
@@ -579,7 +675,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                 // <CommandInput
                                 //   placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
                                 //   ref={inputRef}
-                                //   value={inputValue}
+                                //   value={mainInputValue}
                                 //   disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
                                 //   onChangeCapture={handleInputChange}
                                 //   onKeyDown={handleKeyDown}
@@ -601,7 +697,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                             ? placeholderWhenFull
                                             : placeholder
                                     }
-                                    value={inputValue}
+                                    value={mainInputValue}
                                     onChange={handleInputChange}
                                     onKeyDown={handleKeyDown}
                                     onFocus={handleInputFocus}
@@ -662,7 +758,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                     {/* <CommandInput
                     placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
                     ref={inputRef}
-                    value={inputValue}
+                    value={mainInputValue}
                     disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
                     onChangeCapture={handleInputChange}
                     onKeyDown={handleKeyDown}
@@ -685,14 +781,14 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                                 ? placeholderWhenFull
                                                 : placeholder
                                         }
-                                        value={inputValue}
+                                        value={mainInputValue}
                                         onChange={handleInputChange}
                                         onKeyDown={handleKeyDown}
                                         onFocus={handleInputFocus}
                                         onBlur={handleInputBlur}
                                         {...inputProps}
                                         className={cn(
-                                            "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                            "border-0 px-2 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                             // className,
                                             styleClasses?.input
                                         )}
@@ -741,7 +837,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                 {/* <CommandInput
                   placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
                   ref={inputRef}
-                  value={inputValue}
+                  value={mainInputValue}
                   disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
                   onChangeCapture={handleInputChange}
                   onKeyDown={handleKeyDown}
@@ -763,14 +859,14 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                             ? placeholderWhenFull
                                             : placeholder
                                     }
-                                    value={inputValue}
+                                    value={mainInputValue}
                                     onChange={handleInputChange}
                                     onKeyDown={handleKeyDown}
                                     onFocus={handleInputFocus}
                                     onBlur={handleInputBlur}
                                     {...inputProps}
                                     className={cn(
-                                        "border-0 px-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
+                                        "border-0 px-2 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit shadow-none inset-shadow-none",
                                         // className,
                                         styleClasses?.input
                                     )}
@@ -806,7 +902,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                         ? placeholderWhenFull
                                         : placeholder
                                 }
-                                value={inputValue}
+                                value={mainInputValue}
                                 onChange={handleInputChange}
                                 onKeyDown={handleKeyDown}
                                 onFocus={handleInputFocus}
@@ -866,7 +962,7 @@ export function TagInput({ ref, ...props }: TagInputProps) {
                                         ? placeholderWhenFull
                                         : placeholder
                                 }
-                                value={inputValue}
+                                value={mainInputValue}
                                 onChange={handleInputChange}
                                 onKeyDown={handleKeyDown}
                                 onFocus={handleInputFocus}