@mantine-bites/lightbox 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/cjs/Lightbox.cjs

@@ -4,33 +4,37 @@
 var jsxRuntime = require('react/jsx-runtime');
 var carousel = require('@mantine/carousel');
 var core = require('@mantine/core');
-var react = require('react');
-var EnterFullscreen = require('./components/EnterFullscreen.cjs');
-var ExitFullscreen = require('./components/ExitFullscreen.cjs');
-var QuestionMark = require('./components/QuestionMark.cjs');
-var ZoomIn = require('./components/ZoomIn.cjs');
-var ZoomOut = require('./components/ZoomOut.cjs');
-var useZoom = require('./hooks/useZoom.cjs');
+var LightboxSlides = require('./components/LightboxSlides.cjs');
+var LightboxThumbnails = require('./components/LightboxThumbnails.cjs');
+var LightboxToolbar = require('./components/LightboxToolbar.cjs');
+var useLightbox = require('./hooks/useLightbox.cjs');
 var Lightbox_context = require('./Lightbox.context.cjs');
+var Lightbox_defaults = require('./Lightbox.defaults.cjs');
 var Lightbox_module = require('./Lightbox.module.css.cjs');
 var LightboxSlide = require('./LightboxSlide.cjs');
-var fullscreen = require('./utils/fullscreen.cjs');
-var zoom = require('./utils/zoom.cjs');
 
-const defaultProps = {
-  withThumbnails: true,
-  withCounter: true,
-  withFullscreen: true,
-  withZoom: true,
-  carouselOptions: {
-    controlSize: 36
-  }
-};
+const defaultProps = Lightbox_defaults.LIGHTBOX_DEFAULT_PROPS;
+const varsResolver = core.createVarsResolver(
+  (_, { overlayProps }) => ({
+    root: {
+      "--lightbox-z-index": String(
+        overlayProps?.zIndex ?? Lightbox_defaults.LIGHTBOX_DEFAULT_PROPS.overlayProps.zIndex
+      )
+    },
+    overlay: {
+      "--lightbox-z-index": String(
+        overlayProps?.zIndex ?? Lightbox_defaults.LIGHTBOX_DEFAULT_PROPS.overlayProps.zIndex
+      ),
+      "--overlay-z-index": "var(--lightbox-z-index)"
+    }
+  })
+);
 const Lightbox = core.factory((_props, ref) => {
   const props = core.useProps("Lightbox", defaultProps, _props);
   const {
     opened,
     onClose,
+    closeOnClickOutside,
     classNames,
     className,
     style,
@@ -44,13 +48,20 @@ const Lightbox = core.factory((_props, ref) => {
     withZoom,
     counterFormatter,
     carouselOptions,
-    modalOptions,
-    ...others
+    overlayProps,
+    transitionProps,
+    keepMounted,
+    trapFocus,
+    lockScroll,
+    returnFocus,
+    withinPortal,
+    portalProps
   } = props;
   const getStyles = core.useStyles({
     name: "Lightbox",
     classes: Lightbox_module,
     props,
+    varsResolver,
     className,
     style,
     classNames,
@@ -58,258 +69,135 @@ const Lightbox = core.factory((_props, ref) => {
     unstyled,
     vars
   });
-  const emblaRef = react.useRef(null);
-  const [currentIndex, setCurrentIndex] = react.useState(
-    carouselOptions?.initialSlide ?? 0
-  );
-  const [isFullscreen, setIsFullscreen] = react.useState(fullscreen.isBrowserFullscreen);
+  const _carouselOptions = {
+    ...Lightbox_defaults.LIGHTBOX_DEFAULT_PROPS.carouselOptions,
+    ...carouselOptions
+  };
+  const _overlayProps = {
+    ...Lightbox_defaults.LIGHTBOX_DEFAULT_PROPS.overlayProps,
+    ...overlayProps
+  };
+  const _transitionProps = {
+    ...Lightbox_defaults.LIGHTBOX_DEFAULT_PROPS.transitionProps,
+    ...transitionProps
+  };
   const {
+    mergedRef,
+    slides,
+    currentIndex,
+    counterText,
+    isFullscreen,
+    canUseFullscreen,
+    toggleFullscreen,
     isZoomed,
     isDraggingZoom,
     zoomOffset,
     zoomScale,
     canZoomCurrent,
-    isZoomedRef,
     activeZoomContainerRef,
-    resetZoom,
     toggleZoom,
     updateCanZoomAvailability,
     handleZoomPointerDown,
     handleZoomPointerMove,
-    handleZoomPointerEnd
-  } = useZoom.useZoom({ opened });
-  const slides = react.Children.toArray(children).filter(react.isValidElement);
-  const total = slides.length;
-  const canUseFullscreen = fullscreen.canToggleBrowserFullscreen();
-  const counterText = counterFormatter ? counterFormatter(currentIndex, total) : `${currentIndex + 1} / ${total}`;
-  const handleEmblaApi = react.useCallback(
-    (embla) => {
-      emblaRef.current = embla;
-      carouselOptions?.getEmblaApi?.(embla);
-    },
-    [carouselOptions?.getEmblaApi]
-  );
-  const toggleFullscreen = react.useCallback(async () => {
-    if (!canUseFullscreen) {
-      return;
-    }
-    await fullscreen.toggleBrowserFullscreen();
-  }, [canUseFullscreen]);
-  const handleSlideChange = react.useCallback(
-    (index) => {
-      setCurrentIndex(index);
-      resetZoom();
-      requestAnimationFrame(updateCanZoomAvailability);
-      carouselOptions?.onSlideChange?.(index);
-    },
-    [carouselOptions?.onSlideChange, resetZoom, updateCanZoomAvailability]
-  );
-  react.useEffect(() => {
-    if (!opened) {
-      return;
-    }
-    const handleKeyDown = (event) => {
-      if (event.key === "ArrowLeft") {
-        emblaRef.current?.scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        emblaRef.current?.scrollNext();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [opened]);
-  react.useEffect(() => {
-    const handleFullscreenChange = () => {
-      setIsFullscreen(fullscreen.isBrowserFullscreen());
-    };
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
-  }, []);
-  react.useEffect(() => {
-    if (!opened) {
-      setCurrentIndex(carouselOptions?.initialSlide ?? 0);
-      void fullscreen.exitBrowserFullscreenIfActive();
-    }
-  }, [opened, carouselOptions?.initialSlide]);
-  const renderedSlides = slides.map((slide, index) => {
-    const isActive = index === currentIndex;
-    const isActiveAndZoomed = isActive && isZoomed;
-    const typedSlide = slide;
-    const slideProps = typedSlide.props;
-    return react.cloneElement(typedSlide, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        core.Box,
-        {
-          ref: isActive ? activeZoomContainerRef : void 0,
-          ...getStyles("zoomContainer"),
-          "data-active": isActive || void 0,
-          "data-zoomed": isActiveAndZoomed || void 0,
-          "data-can-zoom": isActive ? String(canZoomCurrent) : void 0,
-          "data-dragging": isDraggingZoom && isActiveAndZoomed || void 0,
-          onPointerDown: (event) => handleZoomPointerDown(
-            event,
-            isActive,
-            isActiveAndZoomed,
-            isActive ? canZoomCurrent : false
-          ),
-          onPointerMove: (event) => handleZoomPointerMove(event, isActiveAndZoomed),
-          onPointerUp: handleZoomPointerEnd,
-          onPointerCancel: handleZoomPointerEnd,
-          onLoadCapture: (event) => {
-            if (isActive && event.target instanceof HTMLImageElement) {
-              updateCanZoomAvailability();
-            }
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            core.Box,
-            {
-              ...getStyles("zoomContent"),
-              style: {
-                transform: zoom.getZoomTransform({
-                  isZoomed: isActiveAndZoomed,
-                  offset: zoomOffset,
-                  scale: zoomScale
-                })
-              },
-              children: slideProps.children
-            }
-          )
-        }
-      )
-    });
+    handleZoomPointerEnd,
+    handleEmblaApi,
+    handleSlideChange,
+    handleThumbnailClick,
+    handleOutsideClick,
+    isPlaying,
+    canUseAutoPlay,
+    toggleAutoPlay,
+    mergedCarouselOptions
+  } = useLightbox.useLightbox({
+    ref,
+    opened,
+    onClose,
+    closeOnClickOutside,
+    trapFocus,
+    returnFocus,
+    children,
+    carouselOptions: _carouselOptions,
+    counterFormatter
   });
-  const mergedCarouselOptions = react.useMemo(
-    () => ({
-      ...carouselOptions,
-      emblaOptions: {
-        ...carouselOptions?.emblaOptions,
-        watchDrag: (emblaApi, event) => {
-          if (isZoomedRef.current) {
-            return false;
-          }
-          const configuredWatchDrag = carouselOptions?.emblaOptions?.watchDrag;
-          if (typeof configuredWatchDrag === "function") {
-            return configuredWatchDrag(emblaApi, event);
-          }
-          return configuredWatchDrag ?? true;
-        }
-      }
-    }),
-    [carouselOptions, isZoomedRef]
-  );
-  const handleThumbnailClick = react.useCallback(
-    (index) => {
-      if (isZoomed) {
-        resetZoom();
-      }
-      emblaRef.current?.scrollTo(index);
-    },
-    [isZoomed, resetZoom]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Modal,
+  return /* @__PURE__ */ jsxRuntime.jsx(core.OptionalPortal, { ...portalProps, withinPortal, children: /* @__PURE__ */ jsxRuntime.jsx(
+    core.Transition,
     {
-      centered: true,
-      radius: 0,
-      padding: 0,
-      xOffset: 0,
-      yOffset: 0,
-      ...modalOptions,
-      opened,
-      onClose,
-      fullScreen: true,
-      title: void 0,
-      withCloseButton: false,
-      overlayProps: {
-        backgroundOpacity: 0.95,
-        color: "#18181B",
-        ...modalOptions?.overlayProps
-      },
-      styles: {
-        ...modalOptions?.styles,
-        inner: {
-          ...modalOptions?.styles?.inner,
-          left: 0,
-          right: 0
-        },
-        content: {
-          ...modalOptions?.styles?.content,
-          background: "transparent"
-        }
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Lightbox_context.LightboxProvider, { value: { getStyles }, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { ref, ...getStyles("root"), ...others, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(core.ActionIcon.Group, { ...getStyles("toolbar"), children: [
-          withFullscreen && /* @__PURE__ */ jsxRuntime.jsx(
-            core.ActionIcon,
-            {
-              variant: "default",
-              size: "lg",
-              onClick: toggleFullscreen,
-              "aria-label": `${isFullscreen ? "Exit" : "Enter"} fullscreen`,
-              disabled: !canUseFullscreen,
-              ...getStyles("fullscreenButton"),
-              children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(ExitFullscreen.ExitFullscreen, {}) : /* @__PURE__ */ jsxRuntime.jsx(EnterFullscreen.EnterFullscreen, {})
-            }
-          ),
-          withZoom && /* @__PURE__ */ jsxRuntime.jsx(
-            core.ActionIcon,
-            {
-              variant: "default",
-              size: "lg",
-              onClick: toggleZoom,
-              "aria-label": isZoomed ? "Zoom out" : "Zoom in",
-              disabled: !canZoomCurrent,
-              ...getStyles("zoomButton"),
-              children: isZoomed ? /* @__PURE__ */ jsxRuntime.jsx(ZoomOut.ZoomOut, {}) : /* @__PURE__ */ jsxRuntime.jsx(ZoomIn.ZoomIn, {})
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            core.ActionIcon,
-            {
-              variant: "default",
-              size: "lg",
-              onClick: onClose,
-              "aria-label": "Close lightbox",
-              ...getStyles("closeButton"),
-              children: /* @__PURE__ */ jsxRuntime.jsx(core.CloseIcon, {})
-            }
-          )
-        ] }),
-        withCounter && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", ...getStyles("counter"), children: counterText }),
+      ..._transitionProps,
+      mounted: opened,
+      keepMounted,
+      children: (transitionStyles) => /* @__PURE__ */ jsxRuntime.jsxs(core.RemoveScroll, { enabled: lockScroll, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          carousel.Carousel,
+          core.Overlay,
           {
-            slideGap: 0,
-            includeGapInSize: false,
-            withIndicators: false,
-            slideSize: "100%",
-            height: "100%",
-            ...mergedCarouselOptions,
-            ...getStyles("slides"),
-            withKeyboardEvents: false,
-            onSlideChange: handleSlideChange,
-            getEmblaApi: handleEmblaApi,
-            children: renderedSlides
+            ..._overlayProps,
+            ...getStyles("overlay", {
+              className: _overlayProps.className,
+              style: [transitionStyles, overlayProps?.style]
+            })
           }
         ),
-        withThumbnails && /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("thumbnails"), children: slides.map((slide, i) => {
-          const { thumbnail } = slide.props;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            core.UnstyledButton,
-            {
-              onClick: () => handleThumbnailClick(i),
-              "aria-label": `Go to slide ${i + 1}`,
-              "aria-current": i === currentIndex ? "true" : void 0,
-              "data-active": i === currentIndex || void 0,
-              ...getStyles("thumbnailButton"),
-              children: thumbnail ?? /* @__PURE__ */ jsxRuntime.jsx(core.Box, { ...getStyles("thumbnailPlaceholder"), children: /* @__PURE__ */ jsxRuntime.jsx(QuestionMark.QuestionMark, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Lightbox_context.LightboxProvider,
+          {
+            value: {
+              getStyles,
+              slides,
+              currentIndex,
+              withFullscreen,
+              withZoom,
+              isFullscreen,
+              canUseFullscreen,
+              onToggleFullscreen: toggleFullscreen,
+              onToggleZoom: toggleZoom,
+              isZoomed,
+              isDraggingZoom,
+              canZoomCurrent,
+              zoomOffset,
+              zoomScale,
+              activeZoomContainerRef,
+              updateCanZoomAvailability,
+              handleZoomPointerDown,
+              handleZoomPointerMove,
+              handleZoomPointerEnd,
+              onClose,
+              handleOutsideClick,
+              onThumbnailClick: handleThumbnailClick,
+              canUseAutoPlay,
+              isPlaying,
+              onToggleAutoPlay: toggleAutoPlay
             },
-            slide.key ?? i
-          );
-        }) })
-      ] }) })
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              core.Box,
+              {
+                ref: mergedRef,
+                ...getStyles("root", { style: transitionStyles }),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(LightboxToolbar.LightboxToolbar, {}),
+                  withCounter && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", ...getStyles("counter"), children: counterText }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    carousel.Carousel,
+                    {
+                      includeGapInSize: false,
+                      slideSize: "100%",
+                      height: "100%",
+                      ...mergedCarouselOptions,
+                      ...getStyles("slides"),
+                      withIndicators: false,
+                      withKeyboardEvents: false,
+                      onSlideChange: handleSlideChange,
+                      getEmblaApi: handleEmblaApi,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(LightboxSlides.LightboxSlides, {})
+                    }
+                  ),
+                  withThumbnails && /* @__PURE__ */ jsxRuntime.jsx(LightboxThumbnails.LightboxThumbnails, {})
+                ]
+              }
+            )
+          }
+        )
+      ] })
     }
-  );
+  ) });
 });
 Lightbox.displayName = "Lightbox";
 Lightbox.classes = Lightbox_module;