moroshko · mbriziarelli · Jul 6, 2018 · Jan 23, 2019 · Aug 7, 2019 · Oct 3, 2019
diff --git a/README.md b/README.md
@@ -8,6 +8,9 @@
 
 # React Autosuggest
 
+## Ricardo Fork
+This project has been forked to be able to render a custom wrapper for each section of the autocomplete (this is done in **react-autowhatever** that has also been forked)
+
 ## Demo
 
 Check out the [Homepage](http://react-autosuggest.js.org) and the [Codepen examples](http://codepen.io/collection/DkkYaQ).
@@ -166,6 +169,7 @@ class Example extends React.Component {
 | [`renderSectionTitle`](#render-section-title-prop) | Function | ✓<br>when `multiSection={true}` | Use your imagination to define how section titles are rendered. |
 | [`getSectionSuggestions`](#get-section-suggestions-prop) | Function | ✓<br>when `multiSection={true}` | Implement it to teach Autosuggest where to find the suggestions for every section. |
 | [`renderInputComponent`](#render-input-component-prop) | Function | | Use it only if you need to customize the rendering of the input. |
+| [`renderSectionContainer`](#render-section-container-prop) | Function | | Use it only if you need to customize the rendering of the sections. |
 | [`renderSuggestionsContainer`](#render-suggestions-container-prop) | Function | | Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves. |
 | [`theme`](#theme-prop) | Object | | Use your imagination to style the Autosuggest. |
 | [`id`](#id-prop) | String | | Use it only if you have multiple Autosuggest components on a page. |
@@ -500,6 +504,18 @@ const renderInputComponent = inputProps => (
 
 **Note:** When using `renderInputComponent`, you still need to specify the usual [`inputProps`](#input-props-prop). Autosuggest will merge the `inputProps` that you provide with other props that are needed for accessibility (e.g. `'aria-activedescendant'`), and will pass the **merged `inputProps`** to `renderInputComponent`.
 
+
+<a name="render-section-container-prop"></a>
+#### Added by Ricardo – renderSectionContainer (optional)
+
+You shouldn't specify `renderSectionContainer` unless you want to customize the rendering of the sections.
+
+The signature is:
+
+```js
+function renderSectionContainer(section, children)
+```
+
 <a name="render-suggestions-container-prop"></a>
 #### renderSuggestionsContainer (optional)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-autosuggest",
-  "version": "9.4.3",
+  "name": "ricardo-react-autosuggest",
+  "version": "9.4.5",
   "description": "WAI-ARIA compliant React autosuggest component",
   "main": "dist/index.js",
   "repository": {
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "prop-types": "^15.5.10",
-    "react-autowhatever": "^10.1.2",
+    "ricardo-react-autowhatever": "^10.2.2",
     "shallow-equal": "^1.0.0"
   },
   "peerDependencies": {

diff --git a/src/Autosuggest.js b/src/Autosuggest.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shallowEqualArrays from 'shallow-equal/arrays';
-import Autowhatever from 'react-autowhatever';
+import Autowhatever from 'ricardo-react-autowhatever';
 import { defaultTheme, mapToAutowhateverTheme } from './theme';
 
 const alwaysTrue = () => true;
@@ -38,6 +38,7 @@ export default class Autosuggest extends Component {
     onSuggestionHighlighted: PropTypes.func,
     renderInputComponent: PropTypes.func,
     renderSuggestionsContainer: PropTypes.func,
+    renderSectionContainer: PropTypes.func,
     getSuggestionValue: PropTypes.func.isRequired,
     renderSuggestion: PropTypes.func.isRequired,
     inputProps: (props, propName) => {
@@ -510,6 +511,7 @@ export default class Autosuggest extends Component {
       inputProps,
       multiSection,
       renderSectionTitle,
+      renderSectionContainer,
       id,
       getSectionSuggestions,
       theme,
@@ -748,6 +750,7 @@ export default class Autosuggest extends Component {
         renderItem={renderSuggestion}
         renderItemData={renderSuggestionData}
         renderSectionTitle={renderSectionTitle}
+        renderSectionContainer={renderSectionContainer}
         getSectionItems={getSectionSuggestions}
         highlightedSectionIndex={highlightedSectionIndex}
         highlightedItemIndex={highlightedSuggestionIndex}

diff --git a/test/focus-first-suggestion/AutosuggestApp.test.js b/test/focus-first-suggestion/AutosuggestApp.test.js
@@ -128,16 +128,15 @@ describe('Autosuggest with highlightFirstSuggestion={true}', () => {
       onSuggestionSelected.reset();
       clickEnter();
       expect(onSuggestionSelected).to.have.been.calledOnce;
-      expect(onSuggestionSelected).to.have.been.calledWithExactly(
-        syntheticEventMatcher,
-        {
-          suggestion: { name: 'Perl', year: 1987 },
-          suggestionValue: 'Perl',
-          suggestionIndex: 0,
-          sectionIndex: null,
-          method: 'enter'
-        }
-      );
+      expect(
+        onSuggestionSelected
+      ).to.have.been.calledWithExactly(syntheticEventMatcher, {
+        suggestion: { name: 'Perl', year: 1987 },
+        suggestionValue: 'Perl',
+        suggestionIndex: 0,
+        sectionIndex: null,
+        method: 'enter'
+      });
     });
   });
 

diff --git a/test/helpers.js b/test/helpers.js
@@ -92,13 +92,11 @@ export const getSuggestion = suggestionIndex => {
     throw Error(
       `
       Cannot find suggestion #${suggestionIndex}.
-      ${
-        suggestions.length === 0
-          ? 'No suggestions found.'
-          : `Only ${suggestions.length} suggestion${
-              suggestions.length === 1 ? '' : 's'
-            } found.`
-      }
+      ${suggestions.length === 0
+        ? 'No suggestions found.'
+        : `Only ${suggestions.length} suggestion${suggestions.length === 1
+            ? ''
+            : 's'} found.`}
     `
     );
   }

diff --git a/test/plain-list/AutosuggestApp.test.js b/test/plain-list/AutosuggestApp.test.js
@@ -602,32 +602,30 @@ describe('Default Autosuggest', () => {
     it('should be called once with the right parameters when suggestion is clicked', () => {
       clickSuggestion(1);
       expect(onSuggestionSelected).to.have.been.calledOnce;
-      expect(onSuggestionSelected).to.have.been.calledWithExactly(
-        syntheticEventMatcher,
-        {
-          suggestion: { name: 'JavaScript', year: 1995 },
-          suggestionValue: 'JavaScript',
-          suggestionIndex: 1,
-          sectionIndex: null,
-          method: 'click'
-        }
-      );
+      expect(
+        onSuggestionSelected
+      ).to.have.been.calledWithExactly(syntheticEventMatcher, {
+        suggestion: { name: 'JavaScript', year: 1995 },
+        suggestionValue: 'JavaScript',
+        suggestionIndex: 1,
+        sectionIndex: null,
+        method: 'click'
+      });
     });
 
     it('should be called once with the right parameters when Enter is pressed and suggestion is highlighted', () => {
       clickDown();
       clickEnter();
       expect(onSuggestionSelected).to.have.been.calledOnce;
-      expect(onSuggestionSelected).to.have.been.calledWithExactly(
-        syntheticEventMatcher,
-        {
-          suggestion: { name: 'Java', year: 1995 },
-          suggestionValue: 'Java',
-          suggestionIndex: 0,
-          sectionIndex: null,
-          method: 'enter'
-        }
-      );
+      expect(
+        onSuggestionSelected
+      ).to.have.been.calledWithExactly(syntheticEventMatcher, {
+        suggestion: { name: 'Java', year: 1995 },
+        suggestionValue: 'Java',
+        suggestionIndex: 0,
+        sectionIndex: null,
+        method: 'enter'
+      });
     });
 
     it('should not be called when Enter is pressed and there is no highlighted suggestion', () => {