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

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

@@ -175,7 +175,7 @@ export default matchString;
             <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/utils/modConfigEntriesQueryKey.js.html

@@ -127,7 +127,7 @@ export default modConfigEntriesQueryKey;
             <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/utils/parseErrorResponse.js.html

@@ -142,7 +142,7 @@ export default parseErrorResponse;
             <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/utils/parseModConfigEntry.js.html

@@ -115,7 +115,7 @@ export default parseModConfigEntry;
             <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/utils/refdataOptions.js.html

@@ -94,7 +94,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/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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </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-10T12:12:10.913Z
+                at 2025-12-12T16:39:50.848Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/index.js

@@ -22,6 +22,10 @@ export {
   default as QueryTypedown
 } from './lib/QueryTypedown';
 
+export {
+  default as ButtonTypedown
+} from './lib/ButtonTypedown';
+
 /* SASQ Stuff */
 // SearchField
 export {

package/src/lib/ButtonTypedown/ButtonTypedown.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+
+import { DropdownButton } from '@folio/stripes/components';
+
+import SearchField from '../SearchField';
+import Typedown from '../Typedown';
+
+const ButtonTypedown = ({
+  onType, // We need these manually
+  renderListItem,
+  ...typedownProps
+}) => {
+  return (
+    <Typedown
+      getDisplayValue={() => false}
+      renderHeader={({ currentlyTyped }) => (
+        <SearchField
+          marginBottom0
+          onChange={onType}
+          value={currentlyTyped}
+        />
+      )}
+      renderListItem={renderListItem}
+      renderTrigger={({
+        selectedValue,
+        triggerComponentRef,
+        triggerId,
+        typedownTriggerKeyDownHandler
+      }) => (
+        <DropdownButton
+          ref={triggerComponentRef}
+          buttonStyle="dropdownItem"
+          fullWidth
+          id={triggerId}
+          marginBottom0
+          onKeyDown={typedownTriggerKeyDownHandler}
+        >
+          {renderListItem(selectedValue)}
+        </DropdownButton>
+      )}
+      {...typedownProps}
+    />
+  );
+};
+
+export default ButtonTypedown;
+
+ButtonTypedown.propTypes = {
+  onType: PropTypes.func.isRequired,
+  renderListItem: PropTypes.func.isRequired,
+  // REST OF TYPEDOWN PROPS
+};

package/src/lib/ButtonTypedown/README.md

@@ -0,0 +1,53 @@
+# ButtonTypedown
+
+The `ButtonTypedown` component is a variant of the `Typedown` component that utilizes a **DropdownButton** as the primary trigger element. When the button is clicked, a dropdown list appears, with a **SearchField** rendered in the header for typing and filtering the options.
+
+It is ideal for scenarios where the selected value needs to be prominently displayed within a button context, and the search functionality is secondary, appearing only when the dropdown is active.
+
+## Basic Usage
+
+The component is a wrapper around `Typedown`, configuring the `renderTrigger` and `renderHeader` props internally.
+
+```javascript
+import { ButtonTypedown } from './ButtonTypedown'; // Adjust import path
+
+<ButtonTypedown
+  label="Select a User"
+  dataOptions={[
+    { id: 'u1', name: 'John Doe' },
+    { id: 'u2', name: 'Jane Smith' },
+    { id: 'u3', name: 'Alice Johnson' },
+  ]}
+  input={{
+    name: 'userField',
+    value: { id: 'u1', name: 'John Doe' }, // Example selected value
+    onChange: (value) => console.log('Selected:', value),
+  }}
+  // Custom function to render the option inside the button and in the list
+  renderListItem={(option) => option ? option.name : 'Select user...'}
+  // Custom function for fetching/filtering data when the user types
+  onType={(e) => {
+    // Implement custom filtering or data fetching based on e.target.value
+    console.log('User typed:', e.target.value);
+  }}
+  // All other standard Typedown props are supported
+/>
+```
+
+## How it Works
+
+The `ButtonTypedown` component passes the following predefined props to the underlying `Typedown`:
+
+* `renderTrigger`: Renders a `DropdownButton` (from `@folio/stripes/components`) that displays the selected value (via `renderListItem`) and acts as the open/close trigger.
+* `renderHeader`: Renders a `SearchField` (from `../SearchField`) inside the dropdown's menu. This is where the user types to filter the list.
+* `getDisplayValue`: Set to `() => false` to prevent the selected item from being rendered *below* the typedown, as the selected value is already displayed *inside* the trigger button.
+
+## Props
+
+Since `ButtonTypedown` is a wrapper around `Typedown`, it accepts **all** props of the base `Typedown` component. However, it specifically requires or overrides the above two props
+
+| Name                        | Type  | Description                                                                                                                                                                                                                                                      | Required |
+|-----------------------------|-------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
+| **onType**                  | func  | **Required.** A callback function `(event)` that is called when the user types in the search field (which appears in the dropdown header). You **must** use this to filter the `dataOptions` or fetch new data and update the `dataOptions` prop.                | ✓        |
+| **renderListItem**          | func  | **Required.** A function `(option, currentlyTyped, exactMatch, optionIsSelected)` that renders each item in the dropdown list. In `ButtonTypedown`, this function is **also** used to render the content *inside* the `DropdownButton` when an item is selected. | ✓        |
+| *...rest of Typedown props* | *...* | All other props supported by the base `Typedown` component (e.g., `dataOptions`, `input`, `filterPath`, `uniqueIdentificationPath`, etc.) are supported. Note that `renderTrigger` and `renderHeader` are overridden internally.                                 | ✕        |

package/src/lib/ButtonTypedown/index.js

@@ -0,0 +1 @@
+export { default } from './ButtonTypedown';

package/src/lib/Typedown/README.md

@@ -24,24 +24,27 @@ import Typedown from '@k-int/stripes-kint-components';
 
 ### Props
 
-| Name                     | Type      | Description                                                                                                                                                                                                                                                                                                                              | Default         | Required |
-|--------------------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|---|
-| className                | string    | CSS class name to apply to the component's outer div.                                                                                                                                                                                                                                                                                    |                 | ✕ |
-| dataOptions              | array     | An array of objects representing the dropdown options.  Each object should have a property (specified by `uniqueIdentificationPath`) that serves as a unique identifier.                                                                                                                                                                 |                 | ✓ |
-| displayClearItem         | bool      | Whether to display a clear icon when an item is selected.                                                                                                                                                                                                                                                                                | `true`          | ✕ |
-| displayValueWhileOpen    | bool      | Whether or not to display the "value" underneath the typedown search while the dropdown is open. Defaults to true to avoid size changing onClick.                                                                                                                                                                                        | `true`          | ✕ |
-| endOfList                | node/func | Component or function to render when the dropdown list is empty. Defaults to `<EndOfList />` from `@folio/stripes/components`.                                                                                                                                                                                                           | `<EndOfList />` | ✕ |
-| filterPath               | string    | Path to the property in `dataOptions` objects to use for filtering. If not provided, filtering is done on the property specified by `uniqueIdentificationPath`.                                                                                                                                                                          |                 | ✕ |
-| id                       | string    | Id to apply to the component's outer div.                                                                                                                                                                                                                                                                                                |                 | ✕ |
-| initialTimeoutDelay      | number    | Delay applied to `open` occurring on first render. Set to 800ms to avoid any stripes animations, such as being the first element focused in an opening modal.                                                                                                                                                                            | 800             | ✕ |
-| input                    | object | An object containing the input props typically provided by a form library like `react-final-form` or `redux-form`.  Should include `name`, `value`, and `onChange`.                                                                                                                                                                      |                 | ✓ |
-| isSelected               | func | A function `(inputValue, dataOption)` that determines if a given `dataOption` is currently selected. Useful when selected values are complex objects. If not provided, selection is determined by comparing the value of the `uniqueIdentificationPath` property of the `input.value` and the `dataOption`.                              |                 | ✕ |
-| label                    | string/element | Label for the input field.                                                                                                                                                                                                                                                                                                               |                 | ✕ |
-| meta                     | object | Meta information about the field, typically provided by a form library. Useful for displaying error messages etc.                                                                                                                                                                                                                        |                 | ✕ |
-| onChange                 | func | A callback function `(value)` that is called when a value is selected from the dropdown.  This is in addition to the `input.onChange` provided.                                                                                                                                                                                          |                 | ✕ |
-| onType                   | func | A callback function `(event)` that is called when the user types in the search field. Allows for custom filtering or data fetching based on user input.                                                                                                                                                                                  |                 | ✕ |
-| renderFooter             | func | A function `(displayData, currentlyTyped, exactMatch)` that renders a footer below the dropdown list. Receives the currently filtered `displayData`, what the user has typed, and whether it is an exact match.                                                                                                                          |                 | ✕ |
-| renderListItem           | func | A function `(option, currentlyTyped, exactMatch, optionIsSelected)` that renders each item in the dropdown list. Receives the current option, what the user has typed, whether there is an exact match, and if the option is selected. If not provided, the value of the `uniqueIdentificationPath` property of the option is displayed. |                 | ✕ |
-| required                 | bool | Whether the input is required.                                                                                                                                                                                                                                                                                                           |                 | ✕ |
-| selectedStyles           | string | CSS class name to apply to the selected item display.                                                                                                                                                                                                                                                                                    |                 | ✕ |
-| uniqueIdentificationPath | string | Path to the property in `dataOptions` objects that serves as a unique identifier for each option and is used to determine if an option is selected.                                                                                                                                                                                      | `'id'`          | ✕ |
+| Name                     | Type           | Description                                                                                                                                                                                                                                                                                                                              | Default         | Required |
+|--------------------------|----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|----------|
+| className                | string         | CSS class name to apply to the component's outer div.                                                                                                                                                                                                                                                                                    |                 | ✕        |
+| dataOptions              | array          | An array of objects representing the dropdown options.  Each object should have a property (specified by `uniqueIdentificationPath`) that serves as a unique identifier.                                                                                                                                                                 |                 | ✓        |
+| displayClearItem         | bool           | Whether to display a clear icon when an item is selected.                                                                                                                                                                                                                                                                                | `true`          | ✕        |
+| displayValueWhileOpen    | bool           | Whether or not to display the "value" underneath the typedown search while the dropdown is open. Defaults to true to avoid size changing onClick.                                                                                                                                                                                        | `true`          | ✕        |
+| endOfList                | node/func      | Component or function to render when the dropdown list is empty. Defaults to `<EndOfList />` from `@folio/stripes/components`.                                                                                                                                                                                                           | `<EndOfList />` | ✕        |
+| filterPath               | string         | Path to the property in `dataOptions` objects to use for filtering. If not provided, filtering is done on the property specified by `uniqueIdentificationPath`.                                                                                                                                                                          |                 | ✕        |
+| getDisplayValue          | func           | a function `({ selectedUniqueId, open })` used to override the displayValue logic entirely. Must return a boolean, which will determine whether the selected item renders below the trigger element.                                                                                                                                     |                 | ✕        |                                                                                       
+| id                       | string         | Id to apply to the component's outer div.                                                                                                                                                                                                                                                                                                |                 | ✕        |
+| initialTimeoutDelay      | number         | Delay applied to `open` occurring on first render. Set to 800ms to avoid any stripes animations, such as being the first element focused in an opening modal.                                                                                                                                                                            | 800             | ✕        |
+| input                    | object         | An object containing the input props typically provided by a form library like `react-final-form` or `redux-form`.  Should include `name`, `value`, and `onChange`.                                                                                                                                                                      |                 | ✓        |
+| isSelected               | func           | A function `(inputValue, dataOption)` that determines if a given `dataOption` is currently selected. Useful when selected values are complex objects. If not provided, selection is determined by comparing the value of the `uniqueIdentificationPath` property of the `input.value` and the `dataOption`.                              |                 | ✕        |
+| label                    | string/element | Label for the input field.                                                                                                                                                                                                                                                                                                               |                 | ✕        |
+| meta                     | object         | Meta information about the field, typically provided by a form library. Useful for displaying error messages etc.                                                                                                                                                                                                                        |                 | ✕        |
+| onChange                 | func           | A callback function `(value)` that is called when a value is selected from the dropdown.  This is in addition to the `input.onChange` provided.                                                                                                                                                                                          |                 | ✕        |
+| onType                   | func           | A callback function `(event)` that is called when the user types in the search field. Allows for custom filtering or data fetching based on user input.                                                                                                                                                                                  |                 | ✕        |
+| renderHeader             | func           | A function `({ currentlyTyped, displayData, handleType, exactMatch })` that renders a header above the dropdown list. Receives an object with some internal typedown state. Note the difference with renderFooter, in future renderFooter will be brought in line                                                                        |                 | ✕        |
+| renderFooter             | func           | A function `(displayData, currentlyTyped, exactMatch)` that renders a footer below the dropdown list. Receives the currently filtered `displayData`, what the user has typed, and whether it is an exact match.                                                                                                                          |                 | ✕        |
+| renderListItem           | func           | A function `(option, currentlyTyped, exactMatch, optionIsSelected)` that renders each item in the dropdown list. Receives the current option, what the user has typed, whether there is an exact match, and if the option is selected. If not provided, the value of the `uniqueIdentificationPath` property of the option is displayed. |                 | ✕        |
+| renderTrigger            | func           | A function `({ handleType, input, meta, triggerComponentRef, triggerComponentId, typedownTriggerKeyDownHandler })` that renders an alternative trigger to the default SearchField. This component MUST set the triggerComponentRef on the focusable element for keyboard handling to work currently.                                     |                 | ✕        |
+| required                 | bool           | Whether the input is required.                                                                                                                                                                                                                                                                                                           |                 | ✕        |
+| selectedStyles           | string         | CSS class name to apply to the selected item display.                                                                                                                                                                                                                                                                                    |                 | ✕        |
+| uniqueIdentificationPath | string         | Path to the property in `dataOptions` objects that serves as a unique identifier for each option and is used to determine if an option is selected.                                                                                                                                                                                      | `'id'`          | ✕        |

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,
@@ -99,20 +103,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,10 +157,32 @@ 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);
@@ -143,7 +202,6 @@ const Typedown = ({
                   handleChange(d);
                   handleNextFocus();
                 }}
-                onKeyDown={listKeyDownHandler}
                 type="button"
               >
                 {renderItem(d, isSelectedEval)}
@@ -172,41 +230,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 +286,7 @@ const Typedown = ({
       )}
       id={`typedown-id-${id}`}
     >
-      {renderSearchField()}
+      {renderTypedownTrigger()}
       <Popper
         key="typedown-menu-toggle"
         anchorRef={triggerRef}
@@ -240,26 +309,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 +325,7 @@ Typedown.propTypes = {
     PropTypes.element
   ]),
   filterPath: PropTypes.string,
+  getDisplayValue: PropTypes.func,
   id: PropTypes.string,
   initialOpenDelay: PropTypes.number,
   input: PropTypes.object,
@@ -286,8 +337,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