npm - @k-int/stripes-kint-components - Versions diffs - 5.29.1 → 5.31.0 - Mend

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

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

Files changed (392) hide show

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

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/hooks/typedownHooks/useTypedownToggle.js.html CHANGED Viewed

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/hooks/useInvalidateRefdata/index.js.html CHANGED Viewed

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -103,7 +103,7 @@ export default useInvalidateRefdata;
             <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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -259,7 +259,7 @@ export default useKiwtFieldArray;
             <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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -205,7 +205,7 @@ export default useKiwtSASQuery;
             <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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -124,7 +124,7 @@ export default useLocalPageStore;
             <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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -121,7 +121,7 @@ export default useLocalStorageState;
             <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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -226,7 +226,7 @@ export default useModConfigEntries;
             <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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -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-11-27T17:56:04.995Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../../prettify.js"></script>
         <script>