@shopify/hydrogen-react 0.0.0-next-182fb2f → 0.0.0-next-59d697b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/dev/AddToCartButton.js +2 -27
  2. package/dist/dev/AddToCartButton.js.map +1 -1
  3. package/dist/dev/AddToCartButton.mjs +2 -27
  4. package/dist/dev/AddToCartButton.mjs.map +1 -1
  5. package/dist/dev/BaseButton.js +31 -0
  6. package/dist/dev/BaseButton.js.map +1 -0
  7. package/dist/dev/BaseButton.mjs +31 -0
  8. package/dist/dev/BaseButton.mjs.map +1 -0
  9. package/dist/dev/CartCheckoutButton.js +29 -0
  10. package/dist/dev/CartCheckoutButton.js.map +1 -0
  11. package/dist/dev/CartCheckoutButton.mjs +29 -0
  12. package/dist/dev/CartCheckoutButton.mjs.map +1 -0
  13. package/dist/dev/index.js +2 -0
  14. package/dist/dev/index.js.map +1 -1
  15. package/dist/dev/index.mjs +2 -0
  16. package/dist/dev/index.mjs.map +1 -1
  17. package/dist/prod/AddToCartButton.js +2 -27
  18. package/dist/prod/AddToCartButton.js.map +1 -1
  19. package/dist/prod/AddToCartButton.mjs +2 -27
  20. package/dist/prod/AddToCartButton.mjs.map +1 -1
  21. package/dist/prod/BaseButton.js +31 -0
  22. package/dist/prod/BaseButton.js.map +1 -0
  23. package/dist/prod/BaseButton.mjs +31 -0
  24. package/dist/prod/BaseButton.mjs.map +1 -0
  25. package/dist/prod/CartCheckoutButton.js +29 -0
  26. package/dist/prod/CartCheckoutButton.js.map +1 -0
  27. package/dist/prod/CartCheckoutButton.mjs +29 -0
  28. package/dist/prod/CartCheckoutButton.mjs.map +1 -0
  29. package/dist/prod/index.js +2 -0
  30. package/dist/prod/index.js.map +1 -1
  31. package/dist/prod/index.mjs +2 -0
  32. package/dist/prod/index.mjs.map +1 -1
  33. package/dist/types/AddToCartButton.d.ts +1 -15
  34. package/dist/types/BaseButton.d.ts +15 -0
  35. package/dist/types/CartCheckoutButton.d.ts +11 -0
  36. package/dist/types/index.d.cts +1 -0
  37. package/dist/types/index.d.ts +1 -0
  38. package/dist/umd/hydrogen-react.dev.js +58 -28
  39. package/dist/umd/hydrogen-react.dev.js.map +1 -1
  40. package/dist/umd/hydrogen-react.prod.js +14 -14
  41. package/dist/umd/hydrogen-react.prod.js.map +1 -1
  42. package/package.json +1 -1
@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
3
3
  const react = require("react");
4
4
  const CartProvider = require("./CartProvider.js");
5
5
  const ProductProvider = require("./ProductProvider.js");
6
+ const BaseButton = require("./BaseButton.js");
6
7
  const jsxRuntime = require("react/jsx-runtime");
7
8
  function AddToCartButton(props) {
8
9
  var _a;
@@ -41,7 +42,7 @@ function AddToCartButton(props) {
41
42
  }]);
42
43
  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
43
44
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
44
- children: [/* @__PURE__ */ jsxRuntime.jsx(BaseButton, {
45
+ children: [/* @__PURE__ */ jsxRuntime.jsx(BaseButton.BaseButton, {
45
46
  ...passthroughProps,
46
47
  disabled,
47
48
  onClick,
@@ -65,31 +66,5 @@ function AddToCartButton(props) {
65
66
  }) : null]
66
67
  });
67
68
  }
68
- function BaseButton(props) {
69
- const {
70
- as,
71
- onClick,
72
- defaultOnClick,
73
- children,
74
- buttonRef,
75
- ...passthroughProps
76
- } = props;
77
- const handleOnClick = react.useCallback((event) => {
78
- if (onClick) {
79
- const clickShouldContinue = onClick(event);
80
- if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
81
- return;
82
- }
83
- defaultOnClick == null ? void 0 : defaultOnClick(event);
84
- }, [defaultOnClick, onClick]);
85
- const Component = as || "button";
86
- return /* @__PURE__ */ jsxRuntime.jsx(Component, {
87
- ref: buttonRef,
88
- onClick: handleOnClick,
89
- ...passthroughProps,
90
- children
91
- });
92
- }
93
69
  exports.AddToCartButton = AddToCartButton;
94
- exports.BaseButton = BaseButton;
95
70
  //# sourceMappingURL=AddToCartButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, Ref, ReactNode, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\n\ninterface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A default onClick behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A ref to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>\n) {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick]\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","BaseButton","as","defaultOnClick","buttonRef","handleOnClick","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;;;;;AAyBO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,eAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,aAA3B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,gBAA1B,WAAA;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,QAAAA,UAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,MAAAA,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,yCACEgB,WAAAA,UAAA;AAAA,IAAA,UACE,CAAAC,2BAAA,IAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,2BAAA,IAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;AA0BM,SAASwB,WACdnC,OACA;AACM,QAAA;AAAA,IACJoC;AAAAA,IACA3B;AAAAA,IACA4B;AAAAA,IACA3B;AAAAA,IACA4B;AAAAA,OACG1B;AAAAA,EACDZ,IAAAA;AAEEuC,QAAAA,gBAAgBjB,kBACpB,CAACkB,UAA4D;AAC3D,QAAI/B,SAAS;AACLgC,YAAAA,sBAAsBhC,QAAQ+B,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDL,qDAAiBG;AAAAA,EAAH,GAEhB,CAACH,gBAAgB5B,OAAjB,CAd+B;AAiBjC,QAAMkC,YAAYP,MAAM;AAExB,wCACG,WAAD;AAAA,IAAW,KAAKE;AAAAA,IAAW,SAASC;AAAAA,IAApC,GAAuD3B;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;;;"}
1
+ {"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","BaseButton","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,eAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,aAA3B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,gBAA1B,WAAA;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,QAAAA,UAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,MAAAA,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,yCACEgB,WAAAA,UAAA;AAAA,IAAA,UACE,CAAAC,2BAAA,IAACC,uBAAD;AAAA,MAAA,GACMd;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,2BAAA,IAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLE,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGlC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;;"}
@@ -1,6 +1,7 @@
1
1
  import { useState, useEffect, useCallback } from "react";
2
2
  import { useCart } from "./CartProvider.mjs";
3
3
  import { useProduct } from "./ProductProvider.mjs";
4
+ import { BaseButton } from "./BaseButton.mjs";
4
5
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
5
6
  function AddToCartButton(props) {
6
7
  var _a;
@@ -63,33 +64,7 @@ function AddToCartButton(props) {
63
64
  }) : null]
64
65
  });
65
66
  }
66
- function BaseButton(props) {
67
- const {
68
- as,
69
- onClick,
70
- defaultOnClick,
71
- children,
72
- buttonRef,
73
- ...passthroughProps
74
- } = props;
75
- const handleOnClick = useCallback((event) => {
76
- if (onClick) {
77
- const clickShouldContinue = onClick(event);
78
- if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
79
- return;
80
- }
81
- defaultOnClick == null ? void 0 : defaultOnClick(event);
82
- }, [defaultOnClick, onClick]);
83
- const Component = as || "button";
84
- return /* @__PURE__ */ jsx(Component, {
85
- ref: buttonRef,
86
- onClick: handleOnClick,
87
- ...passthroughProps,
88
- children
89
- });
90
- }
91
67
  export {
92
- AddToCartButton,
93
- BaseButton
68
+ AddToCartButton
94
69
  };
95
70
  //# sourceMappingURL=AddToCartButton.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, Ref, ReactNode, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\n\ninterface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A default onClick behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A ref to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>\n) {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick]\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","BaseButton","as","defaultOnClick","buttonRef","handleOnClick","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;;;AAyBO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;AA0BM,SAASwB,WACdnC,OACA;AACM,QAAA;AAAA,IACJoC;AAAAA,IACA3B;AAAAA,IACA4B;AAAAA,IACA3B;AAAAA,IACA4B;AAAAA,OACG1B;AAAAA,EACDZ,IAAAA;AAEEuC,QAAAA,gBAAgBjB,YACpB,CAACkB,UAA4D;AAC3D,QAAI/B,SAAS;AACLgC,YAAAA,sBAAsBhC,QAAQ+B,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDL,qDAAiBG;AAAAA,EAAH,GAEhB,CAACH,gBAAgB5B,OAAjB,CAd+B;AAiBjC,QAAMkC,YAAYP,MAAM;AAExB,6BACG,WAAD;AAAA,IAAW,KAAKE;AAAAA,IAAW,SAASC;AAAAA,IAApC,GAAuD3B;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;"}
1
+ {"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const react = require("react");
4
+ const jsxRuntime = require("react/jsx-runtime");
5
+ function BaseButton(props) {
6
+ const {
7
+ as,
8
+ onClick,
9
+ defaultOnClick,
10
+ children,
11
+ buttonRef,
12
+ ...passthroughProps
13
+ } = props;
14
+ const handleOnClick = react.useCallback((event) => {
15
+ if (onClick) {
16
+ const clickShouldContinue = onClick(event);
17
+ if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
18
+ return;
19
+ }
20
+ defaultOnClick == null ? void 0 : defaultOnClick(event);
21
+ }, [defaultOnClick, onClick]);
22
+ const Component = as || "button";
23
+ return /* @__PURE__ */ jsxRuntime.jsx(Component, {
24
+ ref: buttonRef,
25
+ onClick: handleOnClick,
26
+ ...passthroughProps,
27
+ children
28
+ });
29
+ }
30
+ exports.BaseButton = BaseButton;
31
+ //# sourceMappingURL=BaseButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseButton.js","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A default onClick behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A ref to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>\n) {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick]\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;;;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,kBACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,wCACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;;"}
@@ -0,0 +1,31 @@
1
+ import { useCallback } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ function BaseButton(props) {
4
+ const {
5
+ as,
6
+ onClick,
7
+ defaultOnClick,
8
+ children,
9
+ buttonRef,
10
+ ...passthroughProps
11
+ } = props;
12
+ const handleOnClick = useCallback((event) => {
13
+ if (onClick) {
14
+ const clickShouldContinue = onClick(event);
15
+ if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
16
+ return;
17
+ }
18
+ defaultOnClick == null ? void 0 : defaultOnClick(event);
19
+ }, [defaultOnClick, onClick]);
20
+ const Component = as || "button";
21
+ return /* @__PURE__ */ jsx(Component, {
22
+ ref: buttonRef,
23
+ onClick: handleOnClick,
24
+ ...passthroughProps,
25
+ children
26
+ });
27
+ }
28
+ export {
29
+ BaseButton
30
+ };
31
+ //# sourceMappingURL=BaseButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseButton.mjs","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A default onClick behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A ref to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>\n) {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick]\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,YACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,6BACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;"}
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const react = require("react");
4
+ const CartProvider = require("./CartProvider.js");
5
+ const jsxRuntime = require("react/jsx-runtime");
6
+ function CartCheckoutButton(props) {
7
+ const [requestedCheckout, setRequestedCheckout] = react.useState(false);
8
+ const {
9
+ status,
10
+ checkoutUrl
11
+ } = CartProvider.useCart();
12
+ const {
13
+ children,
14
+ ...passthroughProps
15
+ } = props;
16
+ react.useEffect(() => {
17
+ if (requestedCheckout && checkoutUrl && status === "idle") {
18
+ window.location.href = checkoutUrl;
19
+ }
20
+ }, [requestedCheckout, status, checkoutUrl]);
21
+ return /* @__PURE__ */ jsxRuntime.jsx("button", {
22
+ ...passthroughProps,
23
+ disabled: requestedCheckout || passthroughProps.disabled,
24
+ onClick: () => setRequestedCheckout(true),
25
+ children
26
+ });
27
+ }
28
+ exports.CartCheckoutButton = CartCheckoutButton;
29
+ //# sourceMappingURL=CartCheckoutButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartCheckoutButton.js","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {\n /** A `ReactNode` element. */\n children: ReactNode;\n }\n) {\n const [requestedCheckout, setRequestedCheckout] = useState(false);\n const {status, checkoutUrl} = useCart();\n const {children, ...passthroughProps} = props;\n\n useEffect(() => {\n if (requestedCheckout && checkoutUrl && status === 'idle') {\n window.location.href = checkoutUrl;\n }\n }, [requestedCheckout, status, checkoutUrl]);\n\n return (\n <button\n {...passthroughProps}\n disabled={requestedCheckout || passthroughProps.disabled}\n onClick={() => setRequestedCheckout(true)}\n >\n {children}\n </button>\n );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;;;AASO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,eAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,aAA9B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,QAAAA,UAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT;OAEQG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;;"}
@@ -0,0 +1,29 @@
1
+ import { useState, useEffect } from "react";
2
+ import { useCart } from "./CartProvider.mjs";
3
+ import { jsx } from "react/jsx-runtime";
4
+ function CartCheckoutButton(props) {
5
+ const [requestedCheckout, setRequestedCheckout] = useState(false);
6
+ const {
7
+ status,
8
+ checkoutUrl
9
+ } = useCart();
10
+ const {
11
+ children,
12
+ ...passthroughProps
13
+ } = props;
14
+ useEffect(() => {
15
+ if (requestedCheckout && checkoutUrl && status === "idle") {
16
+ window.location.href = checkoutUrl;
17
+ }
18
+ }, [requestedCheckout, status, checkoutUrl]);
19
+ return /* @__PURE__ */ jsx("button", {
20
+ ...passthroughProps,
21
+ disabled: requestedCheckout || passthroughProps.disabled,
22
+ onClick: () => setRequestedCheckout(true),
23
+ children
24
+ });
25
+ }
26
+ export {
27
+ CartCheckoutButton
28
+ };
29
+ //# sourceMappingURL=CartCheckoutButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CartCheckoutButton.mjs","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {\n /** A `ReactNode` element. */\n children: ReactNode;\n }\n) {\n const [requestedCheckout, setRequestedCheckout] = useState(false);\n const {status, checkoutUrl} = useCart();\n const {children, ...passthroughProps} = props;\n\n useEffect(() => {\n if (requestedCheckout && checkoutUrl && status === 'idle') {\n window.location.href = checkoutUrl;\n }\n }, [requestedCheckout, status, checkoutUrl]);\n\n return (\n <button\n {...passthroughProps}\n disabled={requestedCheckout || passthroughProps.disabled}\n onClick={() => setRequestedCheckout(true)}\n >\n {children}\n </button>\n );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;AASO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,SAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,QAA9B;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,YAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT;OAEQG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;"}
package/dist/dev/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
3
  const AddToCartButton = require("./AddToCartButton.js");
4
+ const CartCheckoutButton = require("./CartCheckoutButton.js");
4
5
  const CartProvider = require("./CartProvider.js");
5
6
  const ExternalVideo = require("./ExternalVideo.js");
6
7
  const flattenConnection = require("./flatten-connection.js");
@@ -18,6 +19,7 @@ const storefrontClient = require("./storefront-client.js");
18
19
  const useMoney = require("./useMoney.js");
19
20
  const Video = require("./Video.js");
20
21
  exports.AddToCartButton = AddToCartButton.AddToCartButton;
22
+ exports.CartCheckoutButton = CartCheckoutButton.CartCheckoutButton;
21
23
  exports.CartProvider = CartProvider.CartProvider;
22
24
  exports.useCart = CartProvider.useCart;
23
25
  exports.ExternalVideo = ExternalVideo.ExternalVideo;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,4 +1,5 @@
1
1
  import { AddToCartButton } from "./AddToCartButton.mjs";
2
+ import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
2
3
  import { CartProvider, useCart } from "./CartProvider.mjs";
3
4
  import { ExternalVideo } from "./ExternalVideo.mjs";
4
5
  import { flattenConnection } from "./flatten-connection.mjs";
@@ -17,6 +18,7 @@ import { useMoney } from "./useMoney.mjs";
17
18
  import { Video } from "./Video.mjs";
18
19
  export {
19
20
  AddToCartButton,
21
+ CartCheckoutButton,
20
22
  CartProvider,
21
23
  ExternalVideo,
22
24
  Image,
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
3
3
  const react = require("react");
4
4
  const CartProvider = require("./CartProvider.js");
5
5
  const ProductProvider = require("./ProductProvider.js");
6
+ const BaseButton = require("./BaseButton.js");
6
7
  const jsxRuntime = require("react/jsx-runtime");
7
8
  function AddToCartButton(props) {
8
9
  var _a;
@@ -41,7 +42,7 @@ function AddToCartButton(props) {
41
42
  }]);
42
43
  }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);
43
44
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
44
- children: [/* @__PURE__ */ jsxRuntime.jsx(BaseButton, {
45
+ children: [/* @__PURE__ */ jsxRuntime.jsx(BaseButton.BaseButton, {
45
46
  ...passthroughProps,
46
47
  disabled,
47
48
  onClick,
@@ -65,31 +66,5 @@ function AddToCartButton(props) {
65
66
  }) : null]
66
67
  });
67
68
  }
68
- function BaseButton(props) {
69
- const {
70
- as,
71
- onClick,
72
- defaultOnClick,
73
- children,
74
- buttonRef,
75
- ...passthroughProps
76
- } = props;
77
- const handleOnClick = react.useCallback((event) => {
78
- if (onClick) {
79
- const clickShouldContinue = onClick(event);
80
- if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
81
- return;
82
- }
83
- defaultOnClick == null ? void 0 : defaultOnClick(event);
84
- }, [defaultOnClick, onClick]);
85
- const Component = as || "button";
86
- return /* @__PURE__ */ jsxRuntime.jsx(Component, {
87
- ref: buttonRef,
88
- onClick: handleOnClick,
89
- ...passthroughProps,
90
- children
91
- });
92
- }
93
69
  exports.AddToCartButton = AddToCartButton;
94
- exports.BaseButton = BaseButton;
95
70
  //# sourceMappingURL=AddToCartButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, Ref, ReactNode, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\n\ninterface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A default onClick behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A ref to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>\n) {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick]\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","BaseButton","as","defaultOnClick","buttonRef","handleOnClick","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;;;;;AAyBO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,eAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,aAA3B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,gBAA1B,WAAA;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,QAAAA,UAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,MAAAA,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,yCACEgB,WAAAA,UAAA;AAAA,IAAA,UACE,CAAAC,2BAAA,IAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,2BAAA,IAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;AA0BM,SAASwB,WACdnC,OACA;AACM,QAAA;AAAA,IACJoC;AAAAA,IACA3B;AAAAA,IACA4B;AAAAA,IACA3B;AAAAA,IACA4B;AAAAA,OACG1B;AAAAA,EACDZ,IAAAA;AAEEuC,QAAAA,gBAAgBjB,kBACpB,CAACkB,UAA4D;AAC3D,QAAI/B,SAAS;AACLgC,YAAAA,sBAAsBhC,QAAQ+B,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDL,qDAAiBG;AAAAA,EAAH,GAEhB,CAACH,gBAAgB5B,OAAjB,CAd+B;AAiBjC,QAAMkC,YAAYP,MAAM;AAExB,wCACG,WAAD;AAAA,IAAW,KAAKE;AAAAA,IAAW,SAASC;AAAAA,IAApC,GAAuD3B;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;;;"}
1
+ {"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","BaseButton","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,eAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,aAA3B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,gBAA1B,WAAA;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,QAAAA,UAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,MAAAA,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,yCACEgB,WAAAA,UAAA;AAAA,IAAA,UACE,CAAAC,2BAAA,IAACC,uBAAD;AAAA,MAAA,GACMd;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,2BAAA,IAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLE,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGlC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;;"}
@@ -1,6 +1,7 @@
1
1
  import { useState, useEffect, useCallback } from "react";
2
2
  import { useCart } from "./CartProvider.mjs";
3
3
  import { useProduct } from "./ProductProvider.mjs";
4
+ import { BaseButton } from "./BaseButton.mjs";
4
5
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
5
6
  function AddToCartButton(props) {
6
7
  var _a;
@@ -63,33 +64,7 @@ function AddToCartButton(props) {
63
64
  }) : null]
64
65
  });
65
66
  }
66
- function BaseButton(props) {
67
- const {
68
- as,
69
- onClick,
70
- defaultOnClick,
71
- children,
72
- buttonRef,
73
- ...passthroughProps
74
- } = props;
75
- const handleOnClick = useCallback((event) => {
76
- if (onClick) {
77
- const clickShouldContinue = onClick(event);
78
- if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
79
- return;
80
- }
81
- defaultOnClick == null ? void 0 : defaultOnClick(event);
82
- }, [defaultOnClick, onClick]);
83
- const Component = as || "button";
84
- return /* @__PURE__ */ jsx(Component, {
85
- ref: buttonRef,
86
- onClick: handleOnClick,
87
- ...passthroughProps,
88
- children
89
- });
90
- }
91
67
  export {
92
- AddToCartButton,
93
- BaseButton
68
+ AddToCartButton
94
69
  };
95
70
  //# sourceMappingURL=AddToCartButton.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, Ref, ReactNode, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\n\ninterface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A default onClick behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A ref to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>\n) {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick]\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","BaseButton","as","defaultOnClick","buttonRef","handleOnClick","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;;;AAyBO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;AA0BM,SAASwB,WACdnC,OACA;AACM,QAAA;AAAA,IACJoC;AAAAA,IACA3B;AAAAA,IACA4B;AAAAA,IACA3B;AAAAA,IACA4B;AAAAA,OACG1B;AAAAA,EACDZ,IAAAA;AAEEuC,QAAAA,gBAAgBjB,YACpB,CAACkB,UAA4D;AAC3D,QAAI/B,SAAS;AACLgC,YAAAA,sBAAsBhC,QAAQ+B,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDL,qDAAiBG;AAAAA,EAAH,GAEhB,CAACH,gBAAgB5B,OAAjB,CAd+B;AAiBjC,QAAMkC,YAAYP,MAAM;AAExB,6BACG,WAAD;AAAA,IAAW,KAAKE;AAAAA,IAAW,SAASC;AAAAA,IAApC,GAAuD3B;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;"}
1
+ {"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\ninterface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const react = require("react");
4
+ const jsxRuntime = require("react/jsx-runtime");
5
+ function BaseButton(props) {
6
+ const {
7
+ as,
8
+ onClick,
9
+ defaultOnClick,
10
+ children,
11
+ buttonRef,
12
+ ...passthroughProps
13
+ } = props;
14
+ const handleOnClick = react.useCallback((event) => {
15
+ if (onClick) {
16
+ const clickShouldContinue = onClick(event);
17
+ if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
18
+ return;
19
+ }
20
+ defaultOnClick == null ? void 0 : defaultOnClick(event);
21
+ }, [defaultOnClick, onClick]);
22
+ const Component = as || "button";
23
+ return /* @__PURE__ */ jsxRuntime.jsx(Component, {
24
+ ref: buttonRef,
25
+ onClick: handleOnClick,
26
+ ...passthroughProps,
27
+ children
28
+ });
29
+ }
30
+ exports.BaseButton = BaseButton;
31
+ //# sourceMappingURL=BaseButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseButton.js","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A default onClick behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A ref to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>\n) {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick]\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;;;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,kBACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,wCACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;;"}
@@ -0,0 +1,31 @@
1
+ import { useCallback } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+ function BaseButton(props) {
4
+ const {
5
+ as,
6
+ onClick,
7
+ defaultOnClick,
8
+ children,
9
+ buttonRef,
10
+ ...passthroughProps
11
+ } = props;
12
+ const handleOnClick = useCallback((event) => {
13
+ if (onClick) {
14
+ const clickShouldContinue = onClick(event);
15
+ if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
16
+ return;
17
+ }
18
+ defaultOnClick == null ? void 0 : defaultOnClick(event);
19
+ }, [defaultOnClick, onClick]);
20
+ const Component = as || "button";
21
+ return /* @__PURE__ */ jsx(Component, {
22
+ ref: buttonRef,
23
+ onClick: handleOnClick,
24
+ ...passthroughProps,
25
+ children
26
+ });
27
+ }
28
+ export {
29
+ BaseButton
30
+ };
31
+ //# sourceMappingURL=BaseButton.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BaseButton.mjs","sources":["../../src/BaseButton.tsx"],"sourcesContent":["import {ReactNode, Ref, useCallback} from 'react';\n\nexport interface CustomBaseButtonProps<AsType> {\n /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n as?: AsType;\n /** Any ReactNode elements. */\n children: ReactNode;\n /** Click event handler. Default behaviour triggers unless prevented */\n onClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A default onClick behavior */\n defaultOnClick?: (\n event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n ) => void | boolean;\n /** A ref to the underlying button */\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\nexport type BaseButtonProps<AsType extends React.ElementType> =\n CustomBaseButtonProps<AsType> &\n Omit<\n React.ComponentPropsWithoutRef<AsType>,\n keyof CustomBaseButtonProps<AsType>\n >;\n\nexport function BaseButton<AsType extends React.ElementType = 'button'>(\n props: BaseButtonProps<AsType>\n) {\n const {\n as,\n onClick,\n defaultOnClick,\n children,\n buttonRef,\n ...passthroughProps\n } = props;\n\n const handleOnClick = useCallback(\n (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n const clickShouldContinue = onClick(event);\n if (\n (typeof clickShouldContinue === 'boolean' &&\n clickShouldContinue === false) ||\n event?.defaultPrevented\n )\n return;\n }\n\n defaultOnClick?.(event);\n },\n [defaultOnClick, onClick]\n );\n\n const Component = as || 'button';\n\n return (\n <Component ref={buttonRef} onClick={handleOnClick} {...passthroughProps}>\n {children}\n </Component>\n );\n}\n"],"names":["BaseButton","props","as","onClick","defaultOnClick","children","buttonRef","passthroughProps","handleOnClick","useCallback","event","clickShouldContinue","defaultPrevented","Component"],"mappings":";;AA0BO,SAASA,WACdC,OACA;AACM,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEEO,QAAAA,gBAAgBC,YACpB,CAACC,UAA4D;AAC3D,QAAIP,SAAS;AACLQ,YAAAA,sBAAsBR,QAAQO,KAAD;AACnC,UACG,OAAOC,wBAAwB,aAC9BA,wBAAwB,UAC1BD,+BAAOE;AAEP;AAAA,IACH;AAEDR,qDAAiBM;AAAAA,EAAH,GAEhB,CAACN,gBAAgBD,OAAjB,CAd+B;AAiBjC,QAAMU,YAAYX,MAAM;AAExB,6BACG,WAAD;AAAA,IAAW,KAAKI;AAAAA,IAAW,SAASE;AAAAA,IAApC,GAAuDD;AAAAA,IAAvD;AAAA,EAAA,CADF;AAKD;"}
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const react = require("react");
4
+ const CartProvider = require("./CartProvider.js");
5
+ const jsxRuntime = require("react/jsx-runtime");
6
+ function CartCheckoutButton(props) {
7
+ const [requestedCheckout, setRequestedCheckout] = react.useState(false);
8
+ const {
9
+ status,
10
+ checkoutUrl
11
+ } = CartProvider.useCart();
12
+ const {
13
+ children,
14
+ ...passthroughProps
15
+ } = props;
16
+ react.useEffect(() => {
17
+ if (requestedCheckout && checkoutUrl && status === "idle") {
18
+ window.location.href = checkoutUrl;
19
+ }
20
+ }, [requestedCheckout, status, checkoutUrl]);
21
+ return /* @__PURE__ */ jsxRuntime.jsx("button", {
22
+ ...passthroughProps,
23
+ disabled: requestedCheckout || passthroughProps.disabled,
24
+ onClick: () => setRequestedCheckout(true),
25
+ children
26
+ });
27
+ }
28
+ exports.CartCheckoutButton = CartCheckoutButton;
29
+ //# sourceMappingURL=CartCheckoutButton.js.map