Pass down components prop to selectable search input (#2831)

* feat(selectable search input): pass down components prop to selectable search input * feat(selectable search input): test to assert custom component prop is used * feat(selectable search input): include property name in changeset --------- Co-authored-by: Ddouglasz <[email protected]>
commercetools · May 30, 2024 · e790eab · e790eab
1 parent 35daa95
commit e790eab
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 0 deletions.
diff --git a/.changeset/selfish-hounds-beg.md b/.changeset/selfish-hounds-beg.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/selectable-search-input': minor
+---
+
+We're introducing a new property, `selectCustomComponents` so consumers can customize the different parts of the select element in this component.
+You can learn more about how this customization works in the `react-select` library [docs](https://react-select.com/components) we use under the hood
diff --git a/packages/components/inputs/selectable-search-input/README.md b/packages/components/inputs/selectable-search-input/README.md
@@ -92,6 +92,7 @@ export default Example;
 | `showSubmitButton`         | `boolean`                                                                              |          | `true`    | Show submit button in the input                                                                                                                                                                                                                                                                                                                                                          |
 | `selectDataProps`          | `Record`                                                                               |          |           | used to pass data-\* props to the select component.&#xA;eg: selectDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}                                                                                                                                                                                                                                                        |
 | `inputDataProps`           | `Record`                                                                               |          |           | used to pass data-\* props to the input element.&#xA;eg: inputDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}                                                                                                                                                                                                                                                            |
+| `selectCustomComponents`   | `ReactSelectProps['components']`                                                       |          |           | Map of components to overwrite the default ones, see what components you can override&#xA;<br/>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                   |
 
 ## Signatures
 

diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx
@@ -4,6 +4,7 @@ import SelectableSearchInput, {
   type TCustomEvent,
 } from './selectable-search-input';
 import { screen, render, fireEvent } from '../../../../../test/test-utils';
+import { components, OptionProps } from 'react-select';
 
 // We use this component to simulate the whole flow of
 // changing a value and submitting.
@@ -181,6 +182,34 @@ describe('SelectableSearchInput', () => {
     });
   });
 
+  it('should render custom dropdown component', async () => {
+    const onFocus = jest.fn();
+
+    const Option = (props: OptionProps) => {
+      return (
+        <div>
+          <span>Custom text</span>
+          <components.Option {...props} />
+        </div>
+      );
+    };
+
+    render(
+      <TestComponent
+        value={{ text: 'test value', option: 'bar' }}
+        onFocus={onFocus}
+        selectCustomComponents={{ Option }}
+      />
+    );
+
+    const selectInput = screen.getByLabelText('Bar');
+    fireEvent.focus(selectInput);
+    fireEvent.keyDown(selectInput, { key: 'ArrowDown', code: 'ArrowDown' });
+    expect(
+      screen.getByTestId('selectable-search-input-container')
+    ).toHaveTextContent('Custom text');
+  });
+
   it('should call onBlur twice when input loses focus for outside element', () => {
     const onBlur = jest.fn();
     render(

diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx
@@ -221,6 +221,12 @@ export type TSelectableSearchInputProps = {
    * eg: inputDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
    */
   inputDataProps?: Record<string, string>;
+  /**
+   * Map of components to overwrite the default ones, see what components you can override
+   * <br/>
+   * [Props from React select was used](https://react-select.com/props)
+   */
+  selectCustomComponents?: ReactSelectProps['components'];
 };
 
 const defaultProps: Pick<
@@ -447,6 +453,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
             textInputRef={textInputRef}
             selectedOption={selectedOption}
             dataProps={transformedSelectDataProps}
+            selectCustomComponents={props.selectCustomComponents}
           />
         </Constraints.Horizontal>
         <div

diff --git a/packages/components/inputs/selectable-search-input/src/selectable-select.tsx b/packages/components/inputs/selectable-search-input/src/selectable-select.tsx
@@ -69,6 +69,7 @@ const SelectableSelect = (props: TSelectableSelect) => {
           />
         ),
         DropdownIndicator,
+        ...props.selectCustomComponents,
       }}
       options={props.options}
       menuIsOpen={props.isReadOnly ? false : undefined}