@shopify/hydrogen-react 2024.10.0 → 2025.1.0

package/dist/types/CartProvider.d.ts

@@ -43,17 +43,17 @@ type CartProviderProps = {
     onAttributesUpdateComplete?: () => void;
     /** A callback that is invoked when the process to update the cart discount codes completes */
     onDiscountCodesUpdateComplete?: () => void;
-    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-10/objects/cart). */
+    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2025-01/objects/cart). */
     data?: PartialDeep<CartType, {
         recurseIntoArrays: true;
     }>;
-    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-10/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2025-01/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
     cartFragment?: string;
     /** A customer access token that's accessible on the server if there's a customer login. */
     customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
-    /** The ISO luanguage code for i18n. */
+    /** The ISO language code for i18n. */
     languageCode?: LanguageCode;
 };
 /**
@@ -67,8 +67,9 @@ type CartProviderProps = {
  * The `CartProvider` component must be a descendant of the `ShopifyProvider` component.
  */
 export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, languageCode, }: CartProviderProps): JSX.Element;
-/** Check for storage availability funciton obtained from
- * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
+/**
+ * Check for storage availability function obtained from
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
  */
 export declare function storageAvailable(type: 'localStorage' | 'sessionStorage'): boolean;
 export {};

package/dist/types/Image.d.ts

@@ -42,7 +42,7 @@ type HydrogenImageBaseProps = {
      * @defaultValue `center`
      */
     crop?: Crop;
-    /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2024-10/objects/Image) object. Must be an Image object.
+    /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2025-01/objects/Image) object. Must be an Image object.
      *
      * @example
      * ```

package/dist/types/ModelViewer.d.ts

@@ -14,7 +14,7 @@ type ModelViewerProps = Omit<PartialDeep<JSX.IntrinsicElements['model-viewer'],
     recurseIntoArrays: true;
 }>, 'src'> & ModelViewerBaseProps;
 type ModelViewerBaseProps = {
-    /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2024-10/objects/model3d). */
+    /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2025-01/objects/model3d). */
     data: PartialDeep<Model3d, {
         recurseIntoArrays: true;
     }>;

package/dist/types/Money.d.ts

@@ -12,7 +12,7 @@ export interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {
     withoutCurrency?: boolean;
     /** Whether to remove trailing zeros (fractional money) from the output. */
     withoutTrailingZeros?: boolean;
-    /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2024-10/objects/unitpricemeasurement). */
+    /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2025-01/objects/unitpricemeasurement). */
     measurement?: PartialDeep<UnitPriceMeasurement, {
         recurseIntoArrays: true;
     }>;

package/dist/types/Video.d.ts

@@ -3,7 +3,7 @@ import { shopifyLoader } from './Image.js';
 import type { Video as VideoType } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 export interface VideoProps {
-    /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2024-10/objects/video). */
+    /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/2025-01/objects/video). */
     data: PartialDeep<VideoType, {
         recurseIntoArrays: true;
     }>;

package/dist/types/codegen.helpers.d.ts

@@ -1,6 +1,6 @@
 /**
  * Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly.
- * Reference for the GraphQL types: https://shopify.dev/docs/api/storefront/2024-10/scalars/HTML
+ * Reference for the GraphQL types: https://shopify.dev/docs/api/storefront/2025-01/scalars/HTML
  * Note: JSON is generated as 'unknown' by default.
  */
 export declare const storefrontApiCustomScalars: {
@@ -13,7 +13,7 @@ export declare const storefrontApiCustomScalars: {
 };
 /**
  * Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly.
- * Reference for the GraphQL types: https://shopify.dev/docs/api/customer/2024-10/scalars/HTML
+ * Reference for the GraphQL types: https://shopify.dev/docs/api/customer/2025-01/scalars/HTML
  * Note: JSON is generated as 'unknown' by default.
  */
 export declare const customerAccountApiCustomScalars: {

package/dist/types/getProductOptions.d.ts

@@ -0,0 +1,49 @@
+import type { Product, ProductOption, ProductOptionValue, ProductVariant, SelectedOption } from './storefront-api-types';
+export type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
+type ProductOptionValueState = {
+    variant: ProductVariant;
+    handle: string;
+    variantUriQuery: string;
+    selected: boolean;
+    exists: boolean;
+    available: boolean;
+    isDifferentProduct: boolean;
+};
+type MappedProductOptionValue = ProductOptionValue & ProductOptionValueState;
+/**
+ * Converts the product option into an Object\<key, value\> for building query params
+ * For example, a selected product option of
+ *  [
+ *    \{
+ *      name: 'Color',
+ *      value: 'Red',
+ *    \},
+ *    \{
+ *      name: 'Size',
+ *      value: 'Medium',
+ *    \}
+ *  ]
+ * Would return
+ *  \{
+ *    Color: 'Red',
+ *    Size: 'Medium',
+ *  \}
+ */
+export declare function mapSelectedProductOptionToObject(options: Pick<SelectedOption, 'name' | 'value'>[]): Record<string, string>;
+export type MappedProductOptions = Omit<ProductOption, 'optionValues'> & {
+    optionValues: MappedProductOptionValue[];
+};
+export declare function checkProductParam(product: RecursivePartial<Product>, checkAll?: boolean): Product;
+/**
+ * Finds all the variants provided by adjacentVariants, options.optionValues.firstAvailableVariant,
+ * and selectedOrFirstAvailableVariant and return them in a single array
+ */
+export declare function getAdjacentAndFirstAvailableVariants(product: RecursivePartial<Product>): ProductVariant[];
+/**
+ * Returns a product options array with its relevant information
+ * about the variant
+ */
+export declare function getProductOptions(product: RecursivePartial<Product>): MappedProductOptions[];
+export {};

package/dist/types/index.d.cts

@@ -16,6 +16,7 @@ export { customerAccountApiCustomScalars, storefrontApiCustomScalars, } from './
 export { getShopifyCookies } from './cookies-utils.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
+export { getAdjacentAndFirstAvailableVariants, getProductOptions, type MappedProductOptions, mapSelectedProductOptionToObject, } from './getProductOptions.js';
 export { Image, IMAGE_FRAGMENT } from './Image.js';
 export { useLoadScript } from './load-script.js';
 export { MediaFile } from './MediaFile.js';
@@ -32,5 +33,6 @@ export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiRe
 export type { StorefrontClientProps } from './storefront-client.js';
 export { createStorefrontClient } from './storefront-client.js';
 export { useMoney } from './useMoney.js';
+export { useSelectedOptionInUrlParam } from './useSelectedOptionInUrlParam.js';
 export { useShopifyCookies } from './useShopifyCookies.js';
 export { Video } from './Video.js';

package/dist/types/index.d.ts

@@ -16,6 +16,7 @@ export { customerAccountApiCustomScalars, storefrontApiCustomScalars, } from './
 export { getShopifyCookies } from './cookies-utils.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';
+export { getAdjacentAndFirstAvailableVariants, getProductOptions, type MappedProductOptions, mapSelectedProductOptionToObject, } from './getProductOptions.js';
 export { Image, IMAGE_FRAGMENT } from './Image.js';
 export { useLoadScript } from './load-script.js';
 export { MediaFile } from './MediaFile.js';
@@ -32,5 +33,6 @@ export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiRe
 export type { StorefrontClientProps } from './storefront-client.js';
 export { createStorefrontClient } from './storefront-client.js';
 export { useMoney } from './useMoney.js';
+export { useSelectedOptionInUrlParam } from './useSelectedOptionInUrlParam.js';
 export { useShopifyCookies } from './useShopifyCookies.js';
 export { Video } from './Video.js';

package/dist/types/optionValueDecoder.d.ts

@@ -14,7 +14,7 @@ export type IsOptionValueCombinationInEncodedVariant = (targetOptionValueCombina
  * Determine whether an option value combination is present in an encoded option value string. Function is memoized by encodedVariantField.
  *
  * @param targetOptionValueCombination - Indices of option values to look up in the encoded option value string. A partial set of indices may be passed to determine whether a node or any children is present. For example, if a product has 3 options, passing [0] will return true if any option value combination for the first option's option value is present in the encoded string.
- * @param encodedVariantField - Encoded option value string from the Storefront API, e.g. [product.encodedVariantExistence](/docs/api/storefront/2024-10/objects/Product#field-encodedvariantexistence) or [product.encodedVariantAvailability](/docs/api/storefront/2024-10/objects/Product#field-encodedvariantavailability)
+ * @param encodedVariantField - Encoded option value string from the Storefront API, e.g. [product.encodedVariantExistence](/docs/api/storefront/2025-01/objects/Product#field-encodedvariantexistence) or [product.encodedVariantAvailability](/docs/api/storefront/2025-01/objects/Product#field-encodedvariantavailability)
  * @returns - True if a full or partial targetOptionValueIndices is present in the encoded option value string, false otherwise.
  */
 export declare const isOptionValueCombinationInEncodedVariant: IsOptionValueCombinationInEncodedVariant;
@@ -22,7 +22,7 @@ type EncodedVariantField = Product['encodedVariantAvailability'] | Product['enco
 type DecodedOptionValues = number[][];
 /**
  * For an encoded option value string, decode into option value combinations. Entries represent a valid combination formatted as an array of option value positions.
- * @param encodedVariantField - Encoded option value string from the Storefront API, e.g. [product.encodedVariantExistence](/docs/api/storefront/2024-10/objects/Product#field-encodedvariantexistence) or [product.encodedVariantAvailability](/docs/api/storefront/2024-10/objects/Product#field-encodedvariantavailability)
+ * @param encodedVariantField - Encoded option value string from the Storefront API, e.g. [product.encodedVariantExistence](/docs/api/storefront/2025-01/objects/Product#field-encodedvariantexistence) or [product.encodedVariantAvailability](/docs/api/storefront/2025-01/objects/Product#field-encodedvariantavailability)
  * @returns Decoded option value combinations
  */
 export declare function decodeEncodedVariant(encodedVariantField: EncodedVariantField): DecodedOptionValues;

package/dist/types/storefront-api-constants.d.ts

@@ -1 +1 @@
-export declare const SFAPI_VERSION = "2024-10";
+export declare const SFAPI_VERSION = "2025-01";

package/dist/types/storefront-api-response.types.d.ts

@@ -7,14 +7,14 @@ import type { PartialDeep } from 'type-fest';
 type StorefrontApiExtensions = {
     /**
      * Shows error codes common to Shopify. Additional error codes may also be shown.
-     * https://shopify.dev/api/storefront#status_and_error_codes
+     * @see https://shopify.dev/api/storefront#status_and_error_codes
      */
     code?: 'THROTTLED' | 'ACCESS_DENIED' | 'SHOP_INACTIVE' | 'INTERNAL_SERVER_ERROR' | (string & {});
 };
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object if successful. If you prefer a "deeply-partial" version of that generic object, consider using `StorefrontApiResponseOkPartial` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
  */
@@ -22,7 +22,7 @@ export type StorefrontApiResponseOk<DataGeneric> = FormattedExecutionResult<Data
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object, with `Partial` deeply-applied to all nested objects and properties, if successful. If you prefer not using this "deeply-partial" generic data object, consider using `StorefrontApiResponseOk` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * Refer to https://shopify.dev/api/storefront#status_and_error_codes for more information.
  */
@@ -48,7 +48,7 @@ export type StorefrontApiResponseError = string | {
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object if successful. If you prefer a "deeply-partial" version of that generic object, consider using `StorefrontApiResponseOkPartial` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services.  Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
  *
@@ -58,7 +58,7 @@ export type StorefrontApiResponse<DataGeneric> = StorefrontApiResponseOk<DataGen
 /**
  * The Storefront API can return a 200 OK response code when the query succeeds, and will populate the `data` property. The generic you pass in through type parameters will be the shape of the `data` object, with `Partial` deeply-applied to all nested objects and properties, if successful. If you prefer not using this "deeply-partial" generic data object, consider using `StorefrontApiResponseOk` instead.
  *
- * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will propulate the `errors` property.
+ * The Storefront API can also return a 200 OK response code in cases that would typically produce 4xx errors in REST. This will populate the `errors` property.
  *
  * 4xx and 5xx errors occur infrequently. They are often related to network communications, your account, or an issue with Shopify’s services. Commonly the response is a `JSON.parse`-able string, but in rare occasions may also return HTML which is not `JSON.parse()`-able.
  *