@progress/kendo-react-scrollview 8.2.0-develop.8 → 8.2.0

package/ScrollView.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),r=require("prop-types"),o=require("@progress/kendo-react-common"),_=require("./package-metadata.js"),k=require("@progress/kendo-svg-icons");function z(c){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const d=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(g,i,d.get?d:{enumerable:!0,get:()=>c[i]})}}return g.default=c,Object.freeze(g)}const e=z(A),N=e.forwardRef((c,g)=>{o.validatePackage(_.packageMetadata);const{className:i,style:d,children:E,pagerOverlay:b=m.pageOverlay,pageable:S=m.pageable,arrows:P=m.arrows,endless:n=m.endless,activeView:T=m.activeView,automaticViewChange:V=m.automaticViewChange,automaticViewChangeInterval:R=m.automaticViewChangeInterval}=c,[t,s]=e.useState(T||1),v=e.useRef(null),w=e.useRef(null),y=e.useRef(null),l=e.Children.toArray(E),C=o.useRtl(v,c.dir),u=C==="rtl",I=e.useCallback(()=>{v.current&&v.current.focus()},[]),j=e.useCallback(()=>({element:v.current,focus:I}),[I]);e.useImperativeHandle(g,j);const h=e.useCallback(()=>{n?t>1?s(t-1):s(l.length):t>1&&s(t-1)},[t,l.length,n]),p=e.useCallback(()=>{n?t<l.length?s(t+1):s(1):t<l.length&&s(t+1)},[t,l.length,n]);e.useEffect(()=>{let a=l.length;w.current&&(w.current.style.setProperty("--kendo-scrollview-views",`${a}`),w.current.style.setProperty("--kendo-scrollview-current",`${t}`))},[l,t,C]);function O(){y.current&&clearTimeout(y.current)}e.useEffect(()=>{if(V)return O(),y.current=setTimeout(()=>s(a=>a===l.length?n?1:a:a+1),R),()=>{O()}},[V,R,l.length,t,n]);const D=e.useCallback(a=>{switch(a.keyCode){case o.Keys.left:a.preventDefault(),u?p():h();break;case o.Keys.right:a.preventDefault(),u?h():p();break}},[u,p,h]),q=e.useMemo(()=>o.classNames("k-scrollview",{"k-scrollview-light":b==="light","k-scrollview-dark":b==="dark"},i),[i,b]),x=e.Children.map(E||null,(a,f)=>e.createElement("div",{className:"k-scrollview-view","aria-hidden":t!==f+1},a)),K=e.useCallback(()=>{let a;return a=t>1,(n||a)&&l.length>0},[t,l.length,n]),M=e.useCallback(()=>{let a;return a=t<l.length,(n||a)&&l.length>0},[t,l.length,n]);return e.createElement("div",{className:q,style:d,ref:v,tabIndex:0,dir:C,onKeyDown:D},e.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:w},x),e.createElement("div",{className:"k-scrollview-elements"},P&&e.createElement(e.Fragment,null,K()&&e.createElement("span",{className:"k-scrollview-prev","aria-label":"previous",onClick:h},e.createElement(o.IconWrap,{name:u?"chevron-right":"chevron-left",icon:u?k.chevronRightIcon:k.chevronLeftIcon,size:"xxxlarge"})),M()&&e.createElement("span",{className:"k-scrollview-next",onClick:p},e.createElement(o.IconWrap,{name:u?"chevron-left":"chevron-right",icon:u?k.chevronLeftIcon:k.chevronRightIcon,size:"xxxlarge"}))),S&&e.createElement("div",{className:"k-scrollview-nav-wrap"},e.createElement("div",{className:"k-scrollview-nav"},l.map((a,f)=>e.createElement("span",{className:o.classNames("k-link",{"k-primary":t===f+1}),key:f+1,onClick:()=>s(f+1)}))))),e.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}))});N.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 m={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};N.displayName="KendoScrollView";exports.ScrollView=N;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react"),l=require("prop-types"),s=require("@progress/kendo-react-common"),W=require("./package-metadata.js"),b=require("@progress/kendo-svg-icons"),$=require("@progress/kendo-react-intl"),f=require("./messages.js");function F(c){const w=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const u in c)if(u!=="default"){const p=Object.getOwnPropertyDescriptor(c,u);Object.defineProperty(w,u,p.get?p:{enumerable:!0,get:()=>c[u]})}}return w.default=c,Object.freeze(w)}const e=F(H),N=e.forwardRef((c,w)=>{s.validatePackage(W.packageMetadata);const{className:u,style:p,children:R,pagerOverlay:y=v.pageOverlay,pageable:T=v.pageable,arrows:q=v.arrows,endless:r=v.endless,activeView:j=v.activeView,automaticViewChange:V=v.automaticViewChange,automaticViewChangeInterval:S=v.automaticViewChangeInterval}=c,[a,o]=e.useState(j||1),m=e.useRef(null),k=e.useRef(null),C=e.useRef(null),n=e.Children.toArray(R),E=s.useRtl(m,c.dir),g=E==="rtl",L=$.useLocalization(),x=e.useCallback(()=>{m.current&&m.current.focus()},[]),z=e.useCallback(()=>({element:m.current,focus:x}),[x]);e.useImperativeHandle(w,z);const d=e.useCallback(()=>{r?a>1?o(a-1):o(n.length):a>1&&o(a-1)},[a,n.length,r]),h=e.useCallback(()=>{r?a<n.length?o(a+1):o(1):a<n.length&&o(a+1)},[a,n.length,r]),D=e.useCallback(t=>{var P,K;const i=t.target;i.classList.contains("k-scrollview-prev")?(d(),!((r||a>2)&&n.length>0)&&((P=m.current)==null||P.focus())):i.classList.contains("k-scrollview-next")&&(h(),!((r||a<n.length-1)&&n.length>0)&&((K=m.current)==null||K.focus()))},[a,n.length,r]);e.useEffect(()=>{const t=n.length;k.current&&(k.current.style.setProperty("--kendo-scrollview-views",`${t}`),k.current.style.setProperty("--kendo-scrollview-current",`${a}`))},[n,a,E]);function O(){C.current&&clearTimeout(C.current)}e.useEffect(()=>{if(V)return O(),C.current=setTimeout(()=>o(t=>t===n.length?r?1:t:t+1),S),()=>{O()}},[V,S,n.length,a,r]);const I=e.useCallback(t=>{switch(t.key){case s.KEYS.left:t.preventDefault(),g?h():d();break;case s.KEYS.right:t.preventDefault(),g?d():h();break;case s.KEYS.space:t.preventDefault(),D(t);break;case s.KEYS.enter:t.preventDefault(),D(t);break}},[g,h,d]),A=e.useMemo(()=>s.classNames("k-scrollview",{"k-scrollview-light":y==="light","k-scrollview-dark":y==="dark"},u),[u,y]),M=e.Children.map(R||null,(t,i)=>e.createElement("div",{className:"k-scrollview-view","aria-hidden":a!==i+1},t)),Y=e.useCallback(()=>{let t;return t=a>1,(r||t)&&n.length>0},[a,n.length,r]),_=e.useCallback(()=>{let t;return t=a<n.length,(r||t)&&n.length>0},[a,n.length,r]);return e.createElement("div",{className:A,style:p,ref:m,tabIndex:0,dir:E,onKeyDown:I},e.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:k},M),e.createElement("div",{className:"k-scrollview-elements"},q&&e.createElement(e.Fragment,null,Y()&&e.createElement("span",{className:"k-scrollview-prev","aria-label":L.toLanguageString(f.next,f.messages[f.next]),role:"button",tabIndex:0,onClick:d,onKeyDown:I},e.createElement(s.IconWrap,{name:g?"chevron-right":"chevron-left",icon:g?b.chevronRightIcon:b.chevronLeftIcon,size:"xxxlarge"})),_()&&e.createElement("span",{className:"k-scrollview-next","aria-label":L.toLanguageString(f.previous,f.messages[f.previous]),role:"button",tabIndex:0,onClick:h,onKeyDown:I},e.createElement(s.IconWrap,{name:g?"chevron-left":"chevron-right",icon:g?b.chevronLeftIcon:b.chevronRightIcon,size:"xxxlarge"}))),T&&e.createElement("div",{className:"k-scrollview-nav-wrap"},e.createElement("div",{className:"k-scrollview-nav"},n.map((t,i)=>e.createElement("span",{className:s.classNames("k-link",{"k-primary":a===i+1}),key:i+1,onClick:()=>o(i+1)}))))),e.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}))});N.propTypes={activeView:l.number,arrows:l.bool,automaticViewChange:l.bool,automaticViewChangeInterval:l.number,children:l.any,className:l.string,dir:l.string,endless:l.bool,pageable:l.bool,pageOverlay:l.string,style:l.object};const v={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};N.displayName="KendoScrollView";exports.ScrollView=N;

package/ScrollView.mjs

@@ -7,135 +7,169 @@
  */
 "use client";
 import * as e from "react";
-import r from "prop-types";
-import { validatePackage as $, useRtl as j, Keys as N, classNames as V, IconWrap as R } from "@progress/kendo-react-common";
-import { packageMetadata as F } from "./package-metadata.mjs";
-import { chevronRightIcon as I, chevronLeftIcon as x } from "@progress/kendo-svg-icons";
-const P = e.forwardRef((p, T) => {
-  $(F);
+import n from "prop-types";
+import { validatePackage as J, useRtl as Q, KEYS as f, classNames as D, IconWrap as P } from "@progress/kendo-react-common";
+import { packageMetadata as U } from "./package-metadata.mjs";
+import { chevronRightIcon as K, chevronLeftIcon as S } from "@progress/kendo-svg-icons";
+import { useLocalization as X } from "@progress/kendo-react-intl";
+import { next as T, messages as A, previous as z } from "./messages.mjs";
+const O = e.forwardRef((d, B) => {
+  J(U);
   const {
-    className: d,
-    style: A,
-    children: k,
-    pagerOverlay: w = o.pageOverlay,
-    pageable: D = o.pageable,
-    arrows: K = o.arrows,
-    endless: n = o.endless,
-    activeView: O = o.activeView,
-    automaticViewChange: y = o.automaticViewChange,
-    automaticViewChangeInterval: C = o.automaticViewChangeInterval
-  } = p, [t, s] = e.useState(O || 1), i = e.useRef(null), u = e.useRef(null), f = e.useRef(null), l = e.Children.toArray(k), h = j(i, p.dir), c = h === "rtl", b = e.useCallback(
+    className: b,
+    style: H,
+    children: y,
+    pagerOverlay: w = m.pageOverlay,
+    pageable: M = m.pageable,
+    arrows: $ = m.arrows,
+    endless: r = m.endless,
+    activeView: j = m.activeView,
+    automaticViewChange: C = m.automaticViewChange,
+    automaticViewChangeInterval: E = m.automaticViewChangeInterval
+  } = d, [a, s] = e.useState(j || 1), c = e.useRef(null), v = e.useRef(null), h = e.useRef(null), l = e.Children.toArray(y), p = Q(c, d.dir), i = p === "rtl", N = X(), I = e.useCallback(
     () => {
-      i.current && i.current.focus();
+      c.current && c.current.focus();
     },
     []
-  ), S = e.useCallback(
+  ), F = e.useCallback(
     () => ({
-      element: i.current,
-      focus: b
+      element: c.current,
+      focus: I
     }),
-    [b]
+    [I]
   );
-  e.useImperativeHandle(T, S);
-  const v = e.useCallback(() => {
-    n ? t > 1 ? s(t - 1) : s(l.length) : t > 1 && s(t - 1);
-  }, [t, l.length, n]), g = e.useCallback(() => {
-    n ? t < l.length ? s(t + 1) : s(1) : t < l.length && s(t + 1);
-  }, [t, l.length, n]);
+  e.useImperativeHandle(B, F);
+  const u = e.useCallback(() => {
+    r ? a > 1 ? s(a - 1) : s(l.length) : a > 1 && s(a - 1);
+  }, [a, l.length, r]), g = e.useCallback(() => {
+    r ? a < l.length ? s(a + 1) : s(1) : a < l.length && s(a + 1);
+  }, [a, l.length, r]), V = e.useCallback((t) => {
+    var L, x;
+    const o = t.target;
+    o.classList.contains("k-scrollview-prev") ? (u(), !((r || a > 2) && l.length > 0) && ((L = c.current) == null || L.focus())) : o.classList.contains("k-scrollview-next") && (g(), !((r || a < l.length - 1) && l.length > 0) && ((x = c.current) == null || x.focus()));
+  }, [a, l.length, r]);
   e.useEffect(() => {
-    let a = l.length;
-    u.current && (u.current.style.setProperty("--kendo-scrollview-views", `${a}`), u.current.style.setProperty("--kendo-scrollview-current", `${t}`));
-  }, [l, t, h]);
-  function E() {
-    f.current && clearTimeout(f.current);
+    const t = l.length;
+    v.current && (v.current.style.setProperty("--kendo-scrollview-views", `${t}`), v.current.style.setProperty("--kendo-scrollview-current", `${a}`));
+  }, [l, a, p]);
+  function R() {
+    h.current && clearTimeout(h.current);
   }
   e.useEffect(() => {
-    if (y)
-      return E(), f.current = setTimeout(
-        () => s((a) => a === l.length ? n ? 1 : a : a + 1),
-        C
+    if (C)
+      return R(), h.current = setTimeout(
+        () => s((t) => t === l.length ? r ? 1 : t : t + 1),
+        E
       ), () => {
-        E();
+        R();
       };
-  }, [y, C, l.length, t, n]);
-  const z = e.useCallback(
-    (a) => {
-      switch (a.keyCode) {
-        case N.left:
-          a.preventDefault(), c ? g() : v();
+  }, [C, E, l.length, a, r]);
+  const k = e.useCallback(
+    (t) => {
+      switch (t.key) {
+        case f.left:
+          t.preventDefault(), i ? g() : u();
           break;
-        case N.right:
-          a.preventDefault(), c ? v() : g();
+        case f.right:
+          t.preventDefault(), i ? u() : g();
+          break;
+        case f.space:
+          t.preventDefault(), V(t);
+          break;
+        case f.enter:
+          t.preventDefault(), V(t);
           break;
       }
     },
-    [c, g, v]
-  ), B = e.useMemo(
-    () => V(
+    [i, g, u]
+  ), W = e.useMemo(
+    () => D(
       "k-scrollview",
       {
         "k-scrollview-light": w === "light",
         "k-scrollview-dark": w === "dark"
       },
-      d
+      b
     ),
-    [d, w]
-  ), H = e.Children.map(k || null, (a, m) => /* @__PURE__ */ e.createElement(
+    [b, w]
+  ), Y = e.Children.map(y || null, (t, o) => /* @__PURE__ */ e.createElement(
     "div",
     {
       className: "k-scrollview-view",
-      "aria-hidden": t !== m + 1
+      "aria-hidden": a !== o + 1
     },
-    a
-  )), L = e.useCallback(() => {
-    let a;
-    return a = t > 1, (n || a) && l.length > 0;
-  }, [t, l.length, n]), M = e.useCallback(() => {
-    let a;
-    return a = t < l.length, (n || a) && l.length > 0;
-  }, [t, l.length, n]);
-  return /* @__PURE__ */ e.createElement("div", { className: B, style: A, ref: i, tabIndex: 0, dir: h, onKeyDown: z }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: u }, H), /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-elements" }, K && /* @__PURE__ */ e.createElement(e.Fragment, null, L() && /* @__PURE__ */ e.createElement("span", { className: "k-scrollview-prev", "aria-label": "previous", onClick: v }, /* @__PURE__ */ e.createElement(
-    R,
+    t
+  )), _ = e.useCallback(() => {
+    let t;
+    return t = a > 1, (r || t) && l.length > 0;
+  }, [a, l.length, r]), q = e.useCallback(() => {
+    let t;
+    return t = a < l.length, (r || t) && l.length > 0;
+  }, [a, l.length, r]);
+  return /* @__PURE__ */ e.createElement("div", { className: W, style: H, ref: c, tabIndex: 0, dir: p, onKeyDown: k }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: v }, Y), /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-elements" }, $ && /* @__PURE__ */ e.createElement(e.Fragment, null, _() && /* @__PURE__ */ e.createElement(
+    "span",
     {
-      name: c ? "chevron-right" : "chevron-left",
-      icon: c ? I : x,
-      size: "xxxlarge"
-    }
-  )), M() && /* @__PURE__ */ e.createElement("span", { className: "k-scrollview-next", onClick: g }, /* @__PURE__ */ e.createElement(
-    R,
+      className: "k-scrollview-prev",
+      "aria-label": N.toLanguageString(T, A[T]),
+      role: "button",
+      tabIndex: 0,
+      onClick: u,
+      onKeyDown: k
+    },
+    /* @__PURE__ */ e.createElement(
+      P,
+      {
+        name: i ? "chevron-right" : "chevron-left",
+        icon: i ? K : S,
+        size: "xxxlarge"
+      }
+    )
+  ), q() && /* @__PURE__ */ e.createElement(
+    "span",
     {
-      name: c ? "chevron-left" : "chevron-right",
-      icon: c ? x : I,
-      size: "xxxlarge"
-    }
-  ))), D && /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav-wrap" }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav" }, l.map((a, m) => /* @__PURE__ */ e.createElement(
+      className: "k-scrollview-next",
+      "aria-label": N.toLanguageString(z, A[z]),
+      role: "button",
+      tabIndex: 0,
+      onClick: g,
+      onKeyDown: k
+    },
+    /* @__PURE__ */ e.createElement(
+      P,
+      {
+        name: i ? "chevron-left" : "chevron-right",
+        icon: i ? S : K,
+        size: "xxxlarge"
+      }
+    )
+  )), M && /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav-wrap" }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav" }, l.map((t, o) => /* @__PURE__ */ e.createElement(
     "span",
     {
-      className: V(
+      className: D(
         "k-link",
         {
-          "k-primary": t === m + 1
+          "k-primary": a === o + 1
         }
       ),
-      key: m + 1,
-      onClick: () => s(m + 1)
+      key: o + 1,
+      onClick: () => s(o + 1)
     }
   ))))), /* @__PURE__ */ e.createElement("div", { "aria-live": "polite", "aria-atomic": "true", className: "k-sr-only" }));
 });
-P.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
+O.propTypes = {
+  activeView: n.number,
+  arrows: n.bool,
+  automaticViewChange: n.bool,
+  automaticViewChangeInterval: n.number,
+  children: n.any,
+  className: n.string,
+  dir: n.string,
+  endless: n.bool,
+  pageable: n.bool,
+  pageOverlay: n.string,
+  style: n.object
 };
-const o = {
+const m = {
   activeView: 1,
   arrows: !0,
   automaticViewChange: !0,
@@ -144,7 +178,7 @@ const o = {
   pageable: !0,
   pageOverlay: "none"
 };
-P.displayName = "KendoScrollView";
+O.displayName = "KendoScrollView";
 export {
-  P as ScrollView
+  O as ScrollView
 };

package/dist/cdn/js/kendo-react-scrollview.js

@@ -5,4 +5,4 @@
  * 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")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactScrollview={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoSvgIcons)}(this,(function(e,t,r,a,l){"use strict";function n(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 c=n(t);const s={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},o=c.forwardRef(((e,t)=>{a.validatePackage(s);const{className:r,style:n,children:o,pagerOverlay:u=i.pageOverlay,pageable:m=i.pageable,arrows:v=i.arrows,endless:p=i.endless,activeView:g=i.activeView,automaticViewChange:d=i.automaticViewChange,automaticViewChangeInterval:h=i.automaticViewChangeInterval}=e,[f,w]=c.useState(g||1),k=c.useRef(null),y=c.useRef(null),b=c.useRef(null),C=c.Children.toArray(o),E=a.useRtl(k,e.dir),N="rtl"===E,I=c.useCallback((()=>{k.current&&k.current.focus()}),[]),V=c.useCallback((()=>({element:k.current,focus:I})),[I]);c.useImperativeHandle(t,V);const O=c.useCallback((()=>{p?w(f>1?f-1:C.length):f>1&&w(f-1)}),[f,C.length,p]),R=c.useCallback((()=>{p?f<C.length?w(f+1):w(1):f<C.length&&w(f+1)}),[f,C.length,p]);function x(){b.current&&clearTimeout(b.current)}c.useEffect((()=>{let e=C.length;y.current&&(y.current.style.setProperty("--kendo-scrollview-views",`${e}`),y.current.style.setProperty("--kendo-scrollview-current",`${f}`))}),[C,f,E]),c.useEffect((()=>{if(d)return x(),b.current=setTimeout((()=>w((e=>e===C.length?p?1:e:e+1))),h),()=>{x()}}),[d,h,C.length,f,p]);const K=c.useCallback((e=>{switch(e.keyCode){case a.Keys.left:e.preventDefault(),N?R():O();break;case a.Keys.right:e.preventDefault(),N?O():R()}}),[N,R,O]),D=c.useMemo((()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===u,"k-scrollview-dark":"dark"===u},r)),[r,u]),T=c.Children.map(o||null,((e,t)=>c.createElement("div",{className:"k-scrollview-view","aria-hidden":f!==t+1},e))),j=c.useCallback((()=>{let e;return e=f>1,(p||e)&&C.length>0}),[f,C.length,p]),P=c.useCallback((()=>{let e;return e=f<C.length,(p||e)&&C.length>0}),[f,C.length,p]);return c.createElement("div",{className:D,style:n,ref:k,tabIndex:0,dir:E,onKeyDown:K},c.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:y},T),c.createElement("div",{className:"k-scrollview-elements"},v&&c.createElement(c.Fragment,null,j()&&c.createElement("span",{className:"k-scrollview-prev","aria-label":"previous",onClick:O},c.createElement(a.IconWrap,{name:N?"chevron-right":"chevron-left",icon:N?l.chevronRightIcon:l.chevronLeftIcon,size:"xxxlarge"})),P()&&c.createElement("span",{className:"k-scrollview-next",onClick:R},c.createElement(a.IconWrap,{name:N?"chevron-left":"chevron-right",icon:N?l.chevronLeftIcon:l.chevronRightIcon,size:"xxxlarge"}))),m&&c.createElement("div",{className:"k-scrollview-nav-wrap"},c.createElement("div",{className:"k-scrollview-nav"},C.map(((e,t)=>c.createElement("span",{className:a.classNames("k-link",{"k-primary":f===t+1}),key:t+1,onClick:()=>w(t+1)})))))),c.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}))}));o.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 i={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};o.displayName="KendoScrollView",e.ScrollView=o}));
+!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",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},i="scrollview.previous",u="scrollview.next",g={[i]:"Previous",[u]:"Next"},v=o.forwardRef(((e,t)=>{a.validatePackage(s);const{className:r,style:c,children:v,pagerOverlay:p=m.pageOverlay,pageable:d=m.pageable,arrows:h=m.arrows,endless:w=m.endless,activeView:f=m.activeView,automaticViewChange:k=m.automaticViewChange,automaticViewChangeInterval:b=m.automaticViewChangeInterval}=e,[y,C]=o.useState(f||1),E=o.useRef(null),N=o.useRef(null),I=o.useRef(null),x=o.Children.toArray(v),K=a.useRtl(E,e.dir),V="rtl"===K,O=l.useLocalization(),R=o.useCallback((()=>{E.current&&E.current.focus()}),[]),D=o.useCallback((()=>({element:E.current,focus:R})),[R]);o.useImperativeHandle(t,D);const S=o.useCallback((()=>{w?C(y>1?y-1:x.length):y>1&&C(y-1)}),[y,x.length,w]),L=o.useCallback((()=>{w?y<x.length?C(y+1):C(1):y<x.length&&C(y+1)}),[y,x.length,w]),P=o.useCallback((e=>{var t,r;const a=e.target;a.classList.contains("k-scrollview-prev")?(S(),!((w||y>2)&&x.length>0)&&(null==(t=E.current)||t.focus())):a.classList.contains("k-scrollview-next")&&(L(),!((w||y<x.length-1)&&x.length>0)&&(null==(r=E.current)||r.focus()))}),[y,x.length,w]);function T(){I.current&&clearTimeout(I.current)}o.useEffect((()=>{const e=x.length;N.current&&(N.current.style.setProperty("--kendo-scrollview-views",`${e}`),N.current.style.setProperty("--kendo-scrollview-current",`${y}`))}),[x,y,K]),o.useEffect((()=>{if(k)return T(),I.current=setTimeout((()=>C((e=>e===x.length?w?1:e:e+1))),b),()=>{T()}}),[k,b,x.length,y,w]);const j=o.useCallback((e=>{switch(e.key){case a.KEYS.left:e.preventDefault(),V?L():S();break;case a.KEYS.right:e.preventDefault(),V?S():L();break;case a.KEYS.space:case a.KEYS.enter:e.preventDefault(),P(e)}}),[V,L,S]),q=o.useMemo((()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===p,"k-scrollview-dark":"dark"===p},r)),[r,p]),z=o.Children.map(v||null,((e,t)=>o.createElement("div",{className:"k-scrollview-view","aria-hidden":y!==t+1},e))),Y=o.useCallback((()=>{let e;return e=y>1,(w||e)&&x.length>0}),[y,x.length,w]),U=o.useCallback((()=>{let e;return e=y<x.length,(w||e)&&x.length>0}),[y,x.length,w]);return o.createElement("div",{className:q,style:c,ref:E,tabIndex:0,dir:K,onKeyDown:j},o.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:N},z),o.createElement("div",{className:"k-scrollview-elements"},h&&o.createElement(o.Fragment,null,Y()&&o.createElement("span",{className:"k-scrollview-prev","aria-label":O.toLanguageString(u,g[u]),role:"button",tabIndex:0,onClick:S,onKeyDown:j},o.createElement(a.IconWrap,{name:V?"chevron-right":"chevron-left",icon:V?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:L,onKeyDown:j},o.createElement(a.IconWrap,{name:V?"chevron-left":"chevron-right",icon:V?n.chevronLeftIcon:n.chevronRightIcon,size:"xxxlarge"}))),d&&o.createElement("div",{className:"k-scrollview-nav-wrap"},o.createElement("div",{className:"k-scrollview-nav"},x.map(((e,t)=>o.createElement("span",{className:a.classNames("k-link",{"k-primary":y===t+1}),key:t+1,onClick:()=>C(t+1)})))))),o.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}))}));v.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 m={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};v.displayName="KendoScrollView",e.ScrollView=v}));

package/messages.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="scrollview.previous",s="scrollview.next",t={[e]:"Previous",[s]:"Next"};exports.messages=t;exports.next=s;exports.previous=e;

package/messages.mjs

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+const e = "scrollview.previous", s = "scrollview.next", o = {
+  [e]: "Previous",
+  [s]: "Next"
+};
+export {
+  o as messages,
+  s as next,
+  e as previous
+};

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-scrollview",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1720767329,
+  publishDate: 1722844245,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-scrollview",
-  "version": "8.2.0-develop.8",
+  "version": "8.2.0",
   "description": "React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,7 +23,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "8.2.0-develop.8",
+    "@progress/kendo-react-common": "8.2.0",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"