@crystaldesign/widget-library 25.10.0-beta.9 → 25.11.0-beta.1

package/build/esm/index.js

@@ -810,21 +810,22 @@ function useGallery(_ref) {
   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);
+          }
         }
       }
     }
-  }, [currentProductId]);
+  }, [currentProductId, swiper]);
   var hasSirvMedia = useMemo(function () {
     var _loop = function _loop(i) {
         if (medias.find(function (m) {
@@ -848,22 +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;
     }
-    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,
@@ -872,7 +888,8 @@ function useGallery(_ref) {
     currentIndex: currentMediaIndex,
     setThumbsSwiper: setThumbsSwiper,
     setSwiper: setSwiper,
-    onSlideChange: onSlideChange
+    onSlideChange: onSlideChange,
+    onThumbSlideChange: onThumbSlideChange
   };
 }
 
@@ -1308,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]);
@@ -1367,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/types.d.ts

@@ -11,6 +11,7 @@ export interface GalleryConfig extends BaseElementConfig, MediaItemConfig {
     thumbSliderProp?: SwiperProps;
     arIconProps?: ArActionIconConfig;
     videoAutoplay?: boolean;
+    showOnlyReadyForSlider?: boolean;
 }
 export interface ArActionIconConfig extends BaseElementConfig {
     text?: string | boolean;

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;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;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;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;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;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,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;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;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

@@ -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;;;;;;;;4BAoCkB,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;;;;;;;;4BAuCkB,WAAW;uCAoBA,GAAG;EA8B9C"}

package/package.json

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