fix: autocomplete to alpha.44 (#227)

- upgrade to autocomplete alpha 44 and fix CSS color issues
- Expose detachedMediaQuery option
- Import autocomplete-theme-classic

frontend/README.md

@@ -41,8 +41,9 @@ algoliasearchNetlify({
   analytics: true,                              // Enable search analytics
   hitsPerPage: 5,                               // Amount of results to display
   poweredBy: true,                              // Controls displaying the logo (mandatory with our FREE plan)
-  placeholder: 'Search...';                     // Input placeholder
-  openOnFocus: true;                            // Open search panel with default search, when focusing input
+  placeholder: 'Search...',                     // Input placeholder
+  openOnFocus: true,                            // Open search panel with default search, when focusing input
+  detachedMediaQuery: '(max-width: 500px)',     // Media query to determine when the search popup should open in detached mode (full screen, modal experience). Set to 'none' to never go in detached mode.
 
   // Theme
   theme: {

frontend/package.json

@@ -18,8 +18,9 @@
     "postinstall": "[ -d dist/ ] || npm run build"
   },
   "devDependencies": {
-    "@algolia/autocomplete-js": "1.0.0-alpha.41",
-    "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.43",
+    "@algolia/autocomplete-js": "1.0.0-alpha.44",
+    "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.44",
+    "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
     "@algolia/transporter": "4.8.5",
     "@babel/core": "7.12.10",
     "@babel/preset-env": "7.12.11",

frontend/src/AutocompleteWrapper.ts

@@ -1,4 +1,5 @@
 import type { SearchClient } from 'algoliasearch/lite';
+import type { HighlightedHit } from '@algolia/autocomplete-preset-algolia';
 
 import algoliasearch from 'algoliasearch/lite';
 import type { Hit } from '@algolia/client-search';
@@ -41,13 +42,22 @@ class AutocompleteWrapper {
       return;
     }
 
+    let detachedMediaQuery = undefined;
+    if (this.options.detached) {
+      if (this.options.detached === true) {
+        detachedMediaQuery = '';
+      } else {
+        detachedMediaQuery = this.options.detached.mediaQuery;
+      }
+    }
     const instance = autocomplete<AlgoliaRecord>({
       container: $input,
       autoFocus: false,
       placeholder: this.options.placeholder,
       debug: this.options.debug,
       openOnFocus: this.options.openOnFocus,
       panelPlacement: 'input-wrapper-width',
+      detachedMediaQuery,
       getSources: () => {
         return [this.getSources()];
       },
@@ -75,7 +85,7 @@ class AutocompleteWrapper {
     return client;
   }
 
-  private getSources(): AutocompleteSource<AlgoliaRecord> {
+  private getSources(): AutocompleteSource<HighlightedHit<AlgoliaRecord>> {
     const poweredBy = this.options.poweredBy;
     return {
       sourceId: 'algoliaHits',
@@ -128,7 +138,7 @@ class AutocompleteWrapper {
 
     const theme = this.options.theme;
     this.$themeNode = addCss(
-      `.aa-Autocomplete, .aa-Panel {
+      `.aa-Autocomplete, .aa-Panel, .aa-DetachedContainer {
       ${theme.mark && `--color-mark: ${theme.mark};`}
       ${theme.mark && `--color-background: ${theme.background};`}
       ${theme.mark && `--color-selected: ${theme.selected};`}