@k-int/stripes-kint-components 5.31.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.56% </span>
+                <span class="strong">1.17% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>1/64</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/57</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/16</span>
+                <span class='fraction'>0/22</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">1.78% </span>
+                <span class="strong">1.29% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>1/56</span>
+                <span class='fraction'>1/77</span>
             </div>
         
             
@@ -240,7 +240,60 @@
 <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>
+<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>
@@ -263,6 +316,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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -276,9 +332,36 @@
 <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-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>
@@ -314,46 +397,73 @@
 <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>
+<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-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-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-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-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-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-neutral">&nbsp;</span>
@@ -365,14 +475,13 @@
 <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-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>
@@ -392,9 +501,6 @@
 <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-neutral">&nbsp;</span>
@@ -437,119 +543,175 @@ 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; {
   // 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>
+  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 triggerRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
   const overlayRef = <span class="cstat-no" title="statement not covered" >useRef();</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>
+  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" >  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
+  // OVERLAY PORTAL
+  const portal = <span class="cstat-no" title="statement not covered" >document.getElementById('OverlayContainer');</span>
+&nbsp;
+  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;
+<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>
-    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;
-<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>
+&nbsp;
+    // 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;
+      // 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>
             }
-          } 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>
+<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>
           }
-        } 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>
+&nbsp;
+<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
-<span class="cstat-no" title="statement not covered" >          e.preventDefault();</span>
+          const IS_UP = <span class="cstat-no" title="statement not covered" >e.code === UP_ARROW;</span>
 &nbsp;
-<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>
+          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>
             }
-          } 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>
+<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;
-      // 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>
-    };
+          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;
-    // Setup the event listener for each config entry
-<span class="cstat-no" title="statement not covered" >    configs.forEach(setupListener);</span>
+        // 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>
     };
-&nbsp;
     // Re-add the listener ANY time any of the elements changes (this is why we're using callback refs)
-  }, [header, trigger, footer, list]);
+  }, [dataOptions, header, trigger, footer, list, getPreviousToTrigger]);
 &nbsp;
-  // 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
@@ -568,9 +730,6 @@ 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: {
@@ -601,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-12T16:39:50.848Z
+                at 2025-12-12T20:17:01.385Z
             </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-12T16:39:50.848Z
+                at 2025-12-12T20:17:01.385Z
             </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-12T16:39:50.848Z
+                at 2025-12-12T20:17:01.385Z
             </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-12T16:39:50.848Z
+                at 2025-12-12T20:17:01.385Z
             </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-12T16:39:50.848Z
+                at 2025-12-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/hooks/useCustomProperties.js.html

@@ -310,7 +310,7 @@ export default useCustomProperties;
             <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-12T16:39:50.848Z
+                at 2025-12-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/hooks/useHelperApp.js.html

@@ -304,7 +304,7 @@ export default useHelperApp;
             <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-12T16:39:50.848Z
+                at 2025-12-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/hooks/useInvalidateRefdata/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-12T16:39:50.848Z
+                at 2025-12-12T20:17:01.385Z
             </div>
         <script src="../../prettify.js"></script>
         <script>