next-helios-fe 1.10.14 → 1.10.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.10.14",
+  "version": "1.10.15",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/input/search.tsx

@@ -1,5 +1,6 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { Icon } from "@iconify/react";
 
 export interface SearchProps
@@ -7,10 +8,21 @@ export interface SearchProps
   options?: {
     width?: "full" | "fit";
     height?: "short" | "medium" | "high";
+    delayed?: boolean;
   };
+  value?: string;
+  onChange?: (e: { target: { value: string } }) => void;
 }
 
-export const Search: React.FC<SearchProps> = ({ options, ...rest }) => {
+export const Search: React.FC<SearchProps> = ({
+  options,
+  value,
+  onChange,
+  ...rest
+}) => {
+  const [tempValue, setTempValue] = useState<string>(
+    value ?? (rest.defaultValue as string) ?? ""
+  );
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -19,6 +31,13 @@ export const Search: React.FC<SearchProps> = ({ options, ...rest }) => {
       ? "py-2"
       : "py-1.5";
 
+  const handleDelayedValueUpdate = useDebouncedCallback((value) => {
+    onChange &&
+      onChange({
+        target: { value } as HTMLInputElement,
+      } as React.ChangeEvent<HTMLInputElement>);
+  }, 1250);
+
   return (
     <label className={`relative flex items-center ${width}`}>
       <Icon
@@ -28,16 +47,30 @@ export const Search: React.FC<SearchProps> = ({ options, ...rest }) => {
       <input
         type="search"
         className={`w-full px-9 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
+        value={tempValue}
+        onChange={(e) => {
+          setTempValue(e.target.value);
+
+          if (options?.delayed) {
+            handleDelayedValueUpdate(e.target.value);
+          } else {
+            onChange &&
+              onChange({
+                target: { value: e.target.value } as HTMLInputElement,
+              } as React.ChangeEvent<HTMLInputElement>);
+          }
+        }}
         {...rest}
       />
-      {rest.value && (
+      {value && (
         <div
           className={
             "absolute right-4 p-1 rounded-full text-xl text-disabled cursor-pointer hover:bg-secondary-light"
           }
           onClick={() => {
-            rest.onChange &&
-              rest.onChange({
+            setTempValue("");
+            onChange &&
+              onChange({
                 target: { value: "" } as HTMLInputElement,
               } as React.ChangeEvent<HTMLInputElement>);
           }}