feat(hooks-web): expose sendEvent to hitComponent (#3476)

* feat(hooks-web): expose sendEvent to hitComponent

This makes it straightforward to implement eg. a conversion event on the hit component

Author: Haroenv

packages/react-instantsearch-hooks-web/src/ui/Hits.tsx

@@ -3,10 +3,15 @@ import React from 'react';
 import { cx } from './lib/cx';
 
 import type { Hit } from 'instantsearch.js';
+import type { SendEventForHits } from 'instantsearch.js/es/lib/utils';
 
 export type HitsProps<THit> = React.ComponentProps<'div'> & {
   hits: THit[];
-  hitComponent?: React.JSXElementConstructor<{ hit: THit }>;
+  sendEvent: SendEventForHits;
+  hitComponent?: React.JSXElementConstructor<{
+    hit: THit;
+    sendEvent: SendEventForHits;
+  }>;
   classNames?: Partial<HitsClassNames>;
 };
 
@@ -39,6 +44,7 @@ export type HitsClassNames = {
 
 export function Hits<THit extends Hit>({
   hits,
+  sendEvent,
   hitComponent: HitComponent = DefaultHitComponent,
   classNames = {},
   ...props
@@ -59,7 +65,7 @@ export function Hits<THit extends Hit>({
             key={hit.objectID}
             className={cx('ais-Hits-item', classNames.item)}
           >
-            <HitComponent hit={hit} />
+            <HitComponent hit={hit} sendEvent={sendEvent} />
           </li>
         ))}
       </ol>

packages/react-instantsearch-hooks-web/src/ui/InfiniteHits.tsx

@@ -3,10 +3,15 @@ import React from 'react';
 import { cx } from './lib/cx';
 
 import type { Hit } from 'instantsearch.js';
+import type { SendEventForHits } from 'instantsearch.js/es/lib/utils';
 
 export type InfiniteHitsProps<THit> = React.ComponentProps<'div'> & {
-  hitComponent?: React.JSXElementConstructor<{ hit: THit }>;
   hits: THit[];
+  sendEvent: SendEventForHits;
+  hitComponent?: React.JSXElementConstructor<{
+    hit: THit;
+    sendEvent: SendEventForHits;
+  }>;
   isFirstPage: boolean;
   isLastPage: boolean;
   onShowPrevious?: () => void;
@@ -66,6 +71,7 @@ function DefaultHitComponent({ hit }: { hit: Hit }) {
 export function InfiniteHits<THit extends Hit>({
   hitComponent: HitComponent = DefaultHitComponent,
   hits,
+  sendEvent,
   isFirstPage,
   isLastPage,
   onShowPrevious,
@@ -108,7 +114,7 @@ export function InfiniteHits<THit extends Hit>({
             key={hit.objectID}
             className={cx('ais-InfiniteHits-item', classNames.item)}
           >
-            <HitComponent hit={hit} />
+            <HitComponent hit={hit} sendEvent={sendEvent} />
           </li>
         ))}
       </ol>

packages/react-instantsearch-hooks-web/src/ui/__tests__/Hits.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { Hits } from '../Hits';
@@ -15,6 +16,7 @@ describe('Hits', () => {
         { objectID: 'abc', __position: 1 },
         { objectID: 'def', __position: 2 },
       ] as THit[],
+      sendEvent: jest.fn(),
       ...props,
     };
   }
@@ -101,6 +103,21 @@ describe('Hits', () => {
     `);
   });
 
+  test('passes sendEvent to hitComponent', () => {
+    const props = createProps({
+      hitComponent: ({ hit, sendEvent }) => (
+        <button onClick={() => sendEvent(hit)}>{hit.objectID}</button>
+      ),
+    });
+
+    const { container } = render(<Hits {...props} />);
+
+    userEvent.click(container.querySelector('button')!);
+
+    expect(props.sendEvent).toHaveBeenCalledTimes(1);
+    expect(props.sendEvent).toHaveBeenLastCalledWith(props.hits[0]);
+  });
+
   test('accepts custom class names', () => {
     const props = createProps({
       className: 'MyCustomHits',

packages/react-instantsearch-hooks-web/src/ui/__tests__/InfiniteHits.test.tsx

@@ -16,6 +16,7 @@ describe('InfiniteHits', () => {
         { objectID: 'abc', __position: 1 },
         { objectID: 'def', __position: 2 },
       ],
+      sendEvent: jest.fn(),
       isFirstPage: true,
       isLastPage: false,
       onShowPrevious: jest.fn(),
@@ -183,6 +184,23 @@ describe('InfiniteHits', () => {
     `);
   });
 
+  test('passes sendEvent to hitComponent', () => {
+    const props = createProps({
+      hitComponent: ({ hit, sendEvent }) => (
+        <button className="hitButton" onClick={() => sendEvent(hit)}>
+          {hit.objectID}
+        </button>
+      ),
+    });
+
+    const { container } = render(<InfiniteHits {...props} />);
+
+    userEvent.click(container.querySelector('.hitButton')!);
+
+    expect(props.sendEvent).toHaveBeenCalledTimes(1);
+    expect(props.sendEvent).toHaveBeenLastCalledWith(props.hits[0]);
+  });
+
   describe('showPrevious', () => {
     test('renders without showPrevious if disabled', () => {
       const props = createProps({});

packages/react-instantsearch-hooks-web/src/widgets/Hits.tsx

@@ -9,7 +9,7 @@ import type { UseHitsProps } from 'react-instantsearch-hooks';
 
 type UiProps<THit extends BaseHit> = Pick<
   HitsUiComponentProps<Hit<THit>>,
-  'hits'
+  'hits' | 'sendEvent'
 >;
 
 export type HitsProps<THit extends BaseHit> = Omit<
@@ -19,10 +19,13 @@ export type HitsProps<THit extends BaseHit> = Omit<
   UseHitsProps<THit>;
 
 export function Hits<THit extends BaseHit = BaseHit>(props: HitsProps<THit>) {
-  const { hits } = useHits<THit>(props, { $$widgetType: 'ais.hits' });
+  const { hits, sendEvent } = useHits<THit>(props, {
+    $$widgetType: 'ais.hits',
+  });
 
   const uiProps: UiProps<THit> = {
     hits,
+    sendEvent,
   };
 
   return <HitsUiComponent {...props} {...uiProps} />;

packages/react-instantsearch-hooks-web/src/widgets/InfiniteHits.tsx

@@ -10,6 +10,7 @@ import type { UseInfiniteHitsProps } from 'react-instantsearch-hooks';
 type UiProps<THit extends BaseHit = BaseHit> = Pick<
   InfiniteHitsUiComponentProps<Hit<THit>>,
   | 'hits'
+  | 'sendEvent'
   | 'onShowPrevious'
   | 'onShowMore'
   | 'isFirstPage'
@@ -34,11 +35,12 @@ export function InfiniteHits<THit extends BaseHit = BaseHit>({
   showPrevious: shouldShowPrevious = true,
   ...props
 }: InfiniteHitsProps<THit>) {
-  const { hits, showPrevious, showMore, isFirstPage, isLastPage } =
+  const { hits, sendEvent, showPrevious, showMore, isFirstPage, isLastPage } =
     useInfiniteHits<THit>(props, { $$widgetType: 'ais.infiniteHits' });
 
   const uiProps: UiProps<THit> = {
     hits,
+    sendEvent,
     onShowPrevious: shouldShowPrevious ? showPrevious : undefined,
     onShowMore: showMore,
     isFirstPage,