@k-int/stripes-kint-components 5.36.1 → 5.37.0

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

@@ -30,9 +30,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">28.81% </span>
+                <span class="strong">30.5% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>17/59</span>
+                <span class='fraction'>18/59</span>
             </div>
         
             
@@ -115,8 +115,8 @@
 	</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="3" class="abs high">3/3</td>
-	<td data-value="66.66" class="pct medium">66.66%</td>
-	<td data-value="3" class="abs medium">2/3</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="3" class="abs high">3/3</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
@@ -281,7 +281,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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -178,7 +178,7 @@ export { default as downloadBlob } from './downloadBlob';
             <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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/matchString/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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/matchString/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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -109,7 +109,7 @@
 <a name='L44'></a><a href='#L44'>44</a>
 <a name='L45'></a><a href='#L45'>45</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">30x</span>
+<span class="cline-any cline-yes">33x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">54x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -202,7 +202,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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -82,7 +82,7 @@
 <a name='L17'></a><a href='#L17'>17</a>
 <a name='L18'></a><a href='#L18'>18</a>
 <a name='L19'></a><a href='#L19'>19</a>
-<a name='L20'></a><a href='#L20'>20</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">27x</span>
+<a name='L20'></a><a href='#L20'>20</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -93,7 +93,7 @@
 <a name='L28'></a><a href='#L28'>28</a>
 <a name='L29'></a><a href='#L29'>29</a>
 <a name='L30'></a><a href='#L30'>30</a>
-<a name='L31'></a><a href='#L31'>31</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">27x</span>
+<a name='L31'></a><a href='#L31'>31</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -160,7 +160,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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -78,7 +78,7 @@
 <a name='L13'></a><a href='#L13'>13</a>
 <a name='L14'></a><a href='#L14'>14</a>
 <a name='L15'></a><a href='#L15'>15</a>
-<a name='L16'></a><a href='#L16'>16</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">27x</span>
+<a name='L16'></a><a href='#L16'>16</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -72,7 +72,7 @@
 <a name='L7'></a><a href='#L7'>7</a>
 <a name='L8'></a><a href='#L8'>8</a>
 <a name='L9'></a><a href='#L9'>9</a>
-<a name='L10'></a><a href='#L10'>10</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">27x</span>
+<a name='L10'></a><a href='#L10'>10</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -83,7 +83,7 @@
 <a name='L18'></a><a href='#L18'>18</a>
 <a name='L19'></a><a href='#L19'>19</a>
 <a name='L20'></a><a href='#L20'>20</a>
-<a name='L21'></a><a href='#L21'>21</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">27x</span>
+<a name='L21'></a><a href='#L21'>21</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -78,7 +78,7 @@
 <a name='L13'></a><a href='#L13'>13</a>
 <a name='L14'></a><a href='#L14'>14</a>
 <a name='L15'></a><a href='#L15'>15</a>
-<a name='L16'></a><a href='#L16'>16</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">27x</span>
+<a name='L16'></a><a href='#L16'>16</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/stringStyling/boldString.js.html

@@ -102,7 +102,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">28x</span>
+<span class="cline-any cline-yes">31x</span>
 <span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">11x</span>
@@ -175,7 +175,7 @@ export default boldString;
             <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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/stringStyling/highlightString.js.html

@@ -102,7 +102,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">28x</span>
+<span class="cline-any cline-yes">31x</span>
 <span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">18x</span>
@@ -175,7 +175,7 @@ export default highlightString;
             <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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/stringStyling/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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/stringStyling/index.js.html

@@ -76,7 +76,7 @@ export { default as boldString } from './boldString';
             <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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -77,7 +77,7 @@
 <a name='L12'></a><a href='#L12'>12</a>
 <a name='L13'></a><a href='#L13'>13</a>
 <a name='L14'></a><a href='#L14'>14</a>
-<a name='L15'></a><a href='#L15'>15</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">27x</span>
+<a name='L15'></a><a href='#L15'>15</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">24x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -72,7 +72,7 @@
 <a name='L7'></a><a href='#L7'>7</a>
 <a name='L8'></a><a href='#L8'>8</a>
 <a name='L9'></a><a href='#L9'>9</a>
-<a name='L10'></a><a href='#L10'>10</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">27x</span>
+<a name='L10'></a><a href='#L10'>10</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">30x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </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 2026-04-17T10:52:56.555Z
+                at 2026-05-07T12:53:11.647Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/lib/QueryTypedown/QueryTypedown.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import Typedown from '../Typedown';
@@ -11,7 +11,9 @@ const QueryTypedown = ({
   ...rest
 }) => {
   const [callPath, setCallPath] = useState(pathMutator(null, path));
-  const data = dataFormatter(useTypedownData(path, callPath));
+
+  const rawData = useTypedownData(path, callPath);
+  const data = useMemo(() => dataFormatter(rawData), [dataFormatter, rawData]);
   const [userQuery, setUserQuery] = useState('');
 
   const onType = e => {
@@ -25,6 +27,9 @@ const QueryTypedown = ({
   return (
     <Typedown
       {...rest}
+      additionalInfo={{
+        rawData // Pass raw query response into additionalInfo
+      }}
       dataOptions={data}
       onType={onType}
     />

package/src/lib/QueryTypedown/README.md

@@ -21,12 +21,12 @@ import QueryTypedown from '@k-int/stripes-kint-components';
 
 ## Props
 
-| Name | Type | Description                                                                                                                                                                                                                         | Default | Required |
-|---|---|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---|---|
-| dataFormatter | func | A function `(data)` that formats the data returned by the API before it's passed to the underlying `Typedown` component. This is useful if the API response structure doesn't directly match the expected format for `dataOptions`. | `d => d` (returns data as-is) | ✕ |
-| path | string | The base path for the API call.                                                                                                                                                                                                     |  | ✓ |
-| pathMutator | func | A function `(query, basePath)` that takes the user's query as typed into the component and the base path and returns the full API path to be called. This allows for dynamic path construction based on user input.                 |  | ✓ |
-|...rest |  | All other props are passed directly to the underlying `Typedown` component.  See the `Typedown` documentation for a full list of available props.                                                                                   |  | ✕ |
+| Name          | Type   | Description                                                                                                                                                                                                                         | Default                       | Required |
+|---------------|--------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------|----------|
+| dataFormatter | func   | A function `(data)` that formats the data returned by the API before it's passed to the underlying `Typedown` component. This is useful if the API response structure doesn't directly match the expected format for `dataOptions`. | `d => d` (returns data as-is) | ✕        |
+| path          | string | The base path for the API call.                                                                                                                                                                                                     |                               | ✓        |
+| pathMutator   | func   | A function `(query, basePath)` that takes the user's query as typed into the component and the base path and returns the full API path to be called. This allows for dynamic path construction based on user input.                 |                               | ✓        |
+| ...rest       |        | All other props are passed directly to the underlying `Typedown` component.  See the `Typedown` documentation for a full list of available props.                                                                                   |                               | ✕        |
 
 ## How it works
 
@@ -37,6 +37,7 @@ import QueryTypedown from '@k-int/stripes-kint-components';
 5.  The `useTypedownData` hook fetches data from the generated `callPath`.
 6.  The fetched data is passed through the `dataFormatter` (if provided) to transform the data into a format suitable for the `Typedown` component's `dataOptions` prop.
 7.  Finally, the `QueryTypedown` component renders the `Typedown` component, passing along the formatted data and all other props.
+8. The `QueryTypedown` component automatically populates the `additionalInfo` prop with `rawData`, containing the full, unformatted response from your API. This allows custom headers or footers to access metadata like record counts or execution time.
 
 ## Example: Custom Data Formatting
 

package/src/lib/Typedown/README.md

@@ -26,6 +26,7 @@ import Typedown from '@k-int/stripes-kint-components';
 
 | Name                     | Type           | Description                                                                                                                                                                                                                                                                                                                              | Default         | Required |
 |--------------------------|----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|----------|
+| additionalInfo           | object         | An object passed into all render functions (Header, Footer, ListItem). Useful for passing external state or metadata to the dropdown UI.                                                                                                                                                                                                 | `{}`            | ?        |
 | 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`          | ✕        |
@@ -45,6 +46,31 @@ import Typedown from '@k-int/stripes-kint-components';
 | 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.                                     |                 | ✕        |
+| renderWithOptions        | bool           | Toggle for the render function signature. If true, `renderListItem` and `renderFooter` receive a single object argument instead of multiple positional parameters. This will eventually be made the default in a breaking change.                                                                                                        | `false`         | ?        |
 | 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'`          | ✕        |
+| 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'`          | ✕        |
+
+
+
+### `renderWithOptions`
+
+The `Typedown` component supports highly customizable internal layouts. To maintain clean code as you add more functionality, it is recommended to set `renderWithOptions` to `true`.
+This will eventually be made the default, and any Typedown logic using the prior parameter shape will need migrating.
+
+#### The `renderWithOptions` Pattern
+When `renderWithOptions` is enabled, your render functions receive a single "options" object. This is more extensible than positional arguments.
+
+**Example: Custom List Item**
+```javascript
+<Typedown
+  renderWithOptions
+  renderListItem={({ option, currentlyTyped, optionIsSelected, additionalInfo }) => (
+    <>
+      <strong>{option.name}</strong>
+      {optionIsSelected && <span> (Selected)</span>}
+    </>
+  )}
+  {...otherProps}
+/>
+```

package/src/lib/Typedown/Typedown.js

@@ -13,6 +13,8 @@ import { useTypedown } from '../hooks/typedownHooks';
 import selectorSafe from '../utils/selectorSafe';
 
 const Typedown = ({
+  // This offers the ability to pass additional information into the header, footer and listItem renders.
+  additionalInfo = {},
   className,
   dataOptions,
   displayClearItem = true,
@@ -29,6 +31,10 @@ const Typedown = ({
   meta,
   onChange,
   onType,
+  // DEPRECATED. This prop exists to force the renderHeader, renderFooter and renderListItem
+  // to render with option props instead of array params. In a future breaking change that
+  // should be made the NORM and this prop removed.
+  renderWithOptions = false,
   renderFooter = null,
   renderHeader = null,
   renderListItem = null,
@@ -105,11 +111,31 @@ const Typedown = ({
       className={css.listItem}
     >
       {renderListItem ?
-        renderListItem(option, currentlyTyped, exactMatch, optionIsSelected, selectedValue) :
+        (
+          renderWithOptions ?
+            renderListItem({
+              additionalInfo,
+              option,
+              currentlyTyped,
+              exactMatch,
+              optionIsSelected,
+              selectedValue
+            }) :
+            // DEPRECATED see above
+            renderListItem(option, currentlyTyped, exactMatch, optionIsSelected, selectedValue, additionalInfo)
+        ) :
         get(option, uniqueIdentificationPath)
       }
     </div>
-  ), [currentlyTyped, exactMatch, renderListItem, selectedValue, uniqueIdentificationPath]);
+  ), [
+    additionalInfo,
+    currentlyTyped,
+    exactMatch,
+    renderListItem,
+    renderWithOptions,
+    selectedValue,
+    uniqueIdentificationPath
+  ]);
 
   const handleChange = useCallback(value => {
     input.onChange(value);
@@ -168,6 +194,7 @@ const Typedown = ({
           >
             {/* Adopt a more extensible pattern for renderHeader, renderFooter will eventually follow */}
             {renderHeader({
+              additionalInfo,
               currentlyTyped,
               displayData,
               handleType,
@@ -222,12 +249,24 @@ const Typedown = ({
             className={css.footer}
             id={`typedown-footer-${selectorSafe(input.name)}`}
           >
-            {renderFooter(displayData, currentlyTyped, exactMatch)}
+            {
+
+              renderWithOptions ?
+                renderFooter({
+                  additionalInfo,
+                  displayData,
+                  currentlyTyped,
+                  exactMatch
+                }) :
+                // DEPRECATED, see above
+                renderFooter(displayData, currentlyTyped, exactMatch, additionalInfo)
+              }
           </div>
         }
       </div>
     );
   }, [
+    additionalInfo,
     currentlyTyped,
     displayData,
     endOfList,
@@ -244,6 +283,7 @@ const Typedown = ({
     renderFooter,
     renderHeader,
     renderItem,
+    renderWithOptions,
     searchWidth,
     selectedStyles,
     uniqueIdentificationPath
@@ -321,10 +361,12 @@ const Typedown = ({
 };
 
 Typedown.propTypes = {
+  additionalInfo: PropTypes.object, // In TS this will need to be a generic passed in on the type I guess :/
   className: PropTypes.string,
-  dataOptions: PropTypes.arrayOf(PropTypes.object),
+  dataOptions: PropTypes.arrayOf(PropTypes.object), // In TS this again will need to be a generic type on the Typedown
   displayClearItem: PropTypes.bool,
   displayValueWhileOpen: PropTypes.bool,
+  dropdownPlacement: PropTypes.string,
   endOfList: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.node,
@@ -347,6 +389,7 @@ Typedown.propTypes = {
   renderFooter: PropTypes.func,
   renderListItem: PropTypes.func,
   renderTrigger: PropTypes.func,
+  renderWithOptions: PropTypes.bool,
   required: PropTypes.bool,
   selectedStyles: PropTypes.string,
   uniqueIdentificationPath: PropTypes.string

package/src/lib/hooks/__mocks__/useMutateGeneric.js

@@ -0,0 +1,14 @@
+const useMutateGeneric = jest.fn((props) => {
+  /* * We return an object containing jest functions.
+   * This mimics the structure of the real hook: { post, put, delete }
+   */
+  return {
+    post: jest.fn(() => Promise.resolve()),
+    put: jest.fn(() => Promise.resolve()),
+    delete: jest.fn(() => Promise.resolve()),
+    // Spread props if you want to inspect them easily in result.current
+    ...props
+  };
+});
+
+export default useMutateGeneric;