@cntrl-site/components 0.1.24 → 0.1.26

package/dist/index.js

@@ -461,7 +461,7 @@ const ControlSliderComponent = {
   name: "Slider",
   preview: {
     type: "video",
-    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7EQ4ME6CP4KX7TJ4HPAXFEW.mp4"
+    url: "https://cdn.cntrl.site/component-assets/Control-slider-preview.mp4"
   },
   defaultSize: {
     width: 400,
@@ -880,7 +880,7 @@ const ControlSliderComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png",
+              url: "https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",
               name: "Slider-1.png"
             },
             imageCaption: [
@@ -893,7 +893,7 @@ const ControlSliderComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMTZA3RYMXKF0M095D6JD.png",
+              url: "https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",
               name: "Slider-2.png"
             },
             imageCaption: [
@@ -906,7 +906,7 @@ const ControlSliderComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMVSCMPVJBG2WF5KJZYHZ.png",
+              url: "https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",
               name: "Slider-3.png"
             },
             imageCaption: [
@@ -1921,6 +1921,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
   const appearAnimationEndHandlerRef = react.useRef(null);
   const dragStartRef = react.useRef(null);
   const hasDraggedRef = react.useRef(false);
+  const thumbsWrapperRef = react.useRef(null);
+  const [hasThumbsOverflow, setHasThumbsOverflow] = react.useState(false);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
   const itemId = (metadata == null ? void 0 : metadata.itemId) ?? null;
@@ -1941,6 +1943,25 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       window.removeEventListener("ArticleEditor.ComponentContent:change", handleComponentContentChange);
     };
   }, []);
+  react.useEffect(() => {
+    if (!isOpen || !thumbnail.isActive) {
+      setHasThumbsOverflow(false);
+      return;
+    }
+    const ref = thumbsWrapperRef.current;
+    if (!ref) return;
+    const checkOverflow = () => {
+      if (slider.direction === "horiz") {
+        setHasThumbsOverflow(ref.scrollWidth > ref.clientWidth);
+      } else {
+        setHasThumbsOverflow(ref.scrollHeight > ref.clientHeight);
+      }
+    };
+    checkOverflow();
+    const observer = new ResizeObserver(checkOverflow);
+    observer.observe(ref);
+    return () => observer.disconnect();
+  }, [isOpen, thumbnail.isActive, content.length, thumbnailDimensions, slider.direction]);
   const handleClose = react.useCallback(() => {
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
     const colorAlpha = getColorAlpha(area.color);
@@ -1955,7 +1976,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
           animationTargetRef.current.removeEventListener("animationend", animationEndHandlerRef.current);
         }
         animationEndHandlerRef.current = null;
-        onClose();
+        if (isClosingRef.current) {
+          isClosingRef.current = false;
+          onClose();
+        }
         setIsClosing(false);
       }
     };
@@ -2478,6 +2502,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
+                  ref: thumbsWrapperRef,
                   className: classes.thumbsWrapper,
                   onClick: (e) => handleThumbWrapperClick(e),
                   style: {
@@ -2505,7 +2530,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                       }),
                       style: {
                         gap: scalingValue(thumbnail.grid.gap, isEditor),
-                        justifyContent: getJustifyContent()
+                        justifyContent: hasThumbsOverflow ? "flex-start" : getJustifyContent()
                       },
                       children: content.map((item, index) => {
                         const isActive = index === currentIndex;

package/dist/index.mjs

@@ -459,7 +459,7 @@ const ControlSliderComponent = {
   name: "Slider",
   preview: {
     type: "video",
-    url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7EQ4ME6CP4KX7TJ4HPAXFEW.mp4"
+    url: "https://cdn.cntrl.site/component-assets/Control-slider-preview.mp4"
   },
   defaultSize: {
     width: 400,
@@ -878,7 +878,7 @@ const ControlSliderComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png",
+              url: "https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",
               name: "Slider-1.png"
             },
             imageCaption: [
@@ -891,7 +891,7 @@ const ControlSliderComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMTZA3RYMXKF0M095D6JD.png",
+              url: "https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",
               name: "Slider-2.png"
             },
             imageCaption: [
@@ -904,7 +904,7 @@ const ControlSliderComponent = {
           {
             image: {
               objectFit: "cover",
-              url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMVSCMPVJBG2WF5KJZYHZ.png",
+              url: "https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",
               name: "Slider-3.png"
             },
             imageCaption: [
@@ -1919,6 +1919,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
   const appearAnimationEndHandlerRef = useRef(null);
   const dragStartRef = useRef(null);
   const hasDraggedRef = useRef(false);
+  const thumbsWrapperRef = useRef(null);
+  const [hasThumbsOverflow, setHasThumbsOverflow] = useState(false);
   const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
   const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
   const itemId = (metadata == null ? void 0 : metadata.itemId) ?? null;
@@ -1939,6 +1941,25 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
       window.removeEventListener("ArticleEditor.ComponentContent:change", handleComponentContentChange);
     };
   }, []);
+  useEffect(() => {
+    if (!isOpen || !thumbnail.isActive) {
+      setHasThumbsOverflow(false);
+      return;
+    }
+    const ref = thumbsWrapperRef.current;
+    if (!ref) return;
+    const checkOverflow = () => {
+      if (slider.direction === "horiz") {
+        setHasThumbsOverflow(ref.scrollWidth > ref.clientWidth);
+      } else {
+        setHasThumbsOverflow(ref.scrollHeight > ref.clientHeight);
+      }
+    };
+    checkOverflow();
+    const observer = new ResizeObserver(checkOverflow);
+    observer.observe(ref);
+    return () => observer.disconnect();
+  }, [isOpen, thumbnail.isActive, content.length, thumbnailDimensions, slider.direction]);
   const handleClose = useCallback(() => {
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
     const colorAlpha = getColorAlpha(area.color);
@@ -1953,7 +1974,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
           animationTargetRef.current.removeEventListener("animationend", animationEndHandlerRef.current);
         }
         animationEndHandlerRef.current = null;
-        onClose();
+        if (isClosingRef.current) {
+          isClosingRef.current = false;
+          onClose();
+        }
         setIsClosing(false);
       }
     };
@@ -2476,6 +2500,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
               return /* @__PURE__ */ jsx(
                 "div",
                 {
+                  ref: thumbsWrapperRef,
                   className: classes.thumbsWrapper,
                   onClick: (e) => handleThumbWrapperClick(e),
                   style: {
@@ -2503,7 +2528,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
                       }),
                       style: {
                         gap: scalingValue(thumbnail.grid.gap, isEditor),
-                        justifyContent: getJustifyContent()
+                        justifyContent: hasThumbsOverflow ? "flex-start" : getJustifyContent()
                       },
                       children: content.map((item, index) => {
                         const isActive = index === currentIndex;

package/package.json

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