overlapping-cards-scroll 0.1.3 → 0.1.5

package/README.md

@@ -18,15 +18,19 @@ Peer dependencies:
 ## Web Usage
 
 ```tsx
-import 'overlapping-cards-scroll/styles.css'
+import "overlapping-cards-scroll/styles.css";
 import {
   OverlappingCardsScroll,
   OverlappingCardsScrollFocusTrigger,
-} from 'overlapping-cards-scroll'
+} from "overlapping-cards-scroll";
 
 export function Example({ cards }) {
   return (
-    <OverlappingCardsScroll cardHeight={280} showPageDots pageDotsPosition="below">
+    <OverlappingCardsScroll
+      cardHeight={280}
+      showPageDots
+      pageDotsPosition="below"
+    >
       {cards.map((card) => (
         <article key={card.id}>
           <h3>{card.title}</h3>
@@ -36,7 +40,7 @@ export function Example({ cards }) {
         </article>
       ))}
     </OverlappingCardsScroll>
-  )
+  );
 }
 ```
 
@@ -46,7 +50,7 @@ export function Example({ cards }) {
 import {
   OverlappingCardsScrollRN,
   OverlappingCardsScrollRNFocusTrigger,
-} from 'overlapping-cards-scroll/react-native'
+} from "overlapping-cards-scroll/react-native";
 ```
 
 `/react-native` resolves to:
@@ -62,7 +66,7 @@ You can also target explicit builds:
 For web adapter usage, import package styles:
 
 ```tsx
-import 'overlapping-cards-scroll/styles.css'
+import "overlapping-cards-scroll/styles.css";
 ```
 
 ## Props

package/dist/index.cjs

@@ -33,6 +33,7 @@ var PAGE_DOT_POSITIONS = /* @__PURE__ */ new Set(["above", "below", "overlay"]);
 var normalizePageDotsPosition = (value) => PAGE_DOT_POSITIONS.has(value) ? value : "below";
 var TAB_POSITIONS = /* @__PURE__ */ new Set(["above", "below"]);
 var normalizeTabsPosition = (value) => TAB_POSITIONS.has(value) ? value : "above";
+var lastKnownViewportWidth = 1;
 function DefaultTabsContainerComponent({
   children,
   className,
@@ -109,7 +110,17 @@ function OverlappingCardsScrollFocusTrigger({
     }
   };
   const buttonClassName = className ? `ocs-focus-trigger ${className}` : "ocs-focus-trigger";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: buttonClassName, disabled: !canFocus, onClick: handleClick, ...buttonProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      className: buttonClassName,
+      disabled: !canFocus,
+      onClick: handleClick,
+      ...buttonProps,
+      children
+    }
+  );
 }
 var resolveCardWidth = (cardWidth, viewportWidth, fallbackRatio) => {
   if (typeof cardWidth === "number" && Number.isFinite(cardWidth) && cardWidth > 0) {
@@ -188,7 +199,7 @@ function OverlappingCardsScroll(props) {
   const snapTimeoutRef = (0, import_react.useRef)(null);
   const shouldSnapOnMouseMoveRef = (0, import_react.useRef)(false);
   const focusTransitionTimeoutRef = (0, import_react.useRef)(null);
-  const [viewportWidth, setViewportWidth] = (0, import_react.useState)(1);
+  const [viewportWidth, setViewportWidth] = (0, import_react.useState)(lastKnownViewportWidth);
   const [scrollLeft, setScrollLeft] = (0, import_react.useState)(0);
   const [focusTransition, setFocusTransition] = (0, import_react.useState)(null);
   const clearSnapTimeout = (0, import_react.useCallback)(() => {
@@ -208,6 +219,7 @@ function OverlappingCardsScroll(props) {
     setFocusTransition(null);
   }, [clearFocusTransitionTimeout]);
   (0, import_react.useEffect)(() => {
+    var _a;
     const containerElement = containerRef.current;
     const scrollElement = scrollRef.current;
     if (!containerElement || !scrollElement) {
@@ -216,15 +228,22 @@ function OverlappingCardsScroll(props) {
     const syncScroll = () => {
       setScrollLeft(scrollElement.scrollLeft);
     };
+    const applyWidth = (width) => {
+      const w = Math.max(0, width);
+      if (w > 10) {
+        lastKnownViewportWidth = w;
+        setViewportWidth(w);
+      }
+    };
     const resizeObserver = new ResizeObserver((entries) => {
-      var _a, _b;
+      var _a2, _b;
       const entry = entries[0];
-      const width = (_b = (_a = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _a.width) != null ? _b : 1;
-      setViewportWidth(Math.max(1, width));
+      const width = (_b = (_a2 = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _a2.width) != null ? _b : 0;
+      applyWidth(width);
       syncScroll();
     });
     resizeObserver.observe(containerElement);
-    setViewportWidth(Math.max(1, containerElement.getBoundingClientRect().width || 1));
+    applyWidth((_a = containerElement.getBoundingClientRect().width) != null ? _a : 0);
     syncScroll();
     scrollElement.addEventListener("scroll", syncScroll, { passive: true });
     return () => {
@@ -233,7 +252,10 @@ function OverlappingCardsScroll(props) {
     };
   }, []);
   (0, import_react.useEffect)(() => () => clearSnapTimeout(), [clearSnapTimeout]);
-  (0, import_react.useEffect)(() => () => clearFocusTransitionTimeout(), [clearFocusTransitionTimeout]);
+  (0, import_react.useEffect)(
+    () => () => clearFocusTransitionTimeout(),
+    [clearFocusTransitionTimeout]
+  );
   (0, import_react.useEffect)(() => {
     if (snapToCardOnRelease && cardCount > 1) {
       return;
@@ -251,7 +273,10 @@ function OverlappingCardsScroll(props) {
   const layout = (0, import_react.useMemo)(() => {
     const safeWidth = Math.max(1, viewportWidth);
     const safeRatio = clamp(cardWidthRatio, 0.2, 0.95);
-    const width = Math.max(1, resolveCardWidth(cardWidth, safeWidth, safeRatio));
+    const width = Math.max(
+      1,
+      resolveCardWidth(cardWidth, safeWidth, safeRatio)
+    );
     if (cardCount < 2) {
       return {
         cardWidth: width,
@@ -275,7 +300,15 @@ function OverlappingCardsScroll(props) {
       scrollRange,
       trackWidth
     };
-  }, [basePeek, cardCount, cardWidth, cardWidthRatio, maxPeek, minPeek, viewportWidth]);
+  }, [
+    basePeek,
+    cardCount,
+    cardWidth,
+    cardWidthRatio,
+    maxPeek,
+    minPeek,
+    viewportWidth
+  ]);
   (0, import_react.useEffect)(() => {
     const scrollElement = scrollRef.current;
     if (!scrollElement) {
@@ -299,7 +332,11 @@ function OverlappingCardsScroll(props) {
       if (!scrollElement) {
         return;
       }
-      const currentScrollLeft = clamp(scrollElement.scrollLeft, 0, layout.scrollRange);
+      const currentScrollLeft = clamp(
+        scrollElement.scrollLeft,
+        0,
+        layout.scrollRange
+      );
       const nearestIndex = clamp(
         Math.round(currentScrollLeft / layout.stepDistance),
         0,
@@ -341,7 +378,13 @@ function OverlappingCardsScroll(props) {
         snapToNearestCard({ behavior: "smooth" });
       }, safeDelay);
     },
-    [cardCount, clearSnapTimeout, snapReleaseDelay, snapToCardOnRelease, snapToNearestCard]
+    [
+      cardCount,
+      clearSnapTimeout,
+      snapReleaseDelay,
+      snapToCardOnRelease,
+      snapToNearestCard
+    ]
   );
   const markSnapCandidateFromScroll = (0, import_react.useCallback)(() => {
     if (!snapToCardOnRelease || cardCount < 2) {
@@ -378,7 +421,11 @@ function OverlappingCardsScroll(props) {
       shouldSnapOnMouseMoveRef.current = false;
       cancelFocusTransition();
       const safeIndex = clamp(Math.round(targetIndex), 0, cardCount - 1);
-      const nextScrollLeft = clamp(safeIndex * layout.stepDistance, 0, layout.scrollRange);
+      const nextScrollLeft = clamp(
+        safeIndex * layout.stepDistance,
+        0,
+        layout.scrollRange
+      );
       const transitionMode = (_a = options.transitionMode) != null ? _a : "swoop";
       if (transitionMode === "swoop") {
         const duration = Number.isFinite(options.duration) ? Math.max(0, options.duration) : focusTransitionDuration;
@@ -466,7 +513,12 @@ function OverlappingCardsScroll(props) {
       applyScrollDelta(event.deltaX);
       markSnapCandidateFromScroll();
     },
-    [cardCount, cancelFocusTransition, applyScrollDelta, markSnapCandidateFromScroll]
+    [
+      cardCount,
+      cancelFocusTransition,
+      applyScrollDelta,
+      markSnapCandidateFromScroll
+    ]
   );
   const handleTouchStart = (event) => {
     if (cardCount < 2) {
@@ -574,143 +626,172 @@ function OverlappingCardsScroll(props) {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverlappingCardsScrollControllerContext.Provider, { value: controllerContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: containerClassName, "aria-label": ariaLabel, ref: containerRef, children: [
-    resolvedTabsPosition === "above" ? renderTabs("above") : null,
-    showNavigationDots && resolvedPageDotsPosition === "above" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "nav",
-      {
-        className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--above ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--above",
-        style: { marginBottom: toCssDimension(pageDotsOffset) },
-        "aria-label": "Card pages",
-        children: cards.map((_, index) => {
-          const influence = clamp(1 - Math.abs(progress - index), 0, 1);
-          const opacity = 0.25 + influence * 0.75;
-          const scale = 0.9 + influence * 0.22;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "ocs-page-dot",
-              "aria-label": `Go to card ${index + 1}`,
-              "aria-current": influence > 0.98 ? "page" : void 0,
-              onClick: () => focusCard(index, {
-                behavior: pageDotsBehavior,
-                transitionMode: "swoop"
-              }),
-              style: { opacity, transform: `scale(${scale})` }
-            },
-            `ocs-page-dot-above-${index}`
-          );
-        })
-      }
-    ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ocs-stage-frame", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    OverlappingCardsScrollControllerContext.Provider,
+    {
+      value: controllerContextValue,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "section",
         {
-          className: "ocs-stage",
-          ref: stageRef,
-          style: {
-            minHeight: toCssDimension(cardHeight)
-          },
-          onTouchStart: handleTouchStart,
-          onTouchMove: handleTouchMove,
-          onTouchEnd: handleTouchEnd,
-          onTouchCancel: handleTouchEnd,
+          className: containerClassName,
+          "aria-label": ariaLabel,
+          ref: containerRef,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
+            resolvedTabsPosition === "above" ? renderTabs("above") : null,
+            showNavigationDots && resolvedPageDotsPosition === "above" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "nav",
               {
-                className: "ocs-track",
-                children: cards.map((card, index) => {
-                  var _a;
-                  const cardX = resolveCardX(index, activeIndex, transitionProgress, layout);
+                className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--above ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--above",
+                style: { marginBottom: toCssDimension(pageDotsOffset) },
+                "aria-label": "Card pages",
+                children: cards.map((_, index) => {
+                  const influence = clamp(1 - Math.abs(progress - index), 0, 1);
+                  const opacity = 0.25 + influence * 0.75;
+                  const scale = 0.9 + influence * 0.22;
                   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "div",
+                    "button",
                     {
-                      className: cardContainerClassName ? `${focusTransition ? "ocs-card ocs-card--focus-transition" : "ocs-card"} ${cardContainerClassName}` : focusTransition ? "ocs-card ocs-card--focus-transition" : "ocs-card",
-                      style: {
-                        width: `${layout.cardWidth}px`,
-                        transform: `translate3d(${cardX}px, 0, 0)`,
-                        transitionDuration: focusTransition ? `${focusTransition.duration}ms` : void 0,
-                        ...cardContainerStyle
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverlappingCardsScrollCardIndexContext.Provider, { value: index, children: card })
+                      type: "button",
+                      className: "ocs-page-dot",
+                      "aria-label": `Go to card ${index + 1}`,
+                      "aria-current": influence > 0.98 ? "page" : void 0,
+                      onClick: () => focusCard(index, {
+                        behavior: pageDotsBehavior,
+                        transitionMode: "swoop"
+                      }),
+                      style: { opacity, transform: `scale(${scale})` }
                     },
-                    (_a = card.key) != null ? _a : `ocs-card-${index}`
+                    `ocs-page-dot-above-${index}`
                   );
                 })
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ocs-scroll-region", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: "ocs-scroll-spacer",
-                style: {
-                  width: `${layout.trackWidth}px`
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ocs-stage-frame", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "ocs-stage",
+                  ref: stageRef,
+                  style: {
+                    minHeight: toCssDimension(cardHeight)
+                  },
+                  onTouchStart: handleTouchStart,
+                  onTouchMove: handleTouchMove,
+                  onTouchEnd: handleTouchEnd,
+                  onTouchCancel: handleTouchEnd,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ocs-track", children: cards.map((card, index) => {
+                      var _a;
+                      const cardX = resolveCardX(
+                        index,
+                        activeIndex,
+                        transitionProgress,
+                        layout
+                      );
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          className: cardContainerClassName ? `${focusTransition ? "ocs-card ocs-card--focus-transition" : "ocs-card"} ${cardContainerClassName}` : focusTransition ? "ocs-card ocs-card--focus-transition" : "ocs-card",
+                          style: {
+                            width: `${layout.cardWidth}px`,
+                            transform: `translate3d(${cardX}px, 0, 0)`,
+                            transitionDuration: focusTransition ? `${focusTransition.duration}ms` : void 0,
+                            ...cardContainerStyle,
+                            pointerEvents: "none"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                pointerEvents: "auto",
+                                display: "flex"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                OverlappingCardsScrollCardIndexContext.Provider,
+                                {
+                                  value: index,
+                                  children: card
+                                }
+                              )
+                            }
+                          )
+                        },
+                        (_a = card.key) != null ? _a : `ocs-card-${index}`
+                      );
+                    }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ocs-scroll-region", ref: scrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: "ocs-scroll-spacer",
+                        style: {
+                          width: `${layout.trackWidth}px`
+                        }
+                      }
+                    ) })
+                  ]
                 }
+              ),
+              showNavigationDots && resolvedPageDotsPosition === "overlay" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "nav",
+                {
+                  className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--overlay ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--overlay",
+                  style: { bottom: toCssDimension(pageDotsOffset) },
+                  "aria-label": "Card pages",
+                  children: cards.map((_, index) => {
+                    const influence = clamp(1 - Math.abs(progress - index), 0, 1);
+                    const opacity = 0.25 + influence * 0.75;
+                    const scale = 0.9 + influence * 0.22;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "ocs-page-dot",
+                        "aria-label": `Go to card ${index + 1}`,
+                        "aria-current": influence > 0.98 ? "page" : void 0,
+                        onClick: () => focusCard(index, {
+                          behavior: pageDotsBehavior,
+                          transitionMode: "swoop"
+                        }),
+                        style: { opacity, transform: `scale(${scale})` }
+                      },
+                      `ocs-page-dot-overlay-${index}`
+                    );
+                  })
+                }
+              ) : null
+            ] }),
+            showNavigationDots && resolvedPageDotsPosition === "below" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "nav",
+              {
+                className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--below ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--below",
+                style: { marginTop: toCssDimension(pageDotsOffset) },
+                "aria-label": "Card pages",
+                children: cards.map((_, index) => {
+                  const influence = clamp(1 - Math.abs(progress - index), 0, 1);
+                  const opacity = 0.25 + influence * 0.75;
+                  const scale = 0.9 + influence * 0.22;
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ocs-page-dot",
+                      "aria-label": `Go to card ${index + 1}`,
+                      "aria-current": influence > 0.98 ? "page" : void 0,
+                      onClick: () => focusCard(index, {
+                        behavior: pageDotsBehavior,
+                        transitionMode: "swoop"
+                      }),
+                      style: { opacity, transform: `scale(${scale})` }
+                    },
+                    `ocs-page-dot-below-${index}`
+                  );
+                })
               }
-            ) })
+            ) : null,
+            resolvedTabsPosition === "below" ? renderTabs("below") : null
           ]
         }
-      ),
-      showNavigationDots && resolvedPageDotsPosition === "overlay" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "nav",
-        {
-          className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--overlay ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--overlay",
-          style: { bottom: toCssDimension(pageDotsOffset) },
-          "aria-label": "Card pages",
-          children: cards.map((_, index) => {
-            const influence = clamp(1 - Math.abs(progress - index), 0, 1);
-            const opacity = 0.25 + influence * 0.75;
-            const scale = 0.9 + influence * 0.22;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "ocs-page-dot",
-                "aria-label": `Go to card ${index + 1}`,
-                "aria-current": influence > 0.98 ? "page" : void 0,
-                onClick: () => focusCard(index, {
-                  behavior: pageDotsBehavior,
-                  transitionMode: "swoop"
-                }),
-                style: { opacity, transform: `scale(${scale})` }
-              },
-              `ocs-page-dot-overlay-${index}`
-            );
-          })
-        }
-      ) : null
-    ] }),
-    showNavigationDots && resolvedPageDotsPosition === "below" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "nav",
-      {
-        className: pageDotsClassName ? `ocs-page-dots ocs-page-dots--below ${pageDotsClassName}` : "ocs-page-dots ocs-page-dots--below",
-        style: { marginTop: toCssDimension(pageDotsOffset) },
-        "aria-label": "Card pages",
-        children: cards.map((_, index) => {
-          const influence = clamp(1 - Math.abs(progress - index), 0, 1);
-          const opacity = 0.25 + influence * 0.75;
-          const scale = 0.9 + influence * 0.22;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "ocs-page-dot",
-              "aria-label": `Go to card ${index + 1}`,
-              "aria-current": influence > 0.98 ? "page" : void 0,
-              onClick: () => focusCard(index, {
-                behavior: pageDotsBehavior,
-                transitionMode: "swoop"
-              }),
-              style: { opacity, transform: `scale(${scale})` }
-            },
-            `ocs-page-dot-below-${index}`
-          );
-        })
-      }
-    ) : null,
-    resolvedTabsPosition === "below" ? renderTabs("below") : null
-  ] }) });
+      )
+    }
+  );
 }