diff --git a/bundlesize.config.json b/bundlesize.config.json
index 7579a0f21f..6808fe065f 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -22,7 +22,7 @@
},
{
"path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
- "maxSize": "64 kB"
+ "maxSize": "64.5 kB"
},
{
"path": "packages/vue-instantsearch/vue2/umd/index.js",
diff --git a/examples/react/getting-started/index.html b/examples/react/getting-started/index.html
index 0c360b898a..2bd6fd1f0e 100644
--- a/examples/react/getting-started/index.html
+++ b/examples/react/getting-started/index.html
@@ -9,15 +9,6 @@
-
-
-
React InstantSearch — Getting started
diff --git a/examples/react/getting-started/package.json b/examples/react/getting-started/package.json
index 33aba4557e..a57010b330 100644
--- a/examples/react/getting-started/package.json
+++ b/examples/react/getting-started/package.json
@@ -9,6 +9,7 @@
"dependencies": {
"algoliasearch": "4.23.2",
"instantsearch.js": "4.73.4",
+ "instantsearch.css": "8.4.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-instantsearch": "7.12.4"
diff --git a/examples/react/getting-started/products.html b/examples/react/getting-started/products.html
index 048d3823c4..31d0653055 100644
--- a/examples/react/getting-started/products.html
+++ b/examples/react/getting-started/products.html
@@ -9,15 +9,6 @@
-
-
-
React InstantSearch — Getting started
diff --git a/examples/react/getting-started/src/App.css b/examples/react/getting-started/src/App.css
index 3dc8bd058a..003ae882ba 100644
--- a/examples/react/getting-started/src/App.css
+++ b/examples/react/getting-started/src/App.css
@@ -87,16 +87,22 @@ em {
flex-shrink: 0;
}
-.ais-TrendingItems-list,
-.ais-RelatedProducts-list {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 1rem;
-}
-
.ais-TrendingItems-item,
.ais-RelatedProducts-item {
+ background: none !important;
+ align-items: stretch !important;
+ padding: 0 !important;
+ box-shadow: none !important;
+}
+
+.ais-TrendingItems-item > div,
+.ais-RelatedProducts-item > div {
align-items: start;
+ background: #fff;
+ align-items: center;
+ padding: 1.5rem;
+ display: flex;
+ box-shadow: 0 0 0 1px #23263b0d, 0 1px 3px #23263b26;
}
.ais-TrendingItems-item img,
@@ -113,3 +119,50 @@ em {
height: 100%;
justify-content: space-between;
}
+
+.ais-TrendingItems-item h2,
+.ais-RelatedProducts-item h2 {
+ display: -webkit-box;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ line-height: 1.2;
+}
+
+.ais-Carousel-item {
+ padding: 0.5rem !important;
+}
+
+.ais-Carousel-list {
+ margin: -0.5rem !important;
+ grid-auto-columns: calc(22% - 0.5rem) !important;
+}
+
+.ais-Carousel::before,
+.ais-Carousel::after {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 0.5rem;
+ display: block;
+ background: rgb(255, 255, 255);
+ content: '';
+}
+
+.ais-Carousel::before {
+ left: -0.5rem;
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+}
+
+.ais-Carousel::after {
+ right: -0.5rem;
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 1) 100%
+ );
+}
diff --git a/examples/react/getting-started/src/App.tsx b/examples/react/getting-started/src/App.tsx
index 2d55e4b9cb..88cb053cd3 100644
--- a/examples/react/getting-started/src/App.tsx
+++ b/examples/react/getting-started/src/App.tsx
@@ -10,11 +10,13 @@ import {
RefinementList,
SearchBox,
TrendingItems,
+ Carousel,
} from 'react-instantsearch';
import { Panel } from './Panel';
import './App.css';
+import 'instantsearch.css/themes/satellite.css';
const searchClient = algoliasearch(
'latency',
@@ -58,7 +60,11 @@ export function App() {
-
+
@@ -92,12 +98,14 @@ function HitComponent({ hit }: { hit: HitType }) {
function ItemComponent({ item }: { item: Hit }) {
return (
-
-
-
-
{item.name}
-
-
-
{item.name}
-
{item.objectID}
}
+ />
+ );
+
+ expect(container).toMatchInlineSnapshot(`
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+
+
{item.objectID}
}
+ classNames={{
+ root: 'ROOT',
+ list: 'LIST',
+ item: 'ITEM',
+ navigation: 'NAVIGATION',
+ navigationPrevious: 'NAVIGATION_PREVIOUS',
+ navigationNext: 'NAVIGATION_NEXT',
+ }}
+ />
+ );
+
+ expect(container.querySelector('.ais-Carousel')).toHaveClass('ROOT');
+ expect(container.querySelector('.ais-Carousel-list')).toHaveClass('LIST');
+ expect(container.querySelector('.ais-Carousel-item')).toHaveClass('ITEM');
+ expect(container.querySelector('.ais-Carousel-navigation')).toHaveClass(
+ 'NAVIGATION'
+ );
+ expect(
+ container.querySelector('.ais-Carousel-navigation--previous')
+ ).toHaveClass('NAVIGATION_PREVIOUS');
+ expect(
+ container.querySelector('.ais-Carousel-navigation--next')
+ ).toHaveClass('NAVIGATION_NEXT');
+ });
+
+ test('adds custom icon components', () => {
+ const { container } = render(
+ {item.objectID}
}
+ previousIconComponent={() => Previous
}
+ nextIconComponent={() => Next
}
+ />
+ );
+
+ expect(container).toMatchInlineSnapshot(`
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+
+
{item.objectID}
}
+ translations={{
+ nextButtonLabel: 'Next button label',
+ nextButtonTitle: 'Next button title',
+ previousButtonLabel: 'Previous button label',
+ previousButtonTitle: 'Previous button title',
+ listLabel: 'List label',
+ }}
+ />
+ );
+
+ expect(container).toMatchInlineSnapshot(`
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+
+
+ {items.map((item) => (
+ -
+
{item.objectID}
+
+ ))}
+
+ )}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-FrequentlyBoughtTogether'))
+ .toMatchInlineSnapshot(`
+
+
+ Frequently bought together
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+ `);
+ });
+ });
+
+ test('renders Carousel as a layout component', async () => {
+ const client = createRecommendSearchClient({
+ minimal: true,
+ });
+ const { container } = render(
+
+ {item.objectID}
}
+ layoutComponent={Carousel}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-FrequentlyBoughtTogether'))
+ .toMatchInlineSnapshot(`
+
+
+ Frequently bought together
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+
{item.objectID}
}
+ layoutComponent={(props) => {
+ return (
+ Previous
}
+ nextIconComponent={() => Next
}
+ classNames={{
+ root: 'ROOT',
+ list: cx('LIST', props.classNames.list),
+ item: cx('ITEM', props.classNames.item),
+ navigation: 'NAVIGATION',
+ navigationNext: 'NAVIGATION_NEXT',
+ navigationPrevious: 'NAVIGATION_PREVIOUS',
+ }}
+ translations={{
+ nextButtonLabel: 'NEXT_BUTTON_LABEL',
+ nextButtonTitle: 'NEXT_BUTTON_TITLE',
+ previousButtonLabel: 'PREVIOUS_BUTTON_LABEL',
+ previousButtonTitle: 'PREVIOUS_BUTTON_TITLE',
+ listLabel: 'LIST_LABEL',
+ }}
+ />
+ );
+ }}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-FrequentlyBoughtTogether'))
+ .toMatchInlineSnapshot(`
+
+
+ Frequently bought together
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+
+ {items.map((item) => (
+ -
+
{item.objectID}
+
+ ))}
+
+ )}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-LookingSimilar'))
+ .toMatchInlineSnapshot(`
+
+
+ Looking similar
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+ `);
+ });
+ });
+
+ test('renders Carousel as a layout component', async () => {
+ const client = createRecommendSearchClient({
+ minimal: true,
+ });
+ const { container } = render(
+
+ {item.objectID}
}
+ layoutComponent={Carousel}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-LookingSimilar'))
+ .toMatchInlineSnapshot(`
+
+
+ Looking similar
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+
{item.objectID}
}
+ layoutComponent={(props) => {
+ return (
+ Previous
}
+ nextIconComponent={() => Next
}
+ classNames={{
+ root: 'ROOT',
+ list: cx('LIST', props.classNames.list),
+ item: cx('ITEM', props.classNames.item),
+ navigation: 'NAVIGATION',
+ navigationNext: 'NAVIGATION_NEXT',
+ navigationPrevious: 'NAVIGATION_PREVIOUS',
+ }}
+ translations={{
+ nextButtonLabel: 'NEXT_BUTTON_LABEL',
+ nextButtonTitle: 'NEXT_BUTTON_TITLE',
+ previousButtonLabel: 'PREVIOUS_BUTTON_LABEL',
+ previousButtonTitle: 'PREVIOUS_BUTTON_TITLE',
+ listLabel: 'LIST_LABEL',
+ }}
+ />
+ );
+ }}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-LookingSimilar'))
+ .toMatchInlineSnapshot(`
+
+
+ Looking similar
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+
+ {items.map((item) => (
+ -
+
{item.objectID}
+
+ ))}
+
+ );
+ }}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-RelatedProducts'))
+ .toMatchInlineSnapshot(`
+
+ `);
+ });
+ });
+
+ test('renders Carousel as a layout component', async () => {
+ const client = createRecommendSearchClient({
+ minimal: true,
+ });
+ const { container } = render(
+
+ {item.objectID}
}
+ layoutComponent={Carousel}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-RelatedProducts'))
+ .toMatchInlineSnapshot(`
+
+ `);
+ });
+ });
+
+ test('renders Carousel with custom props as a layout component', async () => {
+ const client = createRecommendSearchClient({
+ minimal: true,
+ });
+
+ const { container } = render(
+
+ {item.objectID}
}
+ layoutComponent={(props) => {
+ return (
+ Previous
}
+ nextIconComponent={() => Next
}
+ classNames={{
+ root: 'ROOT',
+ list: cx('LIST', props.classNames.list),
+ item: cx('ITEM', props.classNames.item),
+ navigation: 'NAVIGATION',
+ navigationNext: 'NAVIGATION_NEXT',
+ navigationPrevious: 'NAVIGATION_PREVIOUS',
+ }}
+ translations={{
+ nextButtonLabel: 'NEXT_BUTTON_LABEL',
+ nextButtonTitle: 'NEXT_BUTTON_TITLE',
+ previousButtonLabel: 'PREVIOUS_BUTTON_LABEL',
+ previousButtonTitle: 'PREVIOUS_BUTTON_TITLE',
+ listLabel: 'LIST_LABEL',
+ }}
+ />
+ );
+ }}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-RelatedProducts'))
+ .toMatchInlineSnapshot(`
+
+ `);
+ });
+ });
});
diff --git a/packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx
index b101ec024a..ce6cb1c808 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx
@@ -5,8 +5,10 @@
import { createRecommendSearchClient } from '@instantsearch/mocks/fixtures';
import { InstantSearchTestWrapper } from '@instantsearch/testutils';
import { render, waitFor } from '@testing-library/react';
+import { cx } from 'instantsearch-ui-components';
import React from 'react';
+import { Carousel } from '../../components/Carousel';
import { TrendingItems } from '../TrendingItems';
describe('TrendingItems', () => {
@@ -77,4 +79,267 @@ describe('TrendingItems', () => {
expect(root).toHaveClass('MyTrendingItems', 'ROOT');
expect(root).toHaveAttribute('aria-hidden', 'true');
});
+
+ test('renders custom layout component', async () => {
+ const client = createRecommendSearchClient({
+ minimal: true,
+ });
+ const { container } = render(
+
+ (
+
+ {items.map((item) => (
+ -
+
{item.objectID}
+
+ ))}
+
+ )}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-TrendingItems'))
+ .toMatchInlineSnapshot(`
+
+
+ Trending items
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+ `);
+ });
+ });
+
+ test('renders Carousel as a layout component', async () => {
+ const client = createRecommendSearchClient({
+ minimal: true,
+ });
+ const { container } = render(
+
+ {item.objectID}
}
+ layoutComponent={Carousel}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-TrendingItems'))
+ .toMatchInlineSnapshot(`
+
+
+ Trending items
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+
{item.objectID}
}
+ layoutComponent={(props) => (
+ Previous
}
+ nextIconComponent={() => Next
}
+ classNames={{
+ root: 'ROOT',
+ list: cx('LIST', props.classNames.list),
+ item: cx('ITEM', props.classNames.item),
+ navigation: 'NAVIGATION',
+ navigationNext: 'NAVIGATION_NEXT',
+ navigationPrevious: 'NAVIGATION_PREVIOUS',
+ }}
+ translations={{
+ nextButtonLabel: 'NEXT_BUTTON_LABEL',
+ nextButtonTitle: 'NEXT_BUTTON_TITLE',
+ previousButtonLabel: 'PREVIOUS_BUTTON_LABEL',
+ previousButtonTitle: 'PREVIOUS_BUTTON_TITLE',
+ listLabel: 'LIST_LABEL',
+ }}
+ />
+ )}
+ />
+
+ );
+
+ await waitFor(() => {
+ expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+ });
+
+ await waitFor(() => {
+ expect(container.querySelector('.ais-TrendingItems'))
+ .toMatchInlineSnapshot(`
+
+
+ Trending items
+
+
+
+
+ -
+
+ 1
+
+
+ -
+
+ 2
+
+
+
+
+