abaabil.carousel - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/index.esm.min.js

@@ -1,1 +0,1 @@
-"use client";import*as r from"react";import s from"classnames";import m from"abaabil.icon";const K=({items:p,direction:a="hor",autoScrollInterval:v=5e4,infiniteLoop:g=!0,slidesToShow:e=1,showIndicators:N,indicatorClassName:$="",indicatorIcon:x="circle",activeIndicatorIcon:D="playstation-circle",showControls:H,controlClassName:k="",leftIcon:L,rightIcon:W})=>{const X=L||(a==="hor"?"chevron-left":"chevron-up"),j=W||(a==="hor"?"chevron-right":"chevron-down"),n=r.useRef(null),f=r.useRef(null),[o,I]=r.useState(0),[y,M]=r.useState(!0),[E,G]=r.useState(null),[C,A]=r.useState(null),c=p.length,u=r.useCallback(t=>{if(n.current){let l=t;g?(t<0&&(l=c-e),t>=c-e+1&&(l=0)):l=Math.max(0,Math.min(t,c-e));const b={behavior:"smooth",[a==="hor"?"left":"top"]:l*(a==="hor"?n.current.offsetWidth/e:n.current.offsetHeight/e)};n.current.scrollTo(b),I(l)}},[a,g,c,e]);r.useEffect(()=>{let t;return y&&(t=setInterval(()=>{u(o+1)},v)),()=>{t&&clearInterval(t)}},[o,y,u,v]);const i=r.useCallback(()=>{if(n.current){const t=Math.round(a==="hor"?n.current.scrollLeft/(n.current.offsetWidth/e):n.current.scrollTop/(n.current.offsetHeight/e));I(t)}},[a,e]);r.useEffect(()=>{const t=n.current;return t&&t.addEventListener("scroll",i),()=>{t&&t.removeEventListener("scroll",i)}},[i]),r.useEffect(()=>{if(n.current&&f.current&&a==="ver"){const l=f.current.offsetHeight;n.current.style.height=`${l*e}px`}},[a,e]);const h="absolute flex justify-center items-center p-2";return r.createElement("div",{className:"relative",role:"region","aria-roledescription":"carousel","aria-label":"Image carousel",onMouseEnter:()=>M(!1),onMouseLeave:()=>M(!0)},r.createElement("div",{className:s("overflow-auto no-scrollbar scroll-smooth snap-mandatory",a==="hor"?"snap-x flex":"snap-y flex-col"),ref:n,onKeyDown:t=>{switch(t.key){case"ArrowRight":case"ArrowDown":t.preventDefault(),u(o+1);break;case"ArrowLeft":case"ArrowUp":t.preventDefault(),u(o-1);break;case"Home":t.preventDefault(),u(0);break;case"End":t.preventDefault(),u(c-e);break;default:break}},tabIndex:"0",role:"tablist","aria-label":"Image carousel",onTouchStart:t=>{A(null),G(t.targetTouches[0].clientX)},onTouchMove:t=>A(t.targetTouches[0].clientX),onTouchEnd:()=>{if(!E||!C)return;const t=E-C,l=t>50,b=t<-50;l?u(o+1):b&&u(o-1)}},p.map((t,l)=>r.createElement("div",{key:l,ref:f,className:"shrink-0 snap-start",style:{[a==="hor"?"width":"height"]:`${100/e}%`},role:"tabpanel",id:`slide-${l}`,"aria-label":`Slide ${l+1} of ${c}`,"aria-hidden":o!==Math.floor(l/e)*e,tabIndex:o===Math.floor(l/e)*e?0:-1},t))),N&&r.createElement("div",{className:s(h,a==="hor"?"w-full inset-x-0 bottom-0":"flex-col h-full inset-y-0 right-0",$),role:"tablist","aria-label":"Carousel pagination"},Array.from({length:Math.ceil(c/e)}).map((t,l)=>r.createElement("button",{key:l,onClick:()=>u(l*e),"aria-label":`Go to slide group ${l+1}`,"aria-selected":Math.floor(o/e)===l,role:"tab","aria-controls":`slide-${l*e}`},r.createElement(m,{id:Math.floor(o/e)===l?D:x})))),H&&r.createElement(r.Fragment,null,r.createElement("button",{className:s(h,"hover:bg-black/5",a==="hor"?"h-full inset-y-0 left-0":"w-full inset-x-0 top-0",k),onClick:()=>u(o-e),"aria-label":"Previous slide group"},r.createElement(m,{id:X})),r.createElement("button",{className:s(h,"hover:bg-black/5",a==="hor"?"h-full inset-y-0 right-0":"w-full inset-x-0 bottom-0",k),onClick:()=>u(o+e),"aria-label":"Next slide group"},r.createElement(m,{id:j}))))};var U=K;export{U as default};
+"use client";import*as r from"react";import s from"classnames";import m from"abaabil.icon";const K=({items:p,direction:a="hor",autoScrollInterval:v=5e3,infiniteLoop:g=!0,slidesToShow:e=1,showIndicators:N,indicatorClassName:$="",indicatorIcon:x="circle",activeIndicatorIcon:D="playstation-circle",showControls:H,controlClassName:k="",leftIcon:L,rightIcon:W})=>{const X=L||(a==="hor"?"chevron-left":"chevron-up"),j=W||(a==="hor"?"chevron-right":"chevron-down"),n=r.useRef(null),f=r.useRef(null),[o,I]=r.useState(0),[y,M]=r.useState(!0),[E,G]=r.useState(null),[C,A]=r.useState(null),c=p.length,u=r.useCallback(t=>{if(n.current){let l=t;g?(t<0&&(l=c-e),t>=c-e+1&&(l=0)):l=Math.max(0,Math.min(t,c-e));const b={behavior:"smooth",[a==="hor"?"left":"top"]:l*(a==="hor"?n.current.offsetWidth/e:n.current.offsetHeight/e)};n.current.scrollTo(b),I(l)}},[a,g,c,e]);r.useEffect(()=>{let t;return y&&(t=setInterval(()=>{u(o+1)},v)),()=>{t&&clearInterval(t)}},[o,y,u,v]);const i=r.useCallback(()=>{if(n.current){const t=Math.round(a==="hor"?n.current.scrollLeft/(n.current.offsetWidth/e):n.current.scrollTop/(n.current.offsetHeight/e));I(t)}},[a,e]);r.useEffect(()=>{const t=n.current;return t&&t.addEventListener("scroll",i),()=>{t&&t.removeEventListener("scroll",i)}},[i]),r.useEffect(()=>{if(n.current&&f.current&&a==="ver"){const l=f.current.offsetHeight;n.current.style.height=`${l*e}px`}},[a,e]);const h="absolute flex justify-center items-center p-2";return r.createElement("div",{className:"relative",role:"region","aria-roledescription":"carousel","aria-label":"Image carousel",onMouseEnter:()=>M(!1),onMouseLeave:()=>M(!0)},r.createElement("div",{className:s("overflow-auto no-scrollbar scroll-smooth snap-mandatory",a==="hor"?"snap-x flex":"snap-y flex-col"),ref:n,onKeyDown:t=>{switch(t.key){case"ArrowRight":case"ArrowDown":t.preventDefault(),u(o+1);break;case"ArrowLeft":case"ArrowUp":t.preventDefault(),u(o-1);break;case"Home":t.preventDefault(),u(0);break;case"End":t.preventDefault(),u(c-e);break;default:break}},tabIndex:"0",role:"tablist","aria-label":"Image carousel",onTouchStart:t=>{A(null),G(t.targetTouches[0].clientX)},onTouchMove:t=>A(t.targetTouches[0].clientX),onTouchEnd:()=>{if(!E||!C)return;const t=E-C,l=t>50,b=t<-50;l?u(o+1):b&&u(o-1)}},p.map((t,l)=>r.createElement("div",{key:l,ref:f,className:"shrink-0 snap-start",style:{[a==="hor"?"width":"height"]:`${100/e}%`},role:"tabpanel",id:`slide-${l}`,"aria-label":`Slide ${l+1} of ${c}`,"aria-hidden":o!==Math.floor(l/e)*e,tabIndex:o===Math.floor(l/e)*e?0:-1},t))),N&&r.createElement("div",{className:s(h,a==="hor"?"w-full inset-x-0 bottom-0":"flex-col h-full inset-y-0 right-0",$),role:"tablist","aria-label":"Carousel pagination"},Array.from({length:Math.ceil(c/e)}).map((t,l)=>r.createElement("button",{key:l,onClick:()=>u(l*e),"aria-label":`Go to slide group ${l+1}`,"aria-selected":Math.floor(o/e)===l,role:"tab","aria-controls":`slide-${l*e}`},r.createElement(m,{id:Math.floor(o/e)===l?D:x})))),H&&r.createElement(r.Fragment,null,r.createElement("button",{className:s(h,"hover:bg-black/5",a==="hor"?"h-full inset-y-0 left-0":"w-full inset-x-0 top-0",k),onClick:()=>u(o-e),"aria-label":"Previous slide group"},r.createElement(m,{id:X})),r.createElement("button",{className:s(h,"hover:bg-black/5",a==="hor"?"h-full inset-y-0 right-0":"w-full inset-x-0 bottom-0",k),onClick:()=>u(o+e),"aria-label":"Next slide group"},r.createElement(m,{id:j}))))};var U=K;export{U as default};

package.json

 {
   "name": "abaabil.carousel",
   "author": "Abaabil",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "main": "dist/index.esm.min.js",
@@ -36,3 +36,3 @@ "files": [
   ],
-  "gitHead": "da9f98c1b63e3da43ba4907791d86b8e4c9fdf5e"
+  "gitHead": "6d1fd606be89eb2b6ae260ecb9583ade0756b54c"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No metric changes

No dependency changes