react-spring-carousel 3.0.0-beta-2.0.99 → 3.0.0-beta-2.0.101

package/dist/index.es.js

@@ -1334,7 +1334,7 @@ function Ve({
                   "data-id": i.id,
                   children: typeof i.renderItem == "function" ? i.renderItem({
                     useListenToCustomEvent: at,
-                    index: l,
+                    index: { index: l, clonedIndex: l % t.length },
                     isClonedItem: !!i.isClonedItem,
                     isActiveItem: Lt
                   }) : i.renderItem

package/dist/index.umd.js

@@ -44,4 +44,4 @@
                     }
                   }
                 `).join(""):""}
-          `)}}),M.jsx("div",{ref:E,className:"ReactSpringCarouselTrack","data-part":"Track","data-part-internal":`${n}-Track`,onScroll:()=>{k.current=!1,L.current=!1},children:It.map((i,l)=>M.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${n}-Item`,"data-id":i.id,children:typeof i.renderItem=="function"?i.renderItem({useListenToCustomEvent:Ie,index:l,isClonedItem:!!i.isClonedItem,isActiveItem:$t}):i.renderItem},`${i.id}-${l}`))})]}),useListenToCustomEvent:Ie,slideToNextItem:()=>se(),slideToPrevItem:()=>ie(),slideToItem:i=>{if(typeof i=="number"){if(!e[i]){console.warn(`The item you're trying to slide doesn't exist. index: ${i}`);return}i>h.current?se(i):ie(i)}if(typeof i=="string"){const l=e.findIndex(_=>_.id===i);if(l<0){console.warn(`The item you're trying to slide doesn't exist. id: ${i}`);return}l>h.current?se(l):ie(l)}}}}function Tt(t){let e=0;const r=getComputedStyle(t).getPropertyValue("gap");return r.includes("px")&&(e=Number(r.replace("px",""))),e}function Se(t){return t.scrollWidth-t.clientWidth}function re(t){const e=t.children[0],r=Tt(t);return e.getBoundingClientRect().width+r}function St({container:t,onReach:e}){const r=m.useRef("start"),n=m.useRef(0),[,s]=J.useSpring(()=>({x:0}));function o(c){s.start({from:{x:t.current.scrollLeft},to:{x:c},onChange({value:f}){t.current&&(t.current.scrollLeft=f.x)}})}function a(c){if(!t.current||c==="next"&&r.current==="end"||c==="prev"&&r.current==="start")return;let f=0;if(c==="next"&&(n.current+=1),c==="prev"&&(n.current-=1),f=n.current*re(t.current),c==="next"){const d=Se(t.current);f>d&&(r.current="end",f=d,e&&e("end"))}c==="prev"&&f<=0&&(r.current="start",n.current=0,f=0,e&&e("start")),o(f)}return m.useEffect(()=>{function c(){var j;const C=re(t.current),P=((j=[...t.current.children].at(0))==null?void 0:j.getBoundingClientRect().width)||0,O=Array(t.current.childElementCount).fill(0).map((v,k)=>({index:k,start:C*k,end:C*(k+1)})),x=t.current.scrollLeft+P,E=O.find(v=>x>=v.start&&x<v.end);n.current=(E==null?void 0:E.index)||0}function f(){s.stop()}function d(C){const P=C.target;P.scrollLeft===0?(n.current=0,r.current="start",e&&e("start")):P.scrollLeft>=Se(P)?(r.current="end",e&&e("end")):r.current!=="idle"&&(r.current="idle",e&&e("idle"))}let u,w=0;function g(){w=t.current.scrollLeft,clearTimeout(u),u=setTimeout(function(){t.current.scrollLeft===w&&c()},200)}if(t.current)return t.current.addEventListener("wheel",f,{passive:!0}),t.current.addEventListener("scroll",d),t.current.addEventListener("scroll",g),()=>{t.current&&(t.current.removeEventListener("scroll",g),t.current.removeEventListener("scroll",d),t.current.removeEventListener("wheel",f))}},[t,e]),m.useEffect(()=>{if(t.current){const c=new ResizeObserver(()=>{o(n.current*re(t.current))});return c.observe(t.current),()=>{c.disconnect()}}},[]),{scrollToNext(){a("next")},scrollToPrev(){a("prev")}}}N.useSpringCarousel=Et,N.useSpringScroll=St,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});
+          `)}}),M.jsx("div",{ref:E,className:"ReactSpringCarouselTrack","data-part":"Track","data-part-internal":`${n}-Track`,onScroll:()=>{k.current=!1,L.current=!1},children:It.map((i,l)=>M.jsx("div",{className:"ReactSpringCarouselItem","data-part":"Item","data-part-internal":`${n}-Item`,"data-id":i.id,children:typeof i.renderItem=="function"?i.renderItem({useListenToCustomEvent:Ie,index:{index:l,clonedIndex:l%e.length},isClonedItem:!!i.isClonedItem,isActiveItem:$t}):i.renderItem},`${i.id}-${l}`))})]}),useListenToCustomEvent:Ie,slideToNextItem:()=>se(),slideToPrevItem:()=>ie(),slideToItem:i=>{if(typeof i=="number"){if(!e[i]){console.warn(`The item you're trying to slide doesn't exist. index: ${i}`);return}i>h.current?se(i):ie(i)}if(typeof i=="string"){const l=e.findIndex(_=>_.id===i);if(l<0){console.warn(`The item you're trying to slide doesn't exist. id: ${i}`);return}l>h.current?se(l):ie(l)}}}}function Tt(t){let e=0;const r=getComputedStyle(t).getPropertyValue("gap");return r.includes("px")&&(e=Number(r.replace("px",""))),e}function Se(t){return t.scrollWidth-t.clientWidth}function re(t){const e=t.children[0],r=Tt(t);return e.getBoundingClientRect().width+r}function St({container:t,onReach:e}){const r=m.useRef("start"),n=m.useRef(0),[,s]=J.useSpring(()=>({x:0}));function o(c){s.start({from:{x:t.current.scrollLeft},to:{x:c},onChange({value:f}){t.current&&(t.current.scrollLeft=f.x)}})}function a(c){if(!t.current||c==="next"&&r.current==="end"||c==="prev"&&r.current==="start")return;let f=0;if(c==="next"&&(n.current+=1),c==="prev"&&(n.current-=1),f=n.current*re(t.current),c==="next"){const d=Se(t.current);f>d&&(r.current="end",f=d,e&&e("end"))}c==="prev"&&f<=0&&(r.current="start",n.current=0,f=0,e&&e("start")),o(f)}return m.useEffect(()=>{function c(){var j;const C=re(t.current),P=((j=[...t.current.children].at(0))==null?void 0:j.getBoundingClientRect().width)||0,O=Array(t.current.childElementCount).fill(0).map((v,k)=>({index:k,start:C*k,end:C*(k+1)})),x=t.current.scrollLeft+P,E=O.find(v=>x>=v.start&&x<v.end);n.current=(E==null?void 0:E.index)||0}function f(){s.stop()}function d(C){const P=C.target;P.scrollLeft===0?(n.current=0,r.current="start",e&&e("start")):P.scrollLeft>=Se(P)?(r.current="end",e&&e("end")):r.current!=="idle"&&(r.current="idle",e&&e("idle"))}let u,w=0;function g(){w=t.current.scrollLeft,clearTimeout(u),u=setTimeout(function(){t.current.scrollLeft===w&&c()},200)}if(t.current)return t.current.addEventListener("wheel",f,{passive:!0}),t.current.addEventListener("scroll",d),t.current.addEventListener("scroll",g),()=>{t.current&&(t.current.removeEventListener("scroll",g),t.current.removeEventListener("scroll",d),t.current.removeEventListener("wheel",f))}},[t,e]),m.useEffect(()=>{if(t.current){const c=new ResizeObserver(()=>{o(n.current*re(t.current))});return c.observe(t.current),()=>{c.disconnect()}}},[]),{scrollToNext(){a("next")},scrollToPrev(){a("prev")}}}N.useSpringCarousel=Et,N.useSpringScroll=St,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});

package/dist/types.d.ts

@@ -20,7 +20,10 @@ export type ResponsiveItemsPerSlideItem = {
 export type Item = {
     id: string;
     renderItem: ReactNode | ((props: {
-        index: number;
+        index: {
+            index: number;
+            clonedIndex: number;
+        };
         isClonedItem: boolean;
         isActiveItem(id: string | number): boolean;
         useListenToCustomEvent(eventHandler: SpringCarouselEventsEventHandler): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spring-carousel",
-  "version": "3.0.0-beta-2.0.99",
+  "version": "3.0.0-beta-2.0.101",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.umd.js",