@crystaldesign/widget-library 25.10.0-beta.2 → 25.10.0-beta.20

package/build/esm/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useCallback, useState, useRef, forwardRef } from 'react';
+import { useEffect, useMemo, useCallback, useState, forwardRef, useRef } from 'react';
 import { useDivaCore, getLogger, DivaError, useTranslation } from '@crystaldesign/diva-core';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -805,23 +805,23 @@ function useGallery(_ref) {
     add2DImage: add2DImage,
     add3DImageAsFallback: add3DImageAsFallback
   });
-  useRef(false);
 
   // Update currentMediaIndex when currentProductIndex changes from outside
   useEffect(function () {
     var _medias$currentMediaI;
     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.productId === currentProductId;
       });
-      if (mediaIndex !== -1 && mediaIndex !== currentMediaIndex) {
-        var _swiper$params;
+      if (mediaIndex !== -1 && mediaIndex !== currentMediaIndex && swiper) {
         setCurrentMediaIndex(mediaIndex);
-        if (swiper !== null && swiper !== void 0 && (_swiper$params = swiper.params) !== null && _swiper$params !== void 0 && _swiper$params.loop) {
-          swiper === null || swiper === void 0 || swiper.slideToLoop(mediaIndex, 0);
-        } else {
-          swiper === null || swiper === void 0 || swiper.slideTo(mediaIndex, 0);
+        if (swiper.realIndex !== mediaIndex) {
+          var _swiper$params;
+          if ((_swiper$params = swiper.params) !== null && _swiper$params !== void 0 && _swiper$params.loop) {
+            swiper.slideToLoop(mediaIndex, 0);
+          } else {
+            swiper.slideTo(mediaIndex, 0);
+          }
         }
       }
     }
@@ -849,23 +849,37 @@ function useGallery(_ref) {
     sirvLoaded = _useSirv.sirvLoaded;
   var onSlideChange = function onSlideChange(swiper) {
     if (swiper.el.classList.contains('gallery-main-nested-swiper')) return;
-
-    // Ensure the onSlideChange logic is not executed during the initial setup of the Swiper instance.
+    var newMediaIndex = swiper.realIndex;
+    var media = medias[newMediaIndex];
     if (!swiperIsInitialized) {
       setSwiperIsInitialized(true);
       return;
     }
-    if (swiper.isBeginning) return;
-    var newMediaIndex = swiper.realIndex;
-    var media = medias[newMediaIndex];
-    setCurrentMediaIndex(newMediaIndex);
-    if (setCurrentProductId && media) {
-      setCurrentProductId(media.productId);
+    if (newMediaIndex !== currentMediaIndex) {
+      setCurrentMediaIndex(newMediaIndex);
+      if (setCurrentProductId && (media === null || media === void 0 ? void 0 : media.productId) !== currentProductId) {
+        setCurrentProductId(media.productId);
+      }
+    }
+    onThumbSlideChange(swiper.realIndex);
+  };
+  var onThumbSlideChange = function onThumbSlideChange(clickedIndex) {
+    if (!(thumbsSwiper !== null && thumbsSwiper !== void 0 && thumbsSwiper.slides)) return;
+    if (clickedIndex == null || clickedIndex < 0) return;
+    var visibleSlides = Array.from(thumbsSwiper.slides).filter(function (slide) {
+      return slide.classList.contains('swiper-slide-visible');
+    });
+    if (visibleSlides.length === 0) return;
+    var firstVisibleIndex = visibleSlides[0].swiperSlideIndex;
+    var lastVisibleIndex = visibleSlides[visibleSlides.length - 1].swiperSlideIndex;
+
+    // if the first or last visible slide is clicked, slide to the previous or next slide
+    if (clickedIndex === firstVisibleIndex) {
+      thumbsSwiper.slideTo(Math.max(clickedIndex - 1, 0));
+    } else if (clickedIndex === lastVisibleIndex) {
+      thumbsSwiper.slideTo(Math.min(clickedIndex + 1, thumbsSwiper.slides.length - 1));
     }
   };
-
-  // Get the current product index based on the current media index
-  medias[currentMediaIndex];
   return {
     medias: medias,
     sirvLoaded: sirvLoaded,
@@ -874,7 +888,8 @@ function useGallery(_ref) {
     currentIndex: currentMediaIndex,
     setThumbsSwiper: setThumbsSwiper,
     setSwiper: setSwiper,
-    onSlideChange: onSlideChange
+    onSlideChange: onSlideChange,
+    onThumbSlideChange: onThumbSlideChange
   };
 }
 
@@ -979,7 +994,8 @@ var ArViewer = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var ImageItem = function ImageItem(_ref) {
   var url = _ref.url,
     onClick = _ref.onClick,
-    className = _ref.className;
+    className = _ref.className,
+    sirvProps = _ref.sirvProps;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     loadedMediaUrl = _useState2[0],
@@ -1017,7 +1033,7 @@ var ImageItem = function ImageItem(_ref) {
     }();
     var preloadAndSet = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var success;
+        var success, finalUrl, urlObj;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -1027,7 +1043,18 @@ var ImageItem = function ImageItem(_ref) {
             case 3:
               success = _context2.sent;
               if (success) {
-                setLoadedMediaUrl(url);
+                finalUrl = url;
+                if (sirvProps && url) {
+                  urlObj = new URL(url);
+                  Object.entries(sirvProps).forEach(function (_ref4) {
+                    var _ref5 = _slicedToArray(_ref4, 2),
+                      key = _ref5[0],
+                      value = _ref5[1];
+                    urlObj.searchParams.append(key, value);
+                  });
+                  finalUrl = urlObj.toString();
+                }
+                setLoadedMediaUrl(finalUrl);
                 setHasError(false);
               } else {
                 setHasError(true);
@@ -1146,7 +1173,8 @@ var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsx(ImageItem, {
     url: url,
     onClick: onClick,
-    className: classNames('diva-widget-mediaitem', className)
+    className: classNames('diva-widget-mediaitem', className),
+    sirvProps: config.sirvProps
   });
 });
 
@@ -1297,7 +1325,8 @@ var Gallery = function Gallery(props) {
     onSlideChange = _useGallery.onSlideChange,
     setThumbsSwiper = _useGallery.setThumbsSwiper,
     setSwiper = _useGallery.setSwiper,
-    currentIndex = _useGallery.currentIndex;
+    currentIndex = _useGallery.currentIndex,
+    onThumbSlideChange = _useGallery.onThumbSlideChange;
   useEffect(function () {
     if (props.setCurrentMedia) {
       props.setCurrentMedia(medias[currentIndex]);
@@ -1356,6 +1385,9 @@ var Gallery = function Gallery(props) {
         var _media$url;
         return /*#__PURE__*/jsx(SwiperSlide, {
           id: 'thumb media index ' + i,
+          onClick: function onClick() {
+            return onThumbSlideChange(i);
+          },
           children: /*#__PURE__*/jsx(Thumb, {
             media: media,
             medias: medias

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

@@ -9,5 +9,6 @@ export default function useGallery({ products, config: { functionTypes, add2DIma
     setThumbsSwiper: import("react").Dispatch<import("react").SetStateAction<SwiperClass | null>>;
     setSwiper: import("react").Dispatch<import("react").SetStateAction<SwiperClass | null>>;
     onSlideChange: (swiper: SwiperClass) => void;
+    onThumbSlideChange: (clickedIndex: any) => 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,gBAAgB,EAChB,mBAAmB,GACpB,EAAE,YAAY;;;;;;;;4BAsCkB,WAAW;EAiC3C"}
+{"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;;;;;;;;4BAuCkB,WAAW;uCAoBA,GAAG;EA8B9C"}

package/build/types/widget-library/src/components/MediaItem/ImageItem/index.d.ts

@@ -3,7 +3,10 @@ type Props = {
     url?: string;
     onClick?: () => void;
     className: string;
+    sirvProps?: {
+        [data: string]: string;
+    };
 };
-declare const ImageItem: ({ url, onClick, className }: Props) => React.JSX.Element | null;
+declare const ImageItem: ({ url, onClick, className, sirvProps }: Props) => React.JSX.Element | null;
 export default ImageItem;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/MediaItem/ImageItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,KAAK,KAAK,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE,QAAA,MAAM,SAAS,gCAAiC,KAAK,6BAqDpD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/MediaItem/ImageItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,KAAK,KAAK,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAE/G,QAAA,MAAM,SAAS,2CAA4C,KAAK,6BA6D/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/widget-library",
-  "version": "25.10.0-beta.2",
+  "version": "25.10.0-beta.20",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -36,5 +36,5 @@
     "suiteName": "widget-library",
     "outputDirectory": "./test-reports"
   },
-  "gitHead": "bbec9ff2e39d0422ad1a969f8e1c311f5031d0c9"
+  "gitHead": "b9bd02b889d4b770cf5e95923c79027fea6cff47"
 }