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

package/build/esm/index.js

@@ -861,6 +861,24 @@ function useGallery(_ref) {
         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));
+    }
   };
   return {
     medias: medias,
@@ -870,7 +888,8 @@ function useGallery(_ref) {
     currentIndex: currentMediaIndex,
     setThumbsSwiper: setThumbsSwiper,
     setSwiper: setSwiper,
-    onSlideChange: onSlideChange
+    onSlideChange: onSlideChange,
+    onThumbSlideChange: onThumbSlideChange
   };
 }
 
@@ -1306,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]);
@@ -1365,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;;;;;;;;4BAuCkB,WAAW;EA6B3C"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/widget-library",
-  "version": "25.10.0-beta.12",
+  "version": "25.10.0-beta.14",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -36,5 +36,5 @@
     "suiteName": "widget-library",
     "outputDirectory": "./test-reports"
   },
-  "gitHead": "215044c2901b02594941060b27aa1ad99c52a20b"
+  "gitHead": "75cf583f53ed99d4242d919eaa52556a33cbab55"
 }