@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

package/dist/esnext/components/CartLineQuantityAdjustButton/CartLineQuantityAdjustButton.js

@@ -1,17 +1,26 @@
-import React from 'react';
-import { useCartLinesRemoveCallback, useCartLinesUpdateCallback, } from '../CartProvider';
+import React, { useCallback } from 'react';
+import { useCart } from '../CartProvider';
 import { useCartLine } from '../CartLineProvider';
+import { BaseButton } from '../BaseButton';
+/**
+ * The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
+ * It must be a descendent of a `CartLineProvider` component.
+ */
 export function CartLineQuantityAdjustButton(props) {
-    const updateLines = useCartLinesUpdateCallback();
-    const removeLines = useCartLinesRemoveCallback();
+    const { status, linesRemove, linesUpdate } = useCart();
     const cartLine = useCartLine();
-    const { children, adjust, ...passthroughProps } = props;
-    return (React.createElement("button", { onClick: () => {
-            if (adjust === 'remove') {
-                removeLines([cartLine.id]);
-                return;
-            }
-            const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
-            updateLines([{ id: cartLine.id, quantity }]);
-        }, ...passthroughProps }, children));
+    const { children, adjust, onClick, ...passthroughProps } = props;
+    const handleAdjust = useCallback(() => {
+        if (adjust === 'remove') {
+            linesRemove([cartLine.id]);
+            return;
+        }
+        const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
+        if (quantity <= 0) {
+            linesRemove([cartLine.id]);
+            return;
+        }
+        linesUpdate([{ id: cartLine.id, quantity }]);
+    }, [adjust, cartLine.id, cartLine.quantity, linesRemove, linesUpdate]);
+    return (React.createElement(BaseButton, { disabled: status !== 'idle', onClick: onClick, defaultOnClick: handleAdjust, ...passthroughProps }, children));
 }

package/dist/esnext/components/CartLines/CartLines.client.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, ElementType } from 'react';
+import { Props } from '../types';
+export interface CartLinesProps {
+    /** A `ReactNode` element. Valid values: `ul` or `undefined`. If `ul`, then each child will
+     * be wrapped with a `li` element.
+     */
+    as?: 'ul';
+    /** A `ReactNode` element */
+    children: ReactNode;
+}
+/**
+ * The `CartLines` component iterates over each cart line and renders its `children` within
+ * a `CartLineProvider` for each cart line.
+ */
+export declare function CartLines<TTag extends ElementType>(props: Props<TTag> & CartLinesProps): JSX.Element;

package/dist/esnext/components/CartLines/{CartLines.js → CartLines.client.js}

@@ -1,15 +1,17 @@
-import React, { cloneElement, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { useCart } from '../CartProvider';
 import { CartLineProvider } from '../CartLineProvider';
+/**
+ * The `CartLines` component iterates over each cart line and renders its `children` within
+ * a `CartLineProvider` for each cart line.
+ */
 export function CartLines(props) {
     const { lines } = useCart();
     const { as, children, ...passthroughProps } = props;
-    const Wrapper = as !== null && as !== void 0 ? as : Fragment;
+    const Wrapper = as ?? Fragment;
     const ChildWrapper = Wrapper === 'ul' ? 'li' : Fragment;
     return (React.createElement(Wrapper, { ...passthroughProps }, lines.map((line) => {
         return (React.createElement(ChildWrapper, { key: line.id },
-            React.createElement(CartLineProvider, { line: line }, typeof children === 'function'
-                ? cloneElement(children(line))
-                : children)));
+            React.createElement(CartLineProvider, { line: line }, children)));
     })));
 }

package/dist/esnext/components/CartLines/index.d.ts

@@ -1 +1 @@
-export { CartLines } from './CartLines';
+export { CartLines } from './CartLines.client';

package/dist/esnext/components/CartLines/index.js

@@ -1 +1 @@
-export { CartLines } from './CartLines';
+export { CartLines } from './CartLines.client';

package/dist/esnext/components/CartProvider/CartProvider.client.d.ts

@@ -1,7 +1,41 @@
-import * as React from 'react';
+import React from 'react';
+import { CartBuyerIdentityInput, CountryCode } from '../../storefront-api-types';
 import { CartFragmentFragment } from './graphql/CartFragment';
-export declare function CartProvider({ children, cart, numCartLines, }: {
+/**
+ * The `CartProvider` component creates a context for using a cart. It creates a cart object and callbacks
+ * that can be accessed by any descendent component using the `useCart` hook and related hooks. It also carries out
+ * any callback props when a relevant action is performed. For example, if a `onLineAdd` callback is provided,
+ * then the callback will be called when a new line item is successfully added to the cart.
+ *
+ * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
+ * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
+ */
+export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment, customerAccessToken, countryCode, }: {
+    /** Any `ReactNode` elements. */
     children: React.ReactNode;
-    cart?: CartFragmentFragment;
     numCartLines?: number;
+    /** A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API. */
+    onCreate?: () => void;
+    /** A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API. */
+    onLineAdd?: () => void;
+    /** A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API. */
+    onLineRemove?: () => void;
+    /** A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API. */
+    onLineUpdate?: () => void;
+    /** A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API. */
+    onNoteUpdate?: () => void;
+    /** A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API. */
+    onBuyerIdentityUpdate?: () => void;
+    /** A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API. */
+    onAttributesUpdate?: () => void;
+    /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */
+    onDiscountCodesUpdate?: () => void;
+    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart). */
+    data?: CartFragmentFragment;
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/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;
 }): JSX.Element;