@cntrl-site/components 0.1.0-alpha.22 → 0.1.0-alpha.23

package/dist/index.js

@@ -1631,6 +1631,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const lightboxRef = React.useRef(null);
   const prevSliderTypeRef = React.useRef(null);
   const imageRef = React.useRef(null);
+  const isClosingRef = React.useRef(false);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const handleBackdropClick = (e) => {
     if (!closeOnBackdropClick) return;
@@ -1705,7 +1706,10 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     };
   }, [isOpen, closeOnEsc, onClose, content.length]);
   React.useEffect(() => {
-    if (isOpen) setCurrentIndex(0);
+    if (isOpen) {
+      setCurrentIndex(0);
+      isClosingRef.current = false;
+    }
   }, [isOpen]);
   React.useEffect(() => {
     if (prevSliderTypeRef.current !== null && prevSliderTypeRef.current !== slider.type) {
@@ -1717,13 +1721,18 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    document.body.style.backgroundColor = area.color;
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    if (isMobile && !isEditor) {
+      document.body.style.backgroundColor = area.color;
+    }
     const preventScroll = (e) => e.preventDefault();
     document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
       document.body.style.overflow = originalOverflow;
       document.removeEventListener("touchmove", preventScroll);
-      document.body.style.backgroundColor = "";
+      if (isMobile && !isEditor) {
+        document.body.style.backgroundColor = "";
+      }
     };
   }, [isOpen]);
   const handleArrowClick = (dir) => {
@@ -1771,12 +1780,18 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   React.useEffect(() => {
     if (!isOpen || !closeOnBackdropClick) return;
     const handleTouchEnd = (e) => {
+      if (isClosingRef.current) {
+        e.stopPropagation();
+        return;
+      }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
         const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
         if (!rect) return;
         const touch = e.changedTouches[0];
         const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
         if (!inside) {
+          e.stopPropagation();
+          isClosingRef.current = true;
           onClose();
         }
       }
@@ -1809,8 +1824,14 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(styles.backdropStyle, { [styles.editor]: isEditor }),
-          style: { ...isEditor && { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)` } },
+          className: cn(styles.backdropStyle, { [styles.editor]: isEditor, [backdropAppearClass]: isEditor }),
+          style: { ...isEditor && {
+            backgroundColor: area.color,
+            backdropFilter: `blur(${area.blur}px)`,
+            animationDuration: `${backdropDurationMs}ms`,
+            animationTimingFunction: "ease",
+            animationFillMode: "both"
+          } },
           onClick: handleBackdropClick,
           onTouchEnd: handleBackdropClick,
           onTouchStart: handleBackdropClick,
@@ -2095,8 +2116,7 @@ const LightboxComponent = {
                   url: {
                     type: "string",
                     display: {
-                      mode: "cover",
-                      type: "settings-image-input"
+                      type: "cover-image-input"
                     }
                   }
                 }

package/dist/index.mjs

@@ -1629,6 +1629,7 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   const lightboxRef = useRef(null);
   const prevSliderTypeRef = useRef(null);
   const imageRef = useRef(null);
+  const isClosingRef = useRef(false);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const handleBackdropClick = (e) => {
     if (!closeOnBackdropClick) return;
@@ -1703,7 +1704,10 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     };
   }, [isOpen, closeOnEsc, onClose, content.length]);
   useEffect(() => {
-    if (isOpen) setCurrentIndex(0);
+    if (isOpen) {
+      setCurrentIndex(0);
+      isClosingRef.current = false;
+    }
   }, [isOpen]);
   useEffect(() => {
     if (prevSliderTypeRef.current !== null && prevSliderTypeRef.current !== slider.type) {
@@ -1715,13 +1719,18 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
     if (!isOpen) return;
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    document.body.style.backgroundColor = area.color;
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    if (isMobile && !isEditor) {
+      document.body.style.backgroundColor = area.color;
+    }
     const preventScroll = (e) => e.preventDefault();
     document.addEventListener("touchmove", preventScroll, { passive: false });
     return () => {
       document.body.style.overflow = originalOverflow;
       document.removeEventListener("touchmove", preventScroll);
-      document.body.style.backgroundColor = "";
+      if (isMobile && !isEditor) {
+        document.body.style.backgroundColor = "";
+      }
     };
   }, [isOpen]);
   const handleArrowClick = (dir) => {
@@ -1769,12 +1778,18 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
   useEffect(() => {
     if (!isOpen || !closeOnBackdropClick) return;
     const handleTouchEnd = (e) => {
+      if (isClosingRef.current) {
+        e.stopPropagation();
+        return;
+      }
       if (e.touches.length === 0 && e.changedTouches.length > 0) {
         const rect = imageRef.current ? getDisplayedImageRect(imageRef.current) : null;
         if (!rect) return;
         const touch = e.changedTouches[0];
         const inside = touch.clientX >= rect.x && touch.clientX <= rect.x + rect.width && touch.clientY >= rect.y && touch.clientY <= rect.y + rect.height;
         if (!inside) {
+          e.stopPropagation();
+          isClosingRef.current = true;
           onClose();
         }
       }
@@ -1807,8 +1822,14 @@ const Lightbox = ({ isOpen, onClose, content, styles: lightboxStyles, settings,
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(styles.backdropStyle, { [styles.editor]: isEditor }),
-          style: { ...isEditor && { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)` } },
+          className: cn(styles.backdropStyle, { [styles.editor]: isEditor, [backdropAppearClass]: isEditor }),
+          style: { ...isEditor && {
+            backgroundColor: area.color,
+            backdropFilter: `blur(${area.blur}px)`,
+            animationDuration: `${backdropDurationMs}ms`,
+            animationTimingFunction: "ease",
+            animationFillMode: "both"
+          } },
           onClick: handleBackdropClick,
           onTouchEnd: handleBackdropClick,
           onTouchStart: handleBackdropClick,
@@ -2093,8 +2114,7 @@ const LightboxComponent = {
                   url: {
                     type: "string",
                     display: {
-                      mode: "cover",
-                      type: "settings-image-input"
+                      type: "cover-image-input"
                     }
                   }
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "0.1.0-alpha.22",
+  "version": "0.1.0-alpha.23",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",