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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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,58 @@
+"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 {
+    onType,
+    // We need these manually
+    renderListItem,
+    ...typedownProps
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typedown.default, {
+    getDisplayValue: () => false,
+    renderHeader: _ref2 => {
+      let {
+        currentlyTyped
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchField.default, {
+        marginBottom0: true,
+        onChange: onType,
+        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,
@@ -98,15 +102,43 @@ const Typedown = _ref => {
     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,10 +146,26 @@ 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;
@@ -131,7 +179,6 @@ const Typedown = _ref => {
               handleChange(d);
               handleNextFocus();
             },
-            onKeyDown: listKeyDownHandler,
             type: "button",
             children: renderItem(d, isSelectedEval)
           }, `typedown-button-[${index}]`);
@@ -143,32 +190,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 +240,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 +250,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 +259,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,120 @@ 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 {
     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, setListElement] = (0, _react.useState)();
+  const [trigger, setTriggerElement] = (0, _react.useState)();
+  const [footer, setFooterElement] = (0, _react.useState)();
+  const [header, setHeaderElement] = (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 => setListElement(node), []);
+  const triggerComponentRef = (0, _react.useCallback)(node => setTriggerElement(node), []);
+  const footerRef = (0, _react.useCallback)(node => setFooterElement(node), []);
+  const headerRef = (0, _react.useCallback)(node => setHeaderElement(node), []);
+  (0, _react.useEffect)(() => {
+    const configs = [
+    // --- HEADER CONFIG ---
+    {
+      element: header,
+      allowTabThroughContents: true,
+      previousElement: trigger,
+      nextElement: (footer && (0, _components.getFirstFocusable)(footer)) ?? (0, _components.getNextFocusable)(trigger, false),
+      downElement: list && (0, _components.getFirstFocusable)(list),
+      upElement: list && (0, _components.getLastFocusable)(list)
+    },
+    // --- FOOTER CONFIG ---
+    {
+      element: footer,
+      allowTabThroughContents: true,
+      previousElement: (header && (0, _components.getLastFocusable)(header)) ?? trigger,
+      nextElement: (0, _components.getNextFocusable)(trigger, false),
+      downElement: list && (0, _components.getFirstFocusable)(list),
+      upElement: list && (0, _components.getLastFocusable)(list)
+    },
+    // --- LIST/CONTAINER CONFIG ---
+    {
+      element: list,
+      allowUpDownThroughContents: true,
+      previousElement: (header && (0, _components.getLastFocusable)(header)) ?? trigger,
+      nextElement: (footer && (0, _components.getFirstFocusable)(footer)) ?? (0, _components.getNextFocusable)(trigger, false)
+    },
+    // --- TRIGGER CONFIG ---
+    {
+      element: trigger,
+      nextElement: (header && (0, _components.getFirstFocusable)(header)) ?? (footer && (0, _components.getFirstFocusable)(footer)) ?? (0, _components.getNextFocusable)(trigger, false),
+      previousElement: (0, _components.getPreviousFocusable)(trigger, false),
+      downElement: list && (0, _components.getFirstFocusable)(list),
+      upElement: list && (0, _components.getLastFocusable)(list)
+    }].filter(c => c.element); // Filter out configs where the element (e.g., header) is null
 
-  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();
+    const cleanups = [];
+    const setupListener = config => {
+      const handler = e => {
+        if (e.code === _eventCodes.TAB) {
+          e.preventDefault();
+          if (config.allowTabThroughContents) {
+            const focusFunc = e.shiftKey ? _components.getPreviousFocusable : _components.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 === _eventCodes.DOWN_ARROW || e.code === _eventCodes.UP_ARROW) {
+          e.preventDefault();
+          // Prevent the default behaviour
+          e.preventDefault();
+          if (config.allowUpDownThroughContents) {
+            const focusFunc = e.code === _eventCodes.UP_ARROW ? _components.getPreviousFocusable : _components.getNextFocusable;
+            const elem = focusFunc(config.element, true, true, true, true); // Allow looping through elements
+            if (elem) {
+              elem.focus();
+            }
+          } else if (e.code === _eventCodes.UP_ARROW) {
+            config.upElement.focus();
+          } else {
+            config.downElement.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();
-      }
-    }
+      // 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));
+    };
 
-    // 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();
+    // Setup the event listener for each config entry
+    configs.forEach(setupListener);
+
+    // 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)
+  }, [header, trigger, footer, list]);
+
+  // TODO is this still necessary?
+  const handleNextFocus = () => (0, _components.getNextFocusable)(trigger, false).focus();
 
   // SET UP VARIABLES
   const {
@@ -127,13 +150,13 @@ const useTypedown = function (name) {
     refs: {
       listRef,
       triggerRef,
+      triggerComponentRef,
       overlayRef,
-      footerRef
+      footerRef,
+      headerRef
     },
     handlers: {
-      handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
+      handleNextFocus
     },
     variables: {
       open: useOpen ? open : false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.30.0",
+  "version": "5.31.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/artifacts/coverage-jest/ActionList/ActionList.js.html

@@ -358,7 +358,7 @@ export default ActionList;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ActionList/ActionListFieldArray.js.html

@@ -1495,7 +1495,7 @@ export default ActionListFieldArray;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ActionList/index.html

@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/ActionList/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>