@crystaldesign/widget-library 25.8.0-beta.12 → 25.8.0-beta.14

package/build/esm/index.js

@@ -417,7 +417,10 @@ function useProductData(_ref) {
     fetchProducts(normalizedProductIds).then(function (variants) {
       LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Successfully loaded ").concat(variants.length, " product variants"));
       setProductVariants(variants);
-      setSelectedProduct(variants[0]);
+      var variantToUse = variants.find(function (v) {
+        return v._id === normalizedProductIds[0];
+      });
+      setSelectedProduct(variantToUse !== null && variantToUse !== void 0 ? variantToUse : variants[0]);
       setLoading(false);
     })["catch"](function (error) {
       LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading products"), {
@@ -434,6 +437,13 @@ function useProductData(_ref) {
       return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
+            if (!((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) === productId)) {
+              _context4.next = 3;
+              break;
+            }
+            LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " already selected, skipping"));
+            return _context4.abrupt("return");
+          case 3:
             LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] setSelectedProductId called with productId: ").concat(productId));
 
             // If a product is selected that is not in the productVariants list,
@@ -442,21 +452,21 @@ function useProductData(_ref) {
               return p._id === productId;
             });
             if (!product) {
-              _context4.next = 7;
+              _context4.next = 10;
               break;
             }
             LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " found in current variants, setting as selected"));
             setSelectedProduct(product);
             notifyProductChanged(product);
             return _context4.abrupt("return");
-          case 7:
+          case 10:
             LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " not found in current variants, fetching variants for it"));
-            _context4.prev = 8;
+            _context4.prev = 11;
             setError(false);
             setLoading(true);
-            _context4.next = 13;
+            _context4.next = 16;
             return fetchProducts([productId]);
-          case 13:
+          case 16:
             _variants2 = _context4.sent;
             setProductVariants(_variants2);
             LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] New ").concat(_variants2.length, " variants to productVariants"));
@@ -464,40 +474,40 @@ function useProductData(_ref) {
               return p._id === productId;
             });
             if (!_product) {
-              _context4.next = 23;
+              _context4.next = 26;
               break;
             }
             LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Setting product ").concat(productId, " as selected after fetching"));
             setSelectedProduct(_product);
             notifyProductChanged(_product);
-            _context4.next = 24;
+            _context4.next = 27;
             break;
-          case 23:
+          case 26:
             throw new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " not found"));
-          case 24:
-            _context4.next = 30;
+          case 27:
+            _context4.next = 33;
             break;
-          case 26:
-            _context4.prev = 26;
-            _context4.t0 = _context4["catch"](8);
+          case 29:
+            _context4.prev = 29;
+            _context4.t0 = _context4["catch"](11);
             LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading product"), {
               cause: _context4.t0
             }));
             setError(true);
-          case 30:
-            _context4.prev = 30;
-            setLoading(false);
-            return _context4.finish(30);
           case 33:
+            _context4.prev = 33;
+            setLoading(false);
+            return _context4.finish(33);
+          case 36:
           case "end":
             return _context4.stop();
         }
-      }, _callee4, null, [[8, 26, 30, 33]]);
+      }, _callee4, null, [[11, 29, 33, 36]]);
     }));
     return function (_x4) {
       return _ref5.apply(this, arguments);
     };
-  }(), [productVariants, fetchProducts, setSelectedProduct, widgetId, widgetType]);
+  }(), [selectedProduct, productVariants, fetchProducts, setSelectedProduct, widgetId, widgetType]);
   function getProductsByDivaNrs(_x5) {
     return _getProductsByDivaNrs.apply(this, arguments);
   }
@@ -515,6 +525,10 @@ function useProductData(_ref) {
                 id: 'divaNr',
                 op: 'in',
                 value: divaNrs.join(',').replaceAll('"', '')
+              }, {
+                id: 'baseProduct',
+                op: 'eq',
+                value: false
               }], 1000, false);
             });
           case 3:
@@ -541,6 +555,10 @@ function useProductData(_ref) {
               id: 'divaNr',
               op: 'eq',
               value: divaNr
+            }, {
+              id: 'baseProduct',
+              op: 'eq',
+              value: false
             }];
             if (variantId) {
               filter.push({
@@ -686,8 +704,8 @@ function useGallery(_ref) {
     functionTypes = _ref$config.functionTypes,
     add2DImage = _ref$config.add2DImage,
     add3DImageAsFallback = _ref$config.add3DImageAsFallback,
-    currentProductIndex = _ref.currentProductIndex,
-    setCurrentProductIndex = _ref.setCurrentProductIndex;
+    currentProductId = _ref.currentProductId,
+    setCurrentProductId = _ref.setCurrentProductId;
   var _useDivaCore = useDivaCore(),
     baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
   var _useState = useState(null),
@@ -708,24 +726,22 @@ function useGallery(_ref) {
     add2DImage: add2DImage,
     add3DImageAsFallback: add3DImageAsFallback
   });
-  var userTriggeredRef = useRef(false);
+  useRef(false);
+
   // Update currentMediaIndex when currentProductIndex changes from outside
   useEffect(function () {
     var _medias$currentMediaI;
-    if (currentProductIndex !== undefined && ((_medias$currentMediaI = medias[currentMediaIndex]) === null || _medias$currentMediaI === void 0 ? void 0 : _medias$currentMediaI.productIndex) !== currentProductIndex) {
+    if (currentProductId !== undefined && ((_medias$currentMediaI = medias[currentMediaIndex]) === null || _medias$currentMediaI === void 0 ? void 0 : _medias$currentMediaI.productId) !== currentProductId) {
       // Find the first media index that corresponds to this product index
       var mediaIndex = medias.findIndex(function (media) {
-        return media.productIndex === currentProductIndex;
+        return media.productId === currentProductId;
       });
       if (mediaIndex !== -1 && mediaIndex !== currentMediaIndex) {
         setCurrentMediaIndex(mediaIndex);
-        swiper === null || swiper === void 0 || swiper.slideTo(mediaIndex);
+        swiper === null || swiper === void 0 || swiper.slideTo(mediaIndex, 0, false);
       }
     }
-  }, [currentProductIndex]);
-  var markUserInteraction = function markUserInteraction() {
-    userTriggeredRef.current = true;
-  };
+  }, [currentProductId]);
   var hasSirvMedia = useMemo(function () {
     var _loop = function _loop(i) {
         if (medias.find(function (m) {
@@ -748,35 +764,26 @@ function useGallery(_ref) {
     }),
     sirvLoaded = _useSirv.sirvLoaded;
   var onSlideChange = function onSlideChange(swiper) {
-    if (!userTriggeredRef.current) return;
+    if (swiper.isBeginning) return;
     var newMediaIndex = swiper.realIndex;
-    setCurrentMediaIndex(newMediaIndex);
-
-    // Get the product index corresponding to this media index
     var media = medias[newMediaIndex];
-
-    // Call the external setCurrentProductIndex if provided
-    if (setCurrentProductIndex && media) {
-      setCurrentProductIndex(media.productIndex);
+    setCurrentMediaIndex(newMediaIndex);
+    if (setCurrentProductId && media) {
+      setCurrentProductId(media.productId);
     }
-    userTriggeredRef.current = false;
   };
 
   // Get the current product index based on the current media index
-  var currentMedia = medias[currentMediaIndex];
-  var derivedCurrentProductIndex = currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.productIndex;
+  medias[currentMediaIndex];
   return {
     medias: medias,
     sirvLoaded: sirvLoaded,
     thumbsSwiper: thumbsSwiper,
     swiper: swiper,
     currentIndex: currentMediaIndex,
-    currentProductIndex: currentProductIndex !== null && currentProductIndex !== void 0 ? currentProductIndex : derivedCurrentProductIndex,
-    setCurrentProductIndex: setCurrentProductIndex,
     setThumbsSwiper: setThumbsSwiper,
     setSwiper: setSwiper,
-    onSlideChange: onSlideChange,
-    markUserInteraction: markUserInteraction
+    onSlideChange: onSlideChange
   };
 }
 
@@ -1070,8 +1077,7 @@ var Gallery = function Gallery(props) {
     onSlideChange = _useGallery.onSlideChange,
     setThumbsSwiper = _useGallery.setThumbsSwiper,
     setSwiper = _useGallery.setSwiper,
-    currentIndex = _useGallery.currentIndex,
-    markUserInteraction = _useGallery.markUserInteraction;
+    currentIndex = _useGallery.currentIndex;
   useEffect(function () {
     if (props.setCurrentMedia) {
       props.setCurrentMedia(medias[currentIndex]);
@@ -1090,9 +1096,6 @@ var Gallery = function Gallery(props) {
       htmlArElement: htmlArElement === null || htmlArElement === void 0 ? void 0 : htmlArElement.current
     }), /*#__PURE__*/jsx(Swiper, _objectSpread(_objectSpread({
       onSwiper: setSwiper,
-      onTouchStart: markUserInteraction,
-      onNavigationNext: markUserInteraction,
-      onNavigationPrev: markUserInteraction,
       resizeObserver: false,
       onSlideChange: onSlideChange,
       focusableElements: focusable,
@@ -1108,6 +1111,7 @@ var Gallery = function Gallery(props) {
       children: medias.map(function (media, i) {
         return /*#__PURE__*/jsx(SwiperSlide, {
           id: 'gallery media index ' + i,
+          "data-product-id": props.currentProductId,
           children: /*#__PURE__*/jsx(MediaItem, {
             media: media,
             config: props.config,

package/build/types/widget-library/src/components/Gallery/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,cAAc,SAAS,CAAC;AAKxB,eAAO,MAAM,OAAO,UAAW,YAAY,sBAyD1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,cAAc,SAAS,CAAC;AAKxB,eAAO,MAAM,OAAO,UAAW,YAAY,sBAsD1C,CAAC"}

package/build/types/widget-library/src/components/Gallery/types.d.ts

@@ -19,8 +19,8 @@ export interface ArActionIconConfig extends BaseElementConfig {
 export interface GalleryProps {
     config: GalleryConfig;
     products: ProductData[];
-    currentProductIndex?: number;
-    setCurrentProductIndex?: (index: number) => void;
+    currentProductId?: string;
+    setCurrentProductId?: (id: string) => void;
     disableAnimation?: boolean;
     setCurrentMedia?: (m: MediaWithProductIndex) => void;
 }

package/build/types/widget-library/src/components/Gallery/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;IACvE,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;IACvE,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/build/types/widget-library/src/components/Gallery/useGallery.d.ts

@@ -1,16 +1,13 @@
 import { GalleryProps, MediaWithProductIndex } from './types';
 import { SwiperClass } from 'swiper/react';
-export default function useGallery({ products, config: { functionTypes, add2DImage, add3DImageAsFallback }, currentProductIndex, setCurrentProductIndex, }: GalleryProps): {
+export default function useGallery({ products, config: { functionTypes, add2DImage, add3DImageAsFallback }, currentProductId, setCurrentProductId, }: GalleryProps): {
     medias: MediaWithProductIndex[];
     sirvLoaded: boolean;
     thumbsSwiper: SwiperClass | null;
     swiper: SwiperClass | null;
     currentIndex: number;
-    currentProductIndex: number;
-    setCurrentProductIndex: ((index: number) => void) | undefined;
     setThumbsSwiper: import("react").Dispatch<import("react").SetStateAction<SwiperClass | null>>;
     setSwiper: import("react").Dispatch<import("react").SetStateAction<SwiperClass | null>>;
     onSlideChange: (swiper: SwiperClass) => void;
-    markUserInteraction: () => void;
 };
 //# sourceMappingURL=useGallery.d.ts.map

package/build/types/widget-library/src/components/Gallery/useGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGallery.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/useGallery.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAI9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,MAAM,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,EAC3D,mBAAmB,EACnB,sBAAsB,GACvB,EAAE,YAAY;;;;;;;;;;4BAmCkB,WAAW;;EAgC3C"}
+{"version":3,"file":"useGallery.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/useGallery.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAI9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,MAAM,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,EAC3D,gBAAgB,EAChB,mBAAmB,GACpB,EAAE,YAAY;;;;;;;;4BAiCkB,WAAW;EAyB3C"}

package/build/types/widget-library/src/hooks/useProductData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProductData.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useProductData.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,WAAW,EAA0B,MAAM,0BAA0B,CAAC;AAM1F,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,mBAAmB;;;;oCAqJzC,MAAM,EAAE,KAAG,OAAO,CAAC,GAAG,CAAC;6CAoBd,MAAM,cAAc,MAAM,KAAG,OAAO,CAAC,GAAG,CAAC;;sCA9D3E,MAAM;2BAoFI,MAAM,QAAQ,GAAG;EAiBhD"}
+{"version":3,"file":"useProductData.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useProductData.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,WAAW,EAA0B,MAAM,0BAA0B,CAAC;AAM1F,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,mBAAmB;;;;oCA2JzC,MAAM,EAAE,KAAG,OAAO,CAAC,GAAG,CAAC;6CAyBd,MAAM,cAAc,MAAM,KAAG,OAAO,CAAC,GAAG,CAAC;;sCAxE3E,MAAM;2BAmGI,MAAM,QAAQ,GAAG;EAiBhD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/widget-library",
-  "version": "25.8.0-beta.12",
+  "version": "25.8.0-beta.14",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -36,5 +36,5 @@
     "suiteName": "widget-library",
     "outputDirectory": "./test-reports"
   },
-  "gitHead": "7647e534c46de9e7cf0cee8f77dd08d7a00b58b3"
+  "gitHead": "41f0c4eed82da5949fda291e326827816913d2bc"
 }