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

package/src/artifacts/coverage-jest/hooks/intlHooks/useIntlKeyStore/useIntlKeyStore.js.html

@@ -184,7 +184,7 @@ export default useIntlKeyStore;
             <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/hooks/intlHooks/useKintIntl/index.html

@@ -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/hooks/intlHooks/useKintIntl/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>

package/src/artifacts/coverage-jest/hooks/intlHooks/useKintIntl/useKintIntl.js.html

@@ -223,7 +223,7 @@ export default useKintIntl;
             <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/hooks/typedownHooks/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">3.57% </span>
+                <span class="strong">3.44% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>3/84</span>
+                <span class='fraction'>3/87</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/54</span>
+                <span class='fraction'>0/69</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/22</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">3.65% </span>
+                <span class="strong">3.79% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>3/82</span>
+                <span class='fraction'>3/79</span>
             </div>
         
             
@@ -95,17 +95,17 @@
 
 <tr>
 	<td class="file low" data-value="useTypedown.js"><a href="useTypedown.js.html">useTypedown.js</a></td>
-	<td data-value="1.63" class="pic low">
+	<td data-value="1.56" class="pic low">
 	<div class="chart"><div class="cover-fill" style="width: 1%"></div><div class="cover-empty" style="width: 99%"></div></div>
 	</td>
-	<td data-value="1.63" class="pct low">1.63%</td>
-	<td data-value="61" class="abs low">1/61</td>
+	<td data-value="1.56" class="pct low">1.56%</td>
+	<td data-value="64" class="abs low">1/64</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="42" class="abs low">0/42</td>
+	<td data-value="57" class="abs low">0/57</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="8" class="abs low">0/8</td>
-	<td data-value="1.69" class="pct low">1.69%</td>
-	<td data-value="59" class="abs low">1/59</td>
+	<td data-value="16" class="abs low">0/16</td>
+	<td data-value="1.78" class="pct low">1.78%</td>
+	<td data-value="56" class="abs low">1/56</td>
 	</tr>
 
 <tr>
@@ -146,7 +146,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/hooks/typedownHooks/index.js.html

@@ -79,7 +79,7 @@ export { default as useTypedownData } from './useTypedownData';
             <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/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.56% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>1/61</span>
+                <span class='fraction'>1/64</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/57</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/16</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">1.69% </span>
+                <span class="strong">1.78% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>1/59</span>
+                <span class='fraction'>1/56</span>
             </div>
         
             
@@ -222,9 +222,25 @@
 <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>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<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></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>
@@ -248,92 +264,112 @@
 <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-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-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-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-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-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-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-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-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-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-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-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-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-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>
@@ -381,7 +417,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 +433,124 @@ 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>
 ) =&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, setListElement] = <span class="cstat-no" title="statement not covered" >useState();</span>
+  const [trigger, setTriggerElement] = <span class="cstat-no" title="statement not covered" >useState();</span>
+  const [footer, setFooterElement] = <span class="cstat-no" title="statement not covered" >useState();</span>
+  const [header, setHeaderElement] = <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>
+  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" >setListElement(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" >setTriggerElement(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" >setFooterElement(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" >setHeaderElement(node),</span> []);</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>
-        }
+<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+    const configs = <span class="cstat-no" title="statement not covered" >[</span>
+      // --- HEADER CONFIG ---
+      {
+        element: header,
+        allowTabThroughContents: true,
+        previousElement: trigger,
+        nextElement: (footer &amp;&amp; getFirstFocusable(footer)) ?? getNextFocusable(trigger, false),
+        downElement: list &amp;&amp; getFirstFocusable(list),
+        upElement: list &amp;&amp; getLastFocusable(list),
+      },
+      // --- FOOTER CONFIG ---
+      {
+        element: footer,
+        allowTabThroughContents: true,
+        previousElement: (header &amp;&amp; getLastFocusable(header)) ?? trigger,
+        nextElement: getNextFocusable(trigger, false),
+        downElement: list &amp;&amp; getFirstFocusable(list),
+        upElement: list &amp;&amp; getLastFocusable(list),
+      },
+      // --- LIST/CONTAINER CONFIG ---
+      {
+        element: list,
+        allowUpDownThroughContents: true,
+        previousElement: (header &amp;&amp; getLastFocusable(header)) ?? trigger,
+        nextElement: (footer &amp;&amp; getFirstFocusable(footer)) ?? getNextFocusable(trigger, false)
+      },
+      // --- TRIGGER CONFIG ---
+      {
+        element: trigger,
+        nextElement: (header &amp;&amp; getFirstFocusable(header)) ?? (footer &amp;&amp; getFirstFocusable(footer)) ?? getNextFocusable(trigger, false),
+        previousElement: getPreviousFocusable(trigger, false),
+        downElement: list &amp;&amp; getFirstFocusable(list),
+        upElement: list &amp;&amp; getLastFocusable(list),
       }
-    });
+    ].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;
-<span class="cstat-no" title="statement not covered" >    footer.setAttribute('hasListener', 'true');</span>
-  }
+    const cleanups = <span class="cstat-no" title="statement not covered" >[];</span>
+    const setupListener = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(c</span>onfig) =&gt; {</span>
+      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 (e.code === TAB) {</span>
+<span class="cstat-no" title="statement not covered" >          e.preventDefault();</span>
+<span class="cstat-no" title="statement not covered" >          if (config.allowTabThroughContents) {</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(config.element, true, true, false, 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>
-      }
-    }
+<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 moving backwards, focus on the previous element
+<span class="cstat-no" title="statement not covered" >              config.previousElement.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" >              config.nextElement.focus();</span>
+            }
+          } else <span class="cstat-no" title="statement not covered" >if (e.shiftKey) {</span>
+<span class="cstat-no" title="statement not covered" >            config.previousElement.focus();</span>
+          } else {
+<span class="cstat-no" title="statement not covered" >            config.nextElement.focus();</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>
+          // Prevent the default behaviour
+<span class="cstat-no" title="statement not covered" >          e.preventDefault();</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>
-      }
-    }
+<span class="cstat-no" title="statement not covered" >          if (config.allowUpDownThroughContents) {</span>
+            const focusFunc = <span class="cstat-no" title="statement not covered" >e.code === UP_ARROW ? getPreviousFocusable : getNextFocusable;</span>
+            const elem = <span class="cstat-no" title="statement not covered" >focusFunc(config.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" >              elem.focus();</span>
+            }
+          } else <span class="cstat-no" title="statement not covered" >if (e.code === UP_ARROW) {</span>
+<span class="cstat-no" title="statement not covered" >            config.upElement.focus();</span>
+          } else {
+<span class="cstat-no" title="statement not covered" >            config.downElement.focus();</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>
-      }
-    }
-  };
+      // Add event listener and add the removal of said event listener to the cleanup function
+<span class="cstat-no" title="statement not covered" >      config.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" >config.element.removeEventListener('keydown', handler))</span>;</span>
+    };
 &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>
-    }
+    // Setup the event listener for each config entry
+<span class="cstat-no" title="statement not covered" >    configs.forEach(setupListener);</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>
-    }
+    // 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>
+    };
 &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>
-    }
-  };
+    // Re-add the listener ANY time any of the elements changes (this is why we're using callback refs)
+  }, [header, trigger, footer, list]);
 &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>
+  // TODO is this still necessary?
+  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>
@@ -522,13 +576,13 @@ const useTypedown = <span class="fstat-no" title="function not covered" >(</span
     refs: {
       listRef,
       triggerRef,
+      triggerComponentRef,
       overlayRef,
-      footerRef
+      footerRef,
+      headerRef
     },
     handlers: {
       handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
     },
     variables: {
       open: useOpen ? open : false,
@@ -547,7 +601,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-12T16:39:50.848Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -166,7 +166,7 @@ export default useTypedownData;
             <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/hooks/typedownHooks/useTypedownToggle.js.html

@@ -148,7 +148,7 @@ export default useTypedownToggle;
             <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/hooks/useActionListRef.js.html

@@ -178,7 +178,7 @@ export default useActionListRef;
             <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/hooks/useActiveElement.js.html

@@ -142,7 +142,7 @@ export default useActiveElement;
             <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>