@trafilea/afrodita-components 6.17.0 → 6.17.1

package/build/index.esm.js

@@ -11871,7 +11871,7 @@ var ImagePreviewList = function (_a) {
                             arrowWidth: 0.75,
                             arrowHeight: 1.25,
                             arrowPadding: 1.625,
-                        }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(item, index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(item, index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
+                        }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
 };
 
 var propTypes = {exports: {}};
@@ -13556,33 +13556,31 @@ var ImageProductSlide$1 = function (_a) {
 var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: minmax(6rem, max-content) 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: 100%;\n"], ["\n  display: grid;\n  grid-template-columns: minmax(6rem, max-content) 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: 100%;\n"])));
 var templateObject_1$W;
 
-var getActiveContent = function (preserveOrder, activeIndex, selectedValue, images) {
-    var initialContent = images === null || images === void 0 ? void 0 : images[0];
-    if (preserveOrder && (images === null || images === void 0 ? void 0 : images[activeIndex])) {
-        initialContent = images === null || images === void 0 ? void 0 : images[activeIndex];
+var getInitialIndex = function (images, selectedValue) {
+    if (selectedValue) {
+        var index = images.indexOf(selectedValue);
+        return index > -1 ? index : 0;
     }
-    else if (preserveOrder && !(images === null || images === void 0 ? void 0 : images[activeIndex])) {
-        // Fallback in case image does not exist at the index
-        initialContent = images === null || images === void 0 ? void 0 : images[0];
-    }
-    else if (selectedValue && images.includes(selectedValue)) {
-        initialContent = selectedValue;
-    }
-    return initialContent;
-};
-
+    return 0;
+};
 var ProductGallery = function (_a) {
     var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? true : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e, _f = _a.hasToPreserveOrder, hasToPreserveOrder = _f === void 0 ? false : _f;
-    var _g = useState(0), activeIndex = _g[0], setActiveIndex = _g[1];
-    var _h = useState(selectedValue !== null && selectedValue !== void 0 ? selectedValue : images === null || images === void 0 ? void 0 : images[0]), selectedImage = _h[0], setSelectedImage = _h[1];
-    var initialValue = getActiveContent(hasToPreserveOrder, activeIndex, selectedImage, images);
+    var _g = useState(getInitialIndex(images, selectedValue)), activeIndex = _g[0], setActiveIndex = _g[1];
     useEffect(function () {
-        setSelectedImage(initialValue);
-    }, [initialValue]);
-    var updateActiveContent = function (value, index) {
-        hasToPreserveOrder ? setActiveIndex(index) : setSelectedImage(value);
+        if (selectedValue && !hasToPreserveOrder) {
+            var index = images.indexOf(selectedValue);
+            if (index > -1) {
+                setActiveIndex(index);
+            }
+        }
+    }, [selectedValue, hasToPreserveOrder]);
+    if (images.length === 0)
+        return null;
+    var onContentChange = function (index) {
+        setActiveIndex(index);
     };
-    return (jsxs$1(Container$I, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: updateActiveContent, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
+    var selectedImage = images[activeIndex];
+    return (jsxs$1(Container$I, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
 };
 
 var getStylesBySize$5 = function (size) {