diff --git a/cypress/test-apps/js/app.tsx b/cypress/test-apps/js/app.tsx index 96c7957b1..03b2236b8 100644 --- a/cypress/test-apps/js/app.tsx +++ b/cypress/test-apps/js/app.tsx @@ -130,7 +130,7 @@ type ProductItemProps = { function ProductItem({ hit, insights, components }: ProductItemProps) { return ( - +
{hit.name}
@@ -173,6 +173,6 @@ function ProductItem({ hit, insights, components }: ProductItemProps) {
- + ); } diff --git a/cypress/test-apps/js/categoriesPlugin.tsx b/cypress/test-apps/js/categoriesPlugin.tsx index 9ed664eaa..5ef65b5ad 100644 --- a/cypress/test-apps/js/categoriesPlugin.tsx +++ b/cypress/test-apps/js/categoriesPlugin.tsx @@ -53,7 +53,7 @@ export function createCategoriesPlugin({ }, item({ item, components }) { return ( - +
- + ); }, }, diff --git a/cypress/test-apps/js/shortcutsPlugin.tsx b/cypress/test-apps/js/shortcutsPlugin.tsx index 25a5a6e2f..941884b3e 100644 --- a/cypress/test-apps/js/shortcutsPlugin.tsx +++ b/cypress/test-apps/js/shortcutsPlugin.tsx @@ -39,7 +39,7 @@ export const shortcutsPlugin: AutocompletePlugin = { createElement('div', { className: 'aa-SourceHeaderLine' }) ); }, - item({ item, createElement, Fragment }) { + item({ item, createElement }) { const darkIcon = createElement( 'svg', { @@ -74,8 +74,8 @@ export const shortcutsPlugin: AutocompletePlugin = { ); return createElement( - Fragment, - {}, + 'div', + { className: 'aa-ItemWrapper' }, createElement( 'div', { className: 'aa-ItemIcon' }, diff --git a/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx b/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx index 993e2c09f..55cc6e3ad 100644 --- a/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx +++ b/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx @@ -63,13 +63,13 @@ export function createGitHubReposPlugin( return item.html_url; }, templates: { - item({ item, Fragment }) { + item({ item }) { const stars = new Intl.NumberFormat('en-US').format( item.stargazers_count ); return ( - +
- +
); }, }, diff --git a/examples/playground/app.tsx b/examples/playground/app.tsx index aa875740f..db7805c75 100644 --- a/examples/playground/app.tsx +++ b/examples/playground/app.tsx @@ -132,7 +132,7 @@ type ProductItemProps = { function ProductItem({ hit, insights, components }: ProductItemProps) { return ( - +
{hit.name} @@ -310,6 +310,6 @@ function ProductItem({ hit, insights, components }: ProductItemProps) {
- + ); } diff --git a/examples/playground/categoriesPlugin.tsx b/examples/playground/categoriesPlugin.tsx index e90388fa1..9cea025a8 100644 --- a/examples/playground/categoriesPlugin.tsx +++ b/examples/playground/categoriesPlugin.tsx @@ -57,7 +57,7 @@ export function createCategoriesPlugin({ }, item({ item, components }) { return ( - +
- +
); }, }, diff --git a/examples/playground/shortcutsPlugin.tsx b/examples/playground/shortcutsPlugin.tsx index 3eda3dc16..8b9487282 100644 --- a/examples/playground/shortcutsPlugin.tsx +++ b/examples/playground/shortcutsPlugin.tsx @@ -41,7 +41,7 @@ export const shortcutsPlugin: AutocompletePlugin = { createElement('div', { className: 'aa-SourceHeaderLine' }) ); }, - item({ item, createElement, Fragment }) { + item({ item, createElement }) { const darkIcon = createElement( 'svg', { @@ -76,8 +76,8 @@ export const shortcutsPlugin: AutocompletePlugin = { ); return createElement( - Fragment, - {}, + 'div', + { className: 'aa-ItemWrapper' }, createElement( 'div', { className: 'aa-ItemContent' }, diff --git a/examples/query-suggestions-with-hits/app.tsx b/examples/query-suggestions-with-hits/app.tsx index 9069e695c..7ab46a3e0 100644 --- a/examples/query-suggestions-with-hits/app.tsx +++ b/examples/query-suggestions-with-hits/app.tsx @@ -113,7 +113,7 @@ type ProductItemProps = { function ProductItem({ hit, insights, components }: ProductItemProps) { return ( - +
{hit.name}
@@ -185,6 +185,6 @@ function ProductItem({ hit, insights, components }: ProductItemProps) {
- +
); } diff --git a/examples/query-suggestions-with-inline-categories/app.tsx b/examples/query-suggestions-with-inline-categories/app.tsx index adf081e23..3d6644329 100644 --- a/examples/query-suggestions-with-inline-categories/app.tsx +++ b/examples/query-suggestions-with-inline-categories/app.tsx @@ -2,7 +2,7 @@ import { autocomplete } from '@algolia/autocomplete-js'; import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions'; import algoliasearch from 'algoliasearch'; -import { h, Fragment } from 'preact'; +import { h } from 'preact'; import '@algolia/autocomplete-theme-classic'; @@ -32,7 +32,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({ ...source.templates, item({ item, components }) { return ( - +
- +
); }, }, diff --git a/examples/react-renderer/src/Autocomplete.tsx b/examples/react-renderer/src/Autocomplete.tsx index 8f4006763..985a79a98 100644 --- a/examples/react-renderer/src/Autocomplete.tsx +++ b/examples/react-renderer/src/Autocomplete.tsx @@ -159,43 +159,45 @@ export function Autocomplete( className="aa-Item" {...autocomplete.getItemProps({ item, source })} > -
- {item.name} -
-
-
-
-
- + + + + +
); })} diff --git a/examples/recently-viewed-items/app.tsx b/examples/recently-viewed-items/app.tsx index eb985868b..1a1d4bb59 100644 --- a/examples/recently-viewed-items/app.tsx +++ b/examples/recently-viewed-items/app.tsx @@ -89,7 +89,7 @@ type ProductItemProps = { function AutocompleteProductItem({ hit, components }: ProductItemProps) { return ( - +
{hit.name}
@@ -109,6 +109,6 @@ function AutocompleteProductItem({ hit, components }: ProductItemProps) {
- +
); } diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx index a663f8a8a..503fcbcf2 100644 --- a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx +++ b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx @@ -11,10 +11,10 @@ export function getTemplates({ onTapAhead, }: GetTemplatesParams): SourceTemplates { return { - item({ item, createElement, Fragment, components }) { + item({ item, createElement, components }) { if (item.__autocomplete_qsCategory) { return ( - +
@@ -26,12 +26,12 @@ export function getTemplates({
- +
); } return ( - +
@@ -59,7 +59,7 @@ export function getTemplates({
- +
); }, }; diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx index b90304a1d..1b6fbbab6 100644 --- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx +++ b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx @@ -13,9 +13,9 @@ export function getTemplates({ onTapAhead, }: GetTemplatesParams): SourceTemplates { return { - item({ item, createElement, Fragment, components }) { + item({ item, createElement, components }) { return ( - +
@@ -65,7 +65,7 @@ export function getTemplates({
- +
); }, }; diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss index 82e05af8a..b3c1d037a 100644 --- a/packages/autocomplete-theme-classic/src/theme.scss +++ b/packages/autocomplete-theme-classic/src/theme.scss @@ -503,10 +503,6 @@ body { align-items: center; border-radius: 3px; cursor: pointer; - display: grid; - gap: calc(var(--aa-spacing-half) / 2); - grid-auto-flow: column; - justify-content: space-between; min-height: calc(var(--aa-spacing) * 2.5); padding: calc(var(--aa-spacing-half) / 2); // When the result is active @@ -693,7 +689,10 @@ body { .aa-ItemLink { align-items: center; color: inherit; - display: flex; + display: grid; + gap: calc(var(--aa-spacing-half) / 2); + grid-auto-flow: column; + justify-content: space-between; text-decoration: none; width: 100%; } diff --git a/packages/website/docs/autocomplete-theme-classic.md b/packages/website/docs/autocomplete-theme-classic.md index 27c4233b5..1dc91c019 100644 --- a/packages/website/docs/autocomplete-theme-classic.md +++ b/packages/website/docs/autocomplete-theme-classic.md @@ -65,7 +65,7 @@ autocomplete({ templates: { item({ item, components }) { return ( - +
{item.name}
@@ -93,18 +93,16 @@ autocomplete({
- +
); }, }, }); ``` -If your renderer doesn't support `Fragment`s, you can use `div.aa-ItemWrapper`. - ### Link item -To wrap an item within a link, use the `.aa-ItemLink` class. +To wrap an item within a link, use the `.aa-ItemLink` class in place of the element with `.aa-ItemWrapper`. **Make sure not to use both together.** ```jsx autocomplete({ diff --git a/packages/website/docs/getting-started.mdx b/packages/website/docs/getting-started.mdx index d0eedf0cc..9b2583da7 100644 --- a/packages/website/docs/getting-started.mdx +++ b/packages/website/docs/getting-started.mdx @@ -204,7 +204,7 @@ autocomplete({ function ProductItem({ hit, components }: ProductItemProps) { return ( - +
{hit.name}
@@ -236,7 +236,7 @@ function ProductItem({ hit, components }: ProductItemProps) {
- +
); } ``` diff --git a/packages/website/docs/sending-algolia-insights-events.md b/packages/website/docs/sending-algolia-insights-events.md index 5da26711c..ddcf99092 100644 --- a/packages/website/docs/sending-algolia-insights-events.md +++ b/packages/website/docs/sending-algolia-insights-events.md @@ -77,7 +77,7 @@ autocomplete({ function ProductItem({ hit, components }) { return ( - +
{hit.name}
@@ -98,7 +98,7 @@ function ProductItem({ hit, components }) { - +
); } ``` @@ -249,7 +249,7 @@ Once available to your templates, you can use it to send events using [Insights ```jsx title="ProductItem.jsx" function ProductItem({ hit, insights, components }) { return ( - +
{hit.name}
@@ -293,7 +293,7 @@ function ProductItem({ hit, insights, components }) {
- +
); } ``` diff --git a/packages/website/docs/using-vue.md b/packages/website/docs/using-vue.md index 24160b0b8..d3c909ced 100644 --- a/packages/website/docs/using-vue.md +++ b/packages/website/docs/using-vue.md @@ -156,7 +156,7 @@ Next, to display the results from Algolia, you need to define an [`item` templat templates: { item({ item, components }) { return ( - +
- + ); }, }, diff --git a/packages/website/src/components/productsPlugin.tsx b/packages/website/src/components/productsPlugin.tsx index e89068b81..612159f59 100644 --- a/packages/website/src/components/productsPlugin.tsx +++ b/packages/website/src/components/productsPlugin.tsx @@ -6,7 +6,7 @@ import { } from '@algolia/autocomplete-js'; import { Hit } from '@algolia/client-search'; import algoliasearch from 'algoliasearch/lite'; -import React, { Fragment } from 'react'; +import React from 'react'; const searchClient = algoliasearch( 'latency', @@ -77,7 +77,7 @@ type ProductItemProps = { function ProductItem({ hit, components }: ProductItemProps) { return ( - +
{hit.name}
@@ -109,6 +109,6 @@ function ProductItem({ hit, components }: ProductItemProps) {
- + ); }