@sonic-equipment/ui 0.0.104 → 0.0.105

package/dist/index.js

@@ -7831,7 +7831,22 @@ function Select({ isDisabled = false, label, onChange, options, placeholder, sel
 var styles$Q = {"modal-overlay":"modal-module-rVFJc","modal-fade":"modal-module-63Uyl","is-full-screen":"modal-module-uwets","modal":"modal-module-6vlFt","content":"modal-module-FJxzx","modal-slide":"modal-module-jkAe7","modal-delayed-fade":"modal-module-WOZ01","close":"modal-module-7zIZE","modal-zoom":"modal-module-aPJ7X"};
 
 function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside = true, }) {
-    return (jsx(ModalOverlay, { className: clsx(styles$Q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles$Q.modal, {
+    return (jsx(ModalOverlay, { ref: ref => {
+            ref?.addEventListener('click', e => {
+                if ((!e.target || ref.contains(e.target)) &&
+                    ref !== e.target)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+            });
+            ref?.addEventListener('touchend', e => {
+                if ((!e.target || ref.contains(e.target)) &&
+                    ref !== e.target)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+            });
+        }, className: clsx(styles$Q['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles$Q.modal, {
                 [styles$Q['is-full-screen']]: isFullScreen,
             }), children: [hasCloseButton && (jsx("div", { className: styles$Q.close, children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: styles$Q.content, children: children })] }) }));
 }
@@ -8735,19 +8750,35 @@ function ImageLightbox({ images, initialSelectedIndex = 0, variant = 'sm', }) {
     const nextEl = useRef(null);
     const prevEl = useRef(null);
     const mainSwiperRef = useRef(null);
-    const [isZoomed, setIsZoomed] = useState(false);
-    function handleZoom() {
-        setIsZoomed(!isZoomed);
+    const [scrollFromTopPercentage, setScrollFromTopPercentage] = useState(0.5);
+    const { close, isOpen, open } = useDisclosure(false);
+    function handleZoom(e) {
+        const target = e.target;
+        const clientRect = target?.getBoundingClientRect();
+        if (!clientRect)
+            return;
+        const height = clientRect.height;
+        const clientY = e.clientY - clientRect.top;
+        const scrollPercentage = clientY / height;
+        setScrollFromTopPercentage(scrollPercentage);
+        open();
     }
     return (jsxs("div", { className: clsx(styles$q['image-lightbox'], styles$q[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles$q['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("div", { className: styles$q.thumb, children: jsx(Image, { className: styles$q.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles$q['main-swiper'], children: [jsx(Swiper, { initialSlide: initialSelectedIndex, modules: [Thumb, Navigation], navigation: {
                             nextEl: nextEl.current,
                             prevEl: prevEl.current,
-                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("button", { className: styles$q['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] }), jsx(ZoomImage, { currentImage: images[currentIndex], isZoomed: isZoomed, onClose: handleZoom })] }));
+                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles$q.slide, children: jsx("button", { className: styles$q['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles$q.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles$q.pagination, children: jsx(Pagination$1, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles$q['navigation-button'], styles$q['navigation-button-next']), direction: "next" })] }))] }), jsx(ZoomImage, { currentImage: images[currentIndex], isZoomed: isOpen, onClose: close, scrollFromTopPercentage: scrollFromTopPercentage })] }));
 }
-function ZoomImage({ currentImage, isZoomed, onClose, }) {
+function ZoomImage({ currentImage, isZoomed, onClose, scrollFromTopPercentage, }) {
     if (!isZoomed || !currentImage)
         return null;
-    return (jsx(Modal, { className: styles$q['zoomed-overlay'], hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: () => onClose(), children: jsx("div", { className: styles$q['zoomed-container'], onClick: onClose, children: jsx(Image, { className: styles$q['zoomed-image'], image: currentImage, title: currentImage.altText }) }) }));
+    return (jsx(Modal, { className: styles$q['zoomed-overlay'], hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: onClose, children: jsx("div", { ref: element => {
+                setTimeout(() => {
+                    if (!element)
+                        return;
+                    element.scrollTo(0, element.scrollHeight * scrollFromTopPercentage -
+                        element.clientHeight / 2);
+                }, 100);
+            }, className: styles$q['zoomed-container'], onClick: onClose, children: jsx(Image, { className: styles$q['zoomed-image'], image: currentImage, title: currentImage.altText }) }) }));
 }
 
 var styles$p = {"image-lightbox-modal":"product-detail-images-module-N3Ms-"};

package/dist/styles.css

@@ -2874,6 +2874,8 @@
 
 .card-carousel-module-DxKOG.card-carousel-module-8uKSt {
     --slide-width: var(--slide-width-narrow);
+
+    max-height: calc(var(--slide-width) * 1.8177);
   }
 
 .card-carousel-module-DxKOG.card-carousel-module-l-ylK {
@@ -2930,6 +2932,8 @@
 
     .card-carousel-module-DxKOG.card-carousel-module-8uKSt {
       --slide-width: var(--slide-width-narrow);
+
+      max-height: calc(var(--slide-width) * 1.8177);
     }
 
     .card-carousel-module-DxKOG.card-carousel-module-l-ylK {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.104",
+  "version": "0.0.105",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/src/carousel/promo-card-carousel/promo-card-carousel.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-import { CarouselProps } from 'carousel/carousel';
-interface PromoCardCarouselProps {
-    cardWidth?: 'normal' | 'narrow' | 'auto';
-    hasOverflow?: boolean;
-    promoCards: ReactNode[];
-    promosPerView?: CarouselProps['slidesPerView'];
-}
-export declare function PromoCardCarousel({ promoCards }: PromoCardCarouselProps): import("react/jsx-runtime").JSX.Element;
-export {};