Skip to content

Commit 329c120

Browse files
francoischalifourfrancoischalifour
committed
Merge branch 'next' into docs/example-vue-3
2 parents 43d10ce + 2b37a56 commit 329c120

24 files changed

+481
-464
lines changed

‎.eslintrc.js

+25
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,31 @@ module.exports = {
7373
'eslint-comments/no-unlimited-disable': OFF,
7474
},
7575
},
76+
{
77+
files: [
78+
'packages/autocomplete-core/**/*',
79+
'packages/autocomplete-js/**/*',
80+
],
81+
rules: {
82+
'no-restricted-globals': [
83+
'error',
84+
{
85+
name: 'window',
86+
message: 'Use the `environment` param to access this property.',
87+
},
88+
{
89+
name: 'document',
90+
message: 'Use the `environment` param to access this property.',
91+
},
92+
],
93+
},
94+
},
95+
{
96+
files: ['**/__tests__/**'],
97+
rules: {
98+
'no-restricted-globals': OFF,
99+
},
100+
},
76101
{
77102
files: ['**/rollup.config.js', 'stories/**/*', '**/__tests__/**'],
78103
rules: {

‎bundlesize.config.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
},
77
{
88
"path": "packages/autocomplete-js/dist/umd/index.production.js",
9-
"maxSize": "15.25 kB"
9+
"maxSize": "15.5 kB"
1010
},
1111
{
1212
"path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

‎examples/react-renderer/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
"@algolia/autocomplete-theme-classic": "1.0.0",
1010
"@algolia/client-search": "4.9.1",
1111
"algoliasearch": "4.9.1",
12-
"react": "17.0.1",
13-
"react-dom": "17.0.1",
14-
"react-scripts": "4.0.1"
12+
"react": "17.0.2",
13+
"react-dom": "17.0.2",
14+
"react-scripts": "4.0.3"
1515
},
1616
"scripts": {
1717
"start": "react-scripts start",

‎examples/react-renderer/public/favicon.ico

-3.78 KB
Binary file not shown.

‎examples/react-renderer/public/favicon.png

43.1 KB
Loading

‎examples/react-renderer/public/index.html

+1-6
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,8 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta name="theme-color" content="#000000" />
7-
<meta
8-
name="description"
9-
content="Web site created using create-react-app"
10-
/>
117

12-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
13-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
8+
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
149
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1510

1611
<title>React Renderer | Autocomplete</title>

‎examples/react-renderer/src/Autocomplete.tsx

+10-13
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ const searchClient = algoliasearch(
1717
);
1818

1919
type AutocompleteItem = Hit<{
20-
objectID: string;
21-
name: string;
22-
description: string;
20+
brand: string;
21+
categories: string[];
2322
image: string;
23+
name: string;
24+
objectID: string;
2425
url: string;
2526
}>;
2627

@@ -64,8 +65,6 @@ export function Autocomplete(
6465
hitsPerPage: 5,
6566
highlightPreTag: '<mark>',
6667
highlightPostTag: '</mark>',
67-
attributesToSnippet: ['name:10', 'description:35'],
68-
snippetEllipsisText: '…',
6968
},
7069
},
7170
],
@@ -163,7 +162,7 @@ export function Autocomplete(
163162
>
164163
<div className="aa-ItemWrapper">
165164
<div className="aa-ItemContent">
166-
<div className="aa-ItemIcon">
165+
<div className="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop">
167166
<img
168167
src={item.image}
169168
alt={item.name}
@@ -175,16 +174,14 @@ export function Autocomplete(
175174
<div
176175
className="aa-ItemContentTitle"
177176
dangerouslySetInnerHTML={{
178-
__html: item._snippetResult!.name.value,
179-
}}
180-
/>
181-
<div
182-
className="aa-ItemContentDescription"
183-
dangerouslySetInnerHTML={{
184-
__html: item._snippetResult!.description
177+
__html: item._highlightResult!.name!
185178
.value,
186179
}}
187180
/>
181+
<div className="aa-ItemContentDescription">
182+
By <strong>{item.brand}</strong> in{' '}
183+
<strong>{item.categories[0]}</strong>
184+
</div>
188185
</div>
189186
</div>
190187
<div className="aa-ItemActions">

‎examples/react-renderer/src/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
33

44
import '@algolia/autocomplete-theme-classic';
55

6-
import './reset.css';
76
import './index.css';
87
import { App } from './App';
98

‎examples/react-renderer/src/reset.css

-129
This file was deleted.

‎packages/autocomplete-core/src/getDefaultProps.ts

+2
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@ export function getDefaultProps<TItem extends BaseItem>(
1616
props: AutocompleteOptions<TItem>,
1717
pluginSubscribers: AutocompleteSubscribers<TItem>
1818
): InternalAutocompleteOptions<TItem> {
19+
/* eslint-disable no-restricted-globals */
1920
const environment: AutocompleteEnvironment = (typeof window !== 'undefined'
2021
? window
2122
: {}) as typeof window;
23+
/* eslint-enable no-restricted-globals */
2224
const plugins = props.plugins || [];
2325

2426
return {

‎packages/autocomplete-js/src/__tests__/autocomplete.test.ts

+43-3
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ describe('autocomplete-js', () => {
278278
});
279279
});
280280

281-
test("doesn't render noResults template on no query when openOnFocus is false", async () => {
281+
test("doesn't render noResults template on empty query when openOnFocus is false", async () => {
282282
const container = document.createElement('div');
283283
const panelContainer = document.createElement('div');
284284

@@ -309,7 +309,7 @@ describe('autocomplete-js', () => {
309309

310310
const input = container.querySelector<HTMLInputElement>('.aa-Input');
311311

312-
fireEvent.input(input, { target: { value: '' } });
312+
fireEvent.focus(input);
313313

314314
await waitFor(() => {
315315
expect(
@@ -318,7 +318,47 @@ describe('autocomplete-js', () => {
318318
});
319319
});
320320

321-
test('render noResults template on query when openOnFocus is false', async () => {
321+
test('renders noResults template on empty query when openOnFocus is true', async () => {
322+
const container = document.createElement('div');
323+
const panelContainer = document.createElement('div');
324+
325+
document.body.appendChild(panelContainer);
326+
autocomplete<{ label: string }>({
327+
container,
328+
panelContainer,
329+
openOnFocus: true,
330+
getSources() {
331+
return [
332+
{
333+
sourceId: 'testSource',
334+
getItems() {
335+
return [];
336+
},
337+
templates: {
338+
item({ item }) {
339+
return item.label;
340+
},
341+
noResults() {
342+
return 'No results template';
343+
},
344+
},
345+
},
346+
];
347+
},
348+
});
349+
350+
const input = container.querySelector<HTMLInputElement>('.aa-Input');
351+
352+
fireEvent.focus(input);
353+
354+
await waitFor(() => {
355+
expect(
356+
panelContainer.querySelector<HTMLElement>('.aa-Panel')
357+
).toHaveTextContent('No results template');
358+
});
359+
});
360+
361+
test('renders noResults template on query when openOnFocus is false', async () => {
322362
const container = document.createElement('div');
323363
const panelContainer = document.createElement('div');
324364

‎packages/autocomplete-js/src/autocomplete.ts

+15-6
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ export function autocomplete<TItem extends BaseItem>(
112112
autocomplete: autocomplete.value,
113113
autocompleteScopeApi,
114114
classNames: props.value.renderer.classNames,
115+
environment: props.value.core.environment,
115116
isDetached: isDetached.value,
116117
placeholder: props.value.core.placeholder,
117118
propGetters,
@@ -237,7 +238,7 @@ export function autocomplete<TItem extends BaseItem>(
237238
// We scroll to the top of the panel whenever the query changes (i.e. new
238239
// results come in) so that users don't have to.
239240
if (state.query !== prevState.query) {
240-
const scrollablePanels = document.querySelectorAll(
241+
const scrollablePanels = props.value.core.environment.document.querySelectorAll(
241242
'.aa-Panel--scrollable'
242243
);
243244
scrollablePanels.forEach((scrollablePanel) => {
@@ -336,19 +337,27 @@ export function autocomplete<TItem extends BaseItem>(
336337

337338
function setIsModalOpen(value: boolean) {
338339
requestAnimationFrame(() => {
339-
const prevValue = document.body.contains(dom.value.detachedOverlay);
340+
const prevValue = props.value.core.environment.document.body.contains(
341+
dom.value.detachedOverlay
342+
);
340343

341344
if (value === prevValue) {
342345
return;
343346
}
344347

345348
if (value) {
346-
document.body.appendChild(dom.value.detachedOverlay);
347-
document.body.classList.add('aa-Detached');
349+
props.value.core.environment.document.body.appendChild(
350+
dom.value.detachedOverlay
351+
);
352+
props.value.core.environment.document.body.classList.add('aa-Detached');
348353
dom.value.input.focus();
349354
} else {
350-
document.body.removeChild(dom.value.detachedOverlay);
351-
document.body.classList.remove('aa-Detached');
355+
props.value.core.environment.document.body.removeChild(
356+
dom.value.detachedOverlay
357+
);
358+
props.value.core.environment.document.body.classList.remove(
359+
'aa-Detached'
360+
);
352361
autocomplete.value.setQuery('');
353362
autocomplete.value.refresh();
354363
}

0 commit comments

Comments
 (0)