fix(recommend): fix sendEvent function passing to Recommend components

packages/instantsearch-ui-components/src/components/Carousel.tsx

@@ -245,7 +245,7 @@ export function createCarouselComponent({ createElement, Fragment }: Renderer) {
                 sendEvent('click:internal', item, 'Item Clicked');
               }}
             >
-              <ItemComponent item={item} />
+              <ItemComponent item={item} sendEvent={sendEvent} />
             </li>
           ))}
         </ol>

packages/instantsearch-ui-components/src/components/__tests__/FrequentlyBoughtTogether.test.tsx

@@ -155,6 +155,7 @@ describe('FrequentlyBoughtTogether', () => {
                     item={item}
                     onClick={jest.fn()}
                     onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
                   />
                 </li>
               ))}
@@ -237,6 +238,12 @@ describe('FrequentlyBoughtTogether', () => {
     );
 
     expect(sendEvent).toHaveBeenCalledTimes(1);
+    expect(sendEvent).toHaveBeenNthCalledWith(
+      1,
+      'click:internal',
+      items[0],
+      'Item Clicked'
+    );
   });
 
   test('accepts custom title translation', () => {

packages/instantsearch-ui-components/src/components/__tests__/LookingSimilar.test.tsx

@@ -155,6 +155,7 @@ describe('LookingSimilar', () => {
                     item={item}
                     onClick={jest.fn()}
                     onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
                   />
                 </li>
               ))}
@@ -233,6 +234,12 @@ describe('LookingSimilar', () => {
     userEvent.click(container.querySelectorAll('.ais-LookingSimilar-item')[0]!);
 
     expect(sendEvent).toHaveBeenCalledTimes(1);
+    expect(sendEvent).toHaveBeenNthCalledWith(
+      1,
+      'click:internal',
+      items[0],
+      'Item Clicked'
+    );
   });
 
   test('accepts custom title translation', () => {

packages/instantsearch-ui-components/src/components/__tests__/RelatedProducts.test.tsx

@@ -155,6 +155,7 @@ describe('RelatedProducts', () => {
                     item={item}
                     onClick={jest.fn()}
                     onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
                   />
                 </li>
               ))}
@@ -235,6 +236,12 @@ describe('RelatedProducts', () => {
     );
 
     expect(sendEvent).toHaveBeenCalledTimes(1);
+    expect(sendEvent).toHaveBeenNthCalledWith(
+      1,
+      'click:internal',
+      items[0],
+      'Item Clicked'
+    );
   });
 
   test('accepts custom title translation', () => {

packages/instantsearch-ui-components/src/components/__tests__/TrendingItems.test.tsx

@@ -155,6 +155,7 @@ describe('TrendingItems', () => {
                     item={item}
                     onClick={jest.fn()}
                     onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
                   />
                 </li>
               ))}
@@ -233,6 +234,12 @@ describe('TrendingItems', () => {
     userEvent.click(container.querySelectorAll('.ais-TrendingItems-item')[0]!);
 
     expect(sendEvent).toHaveBeenCalledTimes(1);
+    expect(sendEvent).toHaveBeenNthCalledWith(
+      1,
+      'click:internal',
+      items[0],
+      'Item Clicked'
+    );
   });
 
   test('accepts custom title translation', () => {

packages/instantsearch-ui-components/src/components/recommend-shared/List.tsx

@@ -32,7 +32,7 @@ export function createListComponent({ createElement }: Renderer) {
                 sendEvent('click:internal', item, 'Item Clicked');
               }}
             >
-              <ItemComponent item={item} />
+              <ItemComponent item={item} sendEvent={sendEvent} />
             </li>
           ))}
         </ol>

packages/instantsearch-ui-components/src/types/Recommend.ts

@@ -93,6 +93,7 @@ export type RecordWithObjectID<TObject = Record<string, unknown>> = TObject & {
 
 export type RecommendItemComponentProps<TObject> = {
   item: TObject;
+  sendEvent: SendEventForHits;
   onClick?: () => void;
   onAuxClick?: () => void;
 };

packages/instantsearch-ui-components/src/types/shared.ts

@@ -1,2 +1,12 @@
 // Should be imported from a shared package in the future
-export type SendEventForHits = (...props: unknown[]) => void;
+
+import type { RecordWithObjectID } from './Recommend';
+
+type BuiltInSendEventForHits = (
+  eventType: string,
+  hits: RecordWithObjectID<any> | Array<RecordWithObjectID<any>>,
+  eventName?: string,
+  additionalData?: Record<string, any>
+) => void;
+type CustomSendEventForHits = (customPayload: any) => void;
+export type SendEventForHits = BuiltInSendEventForHits & CustomSendEventForHits;

packages/instantsearch.js/src/widgets/frequently-bought-together/frequently-bought-together.tsx

@@ -25,6 +25,7 @@ import type {
   BaseHit,
   RecommendResponse,
   Hit,
+  TemplateWithBindEvent,
 } from '../../types';
 import type {
   RecommendClassNames,
@@ -84,21 +85,21 @@ const renderer =
         : undefined
     ) as FrequentlyBoughtTogetherUiProps<AlgoliaHit>['headerComponent'];
 
-    const itemComponent = (
+    const itemComponent: FrequentlyBoughtTogetherUiProps<AlgoliaHit>['itemComponent'] =
       templates.item
-        ? ({ item }) => {
+        ? ({ item, sendEvent: _sendEvent, ...rootProps }) => {
             return (
               <TemplateComponent
                 {...renderState.templateProps}
                 templateKey="item"
                 rootTagName="fragment"
                 data={item}
-                sendEvent={sendEvent}
+                sendEvent={_sendEvent}
+                rootProps={{ ...rootProps }}
               />
             );
           }
-        : undefined
-    ) as FrequentlyBoughtTogetherUiProps<AlgoliaHit>['itemComponent'];
+        : undefined;
 
     const emptyComponent = (
       templates.empty
@@ -189,7 +190,7 @@ export type FrequentlyBoughtTogetherTemplates<
   /**
    * Template to use for each result. This template will receive an object containing a single record.
    */
-  item: Template<AlgoliaHit<THit>>;
+  item: TemplateWithBindEvent<AlgoliaHit<THit>>;
 
   /**
    * Template to use to wrap all items.

packages/instantsearch.js/src/widgets/looking-similar/looking-similar.tsx

@@ -25,6 +25,7 @@ import type {
   BaseHit,
   RecommendResponse,
   Hit,
+  TemplateWithBindEvent,
 } from '../../types';
 import type {
   RecommendClassNames,
@@ -83,21 +84,21 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
         : undefined
     ) as LookingSimilarUiProps<AlgoliaHit>['headerComponent'];
 
-    const itemComponent = (
+    const itemComponent: LookingSimilarUiProps<AlgoliaHit>['itemComponent'] =
       templates.item
-        ? ({ item }) => {
+        ? ({ item, sendEvent: _sendEvent, ...rootProps }) => {
             return (
               <TemplateComponent
                 {...renderState.templateProps}
                 templateKey="item"
                 rootTagName="fragment"
                 data={item}
-                sendEvent={sendEvent}
+                sendEvent={_sendEvent}
+                rootProps={{ ...rootProps }}
               />
             );
           }
-        : undefined
-    ) as LookingSimilarUiProps<AlgoliaHit>['itemComponent'];
+        : undefined;
 
     const emptyComponent = (
       templates.empty
@@ -187,7 +188,7 @@ export type LookingSimilarTemplates<
   /**
    * Template to use for each result. This template will receive an object containing a single record.
    */
-  item: Template<AlgoliaHit<THit>>;
+  item: TemplateWithBindEvent<AlgoliaHit<THit>>;
 
   /**
    * Template to use to wrap all items.

packages/instantsearch.js/src/widgets/related-products/related-products.tsx

@@ -25,6 +25,7 @@ import type {
   BaseHit,
   RecommendResponse,
   Hit,
+  TemplateWithBindEvent,
 } from '../../types';
 import type {
   RecommendClassNames,
@@ -90,21 +91,21 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
         : undefined
     ) as RelatedProductsUiProps<AlgoliaHit>['headerComponent'];
 
-    const itemComponent = (
+    const itemComponent: RelatedProductsUiProps<AlgoliaHit>['itemComponent'] =
       templates.item
-        ? ({ item }) => {
+        ? ({ item, sendEvent: _sendEvent, ...rootProps }) => {
             return (
               <TemplateComponent
                 {...renderState.templateProps}
                 templateKey="item"
                 rootTagName="fragment"
                 data={item}
-                sendEvent={sendEvent}
+                sendEvent={_sendEvent}
+                rootProps={{ ...rootProps }}
               />
             );
           }
-        : undefined
-    ) as RelatedProductsUiProps<AlgoliaHit>['itemComponent'];
+        : undefined;
 
     const emptyComponent = (
       templates.empty
@@ -194,7 +195,7 @@ export type RelatedProductsTemplates<
   /**
    * Template to use for each result. This template will receive an object containing a single record.
    */
-  item: Template<AlgoliaHit<THit>>;
+  item: TemplateWithBindEvent<AlgoliaHit<THit>>;
 
   /**
    * Template to use to wrap all items.

packages/instantsearch.js/src/widgets/trending-items/trending-items.tsx

@@ -25,6 +25,7 @@ import type {
   BaseHit,
   RecommendResponse,
   Hit,
+  TemplateWithBindEvent,
 } from '../../types';
 import type {
   RecommendClassNames,
@@ -90,21 +91,21 @@ function createRenderer<THit extends NonNullable<object> = BaseHit>({
         : undefined
     ) as TrendingItemsUiProps<AlgoliaHit>['headerComponent'];
 
-    const itemComponent = (
+    const itemComponent: TrendingItemsUiProps<AlgoliaHit>['itemComponent'] =
       templates.item
-        ? ({ item }) => {
+        ? ({ item, sendEvent: _sendEvent, ...rootProps }) => {
             return (
               <TemplateComponent
                 {...renderState.templateProps}
                 templateKey="item"
                 rootTagName="fragment"
                 data={item}
-                sendEvent={sendEvent}
+                sendEvent={_sendEvent}
+                rootProps={{ ...rootProps }}
               />
             );
           }
-        : undefined
-    ) as TrendingItemsUiProps<AlgoliaHit>['itemComponent'];
+        : undefined;
 
     const emptyComponent = (
       templates.empty
@@ -193,7 +194,7 @@ export type TrendingItemsTemplates<THit extends NonNullable<object> = BaseHit> =
     /**
      * Template to use for each result. This template will receive an object containing a single record.
      */
-    item: Template<AlgoliaHit<THit>>;
+    item: TemplateWithBindEvent<AlgoliaHit<THit>>;
 
     /**
      * Template to use to wrap all items.

packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx

@@ -1,5 +1,5 @@
 import { createFrequentlyBoughtTogetherComponent } from 'instantsearch-ui-components';
-import React, { createElement, Fragment } from 'react';
+import React, { createElement, Fragment, useMemo } from 'react';
 import {
   useFrequentlyBoughtTogether,
   useInstantSearch,
@@ -77,9 +77,17 @@ export function FrequentlyBoughtTogether<THit extends BaseHit = BaseHit>({
         })
     : undefined;
 
+  const _itemComponent: typeof itemComponent = useMemo(
+    () =>
+      itemComponent
+        ? (itemProps) => itemComponent({ ...itemProps, sendEvent })
+        : undefined,
+    [itemComponent, sendEvent]
+  );
+
   const uiProps: UiProps<THit> = {
     items: items as Array<Hit<THit>>,
-    itemComponent,
+    itemComponent: _itemComponent,
     headerComponent,
     emptyComponent,
     layout,

packages/react-instantsearch/src/widgets/LookingSimilar.tsx

@@ -1,5 +1,5 @@
 import { createLookingSimilarComponent } from 'instantsearch-ui-components';
-import React, { createElement, Fragment } from 'react';
+import React, { createElement, Fragment, useMemo } from 'react';
 import { useLookingSimilar, useInstantSearch } from 'react-instantsearch-core';
 
 import type {
@@ -75,9 +75,17 @@ export function LookingSimilar<THit extends BaseHit = BaseHit>({
         })
     : undefined;
 
+  const _itemComponent: typeof itemComponent = useMemo(
+    () =>
+      itemComponent
+        ? (itemProps) => itemComponent({ ...itemProps, sendEvent })
+        : undefined,
+    [itemComponent, sendEvent]
+  );
+
   const uiProps: UiProps<THit> = {
     items: items as Array<Hit<THit>>,
-    itemComponent,
+    itemComponent: _itemComponent,
     headerComponent,
     emptyComponent,
     layout,

packages/react-instantsearch/src/widgets/RelatedProducts.tsx

@@ -1,5 +1,5 @@
 import { createRelatedProductsComponent } from 'instantsearch-ui-components';
-import React, { createElement, Fragment } from 'react';
+import React, { createElement, Fragment, useMemo } from 'react';
 import { useInstantSearch, useRelatedProducts } from 'react-instantsearch-core';
 
 import type {
@@ -75,9 +75,17 @@ export function RelatedProducts<TItem extends BaseHit = BaseHit>({
         })
     : undefined;
 
+  const _itemComponent: typeof itemComponent = useMemo(
+    () =>
+      itemComponent
+        ? (itemProps) => itemComponent({ ...itemProps, sendEvent })
+        : undefined,
+    [itemComponent, sendEvent]
+  );
+
   const uiProps: UiProps<TItem> = {
     items: items as Array<Hit<TItem>>,
-    itemComponent,
+    itemComponent: _itemComponent,
     headerComponent,
     emptyComponent,
     layout,