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

package/src/lib/Typedown/Typedown.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
@@ -18,6 +18,7 @@ const Typedown = ({
   displayClearItem = true,
   displayValueWhileOpen = true,
   endOfList,
+  getDisplayValue, // Can overrule displayValue entirely
   id,
   initialOpenDelay = 800, // Initial opening delay of 800ms (handles any stripes animations)
   input,
@@ -28,12 +29,15 @@ const Typedown = ({
   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'
 }) => {
   const selectedUniqueId = get(input.value, uniqueIdentificationPath);
+  const [selectedValue, setSelectedValue] = 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] = useState(dataOptions);
@@ -47,7 +51,7 @@ const Typedown = ({
   }, [dataOptions]);
 
   // Setup default handleType
-  const handleType = (e) => {
+  const handleType = useCallback((e) => {
     const regex = new RegExp(`${e.target.value.toLowerCase()}`);
     if (onType) {
       onType(e);
@@ -66,20 +70,20 @@ const Typedown = ({
     } 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
     },
     variables: {
       open,
@@ -90,6 +94,7 @@ const Typedown = ({
   } = useTypedown(
     input.name,
     {
+      dataOptions,
       timeout: initialOpenDelay
     }
   );
@@ -99,20 +104,53 @@ const Typedown = ({
       className={css.listItem}
     >
       {renderListItem ?
-        renderListItem(option, currentlyTyped, exactMatch, optionIsSelected) :
+        renderListItem(option, currentlyTyped, exactMatch, optionIsSelected, selectedValue) :
         get(option, uniqueIdentificationPath)
       }
     </div>
-  ), [currentlyTyped, exactMatch, renderListItem, uniqueIdentificationPath]);
+  ), [currentlyTyped, exactMatch, renderListItem, selectedValue, uniqueIdentificationPath]);
 
   const handleChange = useCallback(value => {
     input.onChange(value);
+    setSelectedValue(value);
 
     if (typeof onChange === 'function') {
       onChange(value);
     }
   }, [input, onChange]);
 
+  const renderTypedownTrigger = () => {
+    const triggerComponentId = `typedown-trigger-${selectorSafe(input.name)}`;
+    return (
+      <div
+        ref={triggerRef}
+        id={`typedown-parent-${selectorSafe(input.name)}-trigger`}
+      >
+        {renderTrigger ?
+          renderTrigger({ // Pass all props in that searchfield uses.
+            handleType,
+            input, // Pass input? Useful when not controlled I guess
+            meta,
+            selectedValue,
+            triggerComponentId,
+            triggerComponentRef,
+          })
+          :
+          <SearchField
+            ref={triggerComponentRef}
+            // Pass meta through so correct styling gets applied to the TextField
+            id={triggerComponentId}
+            label={label}
+            marginBottom0
+            meta={meta}
+            onChange={handleType}
+            required={required}
+          />
+        }
+      </div>
+    );
+  };
+
   const dropDown = useCallback(() => {
     return (
       <div
@@ -120,30 +158,53 @@ const Typedown = ({
         id={`typedown-parent-${selectorSafe(input.name)}-menu`}
         style={{ '--searchWidth': `${searchWidth}px` }}
       >
+        {renderHeader &&
+          <div
+            ref={headerRef}
+            className={css.header}
+            id={`typedown-header-${selectorSafe(input.name)}`}
+          >
+            {/* Adopt a more extensible pattern for renderHeader, renderFooter will eventually follow */}
+            {renderHeader({
+              currentlyTyped,
+              displayData,
+              handleType,
+              exactMatch
+            })}
+          </div>
+        }
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
           ref={listRef}
           className={css.listContainer}
           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()}
         >
           {displayData?.length ? displayData?.map((d, index) => {
             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();
                 }}
-                onKeyDown={listKeyDownHandler}
                 type="button"
               >
                 {renderItem(d, isSelectedEval)}
@@ -172,41 +233,52 @@ const Typedown = ({
     footerRef,
     handleChange,
     handleNextFocus,
+    handleType,
+    headerRef,
     input.name,
     input.value,
     isSelected,
-    listKeyDownHandler,
     listRef,
     renderFooter,
+    renderHeader,
     renderItem,
     searchWidth,
     selectedStyles,
     uniqueIdentificationPath
   ]);
 
-  const renderSearchField = () => {
-    return (
+  const renderSelectedItem = useCallback(() => (
+    <div
+      className={classnames(
+        css.selectedDisplay
+      )}
+    >
       <div
-        ref={triggerRef}
-        id={`typedown-parent-${selectorSafe(input.name)}-searchField`}
+        className={css.selectedItem}
       >
-        <SearchField
-          // Pass meta through so correct styling gets applied to the TextField
-          id={`typedown-searchField-${selectorSafe(input.name)}`}
-          label={label}
-          marginBottom0
-          meta={meta}
-          onChange={handleType}
-          onKeyDown={searchFieldKeyDownHandler}
-          required={required}
-        />
+        {renderItem(input.value)}
       </div>
-    );
-  };
+      {displayClearItem &&
+        <IconButton
+          className={css.clearItem}
+          icon="times-circle-solid"
+          onClick={() => handleChange()}
+        />
+      }
+    </div>
+  ), [displayClearItem, handleChange, input.value, renderItem]);
 
   const displayValue = 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 (
     <div
@@ -217,7 +289,7 @@ const Typedown = ({
       )}
       id={`typedown-id-${id}`}
     >
-      {renderSearchField()}
+      {renderTypedownTrigger()}
       <Popper
         key="typedown-menu-toggle"
         anchorRef={triggerRef}
@@ -240,26 +312,7 @@ const Typedown = ({
       >
         {dropDown()}
       </Popper>
-      {displayValue &&
-        <div
-          className={classnames(
-            css.selectedDisplay
-          )}
-        >
-          <div
-            className={css.selectedItem}
-          >
-            {renderItem(input.value)}
-          </div>
-          {displayClearItem &&
-            <IconButton
-              className={css.clearItem}
-              icon="times-circle-solid"
-              onClick={() => handleChange()}
-            />
-          }
-        </div>
-      }
+      {displayValue && renderSelectedItem()}
     </div>
   );
 };
@@ -275,6 +328,7 @@ Typedown.propTypes = {
     PropTypes.element
   ]),
   filterPath: PropTypes.string,
+  getDisplayValue: PropTypes.func,
   id: PropTypes.string,
   initialOpenDelay: PropTypes.number,
   input: PropTypes.object,
@@ -286,8 +340,10 @@ Typedown.propTypes = {
   meta: PropTypes.object,
   onChange: PropTypes.func,
   onType: PropTypes.func,
+  renderHeader: PropTypes.func,
   renderFooter: PropTypes.func,
   renderListItem: PropTypes.func,
+  renderTrigger: PropTypes.func,
   required: PropTypes.bool,
   selectedStyles: PropTypes.string,
   uniqueIdentificationPath: PropTypes.string

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,180 @@ import {
   UP_ARROW
 } from '../../constants/eventCodes';
 
-import selectorSafe from '../../utils/selectorSafe';
-
 import useTypedownToggle from './useTypedownToggle';
 
 const useTypedown = (
   name,
-  { timeout = 800 } = {}
+  {
+    dataOptions,
+    timeout = 800
+  } = {}
 ) => {
-  // SEARCHFIELD COMPONENT
-  const searchFieldComponent = document.getElementById(`typedown-searchField-${selectorSafe(name)}`);
+  // SET UP STATE HOLDING DOM ELEMENTS
+  const [list, setList] = useState();
+  const [trigger, setTrigger] = useState();
+  const [footer, setFooter] = useState();
+  const [header, setHeader] = 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();
-        }
-      }
-    });
-
-    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();
-      }
-    }
-
-    // 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();
-      }
-    }
-  };
-
-  const listKeyDownHandler = e => {
-    if (e.code === DOWN_ARROW) {
-      const elem = getNextFocusable(listRef.current, true, true);
-      elem.focus();
-    }
+  const listRef = useCallback(node => setList(node), []);
+  const triggerComponentRef = useCallback(node => setTrigger(node), []);
+  const footerRef = useCallback(node => setFooter(node), []);
+  const headerRef = useCallback(node => setHeader(node), []);
 
-    if (e.code === UP_ARROW) {
-      const elem = getPreviousFocusable(listRef.current, true, true);
-      elem.focus();
-    }
+  // OVERLAY PORTAL
+  const portal = document.getElementById('OverlayContainer');
 
-    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();
+  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]);
 
-  const handleNextFocus = () => getNextFocusable(searchFieldComponent, false).focus();
+  useEffect(() => {
+    const cleanups = [];
+
+    // 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 ? rawFirstItemInList : null;
+      const lastItemInList = dataOptions.length > 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();
+            }
+            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();
+          }
+
+          return tabIgnoreContents();
+        };
+
+        const handleUpDown = e => {
+          // Prevent the default behaviour
+          const IS_UP = e.code === UP_ARROW;
+
+          const upDownIgnoreContents = () => {
+            if (IS_UP) {
+              return upElement?.focus();
+            }
+            return downElement?.focus();
+          };
+
+          if (!allowUpDownThroughContents) {
+            return upDownIgnoreContents();
+          }
+
+          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));
+      };
+
+      // 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 = () => getNextFocusable(trigger, false).focus();
 
   // SET UP VARIABLES
   const { open } = useTypedownToggle(name);
@@ -132,20 +206,17 @@ const useTypedown = (
   // RESIZE STUFF
   const { width: searchWidth, ref: resizeRef } = useResizeDetector();
 
-  // OVERLAY PORTAL
-  const portal = document.getElementById('OverlayContainer');
-
   return {
     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)
+}