@k-int/stripes-kint-components 5.30.0 → 5.31.0

package/src/artifacts/coverage-jest/Typedown/Typedown.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">4.54% </span>
+                <span class="strong">3.84% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>2/44</span>
+                <span class='fraction'>2/52</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/40</span>
+                <span class='fraction'>0/48</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/14</span>
+                <span class='fraction'>0/16</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">4.76% </span>
+                <span class="strong">4% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>2/42</span>
+                <span class='fraction'>2/50</span>
             </div>
         
             
@@ -359,7 +359,60 @@
 <a name='L294'></a><a href='#L294'>294</a>
 <a name='L295'></a><a href='#L295'>295</a>
 <a name='L296'></a><a href='#L296'>296</a>
-<a name='L297'></a><a href='#L297'>297</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L297'></a><a href='#L297'>297</a>
+<a name='L298'></a><a href='#L298'>298</a>
+<a name='L299'></a><a href='#L299'>299</a>
+<a name='L300'></a><a href='#L300'>300</a>
+<a name='L301'></a><a href='#L301'>301</a>
+<a name='L302'></a><a href='#L302'>302</a>
+<a name='L303'></a><a href='#L303'>303</a>
+<a name='L304'></a><a href='#L304'>304</a>
+<a name='L305'></a><a href='#L305'>305</a>
+<a name='L306'></a><a href='#L306'>306</a>
+<a name='L307'></a><a href='#L307'>307</a>
+<a name='L308'></a><a href='#L308'>308</a>
+<a name='L309'></a><a href='#L309'>309</a>
+<a name='L310'></a><a href='#L310'>310</a>
+<a name='L311'></a><a href='#L311'>311</a>
+<a name='L312'></a><a href='#L312'>312</a>
+<a name='L313'></a><a href='#L313'>313</a>
+<a name='L314'></a><a href='#L314'>314</a>
+<a name='L315'></a><a href='#L315'>315</a>
+<a name='L316'></a><a href='#L316'>316</a>
+<a name='L317'></a><a href='#L317'>317</a>
+<a name='L318'></a><a href='#L318'>318</a>
+<a name='L319'></a><a href='#L319'>319</a>
+<a name='L320'></a><a href='#L320'>320</a>
+<a name='L321'></a><a href='#L321'>321</a>
+<a name='L322'></a><a href='#L322'>322</a>
+<a name='L323'></a><a href='#L323'>323</a>
+<a name='L324'></a><a href='#L324'>324</a>
+<a name='L325'></a><a href='#L325'>325</a>
+<a name='L326'></a><a href='#L326'>326</a>
+<a name='L327'></a><a href='#L327'>327</a>
+<a name='L328'></a><a href='#L328'>328</a>
+<a name='L329'></a><a href='#L329'>329</a>
+<a name='L330'></a><a href='#L330'>330</a>
+<a name='L331'></a><a href='#L331'>331</a>
+<a name='L332'></a><a href='#L332'>332</a>
+<a name='L333'></a><a href='#L333'>333</a>
+<a name='L334'></a><a href='#L334'>334</a>
+<a name='L335'></a><a href='#L335'>335</a>
+<a name='L336'></a><a href='#L336'>336</a>
+<a name='L337'></a><a href='#L337'>337</a>
+<a name='L338'></a><a href='#L338'>338</a>
+<a name='L339'></a><a href='#L339'>339</a>
+<a name='L340'></a><a href='#L340'>340</a>
+<a name='L341'></a><a href='#L341'>341</a>
+<a name='L342'></a><a href='#L342'>342</a>
+<a name='L343'></a><a href='#L343'>343</a>
+<a name='L344'></a><a href='#L344'>344</a>
+<a name='L345'></a><a href='#L345'>345</a>
+<a name='L346'></a><a href='#L346'>346</a>
+<a name='L347'></a><a href='#L347'>347</a>
+<a name='L348'></a><a href='#L348'>348</a>
+<a name='L349'></a><a href='#L349'>349</a>
+<a name='L350'></a><a href='#L350'>350</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -394,6 +447,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -468,6 +525,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -476,6 +534,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -487,10 +553,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -533,8 +596,13 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -565,11 +633,35 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -581,17 +673,22 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -616,6 +713,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -625,6 +725,9 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">23x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -655,7 +758,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useCallback, useEffect, useMemo, useState } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 &nbsp;
@@ -675,6 +781,7 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
   displayClearItem = <span class="branch-0 cbranch-no" title="branch not covered" >true,</span>
   displayValueWhileOpen = <span class="branch-0 cbranch-no" title="branch not covered" >true,</span>
   endOfList,
+  getDisplayValue, // Can overrule displayValue entirely
   id,
   initialOpenDelay = <span class="branch-0 cbranch-no" title="branch not covered" >800,</span> // Initial opening delay of 800ms (handles any stripes animations)
   input,
@@ -685,12 +792,15 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
   onChange,
   onType,
   renderFooter = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
+  renderHeader = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
   renderListItem = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
+  renderTrigger = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
   required,
   selectedStyles, // A way to pass any styles that need to be applied globally on selection
   uniqueIdentificationPath = <span class="branch-0 cbranch-no" title="branch not covered" >'id'</span>
 }) =&gt; {
   const selectedUniqueId = <span class="cstat-no" title="statement not covered" >get(input.value, uniqueIdentificationPath);</span>
+  const [selectedValue, setSelectedValue] = <span class="cstat-no" title="statement not covered" >useState(input.value);</span> // Track what's been selected in state as well
 &nbsp;
   // Display data needs to be in line with data options but also able to react to default handleType
   const [displayData, setDisplayData] = <span class="cstat-no" title="statement not covered" >useState(dataOptions);</span>
@@ -704,7 +814,7 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
   }, [dataOptions]);
 &nbsp;
   // Setup default handleType
-  const handleType = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
+  const handleType = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
     const regex = <span class="cstat-no" title="statement not covered" >new RegExp(`${e.target.value.toLowerCase()}`);</span>
 <span class="cstat-no" title="statement not covered" >    if (onType) {</span>
 <span class="cstat-no" title="statement not covered" >      onType(e);</span>
@@ -723,20 +833,20 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
     } else {
 <span class="cstat-no" title="statement not covered" >      setExactMatch(false);</span>
     }
-  };
+  }, [dataOptions, displayData, filterPath, onType, uniqueIdentificationPath]);
 &nbsp;
   // Hook to set up all the essentials
   const {
     refs: {
       listRef,
       triggerRef,
+      triggerComponentRef,
       overlayRef,
-      footerRef
+      footerRef,
+      headerRef
     },
     handlers: {
       handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
     },
     variables: {
       open,
@@ -756,19 +866,52 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
       className={css.listItem}
     &gt;
       {renderListItem ?
-        renderListItem(option, currentlyTyped, exactMatch, optionIsSelected) :
+        renderListItem(option, currentlyTyped, exactMatch, optionIsSelected, selectedValue) :
         get(option, uniqueIdentificationPath)
       }
     &lt;/div&gt;
-  ), [currentlyTyped, exactMatch, renderListItem, uniqueIdentificationPath]);
+  ), [currentlyTyped, exactMatch, renderListItem, selectedValue, uniqueIdentificationPath]);
 &nbsp;
   const handleChange = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >va</span>lue =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >    input.onChange(value);</span>
+<span class="cstat-no" title="statement not covered" >    setSelectedValue(value);</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >    if (typeof onChange === 'function') {</span>
 <span class="cstat-no" title="statement not covered" >      onChange(value);</span>
     }
   }, [input, onChange]);
+&nbsp;
+  const renderTypedownTrigger = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+    const triggerComponentId = <span class="cstat-no" title="statement not covered" >`typedown-trigger-${selectorSafe(input.name)}`;</span>
+<span class="cstat-no" title="statement not covered" >    return (</span>
+      &lt;div
+        ref={triggerRef}
+        id={`typedown-parent-${selectorSafe(input.name)}-trigger`}
+      &gt;
+        {renderTrigger ?
+          renderTrigger({ // Pass all props in that searchfield uses.
+            handleType,
+            input, // Pass input? Useful when not controlled I guess
+            meta,
+            selectedValue,
+            triggerComponentId,
+            triggerComponentRef,
+          })
+          :
+          &lt;SearchField
+            ref={triggerComponentRef}
+            // Pass meta through so correct styling gets applied to the TextField
+            id={triggerComponentId}
+            label={label}
+            marginBottom0
+            meta={meta}
+            onChange={handleType}
+            required={required}
+          /&gt;
+        }
+      &lt;/div&gt;
+    );
+  };
 &nbsp;
   const dropDown = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >    return (</span>
@@ -777,10 +920,32 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
         id={`typedown-parent-${selectorSafe(input.name)}-menu`}
         style={{ '--searchWidth': `${searchWidth}px` }}
       &gt;
+        {renderHeader &amp;&amp;
+          &lt;div
+            ref={headerRef}
+            className={css.header}
+            id={`typedown-header-${selectorSafe(input.name)}`}
+          &gt;
+            {/* Adopt a more extensible pattern for renderHeader, renderFooter will eventually follow */}
+            {renderHeader({
+              currentlyTyped,
+              displayData,
+              handleType,
+              exactMatch
+            })}
+          &lt;/div&gt;
+        }
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         &lt;div
           ref={listRef}
           className={css.listContainer}
           id="typedown-list"
+          /* This is an acceptable exception to the no-static-element-interactions
+           * as we are only PREVENTING interactions, namely focus change on scrollbar click
+           * Without this, the typedown closes instantly when the scrollbar is clicked or dragged.
+           * This does NOT prevent item click, as e.propagation is not prevented.
+           */
+          onMouseDown={<span class="fstat-no" title="function not covered" >(e</span>) =&gt; <span class="cstat-no" title="statement not covered" >e.preventDefault()}</span>
         &gt;
           {displayData?.length ? displayData?.map(<span class="fstat-no" title="function not covered" >(d</span>, index) =&gt; {
             const isSelectedEval = <span class="cstat-no" title="statement not covered" >isSelected ? isSelected(input.value, d) : get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);</span>
@@ -800,7 +965,6 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
 <span class="cstat-no" title="statement not covered" >                  handleChange(d);</span>
 <span class="cstat-no" title="statement not covered" >                  handleNextFocus();</span>
                 }}
-                onKeyDown={listKeyDownHandler}
                 type="button"
               &gt;
                 {renderItem(d, isSelectedEval)}
@@ -829,41 +993,52 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
     footerRef,
     handleChange,
     handleNextFocus,
+    handleType,
+    headerRef,
     input.name,
     input.value,
     isSelected,
-    listKeyDownHandler,
     listRef,
     renderFooter,
+    renderHeader,
     renderItem,
     searchWidth,
     selectedStyles,
     uniqueIdentificationPath
   ]);
 &nbsp;
-  const renderSearchField = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    return (</span>
+  const renderSelectedItem = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >()</span> =&gt; (</span>
+<span class="cstat-no" title="statement not covered" >    &lt;div</span>
+      className={classnames(
+        css.selectedDisplay
+      )}
+    &gt;
       &lt;div
-        ref={triggerRef}
-        id={`typedown-parent-${selectorSafe(input.name)}-searchField`}
+        className={css.selectedItem}
       &gt;
-        &lt;SearchField
-          // Pass meta through so correct styling gets applied to the TextField
-          id={`typedown-searchField-${selectorSafe(input.name)}`}
-          label={label}
-          marginBottom0
-          meta={meta}
-          onChange={handleType}
-          onKeyDown={searchFieldKeyDownHandler}
-          required={required}
-        /&gt;
+        {renderItem(input.value)}
       &lt;/div&gt;
-    );
-  };
+      {displayClearItem &amp;&amp;
+        &lt;IconButton
+          className={css.clearItem}
+          icon="times-circle-solid"
+          onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >handleChange()}</span>
+        /&gt;
+      }
+    &lt;/div&gt;
+  ), [displayClearItem, handleChange, input.value, renderItem]);
 &nbsp;
   const displayValue = <span class="cstat-no" title="statement not covered" >useMemo(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+    // Allow full control over whether to display the value
+<span class="cstat-no" title="statement not covered" >    if (getDisplayValue) {</span>
+<span class="cstat-no" title="statement not covered" >      return getDisplayValue({</span>
+        selectedUniqueId,
+        open
+      });
+    }
+&nbsp;
 <span class="cstat-no" title="statement not covered" >    return !!selectedUniqueId &amp;&amp; (!open || displayValueWhileOpen);</span>
-  }, [displayValueWhileOpen, open, selectedUniqueId]);
+  }, [displayValueWhileOpen, getDisplayValue, open, selectedUniqueId]);
 &nbsp;
 <span class="cstat-no" title="statement not covered" >  return (</span>
     &lt;div
@@ -874,7 +1049,7 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
       )}
       id={`typedown-id-${id}`}
     &gt;
-      {renderSearchField()}
+      {renderTypedownTrigger()}
       &lt;Popper
         key="typedown-menu-toggle"
         anchorRef={triggerRef}
@@ -897,26 +1072,7 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
       &gt;
         {dropDown()}
       &lt;/Popper&gt;
-      {displayValue &amp;&amp;
-        &lt;div
-          className={classnames(
-            css.selectedDisplay
-          )}
-        &gt;
-          &lt;div
-            className={css.selectedItem}
-          &gt;
-            {renderItem(input.value)}
-          &lt;/div&gt;
-          {displayClearItem &amp;&amp;
-            &lt;IconButton
-              className={css.clearItem}
-              icon="times-circle-solid"
-              onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >handleChange()}</span>
-            /&gt;
-          }
-        &lt;/div&gt;
-      }
+      {displayValue &amp;&amp; renderSelectedItem()}
     &lt;/div&gt;
   );
 };
@@ -932,6 +1088,7 @@ Typedown.propTypes = {
     PropTypes.element
   ]),
   filterPath: PropTypes.string,
+  getDisplayValue: PropTypes.func,
   id: PropTypes.string,
   initialOpenDelay: PropTypes.number,
   input: PropTypes.object,
@@ -943,8 +1100,10 @@ Typedown.propTypes = {
   meta: PropTypes.object,
   onChange: PropTypes.func,
   onType: PropTypes.func,
+  renderHeader: PropTypes.func,
   renderFooter: PropTypes.func,
   renderListItem: PropTypes.func,
+  renderTrigger: PropTypes.func,
   required: PropTypes.bool,
   selectedStyles: PropTypes.string,
   uniqueIdentificationPath: PropTypes.string
@@ -958,7 +1117,7 @@ export default Typedown;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/Typedown/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">4.54% </span>
+                <span class="strong">3.84% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>2/44</span>
+                <span class='fraction'>2/52</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/40</span>
+                <span class='fraction'>0/48</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/14</span>
+                <span class='fraction'>0/16</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">4.76% </span>
+                <span class="strong">4% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>2/42</span>
+                <span class='fraction'>2/50</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file low" data-value="Typedown.js"><a href="Typedown.js.html">Typedown.js</a></td>
-	<td data-value="4.54" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 4%"></div><div class="cover-empty" style="width: 96%"></div></div>
+	<td data-value="3.84" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 3%"></div><div class="cover-empty" style="width: 97%"></div></div>
 	</td>
-	<td data-value="4.54" class="pct low">4.54%</td>
-	<td data-value="44" class="abs low">2/44</td>
+	<td data-value="3.84" class="pct low">3.84%</td>
+	<td data-value="52" class="abs low">2/52</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="40" class="abs low">0/40</td>
+	<td data-value="48" class="abs low">0/48</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="14" class="abs low">0/14</td>
-	<td data-value="4.76" class="pct low">4.76%</td>
-	<td data-value="42" class="abs low">2/42</td>
+	<td data-value="16" class="abs low">0/16</td>
+	<td data-value="4" class="pct low">4%</td>
+	<td data-value="50" class="abs low">2/50</td>
 	</tr>
 
 <tr>
@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/Typedown/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>