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

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [5.31.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.31.0...v5.31.1) (2025-12-12)
+
+
+### Bug Fixes
+
+* **Typedown:** OverlayContainer catches previous focus when Typedown is first element in module ([a516fca](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/a516fca4d89c30b916f6ac09c27e9e995f9b5391))
+* **Typedown:** Typedown focus issues have been sorted, ButtonTypedown remembers what was typed ([15f8e11](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/15f8e111fbbe3a125f95e61ba1d21727de293607))
+
+# [5.31.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.30.0...v5.31.0) (2025-12-12)
+
+
+### Bug Fixes
+
+* **Typedown:** Prevent typedown from closing when scrollbar is clicked ([34d072a](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/34d072ab76570953343f6ab221eb7a87e0e0957b))
+
+
+### Features
+
+* **ButtonTypedown:** Added new Typedown variant specifically designed to work more like a dropdown with the search inside the list ([7d2be52](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/7d2be52ab9015cfbd11920c7ba193d3f7a2fff9f))
+* **Typedown:** Ability to renderHeader, improvements to focus handling ([d7cd617](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/d7cd617f5e66840d83deca046d3dc51979f6be69))
+* **Typedown:** Typedown renderTrigger and getDisplayValue ([3c492ca](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/3c492ca8de9cb3a0c2d48d99670a4e6b187bb3d0))
+
 # [5.30.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.29.1...v5.30.0) (2025-12-10)
 
 

package/es/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   ActionList: true,
   Typedown: true,
   QueryTypedown: true,
+  ButtonTypedown: true,
   SearchField: true,
   SearchKeyControl: true,
   SASQRoute: true,
@@ -53,6 +54,12 @@ Object.defineProperty(exports, "ActionList", {
     return _ActionList.default;
   }
 });
+Object.defineProperty(exports, "ButtonTypedown", {
+  enumerable: true,
+  get: function () {
+    return _ButtonTypedown.default;
+  }
+});
 Object.defineProperty(exports, "ComboButton", {
   enumerable: true,
   get: function () {
@@ -339,6 +346,7 @@ Object.keys(_Settings).forEach(function (key) {
 var _ActionList = _interopRequireDefault(require("./lib/ActionList"));
 var _Typedown = _interopRequireDefault(require("./lib/Typedown"));
 var _QueryTypedown = _interopRequireDefault(require("./lib/QueryTypedown"));
+var _ButtonTypedown = _interopRequireDefault(require("./lib/ButtonTypedown"));
 var _SearchField = _interopRequireDefault(require("./lib/SearchField"));
 var _SearchKeyControl = _interopRequireDefault(require("./lib/SearchKeyControl"));
 var _SASQRoute = _interopRequireDefault(require("./lib/SASQRoute"));

package/es/lib/ButtonTypedown/ButtonTypedown.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _components = require("@folio/stripes/components");
+var _SearchField = _interopRequireDefault(require("../SearchField"));
+var _Typedown = _interopRequireDefault(require("../Typedown"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ButtonTypedown = _ref => {
+  let {
+    id,
+    renderListItem,
+    ...typedownProps
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typedown.default, {
+    getDisplayValue: () => false,
+    renderHeader: _ref2 => {
+      let {
+        handleType,
+        currentlyTyped
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchField.default, {
+        id: `button-typedown-searchfield-${id}`,
+        marginBottom0: true,
+        onChange: handleType,
+        value: currentlyTyped
+      });
+    },
+    renderListItem: renderListItem,
+    renderTrigger: _ref3 => {
+      let {
+        selectedValue,
+        triggerComponentRef,
+        triggerId,
+        typedownTriggerKeyDownHandler
+      } = _ref3;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownButton, {
+        ref: triggerComponentRef,
+        buttonStyle: "dropdownItem",
+        fullWidth: true,
+        id: triggerId,
+        marginBottom0: true,
+        onKeyDown: typedownTriggerKeyDownHandler,
+        children: renderListItem(selectedValue)
+      });
+    },
+    ...typedownProps
+  });
+};
+var _default = exports.default = ButtonTypedown;
+ButtonTypedown.propTypes = {
+  onType: _propTypes.default.func.isRequired,
+  renderListItem: _propTypes.default.func.isRequired
+  // REST OF TYPEDOWN PROPS
+};

package/es/lib/ButtonTypedown/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ButtonTypedown.default;
+  }
+});
+var _ButtonTypedown = _interopRequireDefault(require("./ButtonTypedown"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/Typedown/Typedown.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -15,7 +15,6 @@ var _typedownHooks = require("../hooks/typedownHooks");
 var _selectorSafe = _interopRequireDefault(require("../utils/selectorSafe"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Typedown = _ref => {
   let {
     className,
@@ -23,6 +22,8 @@ const Typedown = _ref => {
     displayClearItem = true,
     displayValueWhileOpen = true,
     endOfList,
+    getDisplayValue,
+    // Can overrule displayValue entirely
     id,
     initialOpenDelay = 800,
     // Initial opening delay of 800ms (handles any stripes animations)
@@ -34,13 +35,16 @@ const Typedown = _ref => {
     onChange,
     onType,
     renderFooter = null,
+    renderHeader = null,
     renderListItem = null,
+    renderTrigger = null,
     required,
     selectedStyles,
     // A way to pass any styles that need to be applied globally on selection
     uniqueIdentificationPath = 'id'
   } = _ref;
   const selectedUniqueId = (0, _get.default)(input.value, uniqueIdentificationPath);
+  const [selectedValue, setSelectedValue] = (0, _react.useState)(input.value); // Track what's been selected in state as well
 
   // Display data needs to be in line with data options but also able to react to default handleType
   const [displayData, setDisplayData] = (0, _react.useState)(dataOptions);
@@ -53,7 +57,7 @@ const Typedown = _ref => {
   }, [dataOptions]);
 
   // Setup default handleType
-  const handleType = e => {
+  const handleType = (0, _react.useCallback)(e => {
     const regex = new RegExp(`${e.target.value.toLowerCase()}`);
     if (onType) {
       onType(e);
@@ -70,20 +74,20 @@ const Typedown = _ref => {
     } else {
       setExactMatch(false);
     }
-  };
+  }, [dataOptions, displayData, filterPath, onType, uniqueIdentificationPath]);
 
   // Hook to set up all the essentials
   const {
     refs: {
       listRef,
       triggerRef,
+      triggerComponentRef,
       overlayRef,
-      footerRef
+      footerRef,
+      headerRef
     },
     handlers: {
-      handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
+      handleNextFocus
     },
     variables: {
       open,
@@ -92,21 +96,50 @@ const Typedown = _ref => {
       searchWidth
     }
   } = (0, _typedownHooks.useTypedown)(input.name, {
+    dataOptions,
     timeout: initialOpenDelay
   });
   const renderItem = (0, _react.useCallback)(function (option) {
     let optionIsSelected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _TypeDown.default.listItem,
-      children: renderListItem ? renderListItem(option, currentlyTyped, exactMatch, optionIsSelected) : (0, _get.default)(option, uniqueIdentificationPath)
+      children: renderListItem ? renderListItem(option, currentlyTyped, exactMatch, optionIsSelected, selectedValue) : (0, _get.default)(option, uniqueIdentificationPath)
     });
-  }, [currentlyTyped, exactMatch, renderListItem, uniqueIdentificationPath]);
+  }, [currentlyTyped, exactMatch, renderListItem, selectedValue, uniqueIdentificationPath]);
   const handleChange = (0, _react.useCallback)(value => {
     input.onChange(value);
+    setSelectedValue(value);
     if (typeof onChange === 'function') {
       onChange(value);
     }
   }, [input, onChange]);
+  const renderTypedownTrigger = () => {
+    const triggerComponentId = `typedown-trigger-${(0, _selectorSafe.default)(input.name)}`;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: triggerRef,
+      id: `typedown-parent-${(0, _selectorSafe.default)(input.name)}-trigger`,
+      children: renderTrigger ? renderTrigger({
+        // Pass all props in that searchfield uses.
+        handleType,
+        input,
+        // Pass input? Useful when not controlled I guess
+        meta,
+        selectedValue,
+        triggerComponentId,
+        triggerComponentRef
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchField.default, {
+        ref: triggerComponentRef
+        // Pass meta through so correct styling gets applied to the TextField
+        ,
+        id: triggerComponentId,
+        label: label,
+        marginBottom0: true,
+        meta: meta,
+        onChange: handleType,
+        required: required
+      })
+    });
+  };
   const dropDown = (0, _react.useCallback)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _TypeDown.default.dropdownMenu,
@@ -114,27 +147,43 @@ const Typedown = _ref => {
       style: {
         '--searchWidth': `${searchWidth}px`
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [renderHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: headerRef,
+        className: _TypeDown.default.header,
+        id: `typedown-header-${(0, _selectorSafe.default)(input.name)}`,
+        children: renderHeader({
+          currentlyTyped,
+          displayData,
+          handleType,
+          exactMatch
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: listRef,
         className: _TypeDown.default.listContainer,
-        id: "typedown-list",
+        id: "typedown-list"
+        /* This is an acceptable exception to the no-static-element-interactions
+         * as we are only PREVENTING interactions, namely focus change on scrollbar click
+         * Without this, the typedown closes instantly when the scrollbar is clicked or dragged.
+         * This does NOT prevent item click, as e.propagation is not prevented.
+         */,
+        onMouseDown: e => e.preventDefault(),
         children: displayData?.length ? displayData?.map((d, index) => {
           const isSelectedEval = isSelected ? isSelected(input.value, d) : (0, _get.default)(input.value, uniqueIdentificationPath) === (0, _get.default)(d, uniqueIdentificationPath);
           const selectedCSS = selectedStyles ?? _TypeDown.default.selectedMenuButton;
+          const uniqueButtonKey = `typedown-button-[${(0, _get.default)(d, uniqueIdentificationPath)}]`;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
             className: (0, _classnames.default)(_TypeDown.default.fullWidth, _TypeDown.default.menuButton, {
               [`${selectedCSS}`]: isSelectedEval
             }),
             "data-selected": isSelectedEval,
-            id: `typedown-button-[${index}]`,
+            id: uniqueButtonKey,
             onClick: () => {
               handleChange(d);
               handleNextFocus();
             },
-            onKeyDown: listKeyDownHandler,
             type: "button",
             children: renderItem(d, isSelectedEval)
-          }, `typedown-button-[${index}]`);
+          }, uniqueButtonKey);
         }) : endOfList || /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.EndOfList, {})
       }), renderFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: footerRef,
@@ -143,32 +192,33 @@ const Typedown = _ref => {
         children: renderFooter(displayData, currentlyTyped, exactMatch)
       })]
     });
-  }, [currentlyTyped, displayData, endOfList, exactMatch, footerRef, handleChange, handleNextFocus, input.name, input.value, isSelected, listKeyDownHandler, listRef, renderFooter, renderItem, searchWidth, selectedStyles, uniqueIdentificationPath]);
-  const renderSearchField = () => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: triggerRef,
-      id: `typedown-parent-${(0, _selectorSafe.default)(input.name)}-searchField`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchField.default
-      // Pass meta through so correct styling gets applied to the TextField
-      , {
-        id: `typedown-searchField-${(0, _selectorSafe.default)(input.name)}`,
-        label: label,
-        marginBottom0: true,
-        meta: meta,
-        onChange: handleType,
-        onKeyDown: searchFieldKeyDownHandler,
-        required: required
-      })
-    });
-  };
+  }, [currentlyTyped, displayData, endOfList, exactMatch, footerRef, handleChange, handleNextFocus, handleType, headerRef, input.name, input.value, isSelected, listRef, renderFooter, renderHeader, renderItem, searchWidth, selectedStyles, uniqueIdentificationPath]);
+  const renderSelectedItem = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_TypeDown.default.selectedDisplay),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _TypeDown.default.selectedItem,
+      children: renderItem(input.value)
+    }), displayClearItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+      className: _TypeDown.default.clearItem,
+      icon: "times-circle-solid",
+      onClick: () => handleChange()
+    })]
+  }), [displayClearItem, handleChange, input.value, renderItem]);
   const displayValue = (0, _react.useMemo)(() => {
+    // Allow full control over whether to display the value
+    if (getDisplayValue) {
+      return getDisplayValue({
+        selectedUniqueId,
+        open
+      });
+    }
     return !!selectedUniqueId && (!open || displayValueWhileOpen);
-  }, [displayValueWhileOpen, open, selectedUniqueId]);
+  }, [displayValueWhileOpen, getDisplayValue, open, selectedUniqueId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: resizeRef,
     className: (0, _classnames.default)(_TypeDown.default.typedown, className),
     id: `typedown-id-${id}`,
-    children: [renderSearchField(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popper, {
+    children: [renderTypedownTrigger(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popper, {
       anchorRef: triggerRef,
       className: (0, _classnames.default)(_TypeDown.default.dropdown, _TypeDown.default.fullWidth),
       isOpen: open,
@@ -192,17 +242,7 @@ const Typedown = _ref => {
       overlayRef: overlayRef,
       portal: portal,
       children: dropDown()
-    }, "typedown-menu-toggle"), displayValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)(_TypeDown.default.selectedDisplay),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: _TypeDown.default.selectedItem,
-        children: renderItem(input.value)
-      }), displayClearItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
-        className: _TypeDown.default.clearItem,
-        icon: "times-circle-solid",
-        onClick: () => handleChange()
-      })]
-    })]
+    }, "typedown-menu-toggle"), displayValue && renderSelectedItem()]
   });
 };
 Typedown.propTypes = {
@@ -212,6 +252,7 @@ Typedown.propTypes = {
   displayValueWhileOpen: _propTypes.default.bool,
   endOfList: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node, _propTypes.default.element]),
   filterPath: _propTypes.default.string,
+  getDisplayValue: _propTypes.default.func,
   id: _propTypes.default.string,
   initialOpenDelay: _propTypes.default.number,
   input: _propTypes.default.object,
@@ -220,8 +261,10 @@ Typedown.propTypes = {
   meta: _propTypes.default.object,
   onChange: _propTypes.default.func,
   onType: _propTypes.default.func,
+  renderHeader: _propTypes.default.func,
   renderFooter: _propTypes.default.func,
   renderListItem: _propTypes.default.func,
+  renderTrigger: _propTypes.default.func,
   required: _propTypes.default.bool,
   selectedStyles: _propTypes.default.string,
   uniqueIdentificationPath: _propTypes.default.string

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

@@ -8,97 +8,163 @@ var _react = require("react");
 var _reactResizeDetector = require("react-resize-detector");
 var _components = require("@folio/stripes/components");
 var _eventCodes = require("../../constants/eventCodes");
-var _selectorSafe = _interopRequireDefault(require("../../utils/selectorSafe"));
 var _useTypedownToggle = _interopRequireDefault(require("./useTypedownToggle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useTypedown = function (name) {
   let {
+    dataOptions,
     timeout = 800
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // SEARCHFIELD COMPONENT
-  const searchFieldComponent = document.getElementById(`typedown-searchField-${(0, _selectorSafe.default)(name)}`);
+  // SET UP STATE HOLDING DOM ELEMENTS
+  const [list, setList] = (0, _react.useState)();
+  const [trigger, setTrigger] = (0, _react.useState)();
+  const [footer, setFooter] = (0, _react.useState)();
+  const [header, setHeader] = (0, _react.useState)();
 
   // SET UP REFS
-  const listRef = (0, _react.useRef)();
   const triggerRef = (0, _react.useRef)();
   const overlayRef = (0, _react.useRef)();
-  const footerRef = (0, _react.useRef)();
-  const footer = document.getElementById(`typedown-footer-${(0, _selectorSafe.default)(name)}`);
-  // Add an event listener to the footer, so that we can control tab behaviour between footer elements
+  const listRef = (0, _react.useCallback)(node => setList(node), []);
+  const triggerComponentRef = (0, _react.useCallback)(node => setTrigger(node), []);
+  const footerRef = (0, _react.useCallback)(node => setFooter(node), []);
+  const headerRef = (0, _react.useCallback)(node => setHeader(node), []);
 
-  if (footer && footer.getAttribute('hasListener') !== 'true') {
-    footer.addEventListener('keydown', e => {
-      // We want special behaviour on tab
-      if (e.code === _eventCodes.TAB) {
-        // Prevent the default behaviour
-        e.preventDefault();
-        const focusFunc = e.shiftKey ? _components.getPreviousFocusable : _components.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
-          (0, _components.getNextFocusable)(searchFieldComponent, false).focus();
-        }
-      }
-    });
-    footer.setAttribute('hasListener', 'true');
-  }
-
-  // SET UP HANDLERS
-  const searchFieldKeyDownHandler = e => {
-    if (e.code === _eventCodes.UP_ARROW) {
-      const elem = (0, _components.getLastFocusable)(listRef.current, true, true);
-      if (elem) {
-        elem.focus();
-      }
-    }
-    if (e.code === _eventCodes.DOWN_ARROW) {
-      const elem = (0, _components.getFirstFocusable)(listRef.current, true, true);
-      if (elem) {
-        elem.focus();
-      }
+  // OVERLAY PORTAL
+  const portal = document.getElementById('OverlayContainer');
+  const getPreviousToTrigger = (0, _react.useCallback)(() => {
+    const prevElem = (0, _components.getPreviousFocusable)(trigger, false, false, false);
+    if (prevElem.closest('[id^=OverlayContainer]') !== null) {
+      // 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
+      return (0, _components.getPreviousFocusable)(portal, false, false, false);
     }
+    return prevElem;
+  }, [portal, trigger]);
+  (0, _react.useEffect)(() => {
+    const cleanups = [];
 
-    // Tab key (But not while shifting)
-    if (e.code === _eventCodes.TAB && !e.shiftKey) {
-      e.preventDefault();
-      // If we have focusable elements in the footer, then focus on them, else unfocus searchbar
-      const elem = (0, _components.getNextFocusable)(footerRef.current, true, true, true, true);
-      if (elem) {
-        elem.focus();
-      } else {
-        (0, _components.getNextFocusable)(searchFieldComponent, false).focus();
-      }
-    }
-  };
-  const listKeyDownHandler = e => {
-    if (e.code === _eventCodes.DOWN_ARROW) {
-      const elem = (0, _components.getNextFocusable)(listRef.current, true, true);
-      elem.focus();
-    }
-    if (e.code === _eventCodes.UP_ARROW) {
-      const elem = (0, _components.getPreviousFocusable)(listRef.current, true, true);
-      elem.focus();
-    }
-    if (e.code === _eventCodes.TAB) {
-      e.preventDefault();
-      let elem;
-      if (!e.shiftKey && !footerRef.current) {
-        elem = (0, _components.getNextFocusable)(searchFieldComponent, false);
-      } else if (!e.shiftKey) {
-        elem = (0, _components.getNextFocusable)(footerRef.current, true, true, true, true);
-      } else {
-        elem = searchFieldComponent;
-      }
-      elem.focus();
-    }
-  };
-  const handleNextFocus = () => (0, _components.getNextFocusable)(searchFieldComponent, false).focus();
+    // 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
+    setTimeout(() => {
+      // Split these out to shut up the linter
+      const rawFirstItemInList = list ? (0, _components.getFirstFocusable)(list) : null;
+      const rawLastItemInList = list ? (0, _components.getLastFocusable)(list) : null;
+
+      // If there are no dataOptions, this can get a bit stuck, so deliberately set to null when no dataOptions are present
+      const firstItemInList = dataOptions.length > 0 ? rawFirstItemInList : null;
+      const lastItemInList = dataOptions.length > 0 ? rawLastItemInList : null;
+      const configs = [
+      // --- HEADER CONFIG ---
+      {
+        element: header,
+        allowTabThroughContents: true,
+        previousElement: trigger,
+        nextElement: (footer ? (0, _components.getFirstFocusable)(footer) : null) ?? (0, _components.getNextFocusable)(trigger, false),
+        downElement: firstItemInList,
+        upElement: lastItemInList
+      },
+      // --- FOOTER CONFIG ---
+      {
+        element: footer,
+        allowTabThroughContents: true,
+        previousElement: (header ? (0, _components.getLastFocusable)(header) : null) ?? trigger,
+        nextElement: (0, _components.getNextFocusable)(trigger, false),
+        downElement: firstItemInList,
+        upElement: lastItemInList
+      },
+      // --- LIST/CONTAINER CONFIG ---
+      {
+        element: list,
+        allowUpDownThroughContents: true,
+        previousElement: (header ? (0, _components.getLastFocusable)(header) : null) ?? trigger,
+        nextElement: (footer ? (0, _components.getFirstFocusable)(footer) : null) ?? (0, _components.getNextFocusable)(trigger, false)
+      },
+      // --- TRIGGER CONFIG ---
+      {
+        element: trigger,
+        nextElement: (header ? (0, _components.getFirstFocusable)(header) : null) ?? (footer ? (0, _components.getFirstFocusable)(footer) : null) ?? (0, _components.getNextFocusable)(trigger, false),
+        previousElement: getPreviousToTrigger(),
+        downElement: firstItemInList,
+        upElement: lastItemInList
+      }].filter(c => c.element); // Filter out configs where the element (e.g., header) is null
+
+      const setupListener = config => {
+        const {
+          element,
+          allowTabThroughContents,
+          previousElement,
+          nextElement,
+          allowUpDownThroughContents,
+          downElement,
+          upElement
+        } = config;
+        const handleTab = e => {
+          const IS_SHIFT = e.shiftKey;
+          const tabIgnoreContents = () => {
+            if (IS_SHIFT) {
+              return previousElement?.focus();
+            }
+            return nextElement?.focus();
+          };
+          if (!allowTabThroughContents) {
+            return tabIgnoreContents();
+          }
+          const focusFunc = IS_SHIFT ? _components.getPreviousFocusable : _components.getNextFocusable;
+          const elem = focusFunc(element, true, true, false, true);
+          if (elem) {
+            return elem.focus();
+          }
+          return tabIgnoreContents();
+        };
+        const handleUpDown = e => {
+          // Prevent the default behaviour
+          const IS_UP = e.code === _eventCodes.UP_ARROW;
+          const upDownIgnoreContents = () => {
+            if (IS_UP) {
+              return upElement?.focus();
+            }
+            return downElement?.focus();
+          };
+          if (!allowUpDownThroughContents) {
+            return upDownIgnoreContents();
+          }
+          const focusFunc = IS_UP ? _components.getPreviousFocusable : _components.getNextFocusable;
+          const elem = focusFunc(element, true, true, true, true); // Allow looping through elements
+          if (elem) {
+            return elem.focus();
+          }
+          return upDownIgnoreContents();
+        };
+        const handler = e => {
+          if (!element.contains(document.activeElement)) {
+            return;
+          }
+          if (e.code === _eventCodes.TAB) {
+            e.preventDefault();
+            handleTab(e);
+          } else if (e.code === _eventCodes.DOWN_ARROW || e.code === _eventCodes.UP_ARROW) {
+            e.preventDefault();
+            handleUpDown(e);
+          }
+        };
+
+        // Add event listener and add the removal of said event listener to the cleanup function
+        element.addEventListener('keydown', handler);
+        cleanups.push(() => element.removeEventListener('keydown', handler));
+      };
+
+      // Set up the event listener for each config entry
+      configs.forEach(setupListener);
+    }, 0);
+
+    // Cleanup any event listeners
+    return () => {
+      cleanups.forEach(cleanup => cleanup());
+    };
+    // Re-add the listener ANY time any of the elements changes (this is why we're using callback refs)
+  }, [dataOptions, header, trigger, footer, list, getPreviousToTrigger]);
+  const handleNextFocus = () => (0, _components.getNextFocusable)(trigger, false).focus();
 
   // SET UP VARIABLES
   const {
@@ -120,20 +186,17 @@ const useTypedown = function (name) {
     width: searchWidth,
     ref: resizeRef
   } = (0, _reactResizeDetector.useResizeDetector)();
-
-  // OVERLAY PORTAL
-  const portal = document.getElementById('OverlayContainer');
   return {
     refs: {
       listRef,
       triggerRef,
+      triggerComponentRef,
       overlayRef,
-      footerRef
+      footerRef,
+      headerRef
     },
     handlers: {
-      handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
+      handleNextFocus
     },
     variables: {
       open: useOpen ? open : false,