@shopify/hydrogen-react 0.0.0-next-182fb2f → 0.0.0-next-a09da91
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.
- package/dist/dev/AddToCartButton.js +2 -27
- package/dist/dev/AddToCartButton.js.map +1 -1
- package/dist/dev/AddToCartButton.mjs +2 -27
- package/dist/dev/AddToCartButton.mjs.map +1 -1
- package/dist/dev/BaseButton.js +31 -0
- package/dist/dev/BaseButton.js.map +1 -0
- package/dist/dev/BaseButton.mjs +31 -0
- package/dist/dev/BaseButton.mjs.map +1 -0
- package/dist/prod/AddToCartButton.js +2 -27
- package/dist/prod/AddToCartButton.js.map +1 -1
- package/dist/prod/AddToCartButton.mjs +2 -27
- package/dist/prod/AddToCartButton.mjs.map +1 -1
- package/dist/prod/BaseButton.js +31 -0
- package/dist/prod/BaseButton.js.map +1 -0
- package/dist/prod/BaseButton.mjs +31 -0
- package/dist/prod/BaseButton.mjs.map +1 -0
- package/dist/types/AddToCartButton.d.ts +1 -15
- package/dist/types/BaseButton.d.ts +15 -0
- package/dist/umd/hydrogen-react.dev.js +39 -38
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +11 -11
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- 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,
|
|
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,
|
|
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;"}
|
|
@@ -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,
|
|
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,
|
|
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;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { BaseButtonProps } from './BaseButton.js';
|
|
2
2
|
interface AddToCartButtonProps {
|
|
3
3
|
/** An array of cart line attributes that belong to the item being added to the cart. */
|
|
4
4
|
attributes?: {
|
|
@@ -19,18 +19,4 @@ interface AddToCartButtonProps {
|
|
|
19
19
|
* It must be a descendent of the `CartProvider` component.
|
|
20
20
|
*/
|
|
21
21
|
export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps & BaseButtonProps<AsType>): JSX.Element;
|
|
22
|
-
export interface CustomBaseButtonProps<AsType> {
|
|
23
|
-
/** 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. */
|
|
24
|
-
as?: AsType;
|
|
25
|
-
/** Any ReactNode elements. */
|
|
26
|
-
children: ReactNode;
|
|
27
|
-
/** Click event handler. Default behaviour triggers unless prevented */
|
|
28
|
-
onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
|
|
29
|
-
/** A default onClick behavior */
|
|
30
|
-
defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
|
|
31
|
-
/** A ref to the underlying button */
|
|
32
|
-
buttonRef?: Ref<HTMLButtonElement>;
|
|
33
|
-
}
|
|
34
|
-
export declare type BaseButtonProps<AsType extends React.ElementType> = CustomBaseButtonProps<AsType> & Omit<React.ComponentPropsWithoutRef<AsType>, keyof CustomBaseButtonProps<AsType>>;
|
|
35
|
-
export declare function BaseButton<AsType extends React.ElementType = 'button'>(props: BaseButtonProps<AsType>): JSX.Element;
|
|
36
22
|
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
|
+
export interface CustomBaseButtonProps<AsType> {
|
|
3
|
+
/** 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. */
|
|
4
|
+
as?: AsType;
|
|
5
|
+
/** Any ReactNode elements. */
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/** Click event handler. Default behaviour triggers unless prevented */
|
|
8
|
+
onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
|
|
9
|
+
/** A default onClick behavior */
|
|
10
|
+
defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
|
|
11
|
+
/** A ref to the underlying button */
|
|
12
|
+
buttonRef?: Ref<HTMLButtonElement>;
|
|
13
|
+
}
|
|
14
|
+
export declare type BaseButtonProps<AsType extends React.ElementType> = CustomBaseButtonProps<AsType> & Omit<React.ComponentPropsWithoutRef<AsType>, keyof CustomBaseButtonProps<AsType>>;
|
|
15
|
+
export declare function BaseButton<AsType extends React.ElementType = 'button'>(props: BaseButtonProps<AsType>): JSX.Element;
|