@plasmicpkgs/commerce 0.0.38 → 0.0.41

package/dist/commerce.esm.js

@@ -1,9 +1,9 @@
 import registerComponent from '@plasmicapp/host/registerComponent';
 import React, { useContext, useRef, useMemo, createContext, useCallback } from 'react';
+import { useSelector, DataProvider, PlasmicCanvasContext, repeatedElement } from '@plasmicapp/host';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 import { useMutablePlasmicQueryData } from '@plasmicapp/query';
 import Cookies from 'js-cookie';
-import { PlasmicCanvasContext, repeatedElement } from '@plasmicapp/host';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -963,51 +963,54 @@ var defaultProduct = {
   options: []
 };
 
-var ProductContext = /*#__PURE__*/React.createContext(undefined);
+var productSelector = "product";
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
   var methods = useForm();
-  return React.createElement(ProductContext.Provider, {
-    value: product,
+  return React.createElement(DataProvider, {
+    name: productSelector,
+    data: product,
     key: product.id
   }, React.createElement(FormProvider, Object.assign({}, methods), children));
 }
 var useProduct = function useProduct() {
-  var product = useContext(ProductContext);
+  var product = useSelector(productSelector);
   return product != null ? product : defaultProduct;
 };
-var CategoryContext = /*#__PURE__*/React.createContext(undefined);
 var PrimaryCategoryContext = /*#__PURE__*/React.createContext(undefined); //used to render correctly the defaultValueHint in ProductCollection
 
+var categorySelector = "category";
 function CategoryProvider(_ref2) {
   var category = _ref2.category,
       children = _ref2.children;
-  return React.createElement(CategoryContext.Provider, {
-    value: category,
+  return React.createElement(DataProvider, {
+    name: categorySelector,
+    data: category,
     key: category.id
   }, children);
 }
 var useCategoryContext = function useCategoryContext() {
-  return useContext(CategoryContext);
+  return useSelector(categorySelector);
 };
 var usePrimaryCategory = function usePrimaryCategory() {
   return useContext(PrimaryCategoryContext);
 };
-var ProductMediaContext = /*#__PURE__*/React.createContext(undefined);
+var mediaSelector = "currentMedia";
 function ProductMediaProvider(_ref3) {
   var mediaIndex = _ref3.mediaIndex,
       onClick = _ref3.onClick,
       children = _ref3.children;
-  return React.createElement(ProductMediaContext.Provider, {
-    value: mediaIndex,
+  return React.createElement(DataProvider, {
+    name: mediaSelector,
+    data: mediaIndex,
     key: mediaIndex
   }, React.cloneElement(React.isValidElement(children) ? children : React.createElement(React.Fragment, null), {
     onClick: onClick
   }));
 }
 var useProductMediaContext = function useProductMediaContext() {
-  return useContext(ProductMediaContext);
+  return useSelector(mediaSelector);
 };
 
 var _excluded = ["children"];
@@ -1794,7 +1797,7 @@ var categoryMediaMeta = {
   importPath: "@plasmicpkgs/commerce",
   importName: "CategoryMedia"
 };
-function CategoryMedia(props) {
+var CategoryMedia = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _image$url;
 
   var className = props.className,
@@ -1803,12 +1806,13 @@ function CategoryMedia(props) {
   var category = useCategoryContext();
   var image = category != null && category.images ? category.images[mediaIndex] : undefined;
   return React.createElement("img", {
+    ref: ref,
     alt: (category == null ? void 0 : category.name) || "Category Image",
     src: (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "",
     loading: "lazy",
     className: className
   });
-}
+});
 function registerCategoryMedia(loader, customCategoryMediaMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
@@ -2220,7 +2224,7 @@ var productMediaMeta = {
   importPath: "@plasmicpkgs/commerce",
   importName: "ProductMedia"
 };
-function ProductMedia(props) {
+var ProductMedia = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _image$url;
 
   var className = props.className,
@@ -2234,12 +2238,13 @@ function ProductMedia(props) {
   });
   var image = product == null ? void 0 : product.images[mediaContext != null ? mediaContext : mediaIndex];
   return React.createElement("img", {
+    ref: ref,
     alt: (product == null ? void 0 : product.name) || "Product Image",
     src: product ? (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "" : placeholderImage,
     loading: "lazy",
     className: className
   });
-}
+});
 function registerProductMedia(loader, customProductMediaMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);