@lifarl/react-scroll-snap-slider/dist/index.cjs

A performant React Slider / Carousel Component with CSS Scroll Snapping, Intersection Observer and Accessibility.

"use strict";var e=require("react");function r(e){var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,Object.freeze(r)}var t=r(e),n=function(){return n=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},n.apply(this,arguments)};
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */function a(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)r.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]])}return t}var l=function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return e.filter(Boolean).join(" ")},i=e.forwardRef(function(r,t){var i=r.className,c=a(r,["className"]);return e.createElement("li",n({ref:t,className:l("scs-slide",i)},c))});i.displayName="StyledSlide";var c=e.forwardRef(function(r,t){var n=r.slideIndex,a=r.slidesPerPageSettings,l=r.slideWidth,c=r.className,o=r.slideCount,s=r.children;return a?"".concat(100/a.mobileSmall,"%"):!l||"".concat(l,"px"),e.createElement(i,{"data-index-number":n,key:n,className:c,role:"group","aria-roledescription":"slide","aria-label":"Slide ".concat(n+1).concat(o?" of ".concat(o):""),ref:t},s)});c.displayName="Slide";var o=e.memo(c),s=function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return e.filter(Boolean).join(" ")},u=e.forwardRef(function(r,t){var l=r.direction,i=r.className,c=r.type,o=void 0===c?"button":c,u=a(r,["direction","className","type"]),d="prev"===l?"scs-nav--prev":"scs-nav--next";return e.createElement("button",n({ref:t,type:o,className:s("scs-nav",d,i)},u))}),d=e.memo(u),f=e.forwardRef(function(r,t){var l=r.className,i=a(r,["className"]);return e.createElement("svg",n({ref:t,className:s("scs-arrow",l)},i))}),v=e.memo(f);u.displayName="StyledNavWrapper",f.displayName="StyledArrow";var m=t.forwardRef(function(e,r){var n=e.direction,a=e.onClick,l=e.className,i=e.iconClassName,c=e.ariaControls,o=e.ariaLabel,s=e.disabled,u=t.useMemo(function(){return"prev"===n?"M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z":"M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"},[n]),f=t.useMemo(function(){return t.createElement("path",{d:u})},[u]);return t.createElement(d,{direction:n,onClick:a,ref:r,className:l,"aria-controls":c,"aria-label":o||("prev"===n?"Previous slide":"Next slide"),disabled:s},t.createElement(v,{viewBox:"0 0 8 8",className:i},f))});m.displayName="NavArrow";var b=t.memo(m),p=function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return e.filter(Boolean).join(" ")},h=e.forwardRef(function(r,t){var l=r.className,i=a(r,["className"]);return e.createElement("div",n({ref:t,className:p("scs-carousel",l)},i))}),N=e.forwardRef(function(r,t){var l=r.className,i=a(r,["className"]);return e.createElement("div",n({ref:t,className:p("scs-slider",l)},i))});N.displayName="StyledSlider";var y=e.memo(N),C=e.forwardRef(function(r,t){var l=r.className,i=a(r,["className"]);return e.createElement("ul",n({ref:t,className:p("scs-list",l)},i))});h.displayName="StyledCarousel",C.displayName="StyledUl";var g=e.forwardRef(function(r,t){var n,a=r.renderCustomArrow,l=r.slidesPerPageSettings,i=r.slideWidth,c=r.onScrollStart,s=r.onScrollEnd,u=r.onSlidesVisibilityChange,d=r.onSlideVisible,f=r.className,v=r.classes,m=r.ariaLabel,p=r.children,N=e.useState(!1),g=N[0],S=N[1],x=e.useRef(null),E=e.useRef(null),w=e.useRef([]),A=e.useRef(null),k=e.useRef(null),R=e.useRef(null),O=e.useRef(0),j=e.useRef(0),P=e.useRef([]),M=e.useId(),W=e.useState(""),L=W[0],I=W[1],B=e.useCallback(function(e,r){w.current[r]=e},[]),D=e.useCallback(function(){var e,r,t;return(null===(t=null===(r=null===(e=E.current)||void 0===e?void 0:e.firstChild)||void 0===r?void 0:r.firstChild)||void 0===t?void 0:t.clientWidth)||0},[]),T=e.useCallback(function(r){r.forEach(function(e){var r,t,n,a,l,i=e.target,c=Number(i.dataset.indexNumber);if(e.intersectionRatio>=.5)return O.current=c,P.current.push(c),P.current.sort(),null===(r=w.current[c])||void 0===r||r.setAttribute("aria-hidden","false"),w.current[c]&&((l=w.current[c]).removeAttribute("inert"),l.querySelectorAll("[data-scs-managed]").forEach(function(e){var r=e.getAttribute("data-scs-prev-tabindex");"none"===r?e.removeAttribute("tabindex"):null!==r&&e.setAttribute("tabindex",r),e.removeAttribute("data-scs-prev-tabindex"),e.removeAttribute("data-scs-managed")})),null===(t=w.current[c])||void 0===t||t.classList.remove("scs-slide--hidden"),void(d&&d(c));P.current=P.current.filter(function(e){return e!==c}),null===(n=w.current[c])||void 0===n||n.setAttribute("aria-hidden","true"),w.current[c]&&function(e){e.setAttribute("inert",""),e.querySelectorAll('a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),iframe,object,embed,[contenteditable="true"],[tabindex]').forEach(function(e){e.hasAttribute("data-scs-managed")||(e.hasAttribute("tabindex")?e.setAttribute("data-scs-prev-tabindex",String(e.getAttribute("tabindex"))):e.setAttribute("data-scs-prev-tabindex","none"),e.setAttribute("tabindex","-1"),e.setAttribute("data-scs-managed","1"))})}(w.current[c]),null===(a=w.current[c])||void 0===a||a.classList.add("scs-slide--hidden")}),j.current=P.current[Math.floor(P.current.length/2)],u&&u(j.current);var t=e.Children.count(p);"number"==typeof j.current&&t>0&&(console.log("Slide ".concat(j.current+1," of ").concat(t)),I("Slide ".concat(j.current+1," of ").concat(t)))},[]),q=e.useCallback(function(){if(!E.current)return!1;var e=E.current.clientWidth,r=D()-1;return w.current.length*r>e},[]),z=e.useCallback(function(e){var r="prev"===e?-1:1;if(E.current){var t=D(),n=Math.floor(E.current.clientWidth/t);E.current.scrollBy({top:0,behavior:"smooth",left:n*t*r})}},[D]),F=e.useCallback(function(){null!==x.current&&clearTimeout(x.current),x.current=setTimeout(function(){x.current=null,S(!1),s&&s(j.current)},250),g||S(!0)},[s,g]),H=e.useCallback(function(e){E.current&&E.current.scrollTo({top:0,behavior:"smooth",left:e})},[]),U=e.useCallback(function(e){if(E.current){var r=E.current.scrollLeft,t=E.current.clientWidth,n=D(),a=n*e;a<r?H(a):a+n>r+t&&H(a+n-t)}},[]);e.useImperativeHandle(t,function(){return{scrollToSlide:U,sliderRef:E}}),e.useEffect(function(){R.current&&R.current.disconnect();for(var e=function(e,r,t,n){void 0===e&&(e=null);var a=r.current;if(null!==a)return a;var l=new IntersectionObserver(t,{root:e,rootMargin:"0px",threshold:n});return r.current=l,l}(E.current,R,T,.5),r=0,t=w.current;r<t.length;r++){var n=t[r];n&&e.observe(n)}return function(){return e.disconnect()}},[e.Children.count(p)]),e.useEffect(function(){g&&c&&c(j.current)},[g,c]),e.useEffect(function(){if(E.current&&k.current&&A.current){!function(){if(!q())return k.current.disabled=!0,void(A.current.disabled=!0);if(g)return k.current.disabled=!0,void(A.current.disabled=!0);var e=E.current.scrollLeft<=30,r=E.current.clientWidth+E.current.scrollLeft>=E.current.scrollWidth-30;A.current.disabled=e,k.current.disabled=r}()}},[e.Children.count(p),g]),e.useEffect(function(){var e=E.current;if(e)return e.addEventListener("scroll",F,{passive:!0}),function(){return e.removeEventListener("scroll",F)}},[F]);var V=e.useRef(e.Children.count(p));e.useEffect(function(){V.current=e.Children.count(p)},[p]);var K=e.useCallback(function(e){if(E.current){var r=V.current,t=j.current||0;switch(e.key){case"ArrowLeft":e.preventDefault(),U(Math.max(0,t-1));break;case"ArrowRight":e.preventDefault(),U(Math.min(r-1,t+1));break;case"Home":e.preventDefault(),U(0);break;case"End":e.preventDefault(),U(r-1)}}},[]),G=e.useMemo(function(){var e,r=l?"".concat(100/l.mobileSmall,"%"):i?"".concat(i,"px"):"100%";return(e={})["--scs-min-w"]=r,e["--scs-min-w-512"]=l?"".concat(100/l.mobileBig,"%"):void 0,e["--scs-min-w-753"]=l?"".concat(100/l.tablet,"%"):void 0,e["--scs-min-w-1232"]=l?"".concat(100/l.desktop,"%"):void 0,e},[l,i]);return e.createElement(h,{className:null!==(n=null==v?void 0:v.root)&&void 0!==n?n:f,role:"region","aria-roledescription":"carousel","aria-label":m},e.useMemo(function(){var r,t;if(a)return e.createElement(e.Fragment,null,a({direction:"prev",ref:A,onClick:z,ariaControls:M}),a({direction:"next",ref:k,onClick:z,ariaControls:M}));return e.createElement(e.Fragment,null,e.createElement(b,{ref:A,direction:"prev",onClick:function(){return z("prev")},className:null!==(r=null==v?void 0:v.navPrev)&&void 0!==r?r:null==v?void 0:v.nav,iconClassName:null==v?void 0:v.arrow,ariaControls:M}),e.createElement(b,{ref:k,direction:"next",onClick:function(){return z("next")},className:null!==(t=null==v?void 0:v.navNext)&&void 0!==t?t:null==v?void 0:v.nav,iconClassName:null==v?void 0:v.arrow,ariaControls:M}))},[a,null==v?void 0:v.navPrev,null==v?void 0:v.navNext,null==v?void 0:v.nav,null==v?void 0:v.arrow,M,z]),e.createElement(y,{ref:E,tabIndex:0,className:null==v?void 0:v.slider,id:M,role:"group","aria-roledescription":"slides","aria-label":"Carousel slides",onKeyDown:K,style:G},e.useMemo(function(){var r=e.Children.count(p);return e.createElement(C,{className:null==v?void 0:v.list,role:"list"},e.Children.map(p,function(t,n){return e.createElement(o,{key:n,slideIndex:n,slidesPerPageSettings:l,slideWidth:i,ref:function(e){return B(e,n)},className:null==v?void 0:v.slide,slideCount:r},t)}))},[p,l,i,null==v?void 0:v.list,null==v?void 0:v.slide]),e.createElement("div",{"aria-live":"polite",className:"scs-visually-hidden"},L)))});g.displayName="Carousel";var S=g;exports.Slider=S,exports.StyledArrow=v,exports.StyledCarousel=h,exports.StyledNavWrapper=d,exports.StyledSlide=i,exports.StyledSlider=y,exports.StyledUl=C;
//# sourceMappingURL=index.cjs.map