@shopify/hydrogen-react 0.0.0-next-781568d → 0.0.0-next-60821c3

package/dist/node-prod/CartLineQuantityAdjustButton.mjs

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { useCartLine } from "./CartLineProvider.mjs";
+import { BaseButton } from "./BaseButton.mjs";
+function CartLineQuantityAdjustButton(props) {
+  const { status, linesRemove, linesUpdate } = useCart();
+  const cartLine = useCartLine();
+  const { children, adjust, onClick, ...passthroughProps } = props;
+  const handleAdjust = useCallback(() => {
+    if (adjust === "remove") {
+      linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
+      return;
+    }
+    const quantity = adjust === "decrease" ? ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) - 1 : ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) + 1;
+    if (quantity <= 0) {
+      linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
+      return;
+    }
+    const lineUpdate = {
+      id: (cartLine == null ? void 0 : cartLine.id) ?? "",
+      quantity,
+      attributes: (cartLine == null ? void 0 : cartLine.attributes) ?? []
+    };
+    linesUpdate([lineUpdate]);
+  }, [
+    adjust,
+    cartLine == null ? void 0 : cartLine.attributes,
+    cartLine == null ? void 0 : cartLine.id,
+    cartLine == null ? void 0 : cartLine.quantity,
+    linesRemove,
+    linesUpdate
+  ]);
+  return /* @__PURE__ */ jsx(
+    BaseButton,
+    {
+      onClick,
+      defaultOnClick: handleAdjust,
+      disabled: typeof passthroughProps.disabled !== "undefined" ? passthroughProps.disabled : status !== "idle",
+      ...passthroughProps,
+      children
+    }
+  );
+}
+export {
+  CartLineQuantityAdjustButton
+};
+//# sourceMappingURL=CartLineQuantityAdjustButton.mjs.map

package/dist/node-prod/CartLineQuantityAdjustButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartLineQuantityAdjustButton.mjs","sources":["../../src/CartLineQuantityAdjustButton.tsx"],"sourcesContent":["import {useCallback} from 'react';\nimport {useCart} from './CartProvider.js';\nimport {useCartLine} from './CartLineProvider.js';\nimport {BaseButton, type BaseButtonProps} from './BaseButton.js';\nimport type {CartLineUpdateInput} from './storefront-api-types.js';\n\ninterface CartLineQuantityAdjustButtonBaseProps {\n  /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */\n  adjust?: 'increase' | 'decrease' | 'remove';\n}\n\ntype CartLineQuantityAdjustButtonProps<\n  AsType extends React.ElementType = 'button'\n> = BaseButtonProps<AsType> & CartLineQuantityAdjustButtonBaseProps;\n\n/**\n * The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.\n *\n * It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.\n */\nexport function CartLineQuantityAdjustButton<\n  AsType extends React.ElementType = 'button'\n>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element {\n  const {status, linesRemove, linesUpdate} = useCart();\n  const cartLine = useCartLine();\n  const {children, adjust, onClick, ...passthroughProps} = props;\n\n  const handleAdjust = useCallback(() => {\n    if (adjust === 'remove') {\n      linesRemove([cartLine?.id ?? '']);\n      return;\n    }\n\n    const quantity =\n      adjust === 'decrease'\n        ? (cartLine?.quantity ?? 0) - 1\n        : (cartLine?.quantity ?? 0) + 1;\n\n    if (quantity <= 0) {\n      linesRemove([cartLine?.id ?? '']);\n      return;\n    }\n\n    const lineUpdate = {\n      id: cartLine?.id ?? '',\n      quantity,\n      attributes: (cartLine?.attributes ??\n        []) as CartLineUpdateInput['attributes'],\n    } satisfies CartLineUpdateInput;\n\n    linesUpdate([lineUpdate]);\n  }, [\n    adjust,\n    cartLine?.attributes,\n    cartLine?.id,\n    cartLine?.quantity,\n    linesRemove,\n    linesUpdate,\n  ]);\n\n  return (\n    <BaseButton\n      onClick={onClick}\n      defaultOnClick={handleAdjust}\n      disabled={\n        typeof passthroughProps.disabled !== 'undefined'\n          ? passthroughProps.disabled\n          : status !== 'idle'\n      }\n      {...passthroughProps}\n    >\n      {children}\n    </BaseButton>\n  );\n}\n"],"names":[],"mappings":";;;;;AAoBO,SAAS,6BAEd,OAA+D;AAC/D,QAAM,EAAC,QAAQ,aAAa,gBAAe,QAAQ;AACnD,QAAM,WAAW;AACjB,QAAM,EAAC,UAAU,QAAQ,SAAS,GAAG,iBAAoB,IAAA;AAEnD,QAAA,eAAe,YAAY,MAAM;AACrC,QAAI,WAAW,UAAU;AACvB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEM,UAAA,WACJ,WAAW,eACN,qCAAU,aAAY,KAAK,MAC3B,qCAAU,aAAY,KAAK;AAElC,QAAI,YAAY,GAAG;AACjB,kBAAY,EAAC,qCAAU,OAAM,EAAE,CAAC;AAChC;AAAA,IACF;AAEA,UAAM,aAAa;AAAA,MACjB,KAAI,qCAAU,OAAM;AAAA,MACpB;AAAA,MACA,aAAa,qCAAU,eACrB,CAAC;AAAA,IAAA;AAGO,gBAAA,CAAC,UAAU,CAAC;AAAA,EAAA,GACvB;AAAA,IACD;AAAA,IACA,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV,qCAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,gBAAgB;AAAA,MAChB,UACE,OAAO,iBAAiB,aAAa,cACjC,iBAAiB,WACjB,WAAW;AAAA,MAEhB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/node-prod/index.js

@@ -8,6 +8,8 @@ const CartCheckoutButton = require("./CartCheckoutButton.js");
 const CartCost = require("./CartCost.js");
 const CartLinePrice = require("./CartLinePrice.js");
 const CartLineProvider = require("./CartLineProvider.js");
+const CartLineQuantity = require("./CartLineQuantity.js");
+const CartLineQuantityAdjustButton = require("./CartLineQuantityAdjustButton.js");
 const CartProvider = require("./CartProvider.js");
 const codegen_helpers = require("./codegen.helpers.js");
 const cookiesUtils = require("./cookies-utils.js");
@@ -38,6 +40,8 @@ exports.CartCost = CartCost.CartCost;
 exports.CartLinePrice = CartLinePrice.CartLinePrice;
 exports.CartLineProvider = CartLineProvider.CartLineProvider;
 exports.useCartLine = CartLineProvider.useCartLine;
+exports.CartLineQuantity = CartLineQuantity.CartLineQuantity;
+exports.CartLineQuantityAdjustButton = CartLineQuantityAdjustButton.CartLineQuantityAdjustButton;
 exports.CartProvider = CartProvider.CartProvider;
 exports.useCart = CartProvider.useCart;
 exports.storefrontApiCustomScalars = codegen_helpers.storefrontApiCustomScalars;

package/dist/node-prod/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/node-prod/index.mjs

@@ -6,6 +6,8 @@ import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
 import { CartCost } from "./CartCost.mjs";
 import { CartLinePrice } from "./CartLinePrice.mjs";
 import { CartLineProvider, useCartLine } from "./CartLineProvider.mjs";
+import { CartLineQuantity } from "./CartLineQuantity.mjs";
+import { CartLineQuantityAdjustButton } from "./CartLineQuantityAdjustButton.mjs";
 import { CartProvider, useCart } from "./CartProvider.mjs";
 import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
 import { getShopifyCookies } from "./cookies-utils.mjs";
@@ -33,6 +35,8 @@ export {
   CartCost,
   CartLinePrice,
   CartLineProvider,
+  CartLineQuantity,
+  CartLineQuantityAdjustButton,
   CartProvider,
   ExternalVideo,
   Image,

package/dist/node-prod/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/CartLineProvider.d.ts

@@ -1,15 +1,21 @@
 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 [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.

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/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/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/umd/hydrogen-react.dev.js

@@ -3004,6 +3004,51 @@
   }) {
     return /* @__PURE__ */ React.createElement(CartLineContext.Provider, { value: line }, children);
   }
+  function CartLineQuantity(props) {
+    const cartLine = useCartLine();
+    const { as, ...passthroughProps } = props;
+    const Wrapper = as ? as : "span";
+    return /* @__PURE__ */ React.createElement(Wrapper, { ...passthroughProps }, cartLine.quantity);
+  }
+  function CartLineQuantityAdjustButton(props) {
+    const { status, linesRemove, linesUpdate } = useCart();
+    const cartLine = useCartLine();
+    const { children, adjust, onClick, ...passthroughProps } = props;
+    const handleAdjust = React.useCallback(() => {
+      if (adjust === "remove") {
+        linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
+        return;
+      }
+      const quantity = adjust === "decrease" ? ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) - 1 : ((cartLine == null ? void 0 : cartLine.quantity) ?? 0) + 1;
+      if (quantity <= 0) {
+        linesRemove([(cartLine == null ? void 0 : cartLine.id) ?? ""]);
+        return;
+      }
+      const lineUpdate = {
+        id: (cartLine == null ? void 0 : cartLine.id) ?? "",
+        quantity,
+        attributes: (cartLine == null ? void 0 : cartLine.attributes) ?? []
+      };
+      linesUpdate([lineUpdate]);
+    }, [
+      adjust,
+      cartLine == null ? void 0 : cartLine.attributes,
+      cartLine == null ? void 0 : cartLine.id,
+      cartLine == null ? void 0 : cartLine.quantity,
+      linesRemove,
+      linesUpdate
+    ]);
+    return /* @__PURE__ */ React.createElement(
+      BaseButton,
+      {
+        onClick,
+        defaultOnClick: handleAdjust,
+        disabled: typeof passthroughProps.disabled !== "undefined" ? passthroughProps.disabled : status !== "idle",
+        ...passthroughProps
+      },
+      children
+    );
+  }
   const storefrontApiCustomScalars = {
     // Keep in sync with the definitions in the app/nextjs/codegen.ts!
     DateTime: "string",
@@ -3819,6 +3864,8 @@
   exports2.CartCost = CartCost;
   exports2.CartLinePrice = CartLinePrice;
   exports2.CartLineProvider = CartLineProvider;
+  exports2.CartLineQuantity = CartLineQuantity;
+  exports2.CartLineQuantityAdjustButton = CartLineQuantityAdjustButton;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
   exports2.Image = Image;