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

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

@@ -32,7 +32,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/49</span>
+                <span class='fraction'>0/55</span>
             </div>
         
             
@@ -418,7 +418,50 @@
 <a name='L353'></a><a href='#L353'>353</a>
 <a name='L354'></a><a href='#L354'>354</a>
 <a name='L355'></a><a href='#L355'>355</a>
-<a name='L356'></a><a href='#L356'>356</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L356'></a><a href='#L356'>356</a>
+<a name='L357'></a><a href='#L357'>357</a>
+<a name='L358'></a><a href='#L358'>358</a>
+<a name='L359'></a><a href='#L359'>359</a>
+<a name='L360'></a><a href='#L360'>360</a>
+<a name='L361'></a><a href='#L361'>361</a>
+<a name='L362'></a><a href='#L362'>362</a>
+<a name='L363'></a><a href='#L363'>363</a>
+<a name='L364'></a><a href='#L364'>364</a>
+<a name='L365'></a><a href='#L365'>365</a>
+<a name='L366'></a><a href='#L366'>366</a>
+<a name='L367'></a><a href='#L367'>367</a>
+<a name='L368'></a><a href='#L368'>368</a>
+<a name='L369'></a><a href='#L369'>369</a>
+<a name='L370'></a><a href='#L370'>370</a>
+<a name='L371'></a><a href='#L371'>371</a>
+<a name='L372'></a><a href='#L372'>372</a>
+<a name='L373'></a><a href='#L373'>373</a>
+<a name='L374'></a><a href='#L374'>374</a>
+<a name='L375'></a><a href='#L375'>375</a>
+<a name='L376'></a><a href='#L376'>376</a>
+<a name='L377'></a><a href='#L377'>377</a>
+<a name='L378'></a><a href='#L378'>378</a>
+<a name='L379'></a><a href='#L379'>379</a>
+<a name='L380'></a><a href='#L380'>380</a>
+<a name='L381'></a><a href='#L381'>381</a>
+<a name='L382'></a><a href='#L382'>382</a>
+<a name='L383'></a><a href='#L383'>383</a>
+<a name='L384'></a><a href='#L384'>384</a>
+<a name='L385'></a><a href='#L385'>385</a>
+<a name='L386'></a><a href='#L386'>386</a>
+<a name='L387'></a><a href='#L387'>387</a>
+<a name='L388'></a><a href='#L388'>388</a>
+<a name='L389'></a><a href='#L389'>389</a>
+<a name='L390'></a><a href='#L390'>390</a>
+<a name='L391'></a><a href='#L391'>391</a>
+<a name='L392'></a><a href='#L392'>392</a>
+<a name='L393'></a><a href='#L393'>393</a>
+<a name='L394'></a><a href='#L394'>394</a>
+<a name='L395'></a><a href='#L395'>395</a>
+<a name='L396'></a><a href='#L396'>396</a>
+<a name='L397'></a><a href='#L397'>397</a>
+<a name='L398'></a><a href='#L398'>398</a>
+<a name='L399'></a><a href='#L399'>399</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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -457,6 +500,12 @@
 <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-neutral">&nbsp;</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>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -531,6 +580,26 @@
 <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-neutral">&nbsp;</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>
+<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-neutral">&nbsp;</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>
+<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-neutral">&nbsp;</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>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</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>
@@ -605,6 +674,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-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -669,6 +739,19 @@
 <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-neutral">&nbsp;</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>
+<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-neutral">&nbsp;</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>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -773,6 +856,9 @@
 <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-neutral">&nbsp;</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></td><td class="text"><pre class="prettyprint lang-js">import { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -788,6 +874,8 @@ import { useTypedown } from '../hooks/typedownHooks';
 import selectorSafe from '../utils/selectorSafe';
 &nbsp;
 const Typedown = <span class="fstat-no" title="function not covered" >({</span>
+  // This offers the ability to pass additional information into the header, footer and listItem renders.
+  additionalInfo = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   className,
   dataOptions,
   displayClearItem = <span class="branch-0 cbranch-no" title="branch not covered" >true,</span>
@@ -804,6 +892,10 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
   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 = <span class="branch-0 cbranch-no" title="branch not covered" >false,</span>
   renderFooter = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
   renderHeader = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
   renderListItem = <span class="branch-0 cbranch-no" title="branch not covered" >null,</span>
@@ -880,11 +972,31 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
       className={css.listItem}
     &gt;
       {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)
       }
     &lt;/div&gt;
-  ), [currentlyTyped, exactMatch, renderListItem, selectedValue, uniqueIdentificationPath]);
+  ), [
+    additionalInfo,
+    currentlyTyped,
+    exactMatch,
+    renderListItem,
+    renderWithOptions,
+    selectedValue,
+    uniqueIdentificationPath
+  ]);
 &nbsp;
   const handleChange = <span class="cstat-no" title="statement not covered" >useCallback(<span class="fstat-no" title="function not covered" >va</span>lue =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >    input.onChange(value);</span>
@@ -943,6 +1055,7 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
           &gt;
             {/* Adopt a more extensible pattern for renderHeader, renderFooter will eventually follow */}
             {renderHeader({
+              additionalInfo,
               currentlyTyped,
               displayData,
               handleType,
@@ -997,12 +1110,24 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
             className={css.footer}
             id={`typedown-footer-${selectorSafe(input.name)}`}
           &gt;
-            {renderFooter(displayData, currentlyTyped, exactMatch)}
+            {
+&nbsp;
+              renderWithOptions ?
+                renderFooter({
+                  additionalInfo,
+                  displayData,
+                  currentlyTyped,
+                  exactMatch
+                }) :
+                // DEPRECATED, see above
+                renderFooter(displayData, currentlyTyped, exactMatch, additionalInfo)
+              }
           &lt;/div&gt;
         }
       &lt;/div&gt;
     );
   }, [
+    additionalInfo,
     currentlyTyped,
     displayData,
     endOfList,
@@ -1019,6 +1144,7 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
     renderFooter,
     renderHeader,
     renderItem,
+    renderWithOptions,
     searchWidth,
     selectedStyles,
     uniqueIdentificationPath
@@ -1096,10 +1222,12 @@ const Typedown = <span class="fstat-no" title="function not covered" >({</span>
 };
 &nbsp;
 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,
@@ -1122,6 +1250,7 @@ Typedown.propTypes = {
   renderFooter: PropTypes.func,
   renderListItem: PropTypes.func,
   renderTrigger: PropTypes.func,
+  renderWithOptions: PropTypes.bool,
   required: PropTypes.bool,
   selectedStyles: PropTypes.string,
   uniqueIdentificationPath: PropTypes.string
@@ -1135,7 +1264,7 @@ export default Typedown;
             <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/Typedown/index.html

@@ -32,7 +32,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/49</span>
+                <span class='fraction'>0/55</span>
             </div>
         
             
@@ -86,7 +86,7 @@
 	<td data-value="3.77" class="pct low">3.77%</td>
 	<td data-value="53" class="abs low">2/53</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="49" class="abs low">0/49</td>
+	<td data-value="55" class="abs low">0/55</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="16" class="abs low">0/16</td>
 	<td data-value="3.92" class="pct low">3.92%</td>
@@ -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/Typedown/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>