feat(refinementList): show more count

packages/instantsearch.js/src/components/RefinementList/RefinementList.tsx

@@ -68,6 +68,7 @@ export type RefinementListProps<TTemplates extends Templates> = {
   showMore?: boolean;
   toggleShowMore?: () => void;
   isShowingMore?: boolean;
+  showMoreCount?: number;
   hasExhaustiveItems?: boolean;
   canToggleShowMore?: boolean;
   className?: string;
@@ -302,6 +303,7 @@ class RefinementList<TTemplates extends Templates> extends Component<
         }}
         data={{
           isShowingMore: this.props.isShowingMore,
+          showMoreCount: this.props.showMoreCount,
         }}
       />
     );

packages/instantsearch.js/src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.ts

@@ -620,6 +620,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
               attributes: ['anotherCategory', 'anotherSubCategory'],
             },
             isShowingMore: false,
+            showMoreCount: 0,
             toggleShowMore: () => {},
             canToggleShowMore: false,
           },
@@ -641,6 +642,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
           sendEvent: expect.any(Function),
           widgetParams: { attributes: ['category', 'subCategory'] },
           isShowingMore: false,
+          showMoreCount: 0,
           toggleShowMore: expect.any(Function),
           canToggleShowMore: false,
         },
@@ -713,6 +715,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
         sendEvent: expect.any(Function),
         widgetParams: { attributes: ['category', 'subCategory'] },
         isShowingMore: false,
+        showMoreCount: 0,
         toggleShowMore: expect.any(Function),
         canToggleShowMore: false,
       });
@@ -751,6 +754,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
         createURL: expect.any(Function),
         widgetParams: { attributes: ['category', 'subCategory'] },
         isShowingMore: false,
+        showMoreCount: 0,
         toggleShowMore: expect.any(Function),
         canToggleShowMore: false,
       });
@@ -821,6 +825,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
         createURL: expect.any(Function),
         widgetParams: { attributes: ['category', 'subCategory'] },
         isShowingMore: false,
+        showMoreCount: 0,
         toggleShowMore: expect.any(Function),
         canToggleShowMore: false,
       });

packages/instantsearch.js/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts

@@ -113,6 +113,10 @@ export type HierarchicalMenuRenderState = {
    * True if the menu is displaying all the menu items.
    */
   isShowingMore: boolean;
+  /**
+   * Total number of facet values that can be displayed for 'show more'.
+   */
+  showMoreCount: number;
   /**
    * Toggles the number of values displayed between `limit` and `showMoreLimit`.
    */
@@ -222,6 +226,7 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
       let _refine: HierarchicalMenuRenderState['refine'] | undefined;
 
       let isShowingMore = false;
+      let showMoreCount = 0;
 
       function createToggleShowMore(
         renderOptions: RenderOptions,
@@ -347,6 +352,7 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
           }
 
           if (results) {
+            const currentLimit = getLimit();
             const facetValues = results.getFacetValues(hierarchicalFacetName, {
               sortBy,
               facetOrdering: sortBy === DEFAULT_SORT,
@@ -363,9 +369,17 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
             // Because this is used for making the search of facets unable or not, it is important
             // to be conservative here.
             const hasExhaustiveItems =
-              (state.maxValuesPerFacet || 0) > getLimit()
-                ? facetItems.length <= getLimit()
-                : facetItems.length < getLimit();
+              (state.maxValuesPerFacet || 0) > currentLimit
+                ? facetItems.length <= currentLimit
+                : facetItems.length < currentLimit;
+
+            if (showMore) {
+              const showMoreTotalCount = Math.min(
+                showMoreLimit,
+                facetItems.length
+              );
+              showMoreCount = showMoreTotalCount - currentLimit;
+            }
 
             canToggleShowMore =
               showMore && (isShowingMore || !hasExhaustiveItems);
@@ -383,6 +397,7 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
             sendEvent,
             widgetParams,
             isShowingMore,
+            showMoreCount,
             toggleShowMore: cachedToggleShowMore,
             canToggleShowMore,
           };

packages/instantsearch.js/src/connectors/menu/__tests__/connectMenu-test.ts

@@ -628,6 +628,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
         sendEvent: expect.any(Function),
         canRefine: false,
         isShowingMore: false,
+        showMoreCount: 0,
         toggleShowMore: expect.any(Function),
         canToggleShowMore: false,
         widgetParams: { attribute: 'brand' },
@@ -673,6 +674,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
             createURL: expect.any(Function),
             widgetParams: { attribute: 'brand' },
             isShowingMore: false,
+            showMoreCount: 0,
             toggleShowMore: expect.any(Function),
             canToggleShowMore: false,
           },
@@ -706,6 +708,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
         sendEvent: expect.any(Function),
         canRefine: false,
         isShowingMore: false,
+        showMoreCount: 0,
         toggleShowMore: expect.any(Function),
         canToggleShowMore: false,
         widgetParams: { attribute: 'brand' },
@@ -765,6 +768,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
         sendEvent: expect.any(Function),
         canRefine: true,
         isShowingMore: false,
+        showMoreCount: 0,
         toggleShowMore: expect.any(Function),
         canToggleShowMore: false,
         widgetParams: { attribute: 'brand' },

packages/instantsearch.js/src/connectors/menu/connectMenu.ts

@@ -96,6 +96,10 @@ export type MenuRenderState = {
    * True if the menu is displaying all the menu items.
    */
   isShowingMore: boolean;
+  /**
+   * Total number of facet values that can be displayed for 'show more'.
+   */
+  showMoreCount: number;
   /**
    * Toggles the number of values displayed between `limit` and `showMore.limit`.
    */
@@ -182,6 +186,7 @@ const connectMenu: MenuConnector = function connectMenu(
     // Provide the same function to the `renderFn` so that way the user
     // has to only bind it once when `isFirstRendering` for instance
     let isShowingMore = false;
+    let showMoreCount = 0;
     let toggleShowMore = () => {};
     function createToggleShowMore(
       renderOptions: RenderOptions,
@@ -289,6 +294,7 @@ const connectMenu: MenuConnector = function connectMenu(
         }
 
         if (results) {
+          const currentLimit = getLimit();
           const facetValues = results.getFacetValues(attribute, {
             sortBy,
             facetOrdering: sortBy === DEFAULT_SORT,
@@ -298,12 +304,20 @@ const connectMenu: MenuConnector = function connectMenu(
               ? facetValues.data
               : [];
 
+          if (showMore) {
+            const showMoreTotalCount = Math.min(
+              showMoreLimit,
+              facetItems.length
+            );
+            showMoreCount = showMoreTotalCount - currentLimit;
+          }
+
           canToggleShowMore =
-            showMore && (isShowingMore || facetItems.length > getLimit());
+            showMore && (isShowingMore || facetItems.length > currentLimit);
 
           items = transformItems(
             facetItems
-              .slice(0, getLimit())
+              .slice(0, currentLimit)
               .map(({ name: label, escapedValue: value, path, ...item }) => ({
                 ...item,
                 label,
@@ -321,6 +335,7 @@ const connectMenu: MenuConnector = function connectMenu(
           canRefine: items.length > 0,
           widgetParams,
           isShowingMore,
+          showMoreCount,
           toggleShowMore: cachedToggleShowMore,
           canToggleShowMore,
         };

packages/instantsearch.js/src/connectors/refinement-list/__tests__/connectRefinementList-test.ts

@@ -1091,6 +1091,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
         showMoreLimit: 2,
       },
       isShowingMore: false,
+      showMoreCount: 1,
       canToggleShowMore: true,
       toggleShowMore: expect.any(Function),
       hasExhaustiveItems: false,
@@ -1125,6 +1126,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
         showMoreLimit: 2,
       },
       isShowingMore: false,
+      showMoreCount: 1,
       canToggleShowMore: false,
       toggleShowMore: expect.any(Function),
       hasExhaustiveItems: false,
@@ -1160,6 +1162,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
         showMoreLimit: 2,
       },
       isShowingMore: false,
+      showMoreCount: 1,
       canToggleShowMore: true,
       toggleShowMore: expect.any(Function),
       hasExhaustiveItems: false,
@@ -1201,6 +1204,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
         showMoreLimit: 2,
       },
       isShowingMore: true,
+      showMoreCount: 0,
       canToggleShowMore: true,
       toggleShowMore: expect.any(Function),
       hasExhaustiveItems: false,
@@ -2455,6 +2459,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
           hasExhaustiveItems: true,
           isFromSearch: false,
           isShowingMore: false,
+          showMoreCount: 0,
           items: [],
           refine: expect.any(Function),
           searchForItems: expect.any(Function),
@@ -2515,6 +2520,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
           hasExhaustiveItems: true,
           isFromSearch: false,
           isShowingMore: false,
+          showMoreCount: 0,
           items: [
             {
               count: 88,
@@ -2575,6 +2581,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
         hasExhaustiveItems: true,
         isFromSearch: false,
         isShowingMore: false,
+        showMoreCount: 0,
         items: [],
         refine: expect.any(Function),
         searchForItems: expect.any(Function),
@@ -2618,6 +2625,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
         hasExhaustiveItems: true,
         isFromSearch: false,
         isShowingMore: false,
+        showMoreCount: 0,
         items: [],
         refine: expect.any(Function),
         searchForItems: expect.any(Function),

packages/instantsearch.js/src/connectors/refinement-list/connectRefinementList.ts

@@ -136,6 +136,10 @@ export type RefinementListRenderState = {
    * True if the menu is displaying all the menu items.
    */
   isShowingMore: boolean;
+  /**
+   * Total number of facet values that can be displayed for 'show more'.
+   */
+  showMoreCount: number;
   /**
    * Toggles the number of values displayed between `limit` and `showMoreLimit`.
    */
@@ -235,6 +239,7 @@ const connectRefinementList: RefinementListConnector =
       let sendEvent: RefinementListRenderState['sendEvent'] | undefined;
 
       let isShowingMore = false;
+      let showMoreCount = 0;
       // Provide the same function to the `renderFn` so that way the user
       // has to only bind it once when `isFirstRendering` for instance
       let toggleShowMore = () => {};
@@ -322,6 +327,7 @@ const connectRefinementList: RefinementListConnector =
                       }),
                       items: normalizedFacetValues,
                       canToggleShowMore: false,
+                      showMoreCount,
                       canRefine: true,
                       isFromSearch: true,
                       instantSearchInstance,
@@ -371,6 +377,7 @@ const connectRefinementList: RefinementListConnector =
             renderOptions;
           let items: RefinementListItem[] = [];
           let facetValues: SearchResults.FacetValue[] | FacetHit[] = [];
+          showMoreCount = 0;
 
           if (!sendEvent || !triggerRefine || !searchForFacetValues) {
             sendEvent = createSendEventForFacet({
@@ -415,6 +422,14 @@ const connectRefinementList: RefinementListConnector =
             lastResultsFromMainSearch = results;
             lastItemsFromMainSearch = items;
 
+            if (showMore) {
+              const showMoreTotalCount = Math.min(
+                showMoreLimit,
+                facetValues.length
+              );
+              showMoreCount = showMoreTotalCount - currentLimit;
+            }
+
             if (renderOptions.results) {
               toggleShowMore = createToggleShowMore(renderOptions, this);
             }
@@ -443,6 +458,7 @@ const connectRefinementList: RefinementListConnector =
             canRefine: items.length > 0,
             widgetParams,
             isShowingMore,
+            showMoreCount,
             canToggleShowMore,
             toggleShowMore: cachedToggleShowMore,
             sendEvent,

packages/instantsearch.js/src/widgets/hierarchical-menu/hierarchical-menu.tsx

@@ -48,9 +48,9 @@ type HierarchicalMenuTemplates = Partial<{
     cssClasses: HierarchicalMenuCSSClasses;
   }>;
   /**
-   * Template used for the show more text, provided with `isShowingMore` data property.
+   * Template used for the show more text, provided with `isShowingMore`, `showMoreCount` data properties.
    */
-  showMoreText: Template<{ isShowingMore: boolean }>;
+  showMoreText: Template<{ isShowingMore: boolean; showMoreCount: number }>;
 }>;
 
 export type HierarchicalMenuCSSClasses = Partial<{
@@ -208,6 +208,7 @@ const renderer =
       refine,
       instantSearchInstance,
       isShowingMore,
+      showMoreCount,
       toggleShowMore,
       canToggleShowMore,
     }: HierarchicalMenuRenderState &
@@ -233,6 +234,7 @@ const renderer =
         showMore={showMore}
         toggleShowMore={toggleShowMore}
         isShowingMore={isShowingMore}
+        showMoreCount={showMoreCount}
         canToggleShowMore={canToggleShowMore}
       />,
       containerNode

packages/instantsearch.js/src/widgets/menu/__tests__/__snapshots__/menu-test.ts.snap

@@ -41,6 +41,7 @@ exports[`menu render renders transformed items 1`] = `
   ],
   "isShowingMore": false,
   "showMore": undefined,
+  "showMoreCount": 0,
   "templateProps": {
     "templates": {
       "item": [Function],
@@ -96,6 +97,7 @@ exports[`menu render snapshot 1`] = `
   ],
   "isShowingMore": false,
   "showMore": undefined,
+  "showMoreCount": 0,
   "templateProps": {
     "templates": {
       "item": [Function],

packages/instantsearch.js/src/widgets/menu/menu.tsx

@@ -86,11 +86,9 @@ export type MenuTemplates = Partial<{
     value: string;
   }>;
   /**
-   * Template used for the show more text, provided with `isShowingMore` data property.
+   * Template used for the show more text, provided with `isShowingMore`, `showMoreCount` data properties.
    */
-  showMoreText: Template<{
-    isShowingMore: boolean;
-  }>;
+  showMoreText: Template<{ isShowingMore: boolean; showMoreCount: number }>;
 }>;
 
 export type MenuComponentCSSClasses = ComponentCSSClasses<MenuCSSClasses>;
@@ -135,6 +133,7 @@ const renderer =
       createURL,
       instantSearchInstance,
       isShowingMore,
+      showMoreCount,
       toggleShowMore,
       canToggleShowMore,
     }: MenuRenderState & RendererOptions<MenuConnectorParams>,
@@ -164,6 +163,7 @@ const renderer =
         toggleRefinement={refine}
         toggleShowMore={toggleShowMore}
         isShowingMore={isShowingMore}
+        showMoreCount={showMoreCount}
         canToggleShowMore={canToggleShowMore}
       />,
       containerNode