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

package/src/lib/hooks/typedownHooks/useTypedown.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import {
@@ -14,106 +14,124 @@ import {
   UP_ARROW
 } from '../../constants/eventCodes';
 
-import selectorSafe from '../../utils/selectorSafe';
-
 import useTypedownToggle from './useTypedownToggle';
 
 const useTypedown = (
   name,
   { timeout = 800 } = {}
 ) => {
-  // SEARCHFIELD COMPONENT
-  const searchFieldComponent = document.getElementById(`typedown-searchField-${selectorSafe(name)}`);
+  // SET UP STATE HOLDING DOM ELEMENTS
+  const [list, setListElement] = useState();
+  const [trigger, setTriggerElement] = useState();
+  const [footer, setFooterElement] = useState();
+  const [header, setHeaderElement] = useState();
 
   // SET UP REFS
-  const listRef = useRef();
   const triggerRef = useRef();
   const overlayRef = useRef();
-  const footerRef = useRef();
-
-  const footer = document.getElementById(`typedown-footer-${selectorSafe(name)}`);
-  // Add an event listener to the footer, so that we can control tab behaviour between footer elements
-
-  if (footer && footer.getAttribute('hasListener') !== 'true') {
-    footer.addEventListener('keydown', e => {
-      // We want special behaviour on tab
-      if (e.code === TAB) {
-        // Prevent the default behaviour
-        e.preventDefault();
-        const focusFunc = e.shiftKey ? getPreviousFocusable : getNextFocusable;
-        const elem = focusFunc(footerRef.current, true, true, false, true);
-
-        if (elem) {
-          // Focus on next focusable element
-          elem.focus();
-        } else if (e.shiftKey) {
-          // We are at the beginning of the list, refocus on search bar
-          searchFieldComponent.focus();
-        } else {
-          // We are at the end of the list, move onto next focusable element in page
-          getNextFocusable(searchFieldComponent, false).focus();
-        }
-      }
-    });
+  const listRef = useCallback(node => setListElement(node), []);
+  const triggerComponentRef = useCallback(node => setTriggerElement(node), []);
+  const footerRef = useCallback(node => setFooterElement(node), []);
+  const headerRef = useCallback(node => setHeaderElement(node), []);
 
-    footer.setAttribute('hasListener', 'true');
-  }
-
-  // SET UP HANDLERS
-  const searchFieldKeyDownHandler = e => {
-    if (e.code === UP_ARROW) {
-      const elem = getLastFocusable(listRef.current, true, true);
-      if (elem) {
-        elem.focus();
-      }
-    }
-
-    if (e.code === DOWN_ARROW) {
-      const elem = getFirstFocusable(listRef.current, true, true);
-      if (elem) {
-        elem.focus();
+  useEffect(() => {
+    const configs = [
+      // --- HEADER CONFIG ---
+      {
+        element: header,
+        allowTabThroughContents: true,
+        previousElement: trigger,
+        nextElement: (footer && getFirstFocusable(footer)) ?? getNextFocusable(trigger, false),
+        downElement: list && getFirstFocusable(list),
+        upElement: list && getLastFocusable(list),
+      },
+      // --- FOOTER CONFIG ---
+      {
+        element: footer,
+        allowTabThroughContents: true,
+        previousElement: (header && getLastFocusable(header)) ?? trigger,
+        nextElement: getNextFocusable(trigger, false),
+        downElement: list && getFirstFocusable(list),
+        upElement: list && getLastFocusable(list),
+      },
+      // --- LIST/CONTAINER CONFIG ---
+      {
+        element: list,
+        allowUpDownThroughContents: true,
+        previousElement: (header && getLastFocusable(header)) ?? trigger,
+        nextElement: (footer && getFirstFocusable(footer)) ?? getNextFocusable(trigger, false)
+      },
+      // --- TRIGGER CONFIG ---
+      {
+        element: trigger,
+        nextElement: (header && getFirstFocusable(header)) ?? (footer && getFirstFocusable(footer)) ?? getNextFocusable(trigger, false),
+        previousElement: getPreviousFocusable(trigger, false),
+        downElement: list && getFirstFocusable(list),
+        upElement: list && getLastFocusable(list),
       }
-    }
+    ].filter(c => c.element); // Filter out configs where the element (e.g., header) is null
+
+    const cleanups = [];
+    const setupListener = (config) => {
+      const handler = (e) => {
+        if (e.code === TAB) {
+          e.preventDefault();
+          if (config.allowTabThroughContents) {
+            const focusFunc = e.shiftKey ? getPreviousFocusable : getNextFocusable;
+            const elem = focusFunc(config.element, true, true, false, true);
+
+            if (elem) {
+              // Focus on next focusable element
+              elem.focus();
+            } else if (e.shiftKey) {
+              // We are at the beginning of the list moving backwards, focus on the previous element
+              config.previousElement.focus();
+            } else {
+              // We are at the end of the list, move onto next focusable element in page
+              config.nextElement.focus();
+            }
+          } else if (e.shiftKey) {
+            config.previousElement.focus();
+          } else {
+            config.nextElement.focus();
+          }
+        } else if (e.code === DOWN_ARROW || e.code === UP_ARROW) {
+          e.preventDefault();
+          // Prevent the default behaviour
+          e.preventDefault();
+
+          if (config.allowUpDownThroughContents) {
+            const focusFunc = e.code === UP_ARROW ? getPreviousFocusable : getNextFocusable;
+            const elem = focusFunc(config.element, true, true, true, true); // Allow looping through elements
+            if (elem) {
+              elem.focus();
+            }
+          } else if (e.code === UP_ARROW) {
+            config.upElement.focus();
+          } else {
+            config.downElement.focus();
+          }
+        }
+      };
 
-    // Tab key (But not while shifting)
-    if (e.code === TAB && !e.shiftKey) {
-      e.preventDefault();
-      // If we have focusable elements in the footer, then focus on them, else unfocus searchbar
-      const elem = getNextFocusable(footerRef.current, true, true, true, true);
-      if (elem) {
-        elem.focus();
-      } else {
-        getNextFocusable(searchFieldComponent, false).focus();
-      }
-    }
-  };
+      // Add event listener and add the removal of said event listener to the cleanup function
+      config.element.addEventListener('keydown', handler);
+      cleanups.push(() => config.element.removeEventListener('keydown', handler));
+    };
 
-  const listKeyDownHandler = e => {
-    if (e.code === DOWN_ARROW) {
-      const elem = getNextFocusable(listRef.current, true, true);
-      elem.focus();
-    }
+    // Setup the event listener for each config entry
+    configs.forEach(setupListener);
 
-    if (e.code === UP_ARROW) {
-      const elem = getPreviousFocusable(listRef.current, true, true);
-      elem.focus();
-    }
+    // Cleanup any event listeners
+    return () => {
+      cleanups.forEach(cleanup => cleanup());
+    };
 
-    if (e.code === TAB) {
-      e.preventDefault();
-      let elem;
-      if (!e.shiftKey && !footerRef.current) {
-        elem = getNextFocusable(searchFieldComponent, false);
-      } else if (!e.shiftKey) {
-        elem = getNextFocusable(footerRef.current, true, true, true, true);
-      } else {
-        elem = searchFieldComponent;
-      }
-      elem.focus();
-    }
-  };
+    // Re-add the listener ANY time any of the elements changes (this is why we're using callback refs)
+  }, [header, trigger, footer, list]);
 
-  const handleNextFocus = () => getNextFocusable(searchFieldComponent, false).focus();
+  // TODO is this still necessary?
+  const handleNextFocus = () => getNextFocusable(trigger, false).focus();
 
   // SET UP VARIABLES
   const { open } = useTypedownToggle(name);
@@ -139,13 +157,13 @@ const useTypedown = (
     refs: {
       listRef,
       triggerRef,
+      triggerComponentRef,
       overlayRef,
-      footerRef
+      footerRef,
+      headerRef
     },
     handlers: {
       handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
     },
     variables: {
       open: useOpen ? open : false,

package/styles/TypeDown.css

@@ -121,3 +121,7 @@ div[class^="overlay"][x-out-of-boundaries=""] > div[class^="dropdownMenu"] > div
 .footer {
   padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds)
 }
+
+.header {
+    padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds)
+}