feat(components): changed SearchInput props to allow uncontrolled state

GitOrigin-RevId: 0576ef15a48419f765f39040f1eb043148752fb6

platform/wab/src/wab/client/components/sidebar-tabs/ProjectPanel/SearchInput.tsx

@@ -5,6 +5,7 @@ import {
   PlasmicSearchInput,
 } from "@/wab/client/plasmic/project_panel/PlasmicSearchInput";
 import * as React from "react";
+import { mergeProps } from "react-aria";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can
@@ -19,9 +20,15 @@ import * as React from "react";
 //
 // You can also stop extending from DefaultSearchInputProps altogether and have
 // total control over the props for your component.
-type SearchInputProps = DefaultSearchInputProps;
+interface SearchInputProps extends DefaultSearchInputProps {
+  searchInput: React.InputHTMLAttributes<HTMLInputElement>;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onClear?: () => void;
+}
 
 function SearchInput(props: SearchInputProps) {
+  const { onClear, onChange, ...rest } = props;
+  const [value, setValue] = React.useState("");
   // Use PlasmicSearchInput to render this component as it was
   // designed in Plasmic, by activating the appropriate variants,
   // attaching the appropriate event handlers, etc.  You
@@ -36,7 +43,25 @@ function SearchInput(props: SearchInputProps) {
   //
   // By default, we are just piping all SearchInputProps here, but feel free
   // to do whatever works for you.
-  return <PlasmicSearchInput {...props} />;
+  return (
+    <PlasmicSearchInput
+      {...rest}
+      searchInput={mergeProps(props.searchInput, {
+        value,
+        onChange: (e) => {
+          setValue(e.target.value);
+          onChange?.(e);
+        },
+      })}
+      clearFieldIcon={{
+        style: { display: value ? "block" : "none" },
+        onClick: () => {
+          setValue("");
+          onClear?.();
+        },
+      }}
+    />
+  );
 }
 
 export default SearchInput;