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

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

@@ -109,7 +109,7 @@ export default groupCustomPropertiesByCtx;
             <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-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -244,7 +244,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-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -296,7 +296,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-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -175,7 +175,7 @@ export { default as parseModConfigEntry } from './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-12T20:17:01.385Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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-12T20:17:01.385Z
             </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,53 @@
+import PropTypes from 'prop-types';
+
+import { DropdownButton } from '@folio/stripes/components';
+
+import SearchField from '../SearchField';
+import Typedown from '../Typedown';
+
+const ButtonTypedown = ({
+  id,
+  renderListItem,
+  ...typedownProps
+}) => {
+  return (
+    <Typedown
+      getDisplayValue={() => false}
+      renderHeader={({ handleType, currentlyTyped }) => (
+        <SearchField
+          id={`button-typedown-searchfield-${id}`}
+          marginBottom0
+          onChange={handleType}
+          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'`          | ✕        |