npm - @k-int/stripes-kint-components - Versions diffs - 5.30.0 → 5.31.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (278) hide show

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">4.54% </span>
+                <span class="strong">3.77% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>2/44</span>
+                <span class='fraction'>2/53</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">3.92% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>2/42</span>
+                <span class='fraction'>2/51</span>
             </div>
@@ -359,7 +359,63 @@
 <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>
+<a name='L351'></a><a href='#L351'>351</a>
+<a name='L352'></a><a href='#L352'>352</a>
+<a name='L353'></a><a href='#L353'>353</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 +450,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>
@@ -455,6 +515,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-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>
@@ -468,6 +529,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 +538,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 +557,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 +600,15 @@
 <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-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 +639,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 +679,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 +719,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 +731,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 +764,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 +787,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 +798,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 +820,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 +839,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,
@@ -747,6 +863,7 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
   } = <span class="cstat-no" title="statement not covered" >useTypedown(</span>
     input.name,
     {
+      dataOptions,
       timeout: initialOpenDelay
     }
   );
@@ -756,19 +873,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,30 +927,53 @@ 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>
 &nbsp;
             const selectedCSS = <span class="cstat-no" title="statement not covered" >selectedStyles ?? css.selectedMenuButton;</span>
+&nbsp;
+            const uniqueButtonKey = <span class="cstat-no" title="statement not covered" >`typedown-button-[${get(d, uniqueIdentificationPath)}]`;</span>
 <span class="cstat-no" title="statement not covered" >            return (</span>
               &lt;button
-                key={`typedown-button-[${index}]`}
+                key={uniqueButtonKey}
                 className={classnames(
                   css.fullWidth,
                   css.menuButton,
                   { [`${selectedCSS}`]: isSelectedEval },
                 )}
                 data-selected={isSelectedEval}
-                id={`typedown-button-[${index}]`}
+                id={uniqueButtonKey}
                 onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
 <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 +1002,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 +1058,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 +1081,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 +1097,7 @@ Typedown.propTypes = {
     PropTypes.element
   ]),
   filterPath: PropTypes.string,
+  getDisplayValue: PropTypes.func,
   id: PropTypes.string,
   initialOpenDelay: PropTypes.number,
   input: PropTypes.object,
@@ -943,8 +1109,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 +1126,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-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">4.54% </span>
+                <span class="strong">3.77% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>2/44</span>
+                <span class='fraction'>2/53</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">3.92% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>2/42</span>
+                <span class='fraction'>2/51</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.77" 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.77" class="pct low">3.77%</td>
+	<td data-value="53" class="abs low">2/53</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="3.92" class="pct low">3.92%</td>
+	<td data-value="51" class="abs low">2/51</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-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>