fix(select): ajuste busca externa

bearkfear · Oct 17, 2024 · dd99e00 · dd99e00
1 parent dd5c2ea
commit dd99e00
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@continha/ui",
-	"version": "1.14.17",
+	"version": "1.14.18",
 	"private": false,
 	"main": "dist/index.js",
 	"module": "dist/esm/index.js",

diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
@@ -25,13 +25,8 @@ Root.displayName = CommandPrimitive.displayName;
 
 const Input = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.Input>,
-	Omit<
-		React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,
-		"onSearch"
-	> & {
-		onSearch?: (newvalue: string) => void;
-	}
->(({ onSearch, className, ...props }, ref) => (
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
 	<div
 		className="flex items-center border-b border-gray-6 dark:border-graydark-6 px-3"
 		cmdk-input-wrapper=""
@@ -43,10 +38,6 @@ const Input = React.forwardRef<
 				"flex h-8 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-10 dark:placeholder:text-graydark-10 disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
-			onValueChange={(search) => {
-				props.onValueChange?.(search);
-				onSearch?.(search);
-			}}
 			{...props}
 		/>
 	</div>

diff --git a/packages/ui/src/components/ui/form/selector/content.tsx b/packages/ui/src/components/ui/form/selector/content.tsx
@@ -1,8 +1,10 @@
 "use client";
+import { Search } from "lucide-react";
 import { cn } from "../../../../lib/utils";
 import { Command } from "../../command";
 import { PageLoader } from "../../page-loader";
 import { Popover } from "../../popover";
+import { Input } from "../input";
 import type { SelectorCommonProps, SelectorMessages, TOption } from "./model";
 
 type SelectorContentProps<Option> = {
@@ -32,14 +34,24 @@ export function SelectorContent<Option extends TOption>(
 			align="start"
 		>
 			<Command.Root>
-				{props.searchable && (
+				{props.searchable && props.onSearch === undefined && (
 					<Command.Input
 						className="text-xs"
 						placeholder={props.message.searchPlaceholder}
-						onSearch={props.onSearch}
 					/>
 				)}
 
+				{props.onSearch !== undefined && (
+					<div className="flex items-center border-b border-gray-6 dark:border-graydark-6 px-3">
+						<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+						<input
+							className="text-xs flex h-8 w-full rounded-md bg-transparent py-3 outline-none placeholder:text-gray-10 dark:placeholder:text-graydark-10 disabled:cursor-not-allowed disabled:opacity-50"
+							placeholder={props.message.searchPlaceholder}
+							onChange={(event) => props.onSearch?.(event.target.value)}
+						/>
+					</div>
+				)}
+
 				{props.loadingOptions && <PageLoader />}
 
 				{!props.loadingOptions && (