@shopify/create-hydrogen 5.0.8 → 5.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/hydrogen/starter/CHANGELOG.md +11 -0
- package/dist/assets/hydrogen/starter/app/components/PageLayout.tsx +5 -3
- package/dist/assets/hydrogen/starter/app/components/SearchResultsPredictive.tsx +10 -25
- package/dist/assets/hydrogen/starter/package.json +3 -3
- package/dist/{chunk-22MWCGN7.js → chunk-62RC26N6.js} +1095 -491
- package/dist/create-app.js +595 -1207
- package/dist/error-handler-RS6Q2YZE.js +2 -0
- package/package.json +1 -1
- package/dist/error-handler-XSVC2AS3.js +0 -2
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# skeleton
|
|
2
2
|
|
|
3
|
+
## 2024.7.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Use HTML datalist element for query suggestions for autocomplete experience ([#2506](https://github.com/Shopify/hydrogen/pull/2506)) by [@frontsideair](https://github.com/frontsideair)
|
|
8
|
+
|
|
9
|
+
- Bump cli packages version ([#2592](https://github.com/Shopify/hydrogen/pull/2592)) by [@wizardlyhel](https://github.com/wizardlyhel)
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [[`e963389d`](https://github.com/Shopify/hydrogen/commit/e963389d011b1cb44e2874fa332dc355c0d38eb9), [`d08d8c37`](https://github.com/Shopify/hydrogen/commit/d08d8c3779564cc55749f24bed1f6a2958a0a865)]:
|
|
12
|
+
- @shopify/hydrogen@2024.7.9
|
|
13
|
+
|
|
3
14
|
## 2024.7.9
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {Await, Link} from '@remix-run/react';
|
|
2
|
-
import {Suspense} from 'react';
|
|
2
|
+
import {Suspense, useId} from 'react';
|
|
3
3
|
import type {
|
|
4
4
|
CartApiQueryFragment,
|
|
5
5
|
FooterQuery,
|
|
@@ -70,6 +70,7 @@ function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
function SearchAside() {
|
|
73
|
+
const queriesDatalistId = useId();
|
|
73
74
|
return (
|
|
74
75
|
<Aside type="search" heading="SEARCH">
|
|
75
76
|
<div className="predictive-search">
|
|
@@ -84,6 +85,7 @@ function SearchAside() {
|
|
|
84
85
|
placeholder="Search"
|
|
85
86
|
ref={inputRef}
|
|
86
87
|
type="search"
|
|
88
|
+
list={queriesDatalistId}
|
|
87
89
|
/>
|
|
88
90
|
|
|
89
91
|
<button onClick={goToSearch}>Search</button>
|
|
@@ -92,7 +94,7 @@ function SearchAside() {
|
|
|
92
94
|
</SearchFormPredictive>
|
|
93
95
|
|
|
94
96
|
<SearchResultsPredictive>
|
|
95
|
-
{({items, total, term, state,
|
|
97
|
+
{({items, total, term, state, closeSearch}) => {
|
|
96
98
|
const {articles, collections, pages, products, queries} = items;
|
|
97
99
|
|
|
98
100
|
if (state === 'loading' && term.current) {
|
|
@@ -107,7 +109,7 @@ function SearchAside() {
|
|
|
107
109
|
<>
|
|
108
110
|
<SearchResultsPredictive.Queries
|
|
109
111
|
queries={queries}
|
|
110
|
-
|
|
112
|
+
queriesDatalistId={queriesDatalistId}
|
|
111
113
|
/>
|
|
112
114
|
<SearchResultsPredictive.Products
|
|
113
115
|
products={products}
|
|
@@ -244,35 +244,20 @@ function SearchResultsPredictiveProducts({
|
|
|
244
244
|
|
|
245
245
|
function SearchResultsPredictiveQueries({
|
|
246
246
|
queries,
|
|
247
|
-
|
|
248
|
-
}: PartialPredictiveSearchResult<'queries',
|
|
247
|
+
queriesDatalistId,
|
|
248
|
+
}: PartialPredictiveSearchResult<'queries', never> & {
|
|
249
|
+
queriesDatalistId: string;
|
|
250
|
+
}) {
|
|
249
251
|
if (!queries.length) return null;
|
|
250
252
|
|
|
251
253
|
return (
|
|
252
|
-
<
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
{queries.map((suggestion) => {
|
|
256
|
-
if (!suggestion) return null;
|
|
254
|
+
<datalist id={queriesDatalistId}>
|
|
255
|
+
{queries.map((suggestion) => {
|
|
256
|
+
if (!suggestion) return null;
|
|
257
257
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
role="presentation"
|
|
262
|
-
onClick={() => {
|
|
263
|
-
if (!inputRef.current) return;
|
|
264
|
-
inputRef.current.value = suggestion.text;
|
|
265
|
-
inputRef.current.focus();
|
|
266
|
-
}}
|
|
267
|
-
dangerouslySetInnerHTML={{
|
|
268
|
-
__html: suggestion?.styledText,
|
|
269
|
-
}}
|
|
270
|
-
/>
|
|
271
|
-
</li>
|
|
272
|
-
);
|
|
273
|
-
})}
|
|
274
|
-
</ul>
|
|
275
|
-
</div>
|
|
258
|
+
return <option key={suggestion.text} value={suggestion.text} />;
|
|
259
|
+
})}
|
|
260
|
+
</datalist>
|
|
276
261
|
);
|
|
277
262
|
}
|
|
278
263
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "skeleton",
|
|
3
3
|
"private": true,
|
|
4
4
|
"sideEffects": false,
|
|
5
|
-
"version": "2024.7.
|
|
5
|
+
"version": "2024.7.10",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"build": "shopify hydrogen build --codegen",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@remix-run/react": "^2.10.1",
|
|
18
18
|
"@remix-run/server-runtime": "^2.10.1",
|
|
19
|
-
"@shopify/hydrogen": "2024.7.
|
|
19
|
+
"@shopify/hydrogen": "2024.7.9",
|
|
20
20
|
"@shopify/remix-oxygen": "^2.0.8",
|
|
21
21
|
"graphql": "^16.6.0",
|
|
22
22
|
"graphql-tag": "^2.12.6",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@graphql-codegen/cli": "5.0.2",
|
|
29
29
|
"@remix-run/dev": "^2.10.1",
|
|
30
30
|
"@remix-run/eslint-config": "^2.10.1",
|
|
31
|
-
"@shopify/cli": "~3.
|
|
31
|
+
"@shopify/cli": "~3.68.0",
|
|
32
32
|
"@shopify/hydrogen-codegen": "^0.3.1",
|
|
33
33
|
"@shopify/mini-oxygen": "^3.0.5",
|
|
34
34
|
"@shopify/oxygen-workers-types": "^4.1.2",
|