From 0365641a3af0bee88597c1ee137948d36ca4268c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?=
 <francoischalifour@users.noreply.github.com>
Date: Tue, 9 Oct 2018 10:10:46 -0700
Subject: [PATCH] feat(refinement-list): implement InstantSearch.css (2)
 (#3179)

* Flattens the templates to the top-level `templates` option.
---
 .../stories/refinement-list.stories.js        |  45 ++----
 docgen/src/guides/v3-migration.md             |  44 +++---
 .../RefinementList/RefinementList.js          |  10 +-
 .../__tests__/RefinementList-test.js          |  12 +-
 .../refinement-list-test.js.snap              |  11 +-
 .../__tests__/refinement-list-test.js         |  40 +++++-
 .../refinement-list/defaultTemplates.js       |   1 +
 .../defaultTemplates.searchForFacetValue.js   |   3 -
 .../refinement-list/refinement-list.js        | 129 ++++++------------
 9 files changed, 131 insertions(+), 164 deletions(-)
 delete mode 100644 src/widgets/refinement-list/defaultTemplates.searchForFacetValue.js

diff --git a/dev/app/builtin/stories/refinement-list.stories.js b/dev/app/builtin/stories/refinement-list.stories.js
index 5ceee805ce..f56e009ac5 100644
--- a/dev/app/builtin/stories/refinement-list.stories.js
+++ b/dev/app/builtin/stories/refinement-list.stories.js
@@ -15,8 +15,6 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
           })
         );
       })
@@ -28,14 +26,12 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
             limit: 3,
-            showMore: {
-              templates: {
-                active: 'Show less',
-                inactive: 'Show more',
-              },
-              limit: 10,
+            showMore: true,
+            showMoreLimit: 10,
+            templates: {
+              showMoreActive: 'Show way less',
+              showMoreInactive: 'Show way less',
             },
           })
         );
@@ -48,29 +44,22 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
-            searchable: {
-              placeholder: 'Find other brands...',
-              templates: {
-                noResults: 'No results',
-              },
-            },
+            searchable: true,
           })
         );
       })
     )
     .add(
-      'with search inside items (using the default noResults template)',
+      'with search inside items (using a custom searchableNoResults template)',
       wrapWithHits(container => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
-            searchable: {
-              placeholder: 'Find other brands...',
+            searchable: true,
+            searchablePlaceholder: 'Find other brands...',
+            templates: {
+              searchableNoResults: 'No results found',
             },
           })
         );
@@ -84,7 +73,6 @@ export default () => {
             container,
             attribute: 'price_range',
             operator: 'and',
-            limit: 10,
             cssClasses: {
               item: 'facet-value checkbox',
               count: 'facet-count pull-right',
@@ -107,8 +95,6 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
             transformItems: items =>
               items.map(item => ({
                 ...item,
@@ -126,14 +112,7 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
-            searchable: {
-              placeholder: 'Find other brands...',
-              templates: {
-                noResults: 'No results',
-              },
-            },
+            searchable: true,
             transformItems: items =>
               items.map(item => ({
                 ...item,
diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md
index 79d890e8b5..f627b433f4 100644
--- a/docgen/src/guides/v3-migration.md
+++ b/docgen/src/guides/v3-migration.md
@@ -10,11 +10,11 @@ If you were previously using the `urlSync` option, you should now migrate to the
 
 Here are the elements you need to migrate:
 
-* `urlSync: true` becomes `routing: true`
-* `threshold` becomes `routing: {router: instantsearch.routers.history({writeDelay: 400})}
-* `mapping` and `trackedParameters` are replaced with `stateMapping`. Read [User friendly urls](routing.html#user-friendly-urls) to know how to configure it
-* `useHash` is removed but can be achieved using an advanced configuration of the [history router](routing.html#history-router-api)
-* `getHistoryState` is removed but can be achieved using an advanced configuration of the [history router](routing.html#history-router-api)
+- `urlSync: true` becomes `routing: true`
+- `threshold` becomes `routing: {router: instantsearch.routers.history({writeDelay: 400})}
+- `mapping` and `trackedParameters` are replaced with `stateMapping`. Read [User friendly urls](routing.html#user-friendly-urls) to know how to configure it
+- `useHash` is removed but can be achieved using an advanced configuration of the [history router](routing.html#history-router-api)
+- `getHistoryState` is removed but can be achieved using an advanced configuration of the [history router](routing.html#history-router-api)
 
 ## Widgets
 
@@ -150,8 +150,8 @@ With the redo button:
 | `escapeHits`    | `escapeHTML`    |
 | `showMoreLabel` | `loadMoreLabel` |
 
-* `escapeHTML` becomes `true` by default.
-* `allItems` template has been removed in favor of `connectHits`
+- `escapeHTML` becomes `true` by default.
+- `allItems` template has been removed in favor of `connectHits`
 
 #### CSS classes
 
@@ -499,6 +499,24 @@ Widget removed.
 
 ### RefinementList
 
+#### Options
+
+| Before                                     | After                           |
+| ------------------------------------------ | ------------------------------- |
+| `attributeName`                            | `attribute`                     |
+| `searchForFacetValues`                     | `searchable`                    |
+| `searchForFacetValues.placeholder`         | `searchablePlaceholder`         |
+| `searchForFacetValues.isAlwaysActive`      | `searchableIsAlwaysActive`      |
+| `searchForFacetValues.escapeFacetValues`   | `searchableEscapeFacetValues`   |
+| `searchForFacetValues.templates.noResults` | `templates.searchableNoResults` |
+| `showMore.templates.active`                | `templates.showMoreActive`      |
+| `showMore.templates.inactive`              | `templates.showMoreInactive`    |
+
+- `searchablePlaceholder` defaults to `"Search..."`
+- `searchableEscapeFacetValues` defaults to `true`
+- `searchableIsAlwaysActive` defaults to `true`
+- `showMore` is now a boolean option (`searchForFacetValues.templates` and `showMore.templates` are now in `templates`)
+
 #### CSS classes
 
 | Before                              | After                                   |
@@ -519,16 +537,6 @@ Widget removed.
 |                                     | `ais-RefinementList-showMore`           |
 |                                     | `ais-RefinementList-showMore--disabled` |
 
-#### Options
-
-| Before                 | After        |
-| ---------------------- | ------------ |
-| `attributeName`        | `attribute`  |
-| `searchForFacetValues` | `searchable` |
-
-* `escapeFacetValues` defaults to `true`
-* `isAlwaysActive` defaults to `true`
-
 #### Markup
 
 ##### Default
@@ -741,4 +749,4 @@ We've moved the `label` into the `templates.labelText` template to make it consi
 | --------------- | ----------- |
 | `attributeName` | `attribute` |
 
-* `escapeFacetValues` defaults to `true`
+- `escapeFacetValues` defaults to `true`
diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 117b5472be..a9d11f5908 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -155,9 +155,9 @@ class RefinementList extends Component {
     const showMoreButton = this.props.showMore === true && (
       <Template
         rootTagName="button"
-        templateKey={`show-more-${
-          this.props.isShowingMore ? 'active' : 'inactive'
-        }`}
+        templateKey={
+          this.props.isShowingMore ? 'showMoreActive' : 'showMoreInactive'
+        }
         rootProps={{
           className: showMoreButtonClassName,
           onClick: this.props.toggleShowMore,
@@ -195,9 +195,9 @@ class RefinementList extends Component {
       this.props.isFromSearch &&
       this.props.facetValues.length === 0 && (
         <Template
-          templateKey="noResults"
-          rootProps={{ className: this.props.cssClasses.noResults }}
           {...this.props.templateProps}
+          templateKey="searchableNoResults"
+          rootProps={{ className: this.props.cssClasses.noResults }}
         />
       );
 
diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index abb3d5588c..f8691580fb 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -140,7 +140,7 @@ describe('RefinementList', () => {
       };
 
       const root = shallowRender(props);
-      const wrapper = root.find('[templateKey="show-more-inactive"]');
+      const wrapper = root.find('[templateKey="showMoreInactive"]');
 
       expect(wrapper).toHaveLength(1);
     });
@@ -160,7 +160,7 @@ describe('RefinementList', () => {
       const root = shallowRender(props);
       const wrapper = root
         .find('Template')
-        .filter({ templateKey: 'show-more-inactive' });
+        .filter({ templateKey: 'showMoreInactive' });
 
       expect(wrapper).toHaveLength(0);
     });
@@ -179,7 +179,7 @@ describe('RefinementList', () => {
       };
 
       const root = shallowRender(props);
-      const wrapper = root.find('[templateKey="show-more-active"]');
+      const wrapper = root.find('[templateKey="showMoreActive"]');
 
       expect(wrapper).toHaveLength(1);
     });
@@ -281,7 +281,7 @@ describe('RefinementList', () => {
         templateProps: {
           templates: {
             item: item => item,
-            noResults: x => x,
+            searchableNoResults: x => x,
           },
         },
         toggleRefinement: () => {},
@@ -343,7 +343,7 @@ describe('RefinementList', () => {
         templateProps: {
           templates: {
             item: item => item,
-            'show-more-inactive': x => x,
+            showMoreInactive: x => x,
           },
         },
         toggleRefinement: () => {},
@@ -376,7 +376,7 @@ describe('RefinementList', () => {
         templateProps: {
           templates: {
             item: item => item,
-            'show-more-inactive': x => x,
+            showMoreInactive: x => x,
           },
         },
         toggleRefinement: () => {},
diff --git a/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap b/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap
index 70cd51ea75..540e8c569b 100644
--- a/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap
+++ b/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap
@@ -39,17 +39,10 @@ exports[`refinementList() render renders transformed items correctly 1`] = `
     ]
   }
   hasExhaustiveItems={true}
-  headerFooterData={
-    Object {
-      "header": Object {
-        "refinedFacetsCount": 0,
-      },
-    }
-  }
   isFromSearch={false}
   isShowingMore={false}
   searchIsAlwaysActive={true}
-  searchPlaceholder="Search for other..."
+  searchPlaceholder="Search..."
   showMore={false}
   templateProps={
     Object {
@@ -62,11 +55,13 @@ exports[`refinementList() render renders transformed items correctly 1`] = `
   <span class=\\"{{cssClasses.labelText}}\\">{{{highlighted}}}</span>
   <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>",
+        "searchableNoResults": "No results",
       },
       "templatesConfig": Object {},
       "transformData": undefined,
       "useCustomCompileOptions": Object {
         "item": false,
+        "searchableNoResults": false,
       },
     }
   }
diff --git a/src/widgets/refinement-list/__tests__/refinement-list-test.js b/src/widgets/refinement-list/__tests__/refinement-list-test.js
index 0c2182f93f..1b078b77ba 100644
--- a/src/widgets/refinement-list/__tests__/refinement-list-test.js
+++ b/src/widgets/refinement-list/__tests__/refinement-list-test.js
@@ -27,6 +27,32 @@ describe('refinementList()', () => {
         refinementList(options);
       }).toThrow(/^Usage:/);
     });
+
+    it('throws an exception when showMoreLimit without showMore option', () => {
+      expect(
+        refinementList.bind(null, {
+          attribute: 'attribute',
+          container,
+          showMoreLimit: 10,
+        })
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"\`showMoreLimit\` must be used with \`showMore\` set to \`true\`."`
+      );
+    });
+
+    it('throws an exception when showMoreLimit is lower than limit', () => {
+      expect(
+        refinementList.bind(null, {
+          attribute: 'attribute',
+          container,
+          limit: 20,
+          showMore: true,
+          showMoreLimit: 10,
+        })
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"\`showMoreLimit\` should be greater than \`limit\`."`
+      );
+    });
   });
 
   describe('render', () => {
@@ -137,16 +163,16 @@ describe('refinementList()', () => {
   });
 
   describe('show more', () => {
-    it('should return a configuration with the highest limit value (default value)', () => {
+    it('should return a configuration with the same top-level limit value (default value)', () => {
       const opts = {
         container,
         attribute: 'attribute',
         limit: 1,
-        showMore: {},
+        showMore: true,
       };
       const wdgt = refinementList(opts);
       const partialConfig = wdgt.getConfiguration({});
-      expect(partialConfig.maxValuesPerFacet).toBe(100);
+      expect(partialConfig.maxValuesPerFacet).toBe(1);
     });
 
     it('should return a configuration with the highest limit value (custom value)', () => {
@@ -154,11 +180,12 @@ describe('refinementList()', () => {
         container,
         attribute: 'attribute',
         limit: 1,
-        showMore: { limit: 99 },
+        showMore: true,
+        showMoreLimit: 99,
       };
       const wdgt = refinementList(opts);
       const partialConfig = wdgt.getConfiguration({});
-      expect(partialConfig.maxValuesPerFacet).toBe(opts.showMore.limit);
+      expect(partialConfig.maxValuesPerFacet).toBe(opts.showMoreLimit);
     });
 
     it('should not accept a show more limit that is < limit', () => {
@@ -166,7 +193,8 @@ describe('refinementList()', () => {
         container,
         attribute: 'attribute',
         limit: 100,
-        showMore: { limit: 1 },
+        showMore: true,
+        showMoreLimit: 1,
       };
       expect(() => refinementList(opts)).toThrow();
     });
diff --git a/src/widgets/refinement-list/defaultTemplates.js b/src/widgets/refinement-list/defaultTemplates.js
index 5808cf0419..ca0d3c3c87 100644
--- a/src/widgets/refinement-list/defaultTemplates.js
+++ b/src/widgets/refinement-list/defaultTemplates.js
@@ -7,4 +7,5 @@ export default {
   <span class="{{cssClasses.labelText}}">{{{highlighted}}}</span>
   <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>`,
+  searchableNoResults: 'No results',
 };
diff --git a/src/widgets/refinement-list/defaultTemplates.searchForFacetValue.js b/src/widgets/refinement-list/defaultTemplates.searchForFacetValue.js
deleted file mode 100644
index 8d89e87b81..0000000000
--- a/src/widgets/refinement-list/defaultTemplates.searchForFacetValue.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  noResults: 'No results',
-};
diff --git a/src/widgets/refinement-list/refinement-list.js b/src/widgets/refinement-list/refinement-list.js
index ff6a0a646f..bd7ee099d6 100644
--- a/src/widgets/refinement-list/refinement-list.js
+++ b/src/widgets/refinement-list/refinement-list.js
@@ -1,18 +1,9 @@
 import React, { render, unmountComponentAtNode } from 'preact-compat';
 import cx from 'classnames';
-import filter from 'lodash/filter';
-
 import RefinementList from '../../components/RefinementList/RefinementList.js';
 import connectRefinementList from '../../connectors/refinement-list/connectRefinementList.js';
 import defaultTemplates from './defaultTemplates.js';
-import sffvDefaultTemplates from './defaultTemplates.searchForFacetValue.js';
-import getShowMoreConfig from '../../lib/show-more/getShowMoreConfig.js';
-
-import {
-  prepareTemplateProps,
-  getContainerNode,
-  prefixKeys,
-} from '../../lib/utils.js';
+import { prepareTemplateProps, getContainerNode } from '../../lib/utils.js';
 import { component } from '../../lib/suit';
 
 const suit = component('RefinementList');
@@ -20,11 +11,12 @@ const suit = component('RefinementList');
 const renderer = ({
   containerNode,
   cssClasses,
-  transformData,
   templates,
   renderState,
-  showMoreConfig,
+  showMore,
   searchable,
+  searchablePlaceholder,
+  searchableIsAlwaysActive,
 }) => (
   {
     refine,
@@ -42,7 +34,6 @@ const renderer = ({
 ) => {
   if (isFirstRendering) {
     renderState.templateProps = prepareTemplateProps({
-      transformData,
       defaultTemplates,
       templatesConfig: instantSearchInstance.templatesConfig,
       templates,
@@ -50,27 +41,21 @@ const renderer = ({
     return;
   }
 
-  // Pass count of currently selected items to the header template
-  const headerFooterData = {
-    header: { refinedFacetsCount: filter(items, { isRefined: true }).length },
-  };
-
   render(
     <RefinementList
       createURL={createURL}
       cssClasses={cssClasses}
       facetValues={items}
-      headerFooterData={headerFooterData}
       templateProps={renderState.templateProps}
       toggleRefinement={refine}
       searchFacetValues={searchable ? searchForItems : undefined}
-      searchPlaceholder={searchable.placeholder || 'Search for other...'}
+      searchPlaceholder={searchablePlaceholder}
+      searchIsAlwaysActive={searchableIsAlwaysActive}
       isFromSearch={isFromSearch}
-      showMore={showMoreConfig !== null}
+      showMore={showMore}
       toggleShowMore={toggleShowMore}
       isShowingMore={isShowingMore}
       hasExhaustiveItems={hasExhaustiveItems}
-      searchIsAlwaysActive={searchable.isAlwaysActive || true}
       canToggleShowMore={canToggleShowMore}
     />,
     containerNode
@@ -82,46 +67,25 @@ refinementList({
   container,
   attribute,
   [ operator='or' ],
-  [ sortBy=['isRefined', 'count:desc', 'name:asc'] ],
-  [ limit=10 ],
+  [ sortBy = ['isRefined', 'count:desc', 'name:asc'] ],
+  [ limit = 10 ],
+  [ showMore = false],
+  [ showMoreLimit = 10 ],
   [ cssClasses.{root, noRefinementRoot, searchBox, list, item, selectedItem, label, checkbox, labelText, count, noResults, showMore, disabledShowMore}],
-  [ templates.{item} ],
-  [ transformData.{item} ],
-  [ showMore.{templates: {active, inactive}, limit} ],
-  [ searchable.{placeholder, templates: {noResults}, isAlwaysActive = true, escapeFacetValues = true}],
+  [ templates.{item, searchableNoResults, showMoreActive, showMoreInactive} ],
+  [ searchable ],
+  [ searchablePlaceholder ],
+  [ searchableIsAlwaysActive = true ],
+  [ searchableEscapeFacetValues = true ],
   [ transformItems ],
 })`;
 
-/**
- * @typedef {Object} SearchForFacetTemplates
- * @property {string} [noResults] Templates to use for search for facet values.
- */
-
-/**
- * @typedef {Object} SearchForFacetOptions
- * @property {string} [placeholder] Value of the search field placeholder.
- * @property {SearchForFacetTemplates} [templates] Templates to use for search for facet values.
- * @property {boolean} [isAlwaysActive=true] When `false` the search field will become disabled if
- * there are less items to display than the `options.limit`, otherwise the search field is always usable.
- * @property {boolean} [escapeFacetValues=true] When activated, it will escape the facet values that are returned
- * from Algolia. In this case, the surrounding tags will always be `<mark></mark>`.
- */
-
-/**
- * @typedef {Object} RefinementListShowMoreTemplates
- * @property {string} [active] Template used when showMore was clicked.
- * @property {string} [inactive] Template used when showMore not clicked.
- */
-
-/**
- * @typedef {Object} RefinementListShowMoreOptions
- * @property {RefinementListShowMoreTemplates} [templates] Templates to use for showMore.
- * @property {number} [limit] Max number of facets values to display when showMore is clicked.
- */
-
 /**
  * @typedef {Object} RefinementListTemplates
  * @property  {string|function(RefinementListItemData):string} [item] Item template, provided with `label`, `highlighted`, `value`, `count`, `isRefined`, `url` data properties.
+ * @property {string|function} [searchableNoResults] Templates to use for search for facet values.
+ * @property {string|function} [showMoreActive] Template used when showMore was clicked.
+ * @property {string|function} [showMoreInactive] Template used when showMore not clicked.
  */
 
 /**
@@ -135,11 +99,6 @@ refinementList({
  * @property {object} cssClasses Object containing all the classes computed for the item.
  */
 
-/**
- * @typedef {Object} RefinementListTransforms
- * @property {function} [item] Function to change the object passed to the `item` template.
- */
-
 /**
  * @typedef {Object} RefinementListCSSClasses
  * @property {string|string[]} [root] CSS class to add to the root element.
@@ -166,10 +125,14 @@ refinementList({
  * You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  * @property {number} [limit=10] How much facet values to get. When the show more feature is activated this is the minimum number of facets requested (the show more button is not in active state).
- * @property {SearchForFacetOptions|boolean} [searchable=false] Add a search input to let the user search for more facet values. In order to make this feature work, you need to make the attribute searchable [using the API](https://www.algolia.com/doc/guides/searching/faceting/?language=js#declaring-a-searchable-attribute-for-faceting) or [the dashboard](https://www.algolia.com/explorer/display/).
- * @property {RefinementListShowMoreOptions|boolean} [showMore=false] Limit the number of results and display a showMore button.
+ * @property {boolean} [searchable=false] Add a search input to let the user search for more facet values. In order to make this feature work, you need to make the attribute searchable [using the API](https://www.algolia.com/doc/guides/searching/faceting/?language=js#declaring-a-searchable-attribute-for-faceting) or [the dashboard](https://www.algolia.com/explorer/display/).
+ * @property {boolean} [showMore=false] Limit the number of results and display a showMore button.
+ * @property {string} [searchablePlaceholder] Value of the search field placeholder.
+ * @property {boolean} [searchableIsAlwaysActive=true] When `false` the search field will become disabled if
+ * there are less items to display than the `options.limit`, otherwise the search field is always usable.
+ * @property {boolean} [searchableEscapeFacetValues=true] When activated, it will escape the facet values that are returned
+ * from Algolia. In this case, the surrounding tags will always be `<mark></mark>`.
  * @property {RefinementListTemplates} [templates] Templates to use for the widget.
- * @property {RefinementListTransforms} [transformData] Functions to update the values before applying the templates.
  * @property {RefinementListCSSClasses} [cssClasses] CSS classes to add to the wrapping elements.
  */
 
@@ -204,9 +167,6 @@ refinementList({
  *     attribute: 'brand',
  *     operator: 'or',
  *     limit: 10,
- *     templates: {
- *       header: 'Brands'
- *     }
  *   })
  * );
  */
@@ -216,39 +176,37 @@ export default function refinementList({
   operator = 'or',
   sortBy = ['isRefined', 'count:desc', 'name:asc'],
   limit = 10,
-  cssClasses: userCssClasses = {},
-  templates = defaultTemplates,
-  transformData,
   showMore = false,
+  showMoreLimit,
   searchable = false,
+  searchablePlaceholder = 'Search...',
+  searchableEscapeFacetValues = true,
+  searchableIsAlwaysActive = true,
+  cssClasses: userCssClasses = {},
+  templates = defaultTemplates,
   transformItems,
 } = {}) {
   if (!container) {
     throw new Error(usage);
   }
 
-  const showMoreConfig = getShowMoreConfig(showMore);
-  if (showMoreConfig && showMoreConfig.limit < limit) {
+  if (!showMore && showMoreLimit) {
     throw new Error(
-      'showMore.limit configuration should be > than the limit in the main configuration'
+      '`showMoreLimit` must be used with `showMore` set to `true`.'
     );
   }
 
+  if (showMore && showMoreLimit < limit) {
+    throw new Error('`showMoreLimit` should be greater than `limit`.');
+  }
+
   const escapeFacetValues = searchable
-    ? Boolean(searchable.escapeFacetValues)
+    ? Boolean(searchableEscapeFacetValues)
     : false;
-  const showMoreLimit = (showMoreConfig && showMoreConfig.limit) || limit;
   const containerNode = getContainerNode(container);
-  const showMoreTemplates = showMoreConfig
-    ? prefixKeys('show-more-', showMoreConfig.templates)
-    : {};
-  const searchForValuesTemplates = searchable
-    ? searchable.templates || sffvDefaultTemplates
-    : {};
   const allTemplates = {
+    ...defaultTemplates,
     ...templates,
-    ...showMoreTemplates,
-    ...searchForValuesTemplates,
   };
 
   const cssClasses = {
@@ -288,11 +246,12 @@ export default function refinementList({
   const specializedRenderer = renderer({
     containerNode,
     cssClasses,
-    transformData,
     templates: allTemplates,
     renderState: {},
-    showMoreConfig,
     searchable,
+    searchablePlaceholder,
+    searchableIsAlwaysActive,
+    showMore,
   });
 
   try {
@@ -308,7 +267,7 @@ export default function refinementList({
       escapeFacetValues,
       transformItems,
     });
-  } catch (e) {
+  } catch (error) {
     throw new Error(usage);
   }
 }