move registerSearchInputElement into search input props

Author: lukasbach

packages/core/src/features/search/feature.ts

@@ -56,10 +56,12 @@ export const searchFeature: FeatureImplementation = {
     getSearchInputElement: ({ tree }) =>
       tree.getDataRef<SearchFeatureDataRef>().current.searchInput ?? null,
 
+    // TODO memoize with propMemoizationFeature
     getSearchInputElementProps: ({ tree }) => ({
       value: tree.getSearchValue(),
       onChange: (e: any) => tree.setSearch(e.target.value),
       onBlur: () => tree.closeSearch(),
+      ref: tree.registerSearchInputElement,
     }),
 
     getSearchMatchingItems: memo(

packages/sb-react/src/search/async.stories.tsx

@@ -55,16 +55,11 @@ export const AsyncSearchTree = () => {
         <button onClick={() => tree.openSearch()}>Open Search</button> or press
         any letter keys while focusing the tree to search.
       </p>
-      {tree.isSearchOpen() && (
-        <p>Navigate between search results with ArrowUp and ArrowDown.</p>
-      )}
       {tree.isSearchOpen() && (
         <>
-          <input
-            {...tree.getSearchInputElementProps()}
-            ref={tree.registerSearchInputElement}
-          />{" "}
-          ({tree.getSearchMatchingItems().length} matches)
+          <p>Navigate between search results with ArrowUp and ArrowDown.</p>
+          <input {...tree.getSearchInputElementProps()} /> (
+          {tree.getSearchMatchingItems().length} matches)
         </>
       )}{" "}
       <div {...tree.getContainerProps()} className="tree">

packages/sb-react/src/search/basic.stories.tsx

@@ -50,16 +50,11 @@ export const Basic = () => {
         <button onClick={() => tree.openSearch()}>Open Search</button> or press
         any letter keys while focusing the tree to search.
       </p>
-      {tree.isSearchOpen() && (
-        <p>Navigate between search results with ArrowUp and ArrowDown.</p>
-      )}
       {tree.isSearchOpen() && (
         <>
-          <input
-            {...tree.getSearchInputElementProps()}
-            ref={tree.registerSearchInputElement}
-          />{" "}
-          ({tree.getSearchMatchingItems().length} matches)
+          <p>Navigate between search results with ArrowUp and ArrowDown.</p>
+          <input {...tree.getSearchInputElementProps()} /> (
+          {tree.getSearchMatchingItems().length} matches)
         </>
       )}{" "}
       <div {...tree.getContainerProps()} className="tree">

packages/sb-react/src/search/custom-matcher.stories.tsx

@@ -72,16 +72,11 @@ export const CustomMatcher = () => {
         <button onClick={() => tree.openSearch()}>Open Search</button> or press
         any letter keys while focusing the tree to search.
       </p>
-      {tree.isSearchOpen() && (
-        <p>Navigate between search results with ArrowUp and ArrowDown.</p>
-      )}
       {tree.isSearchOpen() && (
         <>
-          <input
-            {...tree.getSearchInputElementProps()}
-            ref={tree.registerSearchInputElement}
-          />{" "}
-          ({tree.getSearchMatchingItems().length} matches)
+          <p>Navigate between search results with ArrowUp and ArrowDown.</p>
+          <input {...tree.getSearchInputElementProps()} /> (
+          {tree.getSearchMatchingItems().length} matches)
         </>
       )}
       <div {...tree.getContainerProps()} className="tree">

packages/sb-react/src/search/scroll-behaviour.stories.tsx

@@ -67,16 +67,11 @@ export const ScrollBehaviour = () => {
         <button onClick={() => tree.openSearch()}>Open Search</button> or press
         any letter keys while focusing the tree to search.
       </p>
-      {tree.isSearchOpen() && (
-        <p>Navigate between search results with ArrowUp and ArrowDown.</p>
-      )}
       {tree.isSearchOpen() && (
         <>
-          <input
-            {...tree.getSearchInputElementProps()}
-            ref={tree.registerSearchInputElement}
-          />{" "}
-          ({tree.getSearchMatchingItems().length} matches)
+          <p>Navigate between search results with ArrowUp and ArrowDown.</p>
+          <input {...tree.getSearchInputElementProps()} /> (
+          {tree.getSearchMatchingItems().length} matches)
         </>
       )}{" "}
       <div {...tree.getContainerProps()} className="tree">