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

package/src/artifacts/coverage-jest/utils/refdataQueryKey/index.html

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

package/src/artifacts/coverage-jest/utils/refdataQueryKey/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-12T16:39:50.848Z
+                at 2025-12-15T10:03:18.716Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/refdataQueryKey/refdataQueryKey.js.html

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

package/src/artifacts/coverage-jest/utils/selectorSafe.js.html

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

package/src/artifacts/coverage-jest/utils/sortByLabel.js.html

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

package/src/artifacts/coverage-jest/utils/toCamelCase.js.html

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

package/src/artifacts/coverage-jest/utils/typedownQueryKey.js.html

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

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

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

package/src/artifacts/coverage-jest/validators/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-12T16:39:50.848Z
+                at 2025-12-15T10:03:18.716Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

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

package/src/lib/ButtonTypedown/ButtonTypedown.js

@@ -6,17 +6,18 @@ import SearchField from '../SearchField';
 import Typedown from '../Typedown';
 
 const ButtonTypedown = ({
-  onType, // We need these manually
+  id,
   renderListItem,
   ...typedownProps
 }) => {
   return (
     <Typedown
       getDisplayValue={() => false}
-      renderHeader={({ currentlyTyped }) => (
+      renderHeader={({ handleType, currentlyTyped }) => (
         <SearchField
+          id={`button-typedown-searchfield-${id}`}
           marginBottom0
-          onChange={onType}
+          onChange={handleType}
           value={currentlyTyped}
         />
       )}

package/src/lib/SearchField/SearchField.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Icon, TextField } from '@folio/stripes/components';
 
@@ -12,7 +12,7 @@ const propTypes = {
   onClear: PropTypes.func,
 };
 
-const SearchField = (props) => {
+const SearchField = forwardRef((props, ref) => {
   const {
     ariaLabel,
     ...rest
@@ -32,11 +32,12 @@ const SearchField = (props) => {
       aria-label={rest['aria-label'] || ariaLabel}
       focussedclass={css.isFocused}
       hasClearIcon
+      inputRef={ref}
       startControl={searchIcon}
       type="search"
     />
   );
-};
+});
 
 SearchField.propTypes = propTypes;
 

package/src/lib/Typedown/Typedown.js

@@ -94,6 +94,7 @@ const Typedown = ({
   } = useTypedown(
     input.name,
     {
+      dataOptions,
       timeout: initialOpenDelay
     }
   );
@@ -188,16 +189,18 @@ const Typedown = ({
             const isSelectedEval = isSelected ? isSelected(input.value, d) : get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
 
             const selectedCSS = selectedStyles ?? css.selectedMenuButton;
+
+            const uniqueButtonKey = `typedown-button-[${get(d, uniqueIdentificationPath)}]`;
             return (
               <button
-                key={`typedown-button-[${index}]`}
+                key={uniqueButtonKey}
                 className={classnames(
                   css.fullWidth,
                   css.menuButton,
                   { [`${selectedCSS}`]: isSelectedEval },
                 )}
                 data-selected={isSelectedEval}
-                id={`typedown-button-[${index}]`}
+                id={uniqueButtonKey}
                 onClick={() => {
                   handleChange(d);
                   handleNextFocus();

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

@@ -18,119 +18,175 @@ import useTypedownToggle from './useTypedownToggle';
 
 const useTypedown = (
   name,
-  { timeout = 800 } = {}
+  {
+    dataOptions,
+    timeout = 800
+  } = {}
 ) => {
   // SET UP STATE HOLDING DOM ELEMENTS
-  const [list, setListElement] = useState();
-  const [trigger, setTriggerElement] = useState();
-  const [footer, setFooterElement] = useState();
-  const [header, setHeaderElement] = useState();
+  const [list, setList] = useState();
+  const [trigger, setTrigger] = useState();
+  const [footer, setFooter] = useState();
+  const [header, setHeader] = useState();
 
   // SET UP REFS
   const triggerRef = useRef();
   const overlayRef = useRef();
-  const listRef = useCallback(node => setListElement(node), []);
-  const triggerComponentRef = useCallback(node => setTriggerElement(node), []);
-  const footerRef = useCallback(node => setFooterElement(node), []);
-  const headerRef = useCallback(node => setHeaderElement(node), []);
+  const listRef = useCallback(node => setList(node), []);
+  const triggerComponentRef = useCallback(node => setTrigger(node), []);
+  const footerRef = useCallback(node => setFooter(node), []);
+  const headerRef = useCallback(node => setHeader(node), []);
 
-  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
+  // OVERLAY PORTAL
+  const portal = document.getElementById('OverlayContainer');
+
+  const getPreviousToTrigger = useCallback(() => {
+    const prevElem = 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 getPreviousFocusable(portal, false, false, false);
+    }
+    return prevElem;
+  }, [portal, trigger]);
 
+  useEffect(() => {
     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();
+
+    // 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 ? getFirstFocusable(list) : null);
+      const rawLastItemInList = (list ? 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) > 0 ? rawFirstItemInList : null;
+      const lastItemInList = (dataOptions?.length ?? 0) > 0 ? rawLastItemInList : null;
+
+      const configs = [
+        // --- HEADER CONFIG ---
+        {
+          element: header,
+          allowTabThroughContents: true,
+          previousElement: trigger,
+          nextElement: (footer ? getFirstFocusable(footer) : null) ?? getNextFocusable(trigger, false),
+          downElement: firstItemInList,
+          upElement: lastItemInList,
+        },
+        // --- FOOTER CONFIG ---
+        {
+          element: footer,
+          allowTabThroughContents: true,
+          previousElement: (header ? getLastFocusable(header) : null) ?? trigger,
+          nextElement: getNextFocusable(trigger, false),
+          downElement: firstItemInList,
+          upElement: lastItemInList,
+        },
+        // --- LIST/CONTAINER CONFIG ---
+        {
+          element: list,
+          allowUpDownThroughContents: true,
+          previousElement: (header ? getLastFocusable(header) : null) ?? trigger,
+          nextElement: (footer ? getFirstFocusable(footer) : null) ?? getNextFocusable(trigger, false)
+        },
+        // --- TRIGGER CONFIG ---
+        {
+          element: trigger,
+          nextElement: (header ? getFirstFocusable(header) : null) ?? (footer ? getFirstFocusable(footer) : null) ?? getNextFocusable(trigger, false),
+          previousElement: getPreviousToTrigger(),
+          downElement: firstItemInList,
+          upElement: lastItemInList,
+        }
+      ].filter(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();
             }
-          } else if (e.shiftKey) {
-            config.previousElement.focus();
-          } else {
-            config.nextElement.focus();
+            return nextElement?.focus();
+          };
+
+          if (!allowTabThroughContents) {
+            return tabIgnoreContents();
+          }
+
+          const focusFunc = IS_SHIFT ? getPreviousFocusable : getNextFocusable;
+          const elem = focusFunc(element, true, true, false, true);
+          if (elem) {
+            return elem.focus();
           }
-        } else if (e.code === DOWN_ARROW || e.code === UP_ARROW) {
-          e.preventDefault();
+
+          return tabIgnoreContents();
+        };
+
+        const handleUpDown = e => {
           // Prevent the default behaviour
-          e.preventDefault();
+          const IS_UP = e.code === UP_ARROW;
 
-          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();
+          const upDownIgnoreContents = () => {
+            if (IS_UP) {
+              return upElement?.focus();
             }
-          } else if (e.code === UP_ARROW) {
-            config.upElement.focus();
-          } else {
-            config.downElement.focus();
+            return downElement?.focus();
+          };
+
+          if (!allowUpDownThroughContents) {
+            return upDownIgnoreContents();
           }
-        }
-      };
 
-      // 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 focusFunc = IS_UP ? getPreviousFocusable : 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 === TAB) {
+            e.preventDefault();
+            handleTab(e);
+          } else if (e.code === DOWN_ARROW || e.code === 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));
+      };
 
-    // Setup the event listener for each config entry
-    configs.forEach(setupListener);
+      // 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)
-  }, [header, trigger, footer, list]);
+  }, [dataOptions, header, trigger, footer, list, getPreviousToTrigger]);
 
-  // TODO is this still necessary?
   const handleNextFocus = () => getNextFocusable(trigger, false).focus();
 
   // SET UP VARIABLES
@@ -150,9 +206,6 @@ const useTypedown = (
   // RESIZE STUFF
   const { width: searchWidth, ref: resizeRef } = useResizeDetector();
 
-  // OVERLAY PORTAL
-  const portal = document.getElementById('OverlayContainer');
-
   return {
     refs: {
       listRef,