v5.2.0: Migrate to DocSearch 3 (#36176)

* Migrate to DocSearch v3

Fixes #33338

* initialize `siteDocsVersion` const after the proper check

* Update site/layouts/partials/stylesheet.html

Co-authored-by: GeoSot <geo.sotis@gmail.com>

* Update header.html

* code review changes

* Update search.js

* Fix contrast issue, tweak some styles

* Fix some navbar changes

* temporary safari fix for docsearch3

Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

4 files changed, 118 insertions, 69 deletions

diff --git a/site/assets/js/search.js b/site/assets/js/search.js
index 6c90a20872..9bad2749f5 100644
--- a/site/assets/js/search.js
+++ b/site/assets/js/search.js
@@ -5,51 +5,40 @@
 (() => {
   'use strict'
 
-  const inputElement = document.getElementById('search-input')
+  const searchElement = document.getElementById('docsearch')
 
-  if (!window.docsearch || !inputElement) {
+  if (!window.docsearch || !searchElement) {
     return
   }
 
-  const siteDocsVersion = inputElement.getAttribute('data-bd-docs-version')
-
-  document.addEventListener('keydown', event => {
-    if ((((event.ctrlKey || event.metaKey) && event.key === 'k')) || (event.ctrlKey && event.key === '/')) {
-      event.preventDefault()
-      inputElement.focus()
-    }
-  })
-
-  if (navigator.platform.includes('Win') || navigator.platform.includes('Linux')) {
-    const searchShortcut = document.querySelector('.bd-search')
-    searchShortcut.setAttribute('data-shortcut', '⌃K')
-  }
+  const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')
 
   window.docsearch({
-    apiKey: '5990ad008512000bba2cf951ccf0332f',
+    apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
     indexName: 'bootstrap',
-    inputSelector: '#search-input',
-    algoliaOptions: {
+    appId: 'AK7KMZKZHQ',
+    container: searchElement,
+    searchParameters: {
       facetFilters: [`version:${siteDocsVersion}`]
     },
-    transformData(hits) {
-      return hits.map(hit => {
+    transformItems(items) {
+      return items.map(item => {
         const liveUrl = 'https://getbootstrap.com/'
 
-        hit.url = window.location.origin.startsWith(liveUrl) ?
+        item.url = window.location.origin.startsWith(liveUrl) ?
           // On production, return the result as is
-          hit.url :
-          // On development or Netlify, replace `hit.url` with a trailing slash,
+          item.url :
+          // On development or Netlify, replace `item.url` with a trailing slash,
           // so that the result link is relative to the server root
-          hit.url.replace(liveUrl, '/')
+          item.url.replace(liveUrl, '/')
 
         // Prevent jumping to first header
-        if (hit.anchor === 'content') {
-          hit.url = hit.url.replace(/#content$/, '')
-          hit.anchor = null
+        if (item.anchor === 'content') {
+          item.url = item.url.replace(/#content$/, '')
+          item.anchor = null
         }
 
-        return hit
+        return item
       })
     },
     // Set debug to `true` if you want to inspect the dropdown
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 57e3f47b7f..4805a3c471 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -63,7 +63,7 @@
   }
 
   .dropdown-toggle {
-    &:focus {
+    &:focus:not(:focus-visible) {
       outline: 0;
     }
   }
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index 1825337a00..9739d7a3a2 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -1,25 +1,9 @@
+// stylelint-disable selector-class-pattern
+
 .bd-search {
   position: relative;
   width: 100%;
 
-  &::after {
-    position: absolute;
-    top: .4rem;
-    right: .4rem;
-    bottom: .4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-right: .3125rem;
-    padding-left: .3125rem;
-    @include font-size(.75rem);
-    color: rgba($white, .65);
-    // content: "⌘K";
-    content: attr(data-shortcut);
-    background-color: rgba($white, .1);
-    @include border-radius(.125rem);
-  }
-
   @include media-breakpoint-up(lg) {
     position: absolute;
     top: .75rem;
@@ -33,30 +17,105 @@
     margin-left: -140px;
   }
 
-  .form-control {
-    padding-right: 2.75rem;
-    color: $white;
-    background-color: rgba($black, .1);
-    border-color: rgba($white, .4);
-    transition-property: background-color, border-color, box-shadow;
+}
 
-    &::placeholder {
-      color: rgba($white, .65);
-    }
+.DocSearch-Container {
+  --docsearch-muted-color: #{$text-muted};
+  --docsearch-hit-shadow: none;
 
-    &::-webkit-search-cancel-button {
-      appearance: none;
-      width: 1rem;
-      height: 1rem;
-      cursor: pointer;
-      background: escape-svg($search-clear-icon) no-repeat 0 0;
-      background-size: 100% 100%;
-    }
+  z-index: 1030;
 
-    &:focus {
-      background-color: rgba($black, .25);
-      border-color: rgba($bd-accent, 1);
-      box-shadow: 0 0 0 .25rem rgba($bd-accent, .4);
+  @include media-breakpoint-up(lg) {
+    padding-top: 4rem;
+  }
+}
+
+.DocSearch-Button {
+  --docsearch-searchbox-background: #{rgba($black, .1)};
+  --docsearch-searchbox-color: #{$white};
+  --docsearch-searchbox-focus-background: #{rgba($black, .25)};
+  --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
+  --docsearch-text-color: #{$white};
+  --docsearch-muted-color: #{rgba($white, .65)};
+
+  width: 100%;
+  margin: 0;
+  border: 1px solid rgba($white, .4);
+  @include border-radius(.375rem);
+
+  .DocSearch-Search-Icon {
+    opacity: .65;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    border-color: rgba($bd-accent, 1);
+
+    .DocSearch-Search-Icon {
+      opacity: 1;
     }
   }
 }
+
+.DocSearch-Button-Keys {
+  min-width: 0;
+  padding-right: .25rem;
+  padding-left: .25rem;
+  background: rgba($black, .25);
+  @include border-radius(.25rem);
+}
+
+.DocSearch-Button-Key {
+  top: 0;
+  width: auto;
+  height: 1.25rem;
+  padding-right: .125rem;
+  padding-left: .125rem;
+  margin-right: 0;
+  font-size: .875rem;
+  background: none;
+  box-shadow: none;
+}
+
+.DocSearch-Commands-Key {
+  padding-left: 1px;
+  font-size: .875rem;
+  background-color: rgba($black, .1);
+  background-image: none;
+  box-shadow: none;
+}
+
+.DocSearch-Form {
+  @include border-radius(var(--bs-border-radius));
+}
+
+.DocSearch-Hits {
+  mark {
+    padding: 0;
+  }
+}
+
+.DocSearch-Hit {
+  padding-bottom: 0;
+  @include border-radius(0);
+
+  a {
+    @include border-radius(0);
+    border: solid var(--bs-border-color);
+    border-width: 0 1px 1px;
+  }
+
+  &:first-child a {
+    @include border-top-radius(var(--bs-border-radius));
+    border-top-width: 1px;
+  }
+  &:last-child a {
+    @include border-bottom-radius(var(--bs-border-radius));
+  }
+}
+
+.DocSearch-Hit-icon {
+  display: flex;
+  align-items: center;
+}
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 8f74f94d0b..b460392d0f 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -6,7 +6,6 @@ $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
 $bd-accent:       #ffe484;
 $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-$search-clear-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='rgba(255,255,255,.75)' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/></svg>");
 
 $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;
@@ -19,4 +18,6 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-accent-rgb: #{to-rgb($bd-accent)};
   --bd-pink-rgb: #{to-rgb($pink-500)};
   --bd-teal-rgb: #{to-rgb($teal-500)};
+  --docsearch-primary-color: var(--bd-violet);
+  --docsearch-logo-color: var(--bd-violet);
 }