fix(docsearch): hoist transformItems default value

This fixes a bug where the `transformItems` function reference changes and the `autocomplete` instance is recreated every time.

packages/docsearch-react/src/DocSearchModal.tsx

@@ -27,14 +27,18 @@ interface DocSearchModalProps extends DocSearchProps {
   onClose?(): void;
 }
 
+function defaultTransformItems(x: DocSearchHit[]) {
+  return x;
+}
+
 export function DocSearchModal({
   appId = 'BH4D9OD16A',
   apiKey,
   indexName,
   placeholder = 'Search docs',
   searchParameters,
   onClose = noop,
-  transformItems = (x) => x,
+  transformItems = defaultTransformItems,
   hitComponent = Hit,
   resultsFooterComponent = () => null,
   navigator,

packages/website/src/theme/SearchBar/index.js

@@ -22,6 +22,21 @@ function ResultsFooter({ state }) {
   );
 }
 
+function transformItems(items) {
+  return items.map((item) => {
+    // We transform the absolute URL into a relative URL.
+    // Alternatively, we can use `new URL(item.url)` but it's not
+    // supported in IE.
+    const a = document.createElement('a');
+    a.href = item.url;
+
+    return {
+      ...item,
+      url: `${a.pathname}${a.hash}`,
+    };
+  });
+}
+
 function DocSearch({ indexName, appId, apiKey, searchParameters }) {
   const history = useHistory();
   const [isOpen, setIsOpen] = useState(false);
@@ -85,20 +100,7 @@ function DocSearch({ indexName, appId, apiKey, searchParameters }) {
                 history.push(suggestionUrl);
               },
             }}
-            transformItems={(items) => {
-              return items.map((item) => {
-                // We transform the absolute URL into a relative URL.
-                // Alternatively, we can use `new URL(item.url)` but it's not
-                // supported in IE.
-                const a = document.createElement('a');
-                a.href = item.url;
-
-                return {
-                  ...item,
-                  url: `${a.pathname}${a.hash}`,
-                };
-              });
-            }}
+            transformItems={transformItems}
             hitComponent={Hit}
             resultsFooterComponent={ResultsFooter}
           />,