Updates

components/elements/Search.tsx

@@ -1,9 +1,13 @@
 import { twMerge } from "tailwind-merge";
-import Input, { InputProps } from "../form/Input";
+import Input from "../form/Input";
 import Button from "../layout/Button";
 import Row from "../layout/Row";
 import { Search as SearchIcon } from "lucide-react";
-import React, { DetailedHTMLProps } from "react";
+import React, {
+    type ComponentProps,
+    type DetailedHTMLProps,
+    type ReactNode,
+} from "react";
 
 let timeout: any;
 
@@ -14,14 +18,13 @@ export type SearchProps<KeyType extends string> = DetailedHTMLProps<
     dispatch?: (value?: string) => void;
     changeHandler?: (value?: string) => void;
     delay?: number;
-    inputProps?: InputProps<KeyType>;
-    buttonProps?: DetailedHTMLProps<
-        React.ButtonHTMLAttributes<HTMLButtonElement>,
-        HTMLButtonElement
-    >;
+    inputProps?: ComponentProps<typeof Input>;
+    buttonProps?: Omit<ComponentProps<typeof Button>, "title">;
     loading?: boolean;
     placeholder?: string;
     componentRef?: React.RefObject<HTMLInputElement | null>;
+    beforeSearchIconComponent?: ReactNode;
+    no_search_button?: boolean;
 };
 
 /**
@@ -39,10 +42,12 @@ export default function Search<KeyType extends string>({
     loading,
     placeholder,
     componentRef,
+    beforeSearchIconComponent,
+    no_search_button,
     ...props
 }: SearchProps<KeyType>) {
     const [input, setInput] = React.useState(
-        props.defaultValue?.toString() || ""
+        props.defaultValue?.toString() || "",
     );
 
     React.useEffect(() => {
@@ -68,7 +73,7 @@ export default function Search<KeyType extends string>({
             className={twMerge(
                 "relative xl:flex-nowrap items-stretch gap-0 flex-nowrap",
                 "twui-search-wrapper",
-                props?.className
+                props?.className,
             )}
         >
             <Input
@@ -76,39 +81,45 @@ export default function Search<KeyType extends string>({
                 placeholder={placeholder || "Search"}
                 {...inputProps}
                 value={input}
-                onChange={(e) => setInput(e.target.value)}
+                onChange={(e) => {
+                    setInput(e.target.value);
+                    inputProps?.onChange?.(e as any);
+                }}
                 className={twMerge(
                     "rounded-r-none!",
                     "twui-search-input",
-                    inputProps?.className
+                    inputProps?.className,
                 )}
                 wrapperProps={{
                     className: "rounded-r-none!",
                 }}
                 componentRef={inputRef}
             />
-            <Button
-                loadingProps={{ size: "small" }}
-                {...buttonProps}
-                variant="outlined"
-                color="gray"
-                className={twMerge(
-                    "rounded-l-none! ml-[1px]",
-                    "twui-search-button",
-                    buttonProps?.className
-                )}
-                onClick={() => {
-                    dispatch?.(input);
-                    changeHandler?.(input);
-                }}
-                title="Search Button"
-                loading={loading}
-            >
-                <SearchIcon
-                    className="text-slate-800 dark:text-white"
-                    size={20}
-                />
-            </Button>
+            {beforeSearchIconComponent}
+            {no_search_button ? null : (
+                <Button
+                    loadingProps={{ size: "small" }}
+                    {...buttonProps}
+                    variant="outlined"
+                    color="gray"
+                    className={twMerge(
+                        "rounded-l-none! ml-[1px]",
+                        "twui-search-button",
+                        buttonProps?.className,
+                    )}
+                    onClick={() => {
+                        dispatch?.(input);
+                        changeHandler?.(input);
+                    }}
+                    title="Search Button"
+                    loading={loading}
+                >
+                    <SearchIcon
+                        className="text-slate-800 dark:text-white"
+                        size={15}
+                    />
+                </Button>
+            )}
         </Row>
     );
 }