added support of dynamic searchKey in search widget

.changeset/fuzzy-houses-notice.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Added support for dynamic searchKey in search widget

apps/kitchen-sink/src/ensemble/screens/home.yaml

@@ -22,6 +22,8 @@ View:
   header:
     title:
       Header:
+        inputs:
+          searchKey: id
 
   styles:
     className: topView

apps/kitchen-sink/src/ensemble/widgets/Header.yaml

@@ -1,8 +1,9 @@
 Widget:
   inputs:
     - message
+    - searchKey
   onLoad:
-    executeCode: 
+    executeCode:
       body: |
         console.log("hello from header", message);
       onComplete:
@@ -42,7 +43,7 @@ Widget:
               template:
                 Text:
                   text: ${user.firstName + ' ' + user.lastName}
-            searchKey: id
+            searchKey: ${searchKey}
             onSearch:
               invokeAPI:
                 name: findUsers

packages/runtime/src/widgets/Search.tsx

@@ -65,7 +65,7 @@ export const Search: React.FC<SearchProps> = ({
   });
 
   const { id, rootRef, values } = useRegisterBindings(
-    { styles, value, ...rest, widgetName, initialValue },
+    { styles, value, ...rest, widgetName, initialValue, searchKey },
     rest.id,
     {
       setValue,
@@ -81,12 +81,12 @@ export const Search: React.FC<SearchProps> = ({
     (option: unknown): string | number => {
       return get(
         option,
-        searchKey
-          ? [itemTemplate?.name ?? "", searchKey]
+        values?.searchKey
+          ? [itemTemplate?.name ?? "", values.searchKey]
           : [(itemTemplate?.value || itemTemplate?.name) ?? ""],
       ) as string | number;
     },
-    [itemTemplate?.name, itemTemplate?.value, searchKey],
+    [itemTemplate?.name, itemTemplate?.value, values?.searchKey],
   );
 
   const renderOptions = useMemo(() => {

packages/runtime/src/widgets/__tests__/Search.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { BrowserRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+import { EnsembleScreen } from "../../runtime/screen";
+import "../index";
+
+describe("Search Widget", () => {
+  test("searchKey test", async () => {
+    render(
+      <EnsembleScreen
+        screen={{
+          name: "test_search",
+          id: "test_search",
+          body: {
+            name: "Search",
+            properties: {
+              id: "searchTest",
+              placeholder: "Enter Search",
+              searchKey: `\${ensemble.storage.get('searchKey')}`,
+              "item-template": {
+                data: [
+                  { name: "Apple" },
+                  { name: "Pineapple" },
+                  { name: "Banana" },
+                ],
+                name: "fruit",
+                template: {
+                  name: "Text",
+                  properties: {
+                    text: `\${fruit.name}`,
+                  },
+                },
+              },
+            },
+          },
+          onLoad: {
+            executeCode: "ensemble.storage.set('searchKey', 'name')",
+          },
+        }}
+      />,
+      { wrapper: BrowserRouter },
+    );
+
+    await waitFor(() => {
+      userEvent.type(screen.getByRole("combobox"), "app");
+    });
+
+    await waitFor(() => {
+      const optionElements = screen.getAllByRole("option");
+      optionElements.forEach((option) => {
+        expect(option).toBeVisible();
+      });
+    });
+  });
+});