@shopify/hydrogen-react 2023.1.4 → 2023.1.6

package/dist/types/CartLinePrice.d.ts

@@ -1,4 +1,4 @@
-import { Money } from './Money.js';
+import { Money, type MoneyPropsBase } from './Money.js';
 import { CartLine } from './storefront-api-types.js';
 import { PartialDeep } from 'type-fest';
 interface CartLinePricePropsBase {
@@ -11,7 +11,21 @@ interface CartLinePricePropsBase {
 }
 type CartLinePriceProps = Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePricePropsBase;
 /**
+ * @deprecated Use `Money` instead. To migrate, use the `priceType` prop that matches the corresponding property on the `CartLine` object:
+ * - `regular`: `cartLine.cost.totalAmount`
+ * - `compareAt`: `cartLine.cost.compareAtAmountPerQuantity`
+ *
+ * For example:
+ * ```
+ * // before
+ * <CartLinePrice data={cartLine} priceType="regular" />
+ * // after
+ * <Money data={cartLine.cost.totalAmount} />
+ * ```
+ *
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or compare at price.
  */
 export declare function CartLinePrice(props: CartLinePriceProps): JSX.Element | null;
+export interface CartLinePricePropsForDocs<AsType extends React.ElementType = 'div'> extends Omit<MoneyPropsBase<AsType>, 'data'>, CartLinePricePropsBase {
+}
 export {};

package/dist/types/CartLineProvider.d.ts

@@ -1,18 +1,24 @@
 import { type ReactNode } from 'react';
 import type { CartLine } from './storefront-api-types.js';
-export declare const CartLineContext: import("react").Context<CartLine | null>;
+import type { PartialDeep } from 'type-fest';
+type CartLinePartialDeep = PartialDeep<CartLine, {
+    recurseIntoArrays: true;
+}>;
+export declare const CartLineContext: import("react").Context<import("type-fest/source/partial-deep.js").PartialObjectDeep<CartLine, {
+    recurseIntoArrays: true;
+}> | null>;
 /**
- * The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.
+ * The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
  */
-export declare function useCartLine(): CartLine;
+export declare function useCartLine(): CartLinePartialDeep;
 type CartLineProviderProps = {
     /** Any `ReactNode` elements. */
     children: ReactNode;
     /** A cart line object. */
-    line: CartLine;
+    line: CartLinePartialDeep;
 };
 /**
  * The `CartLineProvider` component creates a context for using a cart line.
  */
-export declare function CartLineProvider({ children, line }: CartLineProviderProps): JSX.Element;
+export declare function CartLineProvider({ children, line, }: CartLineProviderProps): JSX.Element;
 export {};

package/dist/types/CartLineQuantity.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+interface CartLineQuantityBaseProps<ComponentGeneric extends ElementType = 'span'> {
+    /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */
+    as?: ComponentGeneric;
+}
+export type CartLineQuantityProps<ComponentGeneric extends ElementType> = CartLineQuantityBaseProps<ComponentGeneric> & Omit<ComponentPropsWithoutRef<ComponentGeneric>, keyof CartLineQuantityBaseProps<ComponentGeneric>>;
+/**
+ * The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.
+ *
+ * It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
+ */
+export declare function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(props: CartLineQuantityProps<ComponentGeneric>): JSX.Element;
+export {};

package/dist/types/CartLineQuantityAdjustButton.d.ts

@@ -0,0 +1,13 @@
+import { type BaseButtonProps } from './BaseButton.js';
+interface CartLineQuantityAdjustButtonBaseProps {
+    /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */
+    adjust?: 'increase' | 'decrease' | 'remove';
+}
+type CartLineQuantityAdjustButtonProps<AsType extends React.ElementType = 'button'> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;
+/**
+ * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.
+ *
+ * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.
+ */
+export declare function CartLineQuantityAdjustButton<AsType extends React.ElementType = 'button'>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element;
+export {};

package/dist/types/CartProvider.d.ts

@@ -66,5 +66,5 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
 /** Check for storage availability funciton obtained from
  * 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 | undefined;
+export declare function storageAvailable(type: 'localStorage' | 'sessionStorage'): boolean;
 export {};

package/dist/types/ExternalVideo.d.ts

@@ -1,6 +1,6 @@
 import type { ExternalVideo as ExternalVideoType } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
-interface BaseProps {
+interface ExternalVideoBaseProps {
     /**
      * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
      */
@@ -13,7 +13,7 @@ interface BaseProps {
      */
     options?: YouTube | Vimeo;
 }
-export type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], 'src'> & BaseProps;
+export type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], 'src'> & ExternalVideoBaseProps;
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
  * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).

package/dist/types/Money.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import type { MoneyV2, UnitPriceMeasurement } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
-interface CustomProps<ComponentGeneric extends React.ElementType> {
+export interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {
     /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */
     as?: ComponentGeneric;
     /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
@@ -19,11 +19,10 @@ interface CustomProps<ComponentGeneric extends React.ElementType> {
     /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */
     measurementSeparator?: ReactNode;
 }
-export type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProps<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof CustomProps<ComponentGeneric>>;
+export type MoneyProps<ComponentGeneric extends React.ElementType> = MoneyPropsBase<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof MoneyPropsBase<ComponentGeneric>>;
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
  * `locale` in the `ShopifyProvider` component.
  */
 export declare function Money<ComponentGeneric extends React.ElementType = 'div'>({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator, ...passthroughProps }: MoneyProps<ComponentGeneric>): JSX.Element;
-export {};

package/dist/types/ProductPrice.d.ts

@@ -1,5 +1,5 @@
 import type { Product } from './storefront-api-types.js';
-import { type MoneyProps } from './Money.js';
+import { type MoneyProps, type MoneyPropsBase } from './Money.js';
 import type { PartialDeep } from 'type-fest';
 export interface ProductPriceProps {
     /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */
@@ -18,3 +18,5 @@ export interface ProductPriceProps {
  * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
  */
 export declare function ProductPrice<ComponentGeneric extends React.ElementType>(props: ProductPriceProps & Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>): JSX.Element | null;
+export interface ProductPricePropsForDocs<AsType extends React.ElementType = 'div'> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>, ProductPriceProps {
+}

package/dist/types/ShopifyProvider.d.ts

@@ -8,10 +8,7 @@ export declare function ShopifyProvider({ children, ...shopifyConfig }: ShopifyP
  * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.
  */
 export declare function useShop(): ShopifyContextValue;
-/**
- * Shopify-specific values that are used in various Hydrogen React components and hooks.
- */
-export type ShopifyProviderProps = {
+export interface ShopifyProviderBase {
     /** The globally-unique identifier for the Shop */
     storefrontId?: string;
     /** The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`). */
@@ -28,10 +25,16 @@ export type ShopifyProviderProps = {
      * `ISO 369` language codes supported by Shopify.
      */
     languageIsoCode: LanguageCode;
+}
+/**
+ * Shopify-specific values that are used in various Hydrogen React components and hooks.
+ */
+export interface ShopifyProviderProps extends ShopifyProviderBase {
     /** React children to render. */
     children?: ReactNode;
-};
-export type ShopifyContextValue = Omit<ShopifyProviderProps, 'children'> & ShopifyContextReturn;
+}
+export interface ShopifyContextValue extends ShopifyProviderBase, ShopifyContextReturn {
+}
 type ShopifyContextReturn = {
     /**
      * Creates the fully-qualified URL to your store's GraphQL endpoint.

package/dist/types/analytics-types.d.ts

@@ -2,36 +2,85 @@ import type { CurrencyCode, LanguageCode, Product, ProductVariant } from './stor
 import { AnalyticsEventName, ShopifySalesChannel } from './analytics-constants.js';
 import { SHOPIFY_Y, SHOPIFY_S } from './cart-constants.js';
 export type ClientBrowserParameters = {
-    /** Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Shopify unique user token: Value of `_shopify_y` cookie.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     uniqueToken: string;
-    /** Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Shopify session token: Value of `_shopify_s` cookie.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     visitToken: string;
-    /** `window.location.href`. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Value of `window.location.href`.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     url: string;
-    /** `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Value of `window.location.pathname`.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     path: string;
-    /** `window.location.search`. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Value of `window.location.search`.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     search: string;
-    /** `window.location.referrer`. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Value of `window.location.referrer`.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     referrer: string;
-    /** `document.title`. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Value of `document.title`.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     title: string;
-    /** `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Value of `navigator.userAgent`.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     userAgent: string;
-    /** Navigation type: 'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown <number>'. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     navigationType: string;
-    /** Navigation api: 'PerformanceNavigationTiming' | 'performance.navigation'. Use `getClientBrowserParameters()` to collect this value. */
+    /**
+     * Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`.
+     *
+     * Use `getClientBrowserParameters()` to collect this value.
+     **/
     navigationApi: string;
 };
 export type ShopifyAnalyticsProduct = {
+    /** Product id in the form of `gid://shopify/Product/<id>`. */
     productGid: Product['id'];
+    /** Variant id in the form of `gid://shopify/ProductVariant/<id>`. */
     variantGid?: ProductVariant['id'];
+    /** Product name. */
     name: Product['title'];
+    /** Variant name. */
     variantName?: ProductVariant['title'];
+    /** Product brand or vendor. */
     brand: Product['vendor'];
+    /** Product category or type. */
     category?: Product['productType'];
+    /** Product price. */
     price: ProductVariant['price']['amount'];
+    /** Product sku. */
     sku?: ProductVariant['sku'];
+    /** Quantity of the product in this event. */
     quantity?: number;
 };
 type ShopifyAnalyticsBase = {
@@ -51,7 +100,7 @@ type ShopifyAnalyticsBase = {
     customerId?: string;
     /** Total value of products. */
     totalValue?: number;
-    /** Shopify products. */
+    /** Product list. */
     products?: ShopifyAnalyticsProduct[];
 };
 export type ShopifySalesChannels = keyof typeof ShopifySalesChannel;

package/dist/types/flatten-connection.d.ts

@@ -36,4 +36,8 @@ type ConnectionEdges = {
 type ConnectionNodes = {
     nodes: Array<unknown>;
 };
+export interface ConnectionGenericForDoc {
+    connection?: ConnectionEdges | ConnectionNodes;
+}
+export type FlattenConnectionReturnForDoc = Array<unknown>;
 export {};

package/dist/types/image-size.d.ts

@@ -6,7 +6,7 @@ export declare const IMG_SRC_SET_SIZES: number[];
  * Adds image size parameters to an image URL hosted by Shopify's CDN
  */
 export declare function addImageSizeParametersToUrl({ src, width, height, crop, scale, }: ShopifyLoaderParams): string;
-export declare function shopifyImageLoader(params: ShopifyLoaderParams): string;
+export declare function shopifyImageLoader(params: ShopifyLoaderParams): ReturnType<typeof addImageSizeParametersToUrl>;
 type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 export type GetShopifyImageDimensionsProps = {
     data: Pick<PartialDeep<ImageType, {

package/dist/types/index.d.cts

@@ -8,6 +8,8 @@ export { CartCheckoutButton } from './CartCheckoutButton.js';
 export { CartCost } from './CartCost.js';
 export { CartLinePrice } from './CartLinePrice.js';
 export { CartLineProvider, useCartLine } from './CartLineProvider.js';
+export { CartLineQuantity } from './CartLineQuantity.js';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { storefrontApiCustomScalars } from './codegen.helpers.js';
 export { getShopifyCookies } from './cookies-utils.js';

package/dist/types/index.d.ts

@@ -8,6 +8,8 @@ export { CartCheckoutButton } from './CartCheckoutButton.js';
 export { CartCost } from './CartCost.js';
 export { CartLinePrice } from './CartLinePrice.js';
 export { CartLineProvider, useCartLine } from './CartLineProvider.js';
+export { CartLineQuantity } from './CartLineQuantity.js';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { storefrontApiCustomScalars } from './codegen.helpers.js';
 export { getShopifyCookies } from './cookies-utils.js';

package/dist/types/parse-metafield.d.ts

@@ -15,7 +15,7 @@ export declare function parseMetafield<ReturnGeneric>(metafield: PartialDeep<Met
 /**
  * Parses a JSON string while preventing prototype injection attacks.
  */
-export declare function parseJSON(json: string): any;
+export declare function parseJSON(json: string): unknown;
 export declare const allMetafieldTypesArray: readonly ["boolean", "collection_reference", "color", "date", "date_time", "dimension", "file_reference", "json", "money", "multi_line_text_field", "number_decimal", "number_integer", "page_reference", "product_reference", "rating", "single_line_text_field", "url", "variant_reference", "volume", "weight", "list.collection_reference", "list.color", "list.date", "list.date_time", "list.dimension", "list.file_reference", "list.number_integer", "list.number_decimal", "list.page_reference", "list.product_reference", "list.rating", "list.single_line_text_field", "list.url", "list.variant_reference", "list.volume", "list.weight"];
 /** A union of all the supported `metafield.type`s */
 export type MetafieldTypeTypes = (typeof allMetafieldTypesArray)[number];

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

@@ -9,7 +9,7 @@ type StorefrontApiExtensions = {
      * Shows error codes common to Shopify. Additional error codes may also be shown.
      * https://shopify.dev/api/storefront#status_and_error_codes
      */
-    code?: 'THROTTLED' | 'ACCESS_DENIED' | 'SHOP_INACTIVE' | 'INTERNAL_SERVER_ERROR' | string;
+    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.

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

@@ -1,7 +1,7 @@
 /**
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT
  * Based on Storefront API 2023-01
- * If changes need to happen to the types defined in this file, then generally the Storefront API needs to update. After it's updated, you can run `yarn graphql-types`.
+ * If changes need to happen to the types defined in this file, then generally the Storefront API needs to update. After it's updated, you can run `npm run graphql-types`.
  * Except custom Scalars, which are defined in the `codegen.ts` file
  */
 /* eslint-disable */
@@ -5253,6 +5253,7 @@ export type PageEdge = {
 /**
  * Returns information about pagination in a connection, in accordance with the
  * [Relay specification](https://relay.dev/graphql/connections.htm#sec-undefined.PageInfo).
+ * For more information, please read our [GraphQL Pagination Usage Guide](https://shopify.dev/api/usage/pagination-graphql).
  *
  */
 export type PageInfo = {

package/dist/types/storefront-client.d.ts

@@ -19,7 +19,7 @@ type StorefrontClientProps = {
  *
  * When used on the server, it is recommended to use the `privateStorefrontToken` prop. When used on the client, it is recommended to use the `publicStorefrontToken` prop.
  */
-export declare function createStorefrontClient({ storeDomain, privateStorefrontToken, publicStorefrontToken, storefrontApiVersion, contentType, }: StorefrontClientProps): StorefrontClientReturn;
+export declare function createStorefrontClient(props: StorefrontClientProps): StorefrontClientReturn;
 export declare function getPublicTokenHeadersRaw(contentType: 'graphql' | 'json', storefrontApiVersion: string, accessToken: string): {
     'content-type': string;
     'X-SDK-Variant': string;