Create navigation search component

4 files changed, 19 insertions, 15 deletions

diff --git a/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx b/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
index 725fbaee..2d9dcb3d 100644
--- a/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
+++ b/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
@@ -39,10 +39,20 @@ const highlightMatchedPhrases = (records: OptionWithSearchResult[]): OptionWithH
 }
 
 export class DokkaFuzzyFilterComponent extends Select {
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState)
+        if(this.props.filter && this.state.filterValue != this.props.filter.value){
+            this.setState({
+                filterValue: this.props.filter.value,
+            })
+        }
+    }
+    
     getListItems(rawFilterString: string, _: Option[]) {
+        const filterPhrase = (rawFilterString ? rawFilterString : '').trim()
         const matchedRecords = this.props.data
             .map((record: Option) => {
-                const bySearchKey = fuzzyHighlight(rawFilterString.trim(), record.searchKey, false)
+                const bySearchKey = fuzzyHighlight(filterPhrase, record.searchKey, false)
                 if(bySearchKey.matched){
                     return {
                         ...bySearchKey,
@@ -51,13 +61,15 @@ export class DokkaFuzzyFilterComponent extends Select {
                     }
                 }
                 return {
-                    ...fuzzyHighlight(rawFilterString.trim(), record.name, false),
+                    ...fuzzyHighlight(filterPhrase, record.name, false),
                     ...record,
                     rank: SearchRank.NameMatch
                 }
             })
             .filter((record: OptionWithSearchResult) => record.matched)
 
-        return highlightMatchedPhrases(orderRecords(matchedRecords, rawFilterString))
+        this.props.onFilter(filterPhrase, matchedRecords)
+
+        return highlightMatchedPhrases(orderRecords(matchedRecords, filterPhrase))
     }
 }
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 1068fe7a..e708ef84 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -14,20 +14,12 @@
   min-width: calc(100% - 360px) !important;
 }
 
-.indented {
-  text-indent: 10px;
-}
-
-.disabled {
-  color: gray;
-}
-
 .template-wrapper {
+  height: 32px;
   display: grid;
   grid-template-columns: auto auto;
-
-  span.phraseHighlight {
-    font-weight: bold;
+  span {
+    line-height: 32px;  
   }
 }
 
diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx
index c7976edb..ef26c662 100644
--- a/plugins/base/frontend/src/main/components/search/search.tsx
+++ b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -20,6 +20,7 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
         <div className="search-container">
             <div className="search">
                 <DokkaFuzzyFilterComponent
+                    id="pages-search"
                     selectedLabel="Search"
                     label="Please type page name"
                     filter={true}
diff --git a/plugins/base/frontend/src/main/components/search/types.ts b/plugins/base/frontend/src/main/components/search/types.ts
index 922935bd..11e2edf8 100644
--- a/plugins/base/frontend/src/main/components/search/types.ts
+++ b/plugins/base/frontend/src/main/components/search/types.ts
@@ -6,7 +6,6 @@ export type Page = {
     location: string;
     searchKey: string;
     description: string;
-    disabled: boolean;
 }
 
 export type Option = Page & {