Add keyboard nav to search; improve search productArea suggestions

web/app/components/floating-u-i/index.ts

@@ -6,6 +6,7 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
 interface FloatingUIComponentSignature {
+  Element: HTMLDivElement;
   Args: {
     renderOut?: boolean;
     placement?: Placement;

web/app/components/header/nav.hbs

@@ -33,7 +33,7 @@
       </LinkTo>
     </div>
 
-    <Header::Search data-test-nav-search-bar class="search-bar" />
+    <Header::Search class="global-search" />
 
     <div class="user-buttons">
       <Hds::Button

web/app/components/header/search.hbs

@@ -1,91 +1,123 @@
-{{! @glint-nocheck: not typesafe yet }}
-{{on-document "keydown" this.onKeydown}}
+{{on-document "keydown" this.maybeFocusInput}}
+
 <div ...attributes>
-  <form class="w-full" {{on "submit" this.goToResults}}>
-    <BasicDropdown @renderInPlace={{true}} @horizontalPosition="right" as |dd|>
-      <Hds::Form::TextInput::Base
-        @type="search"
-        @value={{this.query}}
-        name="query"
-        size="25"
-        placeholder="Find a document..."
-        aria-label="Find a document..."
-        data-ebd-id="{{dd.uniqueId}}-trigger"
-        {{on "focusin" dd.actions.open}}
-        {{on "mousedown" (fn this.maybeCloseDropdown dd)}}
-        {{on "input" (perform this.search dd)}}
-        {{did-insert this.registerInput}}
-      />
-      {{#unless this.query}}
-        <span
-          class="absolute right-[13px] top-1/2 -translate-y-1/2 text-color-foreground-faint"
-        >
-          ⌘K
-        </span>
-      {{/unless}}
-      {{#if this.query}}
-        <dd.Content class="hds-dropdown__content search-dropdown">
-          {{#if this.bestMatches}}
-            <div
-              class="flex flex-col border-0 border-b hds-border-primary pb-1"
-            >
-              <LinkTo
-                @route="authenticated.results"
-                @query={{hash q=this.query page=1}}
-                class="hds-dropdown-list-item--variant-interactive"
-              >
-                <FlightIcon @name="search" class="mr-1.5" />
-                <span>View all results for "{{this.query}}"</span>
-              </LinkTo>
-            </div>
-            <div
-              class="flex flex-col border-0 border-b hds-border-primary py-1"
-            >
-              {{#let (get (get this.bestMatches 0) "product") as |product|}}
-                <LinkTo
+  <form class="w-full relative" {{on "submit" this.viewAllResults}}>
+    <X::DropdownList
+      @items={{this.itemsToShow}}
+      @offset={{hash mainAxis=0 crossAxis=3}}
+      @placement="bottom-end"
+      class="search-popover
+        {{unless this.bestMatchesHeaderIsShown 'no-best-matches'}}"
+    >
+      <:anchor as |dd|>
+        <Hds::Form::TextInput::Base
+          data-test-global-search-input
+          {{did-insert dd.registerAnchor}}
+          {{did-insert this.registerInput}}
+          {{on "input" (perform this.search dd)}}
+          {{on "mousedown" (fn this.maybeCloseDropdown dd)}}
+          {{on "keydown" (fn this.maybeSubmitForm dd)}}
+          {{on "focusin" (fn this.maybeOpenDropdown dd)}}
+          @type="search"
+          @value={{this.query}}
+          name="query"
+          size="25"
+          placeholder="Find a document..."
+          aria-label="Find a document..."
+          aria-controls={{dd.ariaControls}}
+          aria-expanded={{dd.contentIsShown}}
+          aria-haspopup="listbox"
+        />
+        {{#unless this.query}}
+          <span class="global-search-shortcut-affordance">
+            ⌘K
+          </span>
+        {{/unless}}
+      </:anchor>
+      <:header>
+        <div id="global-search-popover-header">
+          {{! content is placed here by the in-element helper below }}
+        </div>
+        {{#if this.bestMatchesHeaderIsShown}}
+          <div class="global-search-best-matches-header">
+            <h5>Best matches</h5>
+          </div>
+        {{/if}}
+      </:header>
+      <:item as |dd|>
+
+        {{#if dd.attrs.itemShouldRenderOut}}
+          {{!
+            We use this property to catch the "view all results" and "view all [productArea] documents" items and, for semantic purposes, render them outside of the DropdownList's primary `ul/ol` element while still retaining the keyboard navigability provided by the DropdownList component.
+           }}
+          {{#unless this.searchInputIsEmpty}}
+            {{#in-element
+              (html-element "#global-search-popover-header")
+              insertBefore=null
+            }}
+              {{#if (eq dd.value "viewAllResultsObject")}}
+                <dd.LinkTo
+                  {{did-insert this.registerViewAllResultsLink}}
+                  @route="authenticated.results"
+                  @query={{hash q=this.query page=1}}
+                  class="global-search-popover-header-link"
+                >
+                  <FlightIcon @name="search" class="mr-1.5" />
+                  <span>View all results for “{{this.query}}”</span>
+                </dd.LinkTo>
+              {{else if (eq dd.value "productAreaMatch")}}
+                <dd.LinkTo
+                  data-test-product-match-link
                   @route="authenticated.all"
-                  @query={{hash product=(array product)}}
-                  class="hds-dropdown-list-item--variant-interactive"
+                  @query={{hash product=(array dd.attrs.product) page=1}}
+                  class="global-search-popover-header-link border-t border-t-color-border-primary"
                 >
                   <FlightIcon @name="folder" class="mr-1.5" />
-                  <span class="flex items-center">View all
+                  <span class="flex items-center">
+                    View all
                     <Hds::Badge
-                      @text={{product}}
-                      @icon={{get-product-id product}}
-                      class="mx-2"
+                      @text={{dd.attrs.product}}
+                      @icon={{get-product-id dd.attrs.product}}
+                      class="mx-2 mix-blend-multiply"
                     />
                     documents
                   </span>
-                </LinkTo>
-              {{/let}}
-            </div>
-            <div id="bestMatches" class="flex flex-col pt-1">
-              <span
-                class="hds-typography-body-100 hds-font-weight-medium hds-foreground-faint px-3 py-1"
-              >Best matches</span>
-              {{#each this.bestMatches as |match|}}
-                <Doc::Inline
-                  @avatar="{{get match.ownerPhotos 0}}"
-                  @docID="{{match.objectID}}"
-                  @docNumber="{{match.docNumber}}"
-                  @isResult="{true}"
-                  @owner="{{get match.owners 0}}"
-                  @productArea="{{match.product}}"
-                  @snippet="{{match._snippetResult.content.value}}"
-                  @status="{{match.status}}"
-                  @title="{{match.title}}"
+                </dd.LinkTo>
+              {{/if}}
+            {{/in-element}}
+          {{/unless}}
+        {{else}}
+          <dd.LinkTo
+            data-test-search-result
+            @route="authenticated.document"
+            @model={{dd.value}}
+            class="global-search-result"
+          >
+            <Doc::Thumbnail
+              @status={{dd.attrs.status}}
+              @product={{dd.attrs.product}}
+            />
+            <div class="global-search-result-text-content">
+              <h4 class="global-search-result-title">
+                {{dd.attrs.title}}
+              </h4>
+              <Person
+                data-test-search-result-owner
+                @ignoreUnknown={{true}}
+                @imgURL={{get dd.attrs.ownerPhotos 0}}
+                @email={{get dd.attrs.owners 0}}
+              />
+              {{#if dd.attrs._snippetResult.content.value}}
+                <Doc::Snippet
+                  data-test-search-result-snippet
+                  @snippet={{dd.attrs._snippetResult.content.value}}
+                  class="truncate"
                 />
-              {{/each}}
-            </div>
-          {{else}}
-            <div class="flex flex-col border-0 hds-border-primary pb-1">
-              <div class="py-1 px-3">
-                <span class="flex items-center">No results found for "{{this.query}}"</span>
-              </div>
+              {{/if}}
             </div>
-          {{/if}}
-        </dd.Content>
-      {{/if}}
-    </BasicDropdown>
+          </dd.LinkTo>
+        {{/if}}
+      </:item>
+    </X::DropdownList>
   </form>
 </div>