@dmsi/wedgekit-react 0.0.1228 → 0.0.1230

package/dist/components/ProductImagePreview/ProductPrimaryImage.js

@@ -1,6 +1,6 @@
 import {
   ProductPrimaryImage
-} from "../../chunk-YCDDBSVU.js";
+} from "../../chunk-65HTZ3R2.js";
 import "../../chunk-ORMEWXMH.js";
 export {
   ProductPrimaryImage

package/dist/components/ProductImagePreview/Thumbnail.cjs

@@ -72,7 +72,8 @@ function Thumbnail({
   alt,
   isActive,
   onClick,
-  isPlaceholder = false
+  isPlaceholder = false,
+  onImageError
 }) {
   const [imageError, setImageError] = (0, import_react2.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -97,6 +98,7 @@ function Thumbnail({
           draggable: false,
           loading: "lazy",
           onError: () => {
+            onImageError == null ? void 0 : onImageError(src);
             setImageError(true);
           }
         }

package/dist/components/ProductImagePreview/Thumbnail.js

@@ -1,6 +1,6 @@
 import {
   Thumbnail
-} from "../../chunk-3X3Y4TMS.js";
+} from "../../chunk-JRNU5BZ4.js";
 import "../../chunk-QVWYTQKL.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/ProductImagePreview/index.cjs

@@ -96,7 +96,8 @@ function Thumbnail({
   alt,
   isActive,
   onClick,
-  isPlaceholder = false
+  isPlaceholder = false,
+  onImageError
 }) {
   const [imageError, setImageError] = (0, import_react2.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -121,6 +122,7 @@ function Thumbnail({
           draggable: false,
           loading: "lazy",
           onError: () => {
+            onImageError == null ? void 0 : onImageError(src);
             setImageError(true);
           }
         }
@@ -579,6 +581,7 @@ function ProductPrimaryImage({
   scrollToZoomEnabled = false,
   className = "",
   isPlaceholder = false,
+  onImageError,
   onZoomPositionChange,
   onScrollZoom
 }) {
@@ -668,12 +671,13 @@ function ProductPrimaryImage({
   }, [scrollToZoomEnabled, zoomEnabled, active, onScrollZoom]);
   const handleImgError = (0, import_react3.useCallback)(
     (e) => {
+      onImageError == null ? void 0 : onImageError(imageSrc);
       if (!placeholderImageUri) return;
       const img = e.currentTarget;
       if (img.src === placeholderImageUri) return;
       img.src = placeholderImageUri;
     },
-    []
+    [imageSrc, onImageError]
   );
   const pt = lastPointRef.current;
   let lensStyle;
@@ -922,6 +926,7 @@ function MobileImageCarousel({
   width = 483,
   height = 483,
   onChangeIndex,
+  onImageError,
   className = ""
 }) {
   const containerRef = (0, import_react5.useRef)(null);
@@ -1076,6 +1081,7 @@ function MobileImageCarousel({
                     className: "w-full h-full object-cover",
                     draggable: false,
                     loading: distance <= 1 ? "eager" : "lazy",
+                    onError: () => onImageError == null ? void 0 : onImageError(image.src),
                     style: {
                       aspectRatio: "1 / 1"
                     }
@@ -1250,12 +1256,13 @@ function useProductImagePreview(props) {
 }
 
 // src/components/ProductImagePreview/index.tsx
+var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var placeholderImageUri2 = "/placeholder.svg";
-var PLACEHOLDER_IMAGES = [
-  { src: "", alt: "placeholder" },
-  { src: "", alt: "placeholder" }
-];
+function hasValidImageSource(src) {
+  const normalizedSrc = src == null ? void 0 : src.trim();
+  return !!normalizedSrc && normalizedSrc !== placeholderImageUri2 && !normalizedSrc.endsWith("/placeholder.svg") && !normalizedSrc.includes("/placeholder.svg?");
+}
 function ProductImagePreview(props) {
   const {
     width = 483,
@@ -1272,6 +1279,26 @@ function ProductImagePreview(props) {
     zoomWindowOffset = 10,
     testid
   } = props;
+  const [failedImageSources, setFailedImageSources] = (0, import_react12.useState)([]);
+  const imageSourceKey = (0, import_react12.useMemo)(
+    () => images.map((image) => image.src).join("|"),
+    [images]
+  );
+  const validImages = (0, import_react12.useMemo)(
+    () => images.filter(
+      (image) => hasValidImageSource(image.src) && failedImageSources.indexOf(image.src) === -1
+    ),
+    [failedImageSources, images]
+  );
+  const handleImageError = (0, import_react12.useCallback)((src) => {
+    if (!src) return;
+    setFailedImageSources(
+      (previousSources) => previousSources.indexOf(src) >= 0 ? previousSources : [...previousSources, src]
+    );
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    setFailedImageSources([]);
+  }, [imageSourceKey]);
   const isMobile = useMatchesMobile();
   const {
     zoomPoint,
@@ -1285,7 +1312,7 @@ function ProductImagePreview(props) {
     handleZoomPositionChange,
     handleScrollZoom
   } = useProductImagePreview({
-    images,
+    images: validImages,
     currentIndex,
     zoomEnabled,
     zoomFactor,
@@ -1294,7 +1321,7 @@ function ProductImagePreview(props) {
     isMobile
   });
   if (typeof isMobile === "undefined") return null;
-  if (isMobile && !images.length)
+  if (isMobile && !validImages.length)
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "img",
       {
@@ -1311,7 +1338,7 @@ function ProductImagePreview(props) {
       }
     );
   const effectiveZoomEnabled = zoomEnabled && !isMobile;
-  const showDesktopThumbnails = images.length !== 1;
+  const showDesktopThumbnails = validImages.length > 1;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     Stack,
     {
@@ -1331,7 +1358,8 @@ function ProductImagePreview(props) {
               scrollToZoomEnabled: scrollToZoomEnabled && !isMobile,
               onZoomPositionChange: handleZoomPositionChange,
               onScrollZoom: handleScrollZoom,
-              isPlaceholder: images.length === 0
+              isPlaceholder: validImages.length === 0,
+              onImageError: handleImageError
             }
           ) }),
           effectiveZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1352,31 +1380,30 @@ function ProductImagePreview(props) {
         isMobile && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           MobileImageCarousel,
           {
-            images,
+            images: validImages,
             currentIndex: safeIndex,
             width,
             height,
-            onChangeIndex: handleSelect
+            onChangeIndex: handleSelect,
+            onImageError: handleImageError
           }
         ),
-        showDesktopThumbnails && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hidden md:block", children: images.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        showDesktopThumbnails && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hidden md:block", children: validImages.length <= 3 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             className: "flex justify-center gap-4",
             style: { width: "100%", maxWidth: width },
             "aria-label": "Product image thumbnails",
-            children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-              (img, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Thumbnail,
-                {
-                  src: img.src,
-                  alt: img.alt || `Thumbnail ${i + 1}`,
-                  isActive: i === safeIndex,
-                  onClick: () => handleSelect(i),
-                  isPlaceholder: images.length === 0
-                }
-              ) }, img.src + i)
-            )
+            children: validImages.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { maxWidth: "115px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Thumbnail,
+              {
+                src: img.src,
+                alt: img.alt || `Thumbnail ${i + 1}`,
+                isActive: i === safeIndex,
+                onClick: () => handleSelect(i),
+                onImageError: handleImageError
+              }
+            ) }, img.src + i))
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Grid,
@@ -1388,25 +1415,23 @@ function ProductImagePreview(props) {
               maxWidth: width
             },
             columns: thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow,
-            children: (images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
-              (img, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Thumbnail,
-                {
-                  src: img.src,
-                  alt: img.alt || `Thumbnail ${i + 1}`,
-                  isActive: i === safeIndex,
-                  onClick: () => handleSelect(i),
-                  isPlaceholder: images.length === 0
-                },
-                img.src + i
-              )
-            )
+            children: validImages.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Thumbnail,
+              {
+                src: img.src,
+                alt: img.alt || `Thumbnail ${i + 1}`,
+                isActive: i === safeIndex,
+                onClick: () => handleSelect(i),
+                onImageError: handleImageError
+              },
+              img.src + i
+            ))
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           CarouselPagination,
           {
-            images,
+            images: validImages,
             currentIndex: safeIndex,
             onSelect: handleSelect
           }

package/dist/components/ProductImagePreview/index.js

@@ -1,10 +1,10 @@
 import {
   ProductImagePreview
-} from "../../chunk-AJGTMNW5.js";
+} from "../../chunk-XW4B4CUY.js";
 import "../../chunk-MBZ55T2D.js";
-import "../../chunk-2IKT6IHB.js";
-import "../../chunk-YCDDBSVU.js";
-import "../../chunk-3X3Y4TMS.js";
+import "../../chunk-S4XW2XZW.js";
+import "../../chunk-65HTZ3R2.js";
+import "../../chunk-JRNU5BZ4.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-QVWYTQKL.js";