react-motion-gallery 2.0.0 → 2.0.1

package/README.md

@@ -24,7 +24,7 @@ pnpm add react-motion-gallery
 ## Core rule: wrap every item in a div
 
 RMG treats each direct child wrapper as an item.
-That means every image/video must be inside a <div>:
+That means every image/video must be inside a div:
 
 ```tsx
 import * as React from "react";

package/dist/index.js

@@ -5484,7 +5484,7 @@ var Slider = (0, import_react3.forwardRef)(function Slider2({
     };
   }, []);
   const effectiveRippleEnabled = rippleEnabled !== false;
-  const effectiveRippleClass = rippleClassName ?? Slider_default.ripple;
+  const effectiveRippleClass = rippleClassName && rippleClassName.trim().length > 0 ? rippleClassName : Slider_default.ripple;
   const createRipple = (0, import_react3.useCallback)((container) => {
     if (!effectiveRippleEnabled || !container) return;
     const old = container.querySelector("[data-rmg-ripple]");
@@ -5571,11 +5571,9 @@ var Slider = (0, import_react3.forwardRef)(function Slider2({
   function nextPlacement() {
     return AX.main === "y" ? { left: "50%", bottom: 10, transform: "translateX(-50%)" } : { right: 10, top: "50%", transform: "translateY(-50%)" };
   }
-  function makeArrowOnClick(dir, ref2, hidden, disabled) {
+  function makeArrowOnClick(dir, hidden) {
     return () => {
-      const el = ref2.current;
-      if (!el || hidden || disabled) return;
-      createRipple(el);
+      if (hidden) return;
       requestAnimationFrame(() => {
         if (dir === "prev") previous();
         else next();
@@ -5614,7 +5612,11 @@ var Slider = (0, import_react3.forwardRef)(function Slider2({
       {
         ref: ref2,
         className: `rmgArrow rmgArrow--${dir} ${className ?? ""}`,
-        onClick,
+        onClick: (evt) => {
+          if (hidden) return;
+          createRipple(evt.currentTarget);
+          requestAnimationFrame(() => onClick());
+        },
         style: {
           ...baseArrowStyle,
           ...placement,
@@ -5641,7 +5643,7 @@ var Slider = (0, import_react3.forwardRef)(function Slider2({
     ref: prevButtonRef,
     hidden: arrowsHidden,
     disabled: prevDisabled,
-    onClick: makeArrowOnClick("prev", prevButtonRef, arrowsHidden, prevDisabled),
+    onClick: makeArrowOnClick("prev", arrowsHidden),
     createRipple,
     className: prevArrowClassNameEffective
   });
@@ -5649,7 +5651,7 @@ var Slider = (0, import_react3.forwardRef)(function Slider2({
     ref: nextButtonRef,
     hidden: arrowsHidden,
     disabled: nextDisabled,
-    onClick: makeArrowOnClick("next", nextButtonRef, arrowsHidden, nextDisabled),
+    onClick: makeArrowOnClick("next", arrowsHidden),
     createRipple,
     className: nextArrowClassNameEffective
   });
@@ -7473,7 +7475,7 @@ ${showFirstN(c)}
     visibility: isReady ? "visible" : "hidden"
   };
   const effectiveRippleEnabled = rippleEnabled !== false;
-  const effectiveRippleClass = rippleClassName ?? ThumbnailSlider_default.ripple;
+  const effectiveRippleClass = rippleClassName && rippleClassName.trim().length > 0 ? rippleClassName : ThumbnailSlider_default.ripple;
   const createRipple = (0, import_react4.useCallback)((container) => {
     if (!effectiveRippleEnabled || !container) return;
     const old = container.querySelector("[data-rmg-ripple]");
@@ -7529,11 +7531,9 @@ ${showFirstN(c)}
   function nextPlacement() {
     return AX.main === "y" ? { left: "50%", bottom: 10, transform: "translateX(-50%)" } : { right: 10, top: "50%", transform: "translateY(-50%)" };
   }
-  function makeArrowOnClick(dir, ref, hidden, disabled) {
+  function makeArrowOnClick(dir, hidden) {
     return () => {
-      const el = ref.current;
-      if (!el || hidden || disabled) return;
-      createRipple(el);
+      if (hidden) return;
       requestAnimationFrame(() => {
         if (dir === "prev") previous();
         else next();
@@ -7572,7 +7572,11 @@ ${showFirstN(c)}
       {
         ref,
         className: `rmgArrow rmgArrow--${dir} ${className2 ?? ""}`,
-        onClick,
+        onClick: (evt) => {
+          if (hidden) return;
+          createRipple(evt.currentTarget);
+          requestAnimationFrame(() => onClick());
+        },
         style: {
           ...baseArrowStyle,
           ...placement,
@@ -7599,7 +7603,7 @@ ${showFirstN(c)}
     ref: prevButtonRef,
     hidden: arrowsHidden,
     disabled: prevDisabled,
-    onClick: makeArrowOnClick("prev", prevButtonRef, arrowsHidden, prevDisabled),
+    onClick: makeArrowOnClick("prev", arrowsHidden),
     createRipple,
     className: prevArrowClassNameEffective
   });
@@ -7607,7 +7611,7 @@ ${showFirstN(c)}
     ref: nextButtonRef,
     hidden: arrowsHidden,
     disabled: nextDisabled,
-    onClick: makeArrowOnClick("next", nextButtonRef, arrowsHidden, nextDisabled),
+    onClick: makeArrowOnClick("next", arrowsHidden),
     createRipple,
     className: nextArrowClassNameEffective
   });