@shopify/hydrogen-react 2026.4.1 → 2026.4.2

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

@@ -1 +1 @@
-{"version":3,"file":"ProductPrice.mjs","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps, type MoneyPropsBase} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n * @publicDocs\n */\nexport function ProductPrice<\n  ComponentGeneric extends React.ElementType = 'div',\n>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>,\n): JSX.Element | null {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? (flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId,\n      ) ?? null)\n    : null;\n\n  const variantPriceProperty =\n    valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      price = variant.compareAtPrice;\n    } else {\n      price = product?.compareAtPriceRange?.[variantPriceProperty];\n    }\n\n    let priceAsNumber: number;\n    if (variantId && variant) {\n      priceAsNumber = parseFloat(variant.price?.amount ?? '0');\n    } else {\n      priceAsNumber = parseFloat(\n        product?.priceRange?.[variantPriceProperty]?.amount ?? '0',\n      );\n    }\n\n    const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');\n\n    if (priceAsNumber >= compareAtPriceAsNumber) {\n      return null;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.price;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport interface ProductPricePropsForDocs<\n  AsType extends React.ElementType = 'div',\n>\n  extends\n    Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n    ProductPriceProps {}\n"],"names":["variant"],"mappings":";;;AAyBO,SAAS,aAGd,OAEoB;;AACpB,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,IACD;AAEJ,MAAI,WAAW,MAAM;AACnB,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,MAAI;AACJ,MAAI;AAEJ,QAAM,UAAU,YACX,mBAAkB,mCAAS,aAAY,CAAA,CAAE,EAAE;AAAA,IAC1C,CAACA,cAAYA,qCAAS,QAAO;AAAA,EAAA,KAC1B,OACL;AAEJ,QAAM,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,MAAI,cAAc,aAAa;AAC7B,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAAA,IAClB,OAAO;AACL,eAAQ,wCAAS,wBAAT,mBAA+B;AAAA,IACzC;AAEA,QAAI;AACJ,QAAI,aAAa,SAAS;AACxB,sBAAgB,aAAW,aAAQ,UAAR,mBAAe,WAAU,GAAG;AAAA,IACzD,OAAO;AACL,sBAAgB;AAAA,UACd,8CAAS,eAAT,mBAAsB,0BAAtB,mBAA6C,WAAU;AAAA,MAAA;AAAA,IAE3D;AAEA,UAAM,yBAAyB,YAAW,+BAAO,WAAU,GAAG;AAE9D,QAAI,iBAAiB,wBAAwB;AAC3C,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,aAAa,SAAS;AACxB,cAAQ,QAAQ;AAChB,UAAI,cAAc,QAAQ;AACxB,gBAAQ,QAAQ;AAChB,sBAAc,QAAQ;AAAA,MACxB;AAAA,IACF,WAAW,cAAc,OAAO;AAC9B,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAC9B,OAAO;AACL,eAAQ,aAAQ,eAAR,mBAAoB;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,aAAa;AACf,+BACG,OAAA,EAAO,GAAG,kBAAkB,MAAM,OAAO,aAA0B;AAAA,EAExE;AAEA,SAAO,oBAAC,OAAA,EAAO,GAAG,kBAAkB,MAAM,OAAO;AACnD;"}
+{"version":3,"file":"ProductPrice.mjs","names":[],"sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps, type MoneyPropsBase} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n * @publicDocs\n */\nexport function ProductPrice<\n  ComponentGeneric extends React.ElementType = 'div',\n>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>,\n): JSX.Element | null {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? (flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId,\n      ) ?? null)\n    : null;\n\n  const variantPriceProperty =\n    valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      price = variant.compareAtPrice;\n    } else {\n      price = product?.compareAtPriceRange?.[variantPriceProperty];\n    }\n\n    let priceAsNumber: number;\n    if (variantId && variant) {\n      priceAsNumber = parseFloat(variant.price?.amount ?? '0');\n    } else {\n      priceAsNumber = parseFloat(\n        product?.priceRange?.[variantPriceProperty]?.amount ?? '0',\n      );\n    }\n\n    const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');\n\n    if (priceAsNumber >= compareAtPriceAsNumber) {\n      return null;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.price;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport interface ProductPricePropsForDocs<\n  AsType extends React.ElementType = 'div',\n>\n  extends\n    Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,\n    ProductPriceProps {}\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,aAGd,OAEoB;CACpB,MAAM,EACJ,YAAY,WACZ,WACA,YAAY,OACZ,MAAM,SACN,GAAG,qBACD;AAEJ,KAAI,WAAW,KACb,OAAM,IAAI,MAAM,wDAAwD;CAG1E,IAAI;CACJ,IAAI;CAEJ,MAAM,UAAU,YACX,kBAAkB,SAAS,YAAY,EAAE,CAAC,CAAC,MACzC,YAAY,SAAS,OAAO,UAC9B,IAAI,OACL;CAEJ,MAAM,uBACJ,cAAc,QAAQ,oBAAoB;AAE5C,KAAI,cAAc,aAAa;AAC7B,MAAI,aAAa,QACf,SAAQ,QAAQ;MAEhB,SAAQ,SAAS,sBAAsB;EAGzC,IAAI;AACJ,MAAI,aAAa,QACf,iBAAgB,WAAW,QAAQ,OAAO,UAAU,IAAI;MAExD,iBAAgB,WACd,SAAS,aAAa,uBAAuB,UAAU,IACxD;EAGH,MAAM,yBAAyB,WAAW,OAAO,UAAU,IAAI;AAE/D,MAAI,iBAAiB,uBACnB,QAAO;YAGL,aAAa,SAAS;AACxB,UAAQ,QAAQ;AAChB,MAAI,cAAc,QAAQ;AACxB,WAAQ,QAAQ;AAChB,iBAAc,QAAQ;;YAEf,cAAc,MACvB,SAAQ,QAAQ,YAAY;KAE5B,SAAQ,QAAQ,YAAY;AAIhC,KAAI,CAAC,MACH,QAAO;AAGT,KAAI,YACF,QACE,oBAAC,OAAD;EAAO,GAAI;EAAkB,MAAM;EAAoB;EAAe,CAAA;AAI1E,QAAO,oBAAC,OAAD;EAAO,GAAI;EAAkB,MAAM;EAAS,CAAA"}

package/dist/node-prod/ProductProvider.js

@@ -1,193 +1,163 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const flattenConnection = require("./flatten-connection.js");
-const ProductOptionsContext = React.createContext(null);
-function ProductProvider({
-  children,
-  data: product,
-  initialVariantId: explicitVariantId
-}) {
-  const variants = React.useMemo(
-    () => flattenConnection.flattenConnection(product.variants ?? {}),
-    [product.variants]
-  );
-  if (!isProductVariantArray(variants)) {
-    throw new Error(
-      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`
-    );
-  }
-  const options = React.useMemo(() => getOptions(variants), [variants]);
-  const [selectedVariant, setSelectedVariant] = React.useState(() => getVariantBasedOnIdProp(explicitVariantId, variants));
-  const [selectedOptions, setSelectedOptions] = React.useState(
-    () => getSelectedOptions(selectedVariant)
-  );
-  React.useEffect(() => {
-    const newSelectedVariant = getVariantBasedOnIdProp(
-      explicitVariantId,
-      variants
-    );
-    setSelectedVariant(newSelectedVariant);
-    setSelectedOptions(getSelectedOptions(newSelectedVariant));
-  }, [explicitVariantId, variants]);
-  const setSelectedOption = React.useCallback(
-    (name, value2) => {
-      setSelectedOptions((selectedOptions2) => {
-        const opts = { ...selectedOptions2, [name]: value2 };
-        setSelectedVariant(getSelectedVariant(variants, opts));
-        return opts;
-      });
-    },
-    [setSelectedOptions, variants]
-  );
-  const isOptionInStock = React.useCallback(
-    (option, value2) => {
-      const proposedVariant = getSelectedVariant(variants, {
-        ...selectedOptions,
-        ...{ [option]: value2 }
-      });
-      return (proposedVariant == null ? void 0 : proposedVariant.availableForSale) ?? true;
-    },
-    [selectedOptions, variants]
-  );
-  const sellingPlanGroups = React.useMemo(
-    () => flattenConnection.flattenConnection(product.sellingPlanGroups ?? {}).map(
-      (sellingPlanGroup) => ({
-        ...sellingPlanGroup,
-        sellingPlans: flattenConnection.flattenConnection((sellingPlanGroup == null ? void 0 : sellingPlanGroup.sellingPlans) ?? {})
-      })
-    ),
-    [product.sellingPlanGroups]
-  );
-  const [selectedSellingPlan, setSelectedSellingPlan] = React.useState(void 0);
-  const selectedSellingPlanAllocation = React.useMemo(() => {
-    var _a, _b;
-    if (!selectedVariant || !selectedSellingPlan) {
-      return;
-    }
-    if (!((_a = selectedVariant.sellingPlanAllocations) == null ? void 0 : _a.nodes) && !((_b = selectedVariant.sellingPlanAllocations) == null ? void 0 : _b.edges)) {
-      throw new Error(
-        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`
-      );
-    }
-    return flattenConnection.flattenConnection(selectedVariant.sellingPlanAllocations).find(
-      (allocation) => {
-        var _a2;
-        return ((_a2 = allocation == null ? void 0 : allocation.sellingPlan) == null ? void 0 : _a2.id) === selectedSellingPlan.id;
-      }
-    );
-  }, [selectedVariant, selectedSellingPlan]);
-  const value = React.useMemo(
-    () => ({
-      product,
-      variants,
-      variantsConnection: product.variants,
-      options,
-      selectedVariant,
-      setSelectedVariant,
-      selectedOptions,
-      setSelectedOption,
-      setSelectedOptions,
-      isOptionInStock,
-      selectedSellingPlan,
-      setSelectedSellingPlan,
-      selectedSellingPlanAllocation,
-      sellingPlanGroups,
-      sellingPlanGroupsConnection: product.sellingPlanGroups
-    }),
-    [
-      product,
-      isOptionInStock,
-      options,
-      selectedOptions,
-      selectedSellingPlan,
-      selectedSellingPlanAllocation,
-      selectedVariant,
-      sellingPlanGroups,
-      setSelectedOption,
-      variants
-    ]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(ProductOptionsContext.Provider, { value, children });
+require("./_virtual/_rolldown/runtime.js");
+const require_flatten_connection = require("./flatten-connection.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ProductProvider.tsx
+var ProductOptionsContext = (0, react.createContext)(null);
+/**
+* `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.
+*
+* It helps manage selected options and variants for a product.
+* @publicDocs
+*/
+function ProductProvider({ children, data: product, initialVariantId: explicitVariantId }) {
+	const variants = (0, react.useMemo)(() => require_flatten_connection.flattenConnection(product.variants ?? {}), [product.variants]);
+	if (!isProductVariantArray(variants)) throw new Error(`<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`);
+	const options = (0, react.useMemo)(() => getOptions(variants), [variants]);
+	/**
+	* Track the selectedVariant within the provider.
+	*/
+	const [selectedVariant, setSelectedVariant] = (0, react.useState)(() => getVariantBasedOnIdProp(explicitVariantId, variants));
+	/**
+	* Track the selectedOptions within the provider. If a `initialVariantId`
+	* is passed, use that to select initial options.
+	*/
+	const [selectedOptions, setSelectedOptions] = (0, react.useState)(() => getSelectedOptions(selectedVariant));
+	/**
+	* When the initialVariantId changes, we need to make sure we
+	* update the selected variant and selected options. If not,
+	* then the selected variant and options will reference incorrect
+	* values.
+	*/
+	(0, react.useEffect)(() => {
+		const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+		setSelectedVariant(newSelectedVariant);
+		setSelectedOptions(getSelectedOptions(newSelectedVariant));
+	}, [explicitVariantId, variants]);
+	/**
+	* Allow the developer to select an option.
+	*/
+	const setSelectedOption = (0, react.useCallback)((name, value) => {
+		setSelectedOptions((selectedOptions) => {
+			const opts = {
+				...selectedOptions,
+				[name]: value
+			};
+			setSelectedVariant(getSelectedVariant(variants, opts));
+			return opts;
+		});
+	}, [setSelectedOptions, variants]);
+	const isOptionInStock = (0, react.useCallback)((option, value) => {
+		return getSelectedVariant(variants, {
+			...selectedOptions,
+			[option]: value
+		})?.availableForSale ?? true;
+	}, [selectedOptions, variants]);
+	const sellingPlanGroups = (0, react.useMemo)(() => require_flatten_connection.flattenConnection(product.sellingPlanGroups ?? {}).map((sellingPlanGroup) => ({
+		...sellingPlanGroup,
+		sellingPlans: require_flatten_connection.flattenConnection(sellingPlanGroup?.sellingPlans ?? {})
+	})), [product.sellingPlanGroups]);
+	/**
+	* Track the selectedSellingPlan within the hook. If `initialSellingPlanId`
+	* is passed, use that as an initial value. Look it up from the `selectedVariant`, since
+	* that is also a requirement.
+	*/
+	const [selectedSellingPlan, setSelectedSellingPlan] = (0, react.useState)(void 0);
+	const selectedSellingPlanAllocation = (0, react.useMemo)(() => {
+		if (!selectedVariant || !selectedSellingPlan) return;
+		if (!selectedVariant.sellingPlanAllocations?.nodes && !selectedVariant.sellingPlanAllocations?.edges) throw new Error(`<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`);
+		return require_flatten_connection.flattenConnection(selectedVariant.sellingPlanAllocations).find((allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id);
+	}, [selectedVariant, selectedSellingPlan]);
+	const value = (0, react.useMemo)(() => ({
+		product,
+		variants,
+		variantsConnection: product.variants,
+		options,
+		selectedVariant,
+		setSelectedVariant,
+		selectedOptions,
+		setSelectedOption,
+		setSelectedOptions,
+		isOptionInStock,
+		selectedSellingPlan,
+		setSelectedSellingPlan,
+		selectedSellingPlanAllocation,
+		sellingPlanGroups,
+		sellingPlanGroupsConnection: product.sellingPlanGroups
+	}), [
+		product,
+		isOptionInStock,
+		options,
+		selectedOptions,
+		selectedSellingPlan,
+		selectedSellingPlanAllocation,
+		selectedVariant,
+		sellingPlanGroups,
+		setSelectedOption,
+		variants
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductOptionsContext.Provider, {
+		value,
+		children
+	});
 }
+/**
+* Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.
+* @publicDocs
+*/
 function useProduct() {
-  const context = React.useContext(ProductOptionsContext);
-  if (!context) {
-    throw new Error(`'useProduct' must be a child of <ProductProvider />`);
-  }
-  return context;
+	const context = (0, react.useContext)(ProductOptionsContext);
+	if (!context) throw new Error(`'useProduct' must be a child of <ProductProvider />`);
+	return context;
 }
 function getSelectedVariant(variants, choices) {
-  var _a, _b;
-  if (!variants.length || ((_b = (_a = variants == null ? void 0 : variants[0]) == null ? void 0 : _a.selectedOptions) == null ? void 0 : _b.length) !== Object.keys(choices).length) {
-    return;
-  }
-  return variants == null ? void 0 : variants.find((variant) => {
-    return Object.entries(choices).every(([name, value]) => {
-      var _a2;
-      return (_a2 = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a2.some(
-        (option) => (option == null ? void 0 : option.name) === name && (option == null ? void 0 : option.value) === value
-      );
-    });
-  });
+	/**
+	* Ensure the user has selected all the required options, not just some.
+	*/
+	if (!variants.length || variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length) return;
+	return variants?.find((variant) => {
+		return Object.entries(choices).every(([name, value]) => {
+			return variant?.selectedOptions?.some((option) => option?.name === name && option?.value === value);
+		});
+	});
 }
 function getOptions(variants) {
-  const map = variants.reduce(
-    (memo, variant) => {
-      var _a;
-      if (!variant.selectedOptions) {
-        throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
-      }
-      (_a = variant == null ? void 0 : variant.selectedOptions) == null ? void 0 : _a.forEach((opt) => {
-        memo[(opt == null ? void 0 : opt.name) ?? ""] = memo[(opt == null ? void 0 : opt.name) ?? ""] || /* @__PURE__ */ new Set();
-        memo[(opt == null ? void 0 : opt.name) ?? ""].add((opt == null ? void 0 : opt.value) ?? "");
-      });
-      return memo;
-    },
-    {}
-  );
-  return Object.keys(map).map((option) => {
-    return {
-      name: option,
-      values: Array.from(map[option])
-    };
-  });
+	const map = variants.reduce((memo, variant) => {
+		if (!variant.selectedOptions) throw new Error(`'getOptions' requires 'variant.selectedOptions'`);
+		variant?.selectedOptions?.forEach((opt) => {
+			memo[opt?.name ?? ""] = memo[opt?.name ?? ""] || /* @__PURE__ */ new Set();
+			memo[opt?.name ?? ""].add(opt?.value ?? "");
+		});
+		return memo;
+	}, {});
+	return Object.keys(map).map((option) => {
+		return {
+			name: option,
+			values: Array.from(map[option])
+		};
+	});
 }
 function getVariantBasedOnIdProp(explicitVariantId, variants) {
-  if (explicitVariantId) {
-    const foundVariant = variants.find(
-      (variant) => (variant == null ? void 0 : variant.id) === explicitVariantId
-    );
-    if (!foundVariant) {
-      console.warn(
-        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`
-      );
-    }
-    return foundVariant;
-  }
-  if (explicitVariantId === null) {
-    return null;
-  }
-  if (explicitVariantId === void 0) {
-    return variants.find((variant) => variant == null ? void 0 : variant.availableForSale) || variants[0];
-  }
+	if (explicitVariantId) {
+		const foundVariant = variants.find((variant) => variant?.id === explicitVariantId);
+		if (!foundVariant) console.warn(`<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`);
+		return foundVariant;
+	}
+	if (explicitVariantId === null) return null;
+	if (explicitVariantId === void 0) return variants.find((variant) => variant?.availableForSale) || variants[0];
 }
 function getSelectedOptions(selectedVariant) {
-  return (selectedVariant == null ? void 0 : selectedVariant.selectedOptions) ? selectedVariant.selectedOptions.reduce(
-    (memo, optionSet) => {
-      memo[(optionSet == null ? void 0 : optionSet.name) ?? ""] = (optionSet == null ? void 0 : optionSet.value) ?? "";
-      return memo;
-    },
-    {}
-  ) : {};
+	return selectedVariant?.selectedOptions ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
+		memo[optionSet?.name ?? ""] = optionSet?.value ?? "";
+		return memo;
+	}, {}) : {};
 }
 function isProductVariantArray(maybeVariantArray) {
-  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {
-    return false;
-  }
-  return true;
+	if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) return false;
+	return true;
 }
+//#endregion
 exports.ProductProvider = ProductProvider;
 exports.useProduct = useProduct;
-//# sourceMappingURL=ProductProvider.js.map
+
+//# sourceMappingURL=ProductProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProductProvider.js","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n * @publicDocs\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps): JSX.Element {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants],\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`,\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant),\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants,\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants],\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants],\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        }),\n      ),\n    [product.sellingPlanGroups],\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`,\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id,\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      product,\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      product,\n      isOptionInStock,\n      options,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ],\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n * @publicDocs\n */\nexport function useProduct(): ProductHookValue {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions,\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value,\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n): OptionWithValues[] {\n  const map = variants.reduce(\n    (memo, variant) => {\n      if (!variant.selectedOptions) {\n        throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n      }\n      variant?.selectedOptions?.forEach((opt) => {\n        memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n        memo[opt?.name ?? ''].add(opt?.value ?? '');\n      });\n\n      return memo;\n    },\n    {} as Record<string, Set<string>>,\n  );\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >,\n):\n  | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n  | undefined\n  | null {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId,\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`,\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null,\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {},\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined,\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype UseProductObjects = {\n  /** The raw product from the Storefront API */\n  product: Product;\n  /** An array of the variant `nodes` from the `VariantConnection`. */\n  variants: ProductVariantType[];\n  variantsConnection?: ProductVariantConnection;\n  /** An array of the product's options and values. */\n  options: OptionWithValues[];\n  /** The selected variant. */\n  selectedVariant?: ProductVariantType | null;\n  selectedOptions: SelectedOptions;\n  /** The selected selling plan. */\n  selectedSellingPlan?: SellingPlanType;\n  /** The selected selling plan allocation. */\n  selectedSellingPlanAllocation?: SellingPlanAllocationType;\n  /** The selling plan groups. */\n  sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n    sellingPlans: SellingPlanType[];\n  })[];\n  sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n};\n\ntype UseProductFunctions = {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null,\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>,\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => boolean;\n};\n\ntype ProductHookValue = PartialDeep<\n  UseProductObjects,\n  {recurseIntoArrays: true}\n> &\n  UseProductFunctions;\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["createContext","useMemo","flattenConnection","useState","useEffect","useCallback","value","selectedOptions","_a","jsx","useContext"],"mappings":"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"}
+{"version":3,"file":"ProductProvider.js","names":[],"sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n * @publicDocs\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps): JSX.Element {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants],\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`,\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant),\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants,\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants],\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants],\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        }),\n      ),\n    [product.sellingPlanGroups],\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`,\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id,\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      product,\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      product,\n      isOptionInStock,\n      options,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ],\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n * @publicDocs\n */\nexport function useProduct(): ProductHookValue {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions,\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value,\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n): OptionWithValues[] {\n  const map = variants.reduce(\n    (memo, variant) => {\n      if (!variant.selectedOptions) {\n        throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n      }\n      variant?.selectedOptions?.forEach((opt) => {\n        memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n        memo[opt?.name ?? ''].add(opt?.value ?? '');\n      });\n\n      return memo;\n    },\n    {} as Record<string, Set<string>>,\n  );\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >,\n):\n  | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n  | undefined\n  | null {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId,\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`,\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null,\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {},\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined,\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype UseProductObjects = {\n  /** The raw product from the Storefront API */\n  product: Product;\n  /** An array of the variant `nodes` from the `VariantConnection`. */\n  variants: ProductVariantType[];\n  variantsConnection?: ProductVariantConnection;\n  /** An array of the product's options and values. */\n  options: OptionWithValues[];\n  /** The selected variant. */\n  selectedVariant?: ProductVariantType | null;\n  selectedOptions: SelectedOptions;\n  /** The selected selling plan. */\n  selectedSellingPlan?: SellingPlanType;\n  /** The selected selling plan allocation. */\n  selectedSellingPlanAllocation?: SellingPlanAllocationType;\n  /** The selling plan groups. */\n  sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n    sellingPlans: SellingPlanType[];\n  })[];\n  sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n};\n\ntype UseProductFunctions = {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null,\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>,\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value'],\n  ) => boolean;\n};\n\ntype ProductHookValue = PartialDeep<\n  UseProductObjects,\n  {recurseIntoArrays: true}\n> &\n  UseProductFunctions;\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"mappings":";;;;;AAuBA,IAAM,yBAAA,GAAA,MAAA,eAA+D,KAAK;;;;;;;AA0B1E,SAAgB,gBAAgB,EAC9B,UACA,MAAM,SACN,kBAAkB,qBACkB;CAEpC,MAAM,YAAA,GAAA,MAAA,eACE,2BAAA,kBAAkB,QAAQ,YAAY,EAAE,CAAC,EAC/C,CAAC,QAAQ,SAAS,CACnB;AAED,KAAI,CAAC,sBAAsB,SAAS,CAClC,OAAM,IAAI,MACR,mFACD;CAIH,MAAM,WAAA,GAAA,MAAA,eAAwB,WAAW,SAAS,EAAE,CAAC,SAAS,CAAC;;;;CAK/D,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,gBAIhB,wBAAwB,mBAAmB,SAAS,CAAC;;;;;CAM7D,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,gBACtB,mBAAmB,gBAAgB,CACpC;;;;;;;AAQD,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,qBAAqB,wBACzB,mBACA,SACD;AACD,qBAAmB,mBAAmB;AACtC,qBAAmB,mBAAmB,mBAAmB,CAAC;IACzD,CAAC,mBAAmB,SAAS,CAAC;;;;CAKjC,MAAM,qBAAA,GAAA,MAAA,cACH,MAAc,UAAkB;AAC/B,sBAAoB,oBAAoB;GACtC,MAAM,OAAO;IAAC,GAAG;KAAkB,OAAO;IAAM;AAChD,sBAAmB,mBAAmB,UAAU,KAAK,CAAC;AACtD,UAAO;IACP;IAEJ,CAAC,oBAAoB,SAAS,CAC/B;CAED,MAAM,mBAAA,GAAA,MAAA,cACH,QAAgB,UAAkB;AAMjC,SALwB,mBAAmB,UAAU;GACnD,GAAG;IACE,SAAS;GACf,CAAC,EAEsB,oBAAoB;IAE9C,CAAC,iBAAiB,SAAS,CAC5B;CAED,MAAM,qBAAA,GAAA,MAAA,eAEF,2BAAA,kBAAkB,QAAQ,qBAAqB,EAAE,CAAC,CAAC,KAChD,sBAAsB;EACrB,GAAG;EACH,cAAc,2BAAA,kBAAkB,kBAAkB,gBAAgB,EAAE,CAAC;EACtE,EACF,EACH,CAAC,QAAQ,kBAAkB,CAC5B;;;;;;CAOD,MAAM,CAAC,qBAAqB,2BAAA,GAAA,MAAA,UAE1B,KAAA,EAAU;CAEZ,MAAM,iCAAA,GAAA,MAAA,eAEE;AACN,MAAI,CAAC,mBAAmB,CAAC,oBACvB;AAGF,MACE,CAAC,gBAAgB,wBAAwB,SACzC,CAAC,gBAAgB,wBAAwB,MAEzC,OAAM,IAAI,MACR,6KACD;AAGH,SAAO,2BAAA,kBAAkB,gBAAgB,uBAAuB,CAAC,MAC9D,eAAe,YAAY,aAAa,OAAO,oBAAoB,GACrE;IACA,CAAC,iBAAiB,oBAAoB,CAAC;CAE1C,MAAM,SAAA,GAAA,MAAA,gBACG;EACL;EACA;EACA,oBAAoB,QAAQ;EAC5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,6BAA6B,QAAQ;EACtC,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAuC;EACpC;EAC8B,CAAA;;;;;;AAQrC,SAAgB,aAA+B;CAC7C,MAAM,WAAA,GAAA,MAAA,YAAqB,sBAAsB;AAEjD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO;;AAGT,SAAS,mBACP,UACA,SACwE;;;;AAIxE,KACE,CAAC,SAAS,UACV,WAAW,IAAI,iBAAiB,WAAW,OAAO,KAAK,QAAQ,CAAC,OAEhE;AAGF,QAAO,UAAU,MAAM,YAAY;AACjC,SAAO,OAAO,QAAQ,QAAQ,CAAC,OAAO,CAAC,MAAM,WAAW;AACtD,UAAO,SAAS,iBAAiB,MAC9B,WAAW,QAAQ,SAAS,QAAQ,QAAQ,UAAU,MACxD;IACD;GACF;;AAGJ,SAAS,WACP,UACoB;CACpB,MAAM,MAAM,SAAS,QAClB,MAAM,YAAY;AACjB,MAAI,CAAC,QAAQ,gBACX,OAAM,IAAI,MAAM,kDAAkD;AAEpE,WAAS,iBAAiB,SAAS,QAAQ;AACzC,QAAK,KAAK,QAAQ,MAAM,KAAK,KAAK,QAAQ,uBAAO,IAAI,KAAK;AAC1D,QAAK,KAAK,QAAQ,IAAI,IAAI,KAAK,SAAS,GAAG;IAC3C;AAEF,SAAO;IAET,EAAE,CACH;AAED,QAAO,OAAO,KAAK,IAAI,CAAC,KAAK,WAAW;AACtC,SAAO;GACL,MAAM;GACN,QAAQ,MAAM,KAAK,IAAI,QAAQ;GAChC;GACD;;AAGJ,SAAS,wBACP,mBACA,UAMO;AAGP,KAAI,mBAAmB;EACrB,MAAM,eAAe,SAAS,MAC3B,YAAY,SAAS,OAAO,kBAC9B;AACD,MAAI,CAAC,aACH,SAAQ,KACN,4GACD;AAEH,SAAO;;AAGT,KAAI,sBAAsB,KACxB,QAAO;AAIT,KAAI,sBAAsB,KAAA,EACxB,QAAO,SAAS,MAAM,YAAY,SAAS,iBAAiB,IAAI,SAAS;;AAI7E,SAAS,mBACP,iBAIiB;AACjB,QAAO,iBAAiB,kBACpB,gBAAgB,gBAAgB,QAC7B,MAAM,cAAc;AACnB,OAAK,WAAW,QAAQ,MAAM,WAAW,SAAS;AAClD,SAAO;IAET,EAAE,CACH,GACD,EAAE;;AAGR,SAAS,sBACP,mBAME;AACF,KAAI,CAAC,qBAAqB,CAAC,MAAM,QAAQ,kBAAkB,CACzD,QAAO;AAGT,QAAO"}