@crystaldesign/widget-library 25.9.0-rc.9 → 25.10.0-beta.10

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,19 @@ 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);
+      }
     }
   };
-
-  // Get the current product index based on the current media index
-  medias[currentMediaIndex];
   return {
     medias: medias,
     sirvLoaded: sirvLoaded,
@@ -976,6 +972,108 @@ var ArViewer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
+var ImageItem = function ImageItem(_ref) {
+  var url = _ref.url,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    sirvProps = _ref.sirvProps;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    loadedMediaUrl = _useState2[0],
+    setLoadedMediaUrl = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasError = _useState4[0],
+    setHasError = _useState4[1];
+  useEffect(function () {
+    if (!url) return;
+
+    // Don't start loading if we're already loading the same URL
+    if (url === loadedMediaUrl && !hasError) return;
+    var preloadImage = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(imageUrl) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", new Promise(function (resolve) {
+                var img = new Image();
+                img.onload = function () {
+                  resolve(true); // Successfully loaded
+                };
+                img.src = imageUrl;
+              }));
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function preloadImage(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var preloadAndSet = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var success, finalUrl, urlObj;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              setHasError(false);
+              _context2.next = 3;
+              return preloadImage(url);
+            case 3:
+              success = _context2.sent;
+              if (success) {
+                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);
+              }
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function preloadAndSet() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    preloadAndSet();
+  }, [url]);
+
+  // Don't render anything if no URL is provided
+  if (!url) {
+    return null;
+  }
+
+  // Only render the image if we have a loaded URL
+  if (loadedMediaUrl) {
+    return /*#__PURE__*/jsx("img", {
+      className: classNames('diva-widget-mediaitem', className),
+      src: loadedMediaUrl,
+      style: {
+        cursor: onClick ? 'pointer' : 'default'
+      },
+      onClick: onClick
+    });
+  }
+
+  // Fallback: render nothing if we don't have a loaded image
+  return null;
+};
+
 var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _media$url;
   var media = _ref.media,
@@ -983,7 +1081,8 @@ var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     videoAutoplay = _ref.videoAutoplay,
     config = _ref.config,
     isCurrentlyVisible = _ref.isCurrentlyVisible,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    className = _ref.className;
   var useSirv = false;
   var _useDivaCore = useDivaCore(),
     baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
@@ -1052,14 +1151,12 @@ var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       })
     });
   }
-  return /*#__PURE__*/jsx("img", {
-    className: "diva-widget-mediaitem",
-    src: url,
+  return /*#__PURE__*/jsx(ImageItem, {
+    url: url,
     onClick: onClick,
-    style: {
-      cursor: onClick ? 'pointer' : 'default'
-    }
-  }, url);
+    className: classNames('diva-widget-mediaitem', className),
+    sirvProps: config.sirvProps
+  });
 });
 
 var Thumb = function Thumb(_ref) {

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;EA6B3C"}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+type Props = {
+    url?: string;
+    onClick?: () => void;
+    className: string;
+    sirvProps?: {
+        [data: string]: string;
+    };
+};
+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

@@ -0,0 +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,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/build/types/widget-library/src/components/MediaItem/index.d.ts

@@ -9,6 +9,7 @@ type Props = {
     isCurrentlyVisible: boolean;
     videoAutoplay?: boolean;
     onClick?: () => void;
+    className?: string;
 };
 export declare const MediaItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLArViewerElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MediaItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAe,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAiB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,mFA0EpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MediaItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAe,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAiB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIzD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,SAAS,mFA4ErB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/widget-library",
-  "version": "25.9.0-rc.9",
+  "version": "25.10.0-beta.10",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -36,5 +36,5 @@
     "suiteName": "widget-library",
     "outputDirectory": "./test-reports"
   },
-  "gitHead": "9d015c6b69a9315e9914b570bc522e291a1a5bdd"
+  "gitHead": "4e37b1b537663ccc501f024d16a771a526c5cc44"
 }