@spark-ui/components 12.1.0 → 12.1.2

package/dist/carousel/index.d.ts

@@ -164,6 +164,9 @@ interface CarouselAPI extends AnatomyPropsSetters {
     snapStop: UseCarouselProps['snapStop'];
     scrollBehavior: UseCarouselProps['scrollBehavior'];
     maxDots: number;
+    registerSlide: (element: HTMLElement | null, callback: (isVisible: boolean) => void) => void;
+    unregisterSlide: (element: HTMLElement | null) => void;
+    isSlideVisible: (element: HTMLElement | null) => boolean;
 }
 
 interface Props$4 extends UseCarouselProps, ComponentProps<'div'> {

package/dist/carousel/index.js

@@ -26,28 +26,109 @@ module.exports = __toCommonJS(carousel_exports);
 
 // src/carousel/Carousel.tsx
 var import_class_variance_authority = require("class-variance-authority");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/carousel/useCarousel.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
-// src/carousel/useEvent.ts
+// src/carousel/useCarouselVisibility.ts
 var import_react = require("react");
+function useCarouselVisibility(carouselRef) {
+  const slideVisibilityMap = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const visibilityObserverRef = (0, import_react.useRef)(null);
+  const visibilityCallbacksRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const createObserverCallback = (0, import_react.useCallback)(() => {
+    return (entries) => {
+      entries.forEach((entry) => {
+        const isVisible = entry.isIntersecting;
+        const element = entry.target;
+        slideVisibilityMap.current.set(element, isVisible);
+        const callback = visibilityCallbacksRef.current.get(element);
+        if (callback) {
+          callback(isVisible);
+        }
+      });
+    };
+  }, []);
+  const getOrCreateObserver = (0, import_react.useCallback)(() => {
+    if (visibilityObserverRef.current) {
+      return visibilityObserverRef.current;
+    }
+    const container = carouselRef.current;
+    if (!container) return null;
+    const observer = new IntersectionObserver(createObserverCallback(), {
+      root: container,
+      threshold: 0.2
+    });
+    visibilityObserverRef.current = observer;
+    return observer;
+  }, [carouselRef, createObserverCallback]);
+  (0, import_react.useEffect)(() => {
+    const observer = getOrCreateObserver();
+    const visibilityMap = slideVisibilityMap.current;
+    const callbacksMap = visibilityCallbacksRef.current;
+    return () => {
+      if (observer) {
+        observer.disconnect();
+        visibilityMap.clear();
+        callbacksMap.clear();
+        visibilityObserverRef.current = null;
+      }
+    };
+  }, [getOrCreateObserver]);
+  const registerSlide = (0, import_react.useCallback)(
+    (element, callback) => {
+      if (!element) return;
+      const observer = getOrCreateObserver();
+      if (!observer) {
+        setTimeout(() => registerSlide(element, callback), 0);
+        return;
+      }
+      const initialVisible = slideVisibilityMap.current.get(element) ?? true;
+      slideVisibilityMap.current.set(element, initialVisible);
+      visibilityCallbacksRef.current.set(element, callback);
+      observer.observe(element);
+      callback(initialVisible);
+    },
+    [getOrCreateObserver]
+  );
+  const unregisterSlide = (0, import_react.useCallback)((element) => {
+    if (!element) return;
+    const observer = visibilityObserverRef.current;
+    if (observer) {
+      observer.unobserve(element);
+    }
+    slideVisibilityMap.current.delete(element);
+    visibilityCallbacksRef.current.delete(element);
+  }, []);
+  const isSlideVisible = (0, import_react.useCallback)((element) => {
+    if (!element) return true;
+    return slideVisibilityMap.current.get(element) ?? true;
+  }, []);
+  return {
+    registerSlide,
+    unregisterSlide,
+    isSlideVisible
+  };
+}
+
+// src/carousel/useEvent.ts
+var import_react2 = require("react");
 function useEvent(callback) {
-  const ref = (0, import_react.useRef)(() => {
+  const ref = (0, import_react2.useRef)(() => {
     throw new Error("Cannot call an event handler while rendering.");
   });
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react2.useLayoutEffect)(() => {
     ref.current = callback;
   });
-  return (0, import_react.useCallback)((...args) => ref.current?.(...args), []);
+  return (0, import_react2.useCallback)((...args) => ref.current?.(...args), []);
 }
 
 // src/carousel/useIsMounted.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var useIsMounted = () => {
-  const isMounted = (0, import_react2.useRef)(false);
-  (0, import_react2.useEffect)(() => {
+  const isMounted = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
     isMounted.current = true;
     return () => {
       isMounted.current = false;
@@ -57,11 +138,11 @@ var useIsMounted = () => {
 };
 
 // src/carousel/useScrollEnd.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useScrollEnd(scrollRef, callback) {
-  const scrollLeft = (0, import_react3.useRef)(0);
-  const safariTimeout = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const scrollLeft = (0, import_react4.useRef)(0);
+  const safariTimeout = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     const element = scrollRef.current;
     if (!element) return;
     const supportsScrollend = "onscrollend" in window;
@@ -100,12 +181,12 @@ function useScrollEnd(scrollRef, callback) {
 }
 
 // src/carousel/useSnapPoints.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/carousel/useResizeObserver.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useResizeObserver(ref, callback) {
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element) return;
     const observer = new ResizeObserver((entries) => {
@@ -199,8 +280,8 @@ function useSnapPoints(initialSnapPoints = [], {
   slidesPerMove,
   slidesPerPage
 }) {
-  const [pageSnapPoints, setPageSnapPoints] = (0, import_react5.useState)(initialSnapPoints);
-  const stableSnapPoints = (0, import_react5.useMemo)(() => pageSnapPoints, [pageSnapPoints]);
+  const [pageSnapPoints, setPageSnapPoints] = (0, import_react6.useState)(initialSnapPoints);
+  const stableSnapPoints = (0, import_react6.useMemo)(() => pageSnapPoints, [pageSnapPoints]);
   useResizeObserver(carouselRef, () => {
     const newSnapPoints = getSnapPositions({
       slidesPerMove,
@@ -233,23 +314,24 @@ var useCarousel = ({
   page: controlledPage,
   onPageChange: onPageChangeProp
 }) => {
-  const carouselId = (0, import_react6.useId)();
-  const [pageState, setPageState] = (0, import_react6.useState)(defaultPage || controlledPage || 0);
-  const carouselRef = (0, import_react6.useRef)(null);
-  const pageIndicatorsRefs = (0, import_react6.useRef)([]);
+  const carouselId = (0, import_react7.useId)();
+  const [pageState, setPageState] = (0, import_react7.useState)(defaultPage || controlledPage || 0);
+  const carouselRef = (0, import_react7.useRef)(null);
+  const pageIndicatorsRefs = (0, import_react7.useRef)([]);
   const isMountedRef = useIsMounted();
   const isMounted = isMountedRef.current;
   const onPageChange = useEvent(onPageChangeProp);
+  const { registerSlide, unregisterSlide, isSlideVisible } = useCarouselVisibility(carouselRef);
   const [pageSnapPoints] = useSnapPoints([], {
     carouselRef,
     slidesPerMove,
     slidesPerPage
   });
-  const canScrollPrev = (0, import_react6.useRef)(loop || pageState > 0);
-  const canScrollNext = (0, import_react6.useRef)(loop || pageState < pageSnapPoints.length - 1);
+  const canScrollPrev = (0, import_react7.useRef)(loop || pageState > 0);
+  const canScrollNext = (0, import_react7.useRef)(loop || pageState < pageSnapPoints.length - 1);
   canScrollPrev.current = loop || pageState > 0;
   canScrollNext.current = loop || pageState < pageSnapPoints.length - 1;
-  const handlePageChange = (0, import_react6.useCallback)(
+  const handlePageChange = (0, import_react7.useCallback)(
     (page) => {
       if (page !== pageState) {
         setPageState(page);
@@ -258,7 +340,7 @@ var useCarousel = ({
     },
     [onPageChange, pageState]
   );
-  const scrollTo = (0, import_react6.useCallback)(
+  const scrollTo = (0, import_react7.useCallback)(
     (page, behavior) => {
       if (carouselRef.current) {
         carouselRef.current.scrollTo({
@@ -270,7 +352,7 @@ var useCarousel = ({
     },
     [handlePageChange, pageSnapPoints]
   );
-  const scrollPrev = (0, import_react6.useCallback)(
+  const scrollPrev = (0, import_react7.useCallback)(
     (cb) => {
       if (canScrollPrev) {
         const targetPage = loop && pageState === 0 ? pageSnapPoints.length - 1 : Math.max(pageState - 1, 0);
@@ -280,7 +362,7 @@ var useCarousel = ({
     },
     [loop, pageSnapPoints, pageState, scrollBehavior, scrollTo]
   );
-  const scrollNext = (0, import_react6.useCallback)(
+  const scrollNext = (0, import_react7.useCallback)(
     (cb) => {
       if (canScrollNext) {
         const targetPage = loop && pageState === pageSnapPoints.length - 1 ? 0 : Math.min(pageState + 1, pageSnapPoints.length - 1);
@@ -290,12 +372,12 @@ var useCarousel = ({
     },
     [loop, pageSnapPoints, pageState, scrollBehavior, scrollTo]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (controlledPage != null) {
       scrollTo(controlledPage, scrollBehavior);
     }
   }, [controlledPage, scrollBehavior, scrollTo]);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     if (defaultPage != null && !isMounted && carouselRef.current) {
       const snapPositions = getSnapPositions({
         container: carouselRef.current,
@@ -308,7 +390,7 @@ var useCarousel = ({
       });
     }
   }, [defaultPage, isMounted, slidesPerMove, slidesPerPage]);
-  const syncPageStateWithScrollPosition = (0, import_react6.useCallback)(() => {
+  const syncPageStateWithScrollPosition = (0, import_react7.useCallback)(() => {
     if (!carouselRef.current || pageSnapPoints.length === 0) return;
     const { scrollLeft } = carouselRef.current;
     const distances = pageSnapPoints.map((pagePosition) => Math.abs(scrollLeft - pagePosition));
@@ -340,6 +422,10 @@ var useCarousel = ({
     scrollTo,
     scrollPrev,
     scrollNext,
+    // visibility management
+    registerSlide,
+    unregisterSlide,
+    isSlideVisible,
     // anatomy
     getRootProps: () => ({
       id: `carousel::${carouselId}:`,
@@ -477,7 +563,7 @@ var useCarousel = ({
 
 // src/carousel/Carousel.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var CarouselContext = (0, import_react7.createContext)(null);
+var CarouselContext = (0, import_react8.createContext)(null);
 var Carousel = ({
   className,
   snapType = "mandatory",
@@ -531,7 +617,7 @@ var Carousel = ({
 };
 Carousel.displayName = "Carousel";
 var useCarouselContext = () => {
-  const context = (0, import_react7.useContext)(CarouselContext);
+  const context = (0, import_react8.useContext)(CarouselContext);
   if (!context) {
     throw Error("useCarouselContext must be used within a Carousel provider");
   }
@@ -563,11 +649,11 @@ CarouselControls.displayName = "Carousel.Controls";
 var import_ArrowVerticalRight = require("@spark-ui/icons/ArrowVerticalRight");
 
 // src/icon/Icon.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Slottable = import_radix_ui.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -575,7 +661,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react8.isValidElement)(children) ? (0, import_react8.cloneElement)(
+  return (0, import_react9.isValidElement)(children) ? (0, import_react9.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -653,9 +739,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react9.Children.only(children);
+  const child = import_react10.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    (0, import_react9.cloneElement)(child, {
+    (0, import_react10.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -669,7 +755,7 @@ Icon.displayName = "Icon";
 
 // src/button/Button.tsx
 var import_class_variance_authority6 = require("class-variance-authority");
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
@@ -1474,7 +1560,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react10.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react11.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1597,7 +1683,7 @@ CarouselNextButton.displayName = "Carousel.NextButton";
 
 // src/carousel/CarouselPageIndicator.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CarouselPageIndicator = ({
   children,
@@ -1608,8 +1694,8 @@ var CarouselPageIndicator = ({
   intent = "basic"
 }) => {
   const ctx = useCarouselContext();
-  const ref = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const ref = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (ctx.pageIndicatorsRefs.current) {
       ctx.pageIndicatorsRefs.current[index] = ref.current;
     }
@@ -1695,27 +1781,22 @@ CarouselPrevButton.displayName = "Carousel.PrevButton";
 
 // src/carousel/CarouselSlide.tsx
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/carousel/useIsVisible.ts
-var import_react12 = require("react");
-function useIsVisible(elementRef, parentRef) {
-  const [isVisible, setIsVisible] = (0, import_react12.useState)(true);
-  (0, import_react12.useLayoutEffect)(() => {
+var import_react13 = require("react");
+function useIsVisible(elementRef, _parentRef) {
+  const [isVisible, setIsVisible] = (0, import_react13.useState)(true);
+  const ctx = useCarouselContext();
+  (0, import_react13.useEffect)(() => {
     const el = elementRef.current;
-    const parent = parentRef.current;
-    if (!parent || !el) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry) {
-          setIsVisible(entry.isIntersecting);
-        }
-      },
-      { root: parent, threshold: 0.2 }
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  });
+    if (!el) return;
+    const { registerSlide, unregisterSlide } = ctx;
+    registerSlide(el, setIsVisible);
+    return () => {
+      unregisterSlide(el);
+    };
+  }, [elementRef]);
   return isVisible;
 }
 
@@ -1728,7 +1809,7 @@ var CarouselSlide = ({
   className = "",
   ...props
 }) => {
-  const itemRef = (0, import_react13.useRef)(null);
+  const itemRef = (0, import_react14.useRef)(null);
   const ctx = useCarouselContext();
   const isVisible = useIsVisible(itemRef, ctx.ref);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1749,11 +1830,11 @@ CarouselSlide.displayName = "Carousel.Slide";
 
 // src/carousel/CarouselSlides.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var CarouselSlides = ({ children, className = "" }) => {
   const ctx = useCarouselContext();
-  const childrenElements = import_react14.Children.toArray(children);
+  const childrenElements = import_react15.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
@@ -1765,7 +1846,7 @@ var CarouselSlides = ({ children, className = "" }) => {
         className
       ),
       children: childrenElements.map(
-        (child, index) => (0, import_react14.isValidElement)(child) ? (0, import_react14.cloneElement)(child, {
+        (child, index) => (0, import_react15.isValidElement)(child) ? (0, import_react15.cloneElement)(child, {
           index,
           totalSlides: childrenElements.length
         }) : child