@cntrl-site/components 0.1.25 → 0.1.26

package/dist/Components/ControlSlider/ControlSlider.d.ts

@@ -5,7 +5,7 @@ type SliderProps = {
     styles: SliderStyles;
     isEditor?: boolean;
 } & CommonComponentProps;
-export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): JSX.Element;
+export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): import("react/jsx-runtime").JSX.Element;
 type SliderItem = {
     image: {
         url: string;

package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts

@@ -36,5 +36,5 @@ type ImageRevealSliderItem = {
     };
     link: string;
 };
-export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): JSX.Element;
+export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Components/Lightbox/Lightbox.d.ts

@@ -7,7 +7,7 @@ type LightboxGalleryProps = {
     activeEvent: 'close' | 'open';
     isEditor?: boolean;
 };
-export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => JSX.Element;
+export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => import("react/jsx-runtime").JSX.Element;
 type LightboxImage = {
     image: {
         url: string;

package/dist/index.js

@@ -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

@@ -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.25",
+  "version": "0.1.26",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",