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

package/src/artifacts/coverage-jest/hooks/typedownHooks/useTypedown.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">1.63% </span>
+                <span class="strong">1.17% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>1/61</span>
+                <span class='fraction'>1/85</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/42</span>
+                <span class='fraction'>0/61</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/8</span>
+                <span class='fraction'>0/22</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">1.69% </span>
+                <span class="strong">1.29% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>1/59</span>
+                <span class='fraction'>1/77</span>
             </div>
         
             
@@ -222,7 +222,78 @@
 <a name='L157'></a><a href='#L157'>157</a>
 <a name='L158'></a><a href='#L158'>158</a>
 <a name='L159'></a><a href='#L159'>159</a>
-<a name='L160'></a><a href='#L160'>160</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L160'></a><a href='#L160'>160</a>
+<a name='L161'></a><a href='#L161'>161</a>
+<a name='L162'></a><a href='#L162'>162</a>
+<a name='L163'></a><a href='#L163'>163</a>
+<a name='L164'></a><a href='#L164'>164</a>
+<a name='L165'></a><a href='#L165'>165</a>
+<a name='L166'></a><a href='#L166'>166</a>
+<a name='L167'></a><a href='#L167'>167</a>
+<a name='L168'></a><a href='#L168'>168</a>
+<a name='L169'></a><a href='#L169'>169</a>
+<a name='L170'></a><a href='#L170'>170</a>
+<a name='L171'></a><a href='#L171'>171</a>
+<a name='L172'></a><a href='#L172'>172</a>
+<a name='L173'></a><a href='#L173'>173</a>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</a>
+<a name='L177'></a><a href='#L177'>177</a>
+<a name='L178'></a><a href='#L178'>178</a>
+<a name='L179'></a><a href='#L179'>179</a>
+<a name='L180'></a><a href='#L180'>180</a>
+<a name='L181'></a><a href='#L181'>181</a>
+<a name='L182'></a><a href='#L182'>182</a>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</a>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</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>
@@ -240,13 +311,17 @@
 <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>
-<span class="cline-any cline-yes">23x</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-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>
@@ -254,42 +329,94 @@
 <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>
 <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-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-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-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-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-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-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>
+<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-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-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-no">&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-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>
@@ -298,9 +425,11 @@
 <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-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>
@@ -310,6 +439,8 @@
 <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-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>
@@ -319,20 +450,24 @@
 <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-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-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-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-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>
@@ -340,23 +475,30 @@
 <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-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-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-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>
 <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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -381,7 +523,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></td><td class="text"><pre class="prettyprint lang-js">import { useEffect, useRef, useState } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useCallback, useEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 &nbsp;
 import {
@@ -397,106 +539,180 @@ import {
   UP_ARROW
 } from '../../constants/eventCodes';
 &nbsp;
-import selectorSafe from '../../utils/selectorSafe';
-&nbsp;
 import useTypedownToggle from './useTypedownToggle';
 &nbsp;
 const useTypedown = <span class="fstat-no" title="function not covered" >(</span>
   name,
-  { timeout = <span class="branch-0 cbranch-no" title="branch not covered" >800 </span>} = <span class="branch-0 cbranch-no" title="branch not covered" >{}</span>
+  {
+    dataOptions,
+    timeout = <span class="branch-0 cbranch-no" title="branch not covered" >800</span>
+  } = <span class="branch-0 cbranch-no" title="branch not covered" >{}</span>
 ) =&gt; {
-  // SEARCHFIELD COMPONENT
-  const searchFieldComponent = <span class="cstat-no" title="statement not covered" >document.getElementById(`typedown-searchField-${selectorSafe(name)}`);</span>
+  // SET UP STATE HOLDING DOM ELEMENTS
+  const [list, setList] = <span class="cstat-no" title="statement not covered" >useState();</span>
+  const [trigger, setTrigger] = <span class="cstat-no" title="statement not covered" >useState();</span>
+  const [footer, setFooter] = <span class="cstat-no" title="statement not covered" >useState();</span>
+  const [header, setHeader] = <span class="cstat-no" title="statement not covered" >useState();</span>
 &nbsp;
   // SET UP REFS
-  const listRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
   const triggerRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
   const overlayRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
-  const footerRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
-&nbsp;
-  const footer = <span class="cstat-no" title="statement not covered" >document.getElementById(`typedown-footer-${selectorSafe(name)}`);</span>
-  // Add an event listener to the footer, so that we can control tab behaviour between footer elements
-&nbsp;
-<span class="cstat-no" title="statement not covered" >  if (footer &amp;&amp; footer.getAttribute('hasListener') !== 'true') {</span>
-<span class="cstat-no" title="statement not covered" >    footer.addEventListener('keydown', <span class="fstat-no" title="function not covered" >e </span>=&gt; {</span>
-      // We want special behaviour on tab
-<span class="cstat-no" title="statement not covered" >      if (e.code === TAB) {</span>
-        // Prevent the default behaviour
-<span class="cstat-no" title="statement not covered" >        e.preventDefault();</span>
-        const focusFunc = <span class="cstat-no" title="statement not covered" >e.shiftKey ? getPreviousFocusable : getNextFocusable;</span>
-        const elem = <span class="cstat-no" title="statement not covered" >focusFunc(footerRef.current, true, true, false, true);</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >        if (elem) {</span>
-          // Focus on next focusable element
-<span class="cstat-no" title="statement not covered" >          elem.focus();</span>
-        } else <span class="cstat-no" title="statement not covered" >if (e.shiftKey) {</span>
-          // We are at the beginning of the list, refocus on search bar
-<span class="cstat-no" title="statement not covered" >          searchFieldComponent.focus();</span>
-        } else {
-          // We are at the end of the list, move onto next focusable element in page
-<span class="cstat-no" title="statement not covered" >          getNextFocusable(searchFieldComponent, false).focus();</span>
-        }
-      }
-    });
-&nbsp;
-<span class="cstat-no" title="statement not covered" >    footer.setAttribute('hasListener', 'true');</span>
-  }
-&nbsp;
-  // SET UP HANDLERS
-  const searchFieldKeyDownHandler = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >e </span>=&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (e.code === UP_ARROW) {</span>
-      const elem = <span class="cstat-no" title="statement not covered" >getLastFocusable(listRef.current, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      if (elem) {</span>
-<span class="cstat-no" title="statement not covered" >        elem.focus();</span>
-      }
-    }
+  const listRef = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >no</span>de =&gt; <span class="cstat-no" title="statement not covered" >setList(node),</span> []);</span>
+  const triggerComponentRef = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >no</span>de =&gt; <span class="cstat-no" title="statement not covered" >setTrigger(node),</span> []);</span>
+  const footerRef = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >no</span>de =&gt; <span class="cstat-no" title="statement not covered" >setFooter(node),</span> []);</span>
+  const headerRef = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >no</span>de =&gt; <span class="cstat-no" title="statement not covered" >setHeader(node),</span> []);</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    if (e.code === DOWN_ARROW) {</span>
-      const elem = <span class="cstat-no" title="statement not covered" >getFirstFocusable(listRef.current, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      if (elem) {</span>
-<span class="cstat-no" title="statement not covered" >        elem.focus();</span>
-      }
-    }
+  // OVERLAY PORTAL
+  const portal = <span class="cstat-no" title="statement not covered" >document.getElementById('OverlayContainer');</span>
 &nbsp;
-    // Tab key (But not while shifting)
-<span class="cstat-no" title="statement not covered" >    if (e.code === TAB &amp;&amp; !e.shiftKey) {</span>
-<span class="cstat-no" title="statement not covered" >      e.preventDefault();</span>
-      // If we have focusable elements in the footer, then focus on them, else unfocus searchbar
-      const elem = <span class="cstat-no" title="statement not covered" >getNextFocusable(footerRef.current, true, true, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      if (elem) {</span>
-<span class="cstat-no" title="statement not covered" >        elem.focus();</span>
-      } else {
-<span class="cstat-no" title="statement not covered" >        getNextFocusable(searchFieldComponent, false).focus();</span>
-      }
+  const getPreviousToTrigger = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+    const prevElem = <span class="cstat-no" title="statement not covered" >getPreviousFocusable(trigger, false, false, false);</span>
+<span class="cstat-no" title="statement not covered" >    if (prevElem.closest('[id^=OverlayContainer]') !== null) {</span>
+      // If we find ourselves inside the OverlayContainer when heading backwards from the trigger
+      // then we must be the first focusable element on the page.
+      // From here we need to skip over the overlay container and head backwards
+<span class="cstat-no" title="statement not covered" >      return getPreviousFocusable(portal, false, false, false);</span>
     }
-  };
+<span class="cstat-no" title="statement not covered" >    return prevElem;</span>
+  }, [portal, trigger]);
 &nbsp;
-  const listKeyDownHandler = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >e </span>=&gt; {</span>
-<span class="cstat-no" title="statement not covered" >    if (e.code === DOWN_ARROW) {</span>
-      const elem = <span class="cstat-no" title="statement not covered" >getNextFocusable(listRef.current, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      elem.focus();</span>
-    }
+<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+    const cleanups = <span class="cstat-no" title="statement not covered" >[];</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    if (e.code === UP_ARROW) {</span>
-      const elem = <span class="cstat-no" title="statement not covered" >getPreviousFocusable(listRef.current, true, true);</span>
-<span class="cstat-no" title="statement not covered" >      elem.focus();</span>
-    }
+    // There appears to be some BIZARRE off-by-one issue with selectors here, that can be fixed by introducing a 1ms delay...
+    // I hate it but it is effective
+<span class="cstat-no" title="statement not covered" >    setTimeout(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+      // Split these out to shut up the linter
+      const rawFirstItemInList = (<span class="cstat-no" title="statement not covered" >list ? getFirstFocusable(list) : null)</span>;
+      const rawLastItemInList = (<span class="cstat-no" title="statement not covered" >list ? getLastFocusable(list) : null)</span>;
 &nbsp;
-<span class="cstat-no" title="statement not covered" >    if (e.code === TAB) {</span>
-<span class="cstat-no" title="statement not covered" >      e.preventDefault();</span>
-      let elem;
-<span class="cstat-no" title="statement not covered" >      if (!e.shiftKey &amp;&amp; !footerRef.current) {</span>
-<span class="cstat-no" title="statement not covered" >        elem = getNextFocusable(searchFieldComponent, false);</span>
-      } else <span class="cstat-no" title="statement not covered" >if (!e.shiftKey) {</span>
-<span class="cstat-no" title="statement not covered" >        elem = getNextFocusable(footerRef.current, true, true, true, true);</span>
-      } else {
-<span class="cstat-no" title="statement not covered" >        elem = searchFieldComponent;</span>
-      }
-<span class="cstat-no" title="statement not covered" >      elem.focus();</span>
-    }
-  };
+      // If there are no dataOptions, this can get a bit stuck, so deliberately set to null when no dataOptions are present
+      const firstItemInList = <span class="cstat-no" title="statement not covered" >dataOptions.length &gt; 0 ? rawFirstItemInList : null;</span>
+      const lastItemInList = <span class="cstat-no" title="statement not covered" >dataOptions.length &gt; 0 ? rawLastItemInList : null;</span>
+&nbsp;
+      const configs = <span class="cstat-no" title="statement not covered" >[</span>
+        // --- HEADER CONFIG ---
+        {
+          element: header,
+          allowTabThroughContents: true,
+          previousElement: trigger,
+          nextElement: (footer ? getFirstFocusable(footer) : null) ?? getNextFocusable(trigger, false),
+          downElement: firstItemInList,
+          upElement: lastItemInList,
+        },
+        // --- FOOTER CONFIG ---
+        {
+          element: footer,
+          allowTabThroughContents: true,
+          previousElement: (header ? getLastFocusable(header) : null) ?? trigger,
+          nextElement: getNextFocusable(trigger, false),
+          downElement: firstItemInList,
+          upElement: lastItemInList,
+        },
+        // --- LIST/CONTAINER CONFIG ---
+        {
+          element: list,
+          allowUpDownThroughContents: true,
+          previousElement: (header ? getLastFocusable(header) : null) ?? trigger,
+          nextElement: (footer ? getFirstFocusable(footer) : null) ?? getNextFocusable(trigger, false)
+        },
+        // --- TRIGGER CONFIG ---
+        {
+          element: trigger,
+          nextElement: (header ? getFirstFocusable(header) : null) ?? (footer ? getFirstFocusable(footer) : null) ?? getNextFocusable(trigger, false),
+          previousElement: getPreviousToTrigger(),
+          downElement: firstItemInList,
+          upElement: lastItemInList,
+        }
+      ].filter(<span class="fstat-no" title="function not covered" >c </span>=&gt; <span class="cstat-no" title="statement not covered" >c.element)</span>; // Filter out configs where the element (e.g., header) is null
+&nbsp;
+      const setupListener = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(c</span>onfig) =&gt; {</span>
+        const {
+          element,
+          allowTabThroughContents,
+          previousElement,
+          nextElement,
+          allowUpDownThroughContents,
+          downElement,
+          upElement,
+        } = <span class="cstat-no" title="statement not covered" >config;</span>
+        const handleTab = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >e </span>=&gt; {</span>
+          const IS_SHIFT = <span class="cstat-no" title="statement not covered" >e.shiftKey;</span>
+          const tabIgnoreContents = <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" >            if (IS_SHIFT) {</span>
+<span class="cstat-no" title="statement not covered" >              return previousElement?.focus();</span>
+            }
+<span class="cstat-no" title="statement not covered" >            return nextElement?.focus();</span>
+          };
+&nbsp;
+<span class="cstat-no" title="statement not covered" >          if (!allowTabThroughContents) {</span>
+<span class="cstat-no" title="statement not covered" >            return tabIgnoreContents();</span>
+          }
+&nbsp;
+          const focusFunc = <span class="cstat-no" title="statement not covered" >IS_SHIFT ? getPreviousFocusable : getNextFocusable;</span>
+          const elem = <span class="cstat-no" title="statement not covered" >focusFunc(element, true, true, false, true);</span>
+<span class="cstat-no" title="statement not covered" >          if (elem) {</span>
+<span class="cstat-no" title="statement not covered" >            return elem.focus();</span>
+          }
 &nbsp;
-  const handleNextFocus = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >getNextFocusable(searchFieldComponent, false).focus();</span></span>
+<span class="cstat-no" title="statement not covered" >          return tabIgnoreContents();</span>
+        };
+&nbsp;
+        const handleUpDown = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >e </span>=&gt; {</span>
+          // Prevent the default behaviour
+          const IS_UP = <span class="cstat-no" title="statement not covered" >e.code === UP_ARROW;</span>
+&nbsp;
+          const upDownIgnoreContents = <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" >            if (IS_UP) {</span>
+<span class="cstat-no" title="statement not covered" >              return upElement?.focus();</span>
+            }
+<span class="cstat-no" title="statement not covered" >            return downElement?.focus();</span>
+          };
+&nbsp;
+<span class="cstat-no" title="statement not covered" >          if (!allowUpDownThroughContents) {</span>
+<span class="cstat-no" title="statement not covered" >            return upDownIgnoreContents();</span>
+          }
+&nbsp;
+          const focusFunc = <span class="cstat-no" title="statement not covered" >IS_UP ? getPreviousFocusable : getNextFocusable;</span>
+          const elem = <span class="cstat-no" title="statement not covered" >focusFunc(element, true, true, true, true);</span> // Allow looping through elements
+<span class="cstat-no" title="statement not covered" >          if (elem) {</span>
+<span class="cstat-no" title="statement not covered" >            return elem.focus();</span>
+          }
+&nbsp;
+<span class="cstat-no" title="statement not covered" >          return upDownIgnoreContents();</span>
+        };
+&nbsp;
+        const handler = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(e</span>) =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >          if (!element.contains(document.activeElement)) {</span>
+<span class="cstat-no" title="statement not covered" >            return;</span>
+          }
+&nbsp;
+<span class="cstat-no" title="statement not covered" >          if (e.code === TAB) {</span>
+<span class="cstat-no" title="statement not covered" >            e.preventDefault();</span>
+<span class="cstat-no" title="statement not covered" >            handleTab(e);</span>
+          } else <span class="cstat-no" title="statement not covered" >if (e.code === DOWN_ARROW || e.code === UP_ARROW) {</span>
+<span class="cstat-no" title="statement not covered" >            e.preventDefault();</span>
+<span class="cstat-no" title="statement not covered" >            handleUpDown(e);</span>
+          }
+        };
+&nbsp;
+        // Add event listener and add the removal of said event listener to the cleanup function
+<span class="cstat-no" title="statement not covered" >        element.addEventListener('keydown', handler);</span>
+<span class="cstat-no" title="statement not covered" >        cleanups.push(<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >element.removeEventListener('keydown', handler))</span>;</span>
+      };
+&nbsp;
+      // Set up the event listener for each config entry
+<span class="cstat-no" title="statement not covered" >      configs.forEach(setupListener);</span>
+    }, 0);
+&nbsp;
+    // Cleanup any event listeners
+<span class="cstat-no" title="statement not covered" >    return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      cleanups.forEach(<span class="fstat-no" title="function not covered" >cl</span>eanup =&gt; <span class="cstat-no" title="statement not covered" >cleanup())</span>;</span>
+    };
+    // Re-add the listener ANY time any of the elements changes (this is why we're using callback refs)
+  }, [dataOptions, header, trigger, footer, list, getPreviousToTrigger]);
+&nbsp;
+  const handleNextFocus = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >getNextFocusable(trigger, false).focus();</span></span>
 &nbsp;
   // SET UP VARIABLES
   const { open } = <span class="cstat-no" title="statement not covered" >useTypedownToggle(name);</span>
@@ -514,21 +730,18 @@ const useTypedown = <span class="fstat-no" title="function not covered" >(</span
 &nbsp;
   // RESIZE STUFF
   const { width: searchWidth, ref: resizeRef } = <span class="cstat-no" title="statement not covered" >useResizeDetector();</span>
-&nbsp;
-  // OVERLAY PORTAL
-  const portal = <span class="cstat-no" title="statement not covered" >document.getElementById('OverlayContainer');</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >  return {</span>
     refs: {
       listRef,
       triggerRef,
+      triggerComponentRef,
       overlayRef,
-      footerRef
+      footerRef,
+      headerRef
     },
     handlers: {
       handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
     },
     variables: {
       open: useOpen ? open : false,
@@ -547,7 +760,7 @@ export default useTypedown;
             <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>