@shopify/create-hydrogen 5.0.7 → 5.0.9

package/dist/assets/hydrogen/starter/CHANGELOG.md

@@ -1,5 +1,24 @@
 # skeleton
 
+## 2024.7.10
+
+### Patch Changes
+
+- Use HTML datalist element for query suggestions for autocomplete experience ([#2506](https://github.com/Shopify/hydrogen/pull/2506)) by [@frontsideair](https://github.com/frontsideair)
+
+- Bump cli packages version ([#2592](https://github.com/Shopify/hydrogen/pull/2592)) by [@wizardlyhel](https://github.com/wizardlyhel)
+
+- Updated dependencies [[`e963389d`](https://github.com/Shopify/hydrogen/commit/e963389d011b1cb44e2874fa332dc355c0d38eb9), [`d08d8c37`](https://github.com/Shopify/hydrogen/commit/d08d8c3779564cc55749f24bed1f6a2958a0a865)]:
+  - @shopify/hydrogen@2024.7.9
+
+## 2024.7.9
+
+### Patch Changes
+
+- Updated dependencies [[`f3363030`](https://github.com/Shopify/hydrogen/commit/f3363030a50bd24d946427e01b88ba77253a6cc9), [`bb5b0979`](https://github.com/Shopify/hydrogen/commit/bb5b0979ddffb007111885b3a9b7aa490a3c6882)]:
+  - @shopify/hydrogen@2024.7.8
+  - @shopify/remix-oxygen@2.0.8
+
 ## 2024.7.8
 
 ### Patch Changes

package/dist/assets/hydrogen/starter/app/components/Aside.tsx

@@ -1,4 +1,10 @@
-import {createContext, type ReactNode, useContext, useState} from 'react';
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
 type AsideType = 'search' | 'cart' | 'mobile' | 'closed';
 type AsideContextValue = {
@@ -29,6 +35,23 @@ export function Aside({
   const {type: activeType, close} = useAside();
   const expanded = type === activeType;
 
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    if (expanded) {
+      document.addEventListener(
+        'keydown',
+        function handler(event: KeyboardEvent) {
+          if (event.key === 'Escape') {
+            close();
+          }
+        },
+        {signal: abortController.signal},
+      );
+    }
+    return () => abortController.abort();
+  }, [close, expanded]);
+
   return (
     <div
       aria-modal

package/dist/assets/hydrogen/starter/app/components/Header.tsx

@@ -1,6 +1,10 @@
 import {Suspense} from 'react';
-import {Await, NavLink} from '@remix-run/react';
-import {type CartViewPayload, useAnalytics} from '@shopify/hydrogen';
+import {Await, NavLink, useAsyncValue} from '@remix-run/react';
+import {
+  type CartViewPayload,
+  useAnalytics,
+  useOptimisticCart,
+} from '@shopify/hydrogen';
 import type {HeaderQuery, CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
 
@@ -159,15 +163,18 @@ function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
   return (
     <Suspense fallback={<CartBadge count={null} />}>
       <Await resolve={cart}>
-        {(cart) => {
-          if (!cart) return <CartBadge count={0} />;
-          return <CartBadge count={cart.totalQuantity || 0} />;
-        }}
+        <CartBanner />
       </Await>
     </Suspense>
   );
 }
 
+function CartBanner() {
+  const originalCart = useAsyncValue() as CartApiQueryFragment | null;
+  const cart = useOptimisticCart(originalCart);
+  return <CartBadge count={cart?.totalQuantity ?? 0} />;
+}
+
 const FALLBACK_HEADER_MENU = {
   id: 'gid://shopify/Menu/199655587896',
   items: [

package/dist/assets/hydrogen/starter/app/components/PageLayout.tsx

@@ -1,5 +1,5 @@
 import {Await, Link} from '@remix-run/react';
-import {Suspense} from 'react';
+import {Suspense, useId} from 'react';
 import type {
   CartApiQueryFragment,
   FooterQuery,
@@ -70,6 +70,7 @@ function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
 }
 
 function SearchAside() {
+  const queriesDatalistId = useId();
   return (
     <Aside type="search" heading="SEARCH">
       <div className="predictive-search">
@@ -84,6 +85,7 @@ function SearchAside() {
                 placeholder="Search"
                 ref={inputRef}
                 type="search"
+                list={queriesDatalistId}
               />
               &nbsp;
               <button onClick={goToSearch}>Search</button>
@@ -92,7 +94,7 @@ function SearchAside() {
         </SearchFormPredictive>
 
         <SearchResultsPredictive>
-          {({items, total, term, state, inputRef, closeSearch}) => {
+          {({items, total, term, state, closeSearch}) => {
             const {articles, collections, pages, products, queries} = items;
 
             if (state === 'loading' && term.current) {
@@ -107,7 +109,7 @@ function SearchAside() {
               <>
                 <SearchResultsPredictive.Queries
                   queries={queries}
-                  inputRef={inputRef}
+                  queriesDatalistId={queriesDatalistId}
                 />
                 <SearchResultsPredictive.Products
                   products={products}

package/dist/assets/hydrogen/starter/app/components/SearchResultsPredictive.tsx

@@ -244,35 +244,20 @@ function SearchResultsPredictiveProducts({
 
 function SearchResultsPredictiveQueries({
   queries,
-  inputRef,
-}: PartialPredictiveSearchResult<'queries', 'inputRef'>) {
+  queriesDatalistId,
+}: PartialPredictiveSearchResult<'queries', never> & {
+  queriesDatalistId: string;
+}) {
   if (!queries.length) return null;
 
   return (
-    <div className="predictive-search-result" key="queries">
-      <h5>Queries</h5>
-      <ul>
-        {queries.map((suggestion) => {
-          if (!suggestion) return null;
+    <datalist id={queriesDatalistId}>
+      {queries.map((suggestion) => {
+        if (!suggestion) return null;
 
-          return (
-            <li className="predictive-search-result-item" key={suggestion.text}>
-              <div
-                role="presentation"
-                onClick={() => {
-                  if (!inputRef.current) return;
-                  inputRef.current.value = suggestion.text;
-                  inputRef.current.focus();
-                }}
-                dangerouslySetInnerHTML={{
-                  __html: suggestion?.styledText,
-                }}
-              />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+        return <option key={suggestion.text} value={suggestion.text} />;
+      })}
+    </datalist>
   );
 }
 

package/dist/assets/hydrogen/starter/app/routes/account.orders.$id.tsx

@@ -29,7 +29,9 @@ export async function loader({params, context}: LoaderFunctionArgs) {
 
   const lineItems = flattenConnection(order.lineItems);
   const discountApplications = flattenConnection(order.discountApplications);
-  const fulfillmentStatus = flattenConnection(order.fulfillments)[0].status;
+
+  const fulfillmentStatus =
+    flattenConnection(order.fulfillments)[0]?.status ?? 'N/A';
 
   const firstDiscount = discountApplications[0]?.value;
 

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2024.7.8",
+  "version": "2024.7.10",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -16,8 +16,8 @@
   "dependencies": {
     "@remix-run/react": "^2.10.1",
     "@remix-run/server-runtime": "^2.10.1",
-    "@shopify/hydrogen": "2024.7.7",
-    "@shopify/remix-oxygen": "^2.0.7",
+    "@shopify/hydrogen": "2024.7.9",
+    "@shopify/remix-oxygen": "^2.0.8",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.8.0",
@@ -28,7 +28,7 @@
     "@graphql-codegen/cli": "5.0.2",
     "@remix-run/dev": "^2.10.1",
     "@remix-run/eslint-config": "^2.10.1",
-    "@shopify/cli": "~3.66.1",
+    "@shopify/cli": "~3.68.0",
     "@shopify/hydrogen-codegen": "^0.3.1",
     "@shopify/mini-oxygen": "^3.0.5",
     "@shopify/oxygen-workers-types": "^4.1.2",