@progress/kendo-react-scrollview/dist/cdn/js/kendo-react-scrollview.js

React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-svg-icons"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons","@progress/kendo-react-intl"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactScrollview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons,e.KendoReactIntl)}(this,(function(e,t,r,a,n,l){"use strict";function c(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=c(t);const s={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.1.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},i="scrollview.previous",u="scrollview.next",g={[i]:"Previous",[u]:"Next"},m=o.forwardRef(((e,t)=>{const r=!a.validatePackage(s,{component:"ScrollView"}),{className:c,style:m,children:p,pagerOverlay:d=v.pageOverlay,pageable:h=v.pageable,arrows:w=v.arrows,endless:k=v.endless,activeView:f=v.activeView,automaticViewChange:b=v.automaticViewChange,automaticViewChangeInterval:y=v.automaticViewChangeInterval}=e,[C,E]=o.useState(f||1),N=o.useRef(null),I=o.useRef(null),x=o.useRef(null),V=o.Children.toArray(p),K=a.useRtl(N,e.dir),R="rtl"===K,O=l.useLocalization(),S=o.useCallback((()=>{N.current&&N.current.focus()}),[]),D=o.useCallback((()=>({element:N.current,focus:S})),[S]);o.useImperativeHandle(t,D);const T=o.useCallback((()=>{k?E(C>1?C-1:V.length):C>1&&E(C-1)}),[C,V.length,k]),j=o.useCallback((()=>{k?C<V.length?E(C+1):E(1):C<V.length&&E(C+1)}),[C,V.length,k]),L=o.useCallback((e=>{var t,r;const a=e.target;a.classList.contains("k-scrollview-prev")?(T(),!((k||C>2)&&V.length>0)&&(null==(t=N.current)||t.focus())):a.classList.contains("k-scrollview-next")&&(j(),!((k||C<V.length-1)&&V.length>0)&&(null==(r=N.current)||r.focus()))}),[C,V.length,k]);function P(){x.current&&clearTimeout(x.current)}o.useEffect((()=>{const e=V.length;I.current&&(I.current.style.setProperty("--kendo-scrollview-views",`${e}`),I.current.style.setProperty("--kendo-scrollview-current",`${C}`))}),[V,C,K]),o.useEffect((()=>{if(b)return P(),x.current=setTimeout((()=>E((e=>e===V.length?k?1:e:e+1))),y),()=>{P()}}),[b,y,V.length,C,k]);const q=o.useCallback((e=>{switch(e.key){case a.KEYS.left:e.preventDefault(),R?j():T();break;case a.KEYS.right:e.preventDefault(),R?T():j();break;case a.KEYS.space:case a.KEYS.enter:e.preventDefault(),L(e)}}),[R,j,T]),z=o.useMemo((()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===d,"k-scrollview-dark":"dark"===d},c)),[c,d]),Y=o.Children.map(p||null,((e,t)=>o.createElement("div",{className:"k-scrollview-view","aria-hidden":C!==t+1},e))),A=o.useCallback((()=>{let e;return e=C>1,(k||e)&&V.length>0}),[C,V.length,k]),U=o.useCallback((()=>{let e;return e=C<V.length,(k||e)&&V.length>0}),[C,V.length,k]);return o.createElement("div",{className:z,style:m,ref:N,tabIndex:0,dir:K,onKeyDown:q},o.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:I},Y),o.createElement("div",{className:"k-scrollview-elements"},w&&o.createElement(o.Fragment,null,A()&&o.createElement("span",{className:"k-scrollview-prev","aria-label":O.toLanguageString(u,g[u]),role:"button",tabIndex:0,onClick:T,onKeyDown:q},o.createElement(a.IconWrap,{name:R?"chevron-right":"chevron-left",icon:R?n.chevronRightIcon:n.chevronLeftIcon,size:"xxxlarge"})),U()&&o.createElement("span",{className:"k-scrollview-next","aria-label":O.toLanguageString(i,g[i]),role:"button",tabIndex:0,onClick:j,onKeyDown:q},o.createElement(a.IconWrap,{name:R?"chevron-left":"chevron-right",icon:R?n.chevronLeftIcon:n.chevronRightIcon,size:"xxxlarge"}))),h&&o.createElement("div",{className:"k-scrollview-nav-wrap"},o.createElement("div",{className:"k-scrollview-nav"},V.map(((e,t)=>o.createElement("span",{className:a.classNames("k-link",{"k-primary":C===t+1}),key:t+1,onClick:()=>E(t+1)})))))),o.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}),r&&o.createElement(a.WatermarkOverlay,null))}));m.propTypes={activeView:r.number,arrows:r.bool,automaticViewChange:r.bool,automaticViewChangeInterval:r.number,children:r.any,className:r.string,dir:r.string,endless:r.bool,pageable:r.bool,pageOverlay:r.string,style:r.object};const v={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};m.displayName="KendoScrollView",e.ScrollView=m}));