@progress/kendo-react-scrollview 14.5.0-develop.14 → 14.5.0-develop.15

package/ScrollView.js

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

package/ScrollView.mjs

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

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

@@ -12,4 +12,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"),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 s=c(t);const o=Object.freeze({name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.5.0-develop.14",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),i="scrollview.previous",u="scrollview.next",g={[i]:"Previous",[u]:"Next"},m=s.forwardRef((e,t)=>{const r=!a.validatePackage(o,{component:"ScrollView"}),c=a.getLicenseMessage(o),{className:m,style:p,children:d,pagerOverlay:w=v.pageOverlay,pageable:h=v.pageable,arrows:f=v.arrows,endless:k=v.endless,activeView:b=v.activeView,automaticViewChange:y=v.automaticViewChange,automaticViewChangeInterval:C=v.automaticViewChangeInterval}=e,[E,I]=s.useState(b||1),N=s.useRef(null),R=s.useRef(null),x=s.useRef(null),V=s.Children.toArray(d),K=a.useRtl(N,e.dir),O="rtl"===K,S=l.useLocalization(),D=s.useCallback(()=>{N.current&&N.current.focus()},[]),j=s.useCallback(()=>({element:N.current,focus:D}),[D]);s.useImperativeHandle(t,j);const L=s.useRef(null);s.useImperativeHandle(L,j),a.useWebMcpRegister("scrollview",L,e,e.webMcp);const T=s.useCallback(()=>{k?I(E>1?E-1:V.length):E>1&&I(E-1)},[E,V.length,k]),P=s.useCallback(()=>{k?E<V.length?I(E+1):I(1):E<V.length&&I(E+1)},[E,V.length,k]),q=s.useCallback(e=>{var t,r;const a=e.target;a.classList.contains("k-scrollview-prev")?(T(),!((k||E>2)&&V.length>0)&&(null==(t=N.current)||t.focus())):a.classList.contains("k-scrollview-next")&&(P(),!((k||E<V.length-1)&&V.length>0)&&(null==(r=N.current)||r.focus()))},[E,V.length,k]);function z(){x.current&&clearTimeout(x.current)}s.useEffect(()=>{const e=V.length;R.current&&(R.current.style.setProperty("--kendo-scrollview-views",`${e}`),R.current.style.setProperty("--kendo-scrollview-current",`${E}`))},[V,E,K]),s.useEffect(()=>{if(y)return z(),x.current=setTimeout(()=>I(e=>e===V.length?k?1:e:e+1),C),()=>{z()}},[y,C,V.length,E,k]);const M=s.useCallback(e=>{switch(e.key){case a.KEYS.left:e.preventDefault(),O?P():T();break;case a.KEYS.right:e.preventDefault(),O?T():P();break;case a.KEYS.space:case a.KEYS.enter:e.preventDefault(),q(e)}},[O,P,T]),W=s.useMemo(()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===w,"k-scrollview-dark":"dark"===w},m),[m,w]),Y=s.Children.map(d||null,(e,t)=>s.createElement("div",{className:"k-scrollview-view","aria-hidden":E!==t+1},e)),A=s.useCallback(()=>{let e;return e=E>1,(k||e)&&V.length>0},[E,V.length,k]),U=s.useCallback(()=>{let e;return e=E<V.length,(k||e)&&V.length>0},[E,V.length,k]);return s.createElement("div",{className:W,style:p,ref:N,tabIndex:0,dir:K,onKeyDown:M},s.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:R},Y),s.createElement("div",{className:"k-scrollview-elements"},f&&s.createElement(s.Fragment,null,A()&&s.createElement("span",{className:"k-scrollview-prev","aria-label":S.toLanguageString(i,g[i]),role:"button",tabIndex:0,onClick:T,onKeyDown:M},s.createElement(a.IconWrap,{name:O?"chevron-right":"chevron-left",icon:O?n.chevronRightIcon:n.chevronLeftIcon,size:"xxxlarge"})),U()&&s.createElement("span",{className:"k-scrollview-next","aria-label":S.toLanguageString(u,g[u]),role:"button",tabIndex:0,onClick:P,onKeyDown:M},s.createElement(a.IconWrap,{name:O?"chevron-left":"chevron-right",icon:O?n.chevronLeftIcon:n.chevronRightIcon,size:"xxxlarge"}))),h&&s.createElement("div",{className:"k-scrollview-nav-wrap"},s.createElement("div",{className:"k-scrollview-nav"},V.map((e,t)=>s.createElement("span",{className:a.classNames("k-link",{"k-primary":E===t+1}),key:t+1,onClick:()=>I(t+1)}))))),s.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}),r&&s.createElement(a.WatermarkOverlay,{message:c}))});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});
+!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,l,n){"use strict";function o(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 s=o(t);const c=Object.freeze({name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.5.0-develop.15",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),i="scrollview.previous",u="scrollview.next",g="scrollview.slideAriaRoleDescription",p="scrollview.carouselAriaRoleDescription",v={[i]:"Previous",[u]:"Next",[g]:"slide",[p]:"carousel"},m=s.forwardRef((e,t)=>{const r=!a.validatePackage(c,{component:"ScrollView"}),o=a.getLicenseMessage(c),{className:m,style:w,children:h,pagerOverlay:f=d.pageOverlay,pageable:k=d.pageable,arrows:b=d.arrows,endless:y=d.endless,activeView:C=d.activeView,automaticViewChange:E=d.automaticViewChange,automaticViewChangeInterval:I=d.automaticViewChangeInterval}=e,[N,R]=s.useState(C||1),x=s.useRef(null),V=s.useRef(null),K=s.useRef(null),O=s.Children.toArray(h),S=a.useRtl(x,e.dir),D="rtl"===S,L=s.useId(),j=n.useLocalization(),T=j.toLanguageString(g,v[g]),P=j.toLanguageString(p,v[p]),q=s.useCallback(()=>{x.current&&x.current.focus()},[]),z=s.useCallback(()=>({element:x.current,focus:q}),[q]);s.useImperativeHandle(t,z);const A=s.useRef(null);s.useImperativeHandle(A,z),a.useWebMcpRegister("scrollview",A,e,e.webMcp);const M=s.useCallback(()=>{y?R(N>1?N-1:O.length):N>1&&R(N-1)},[N,O.length,y]),W=s.useCallback(()=>{y?N<O.length?R(N+1):R(1):N<O.length&&R(N+1)},[N,O.length,y]),Y=s.useCallback(e=>{var t,r;const a=e.target;a.classList.contains("k-scrollview-prev")?(M(),!((y||N>2)&&O.length>0)&&(null==(t=x.current)||t.focus())):a.classList.contains("k-scrollview-next")&&(W(),!((y||N<O.length-1)&&O.length>0)&&(null==(r=x.current)||r.focus()))},[N,O.length,y]);function U(){K.current&&clearTimeout(K.current)}s.useEffect(()=>{const e=O.length;V.current&&(V.current.style.setProperty("--kendo-scrollview-views",`${e}`),V.current.style.setProperty("--kendo-scrollview-current",`${N}`))},[O,N,S]),s.useEffect(()=>{if(E)return U(),K.current=setTimeout(()=>R(e=>e===O.length?y?1:e:e+1),I),()=>{U()}},[E,I,O.length,N,y]);const $=s.useCallback(e=>{switch(e.key){case a.KEYS.left:e.preventDefault(),D?W():M();break;case a.KEYS.right:e.preventDefault(),D?M():W();break;case a.KEYS.space:case a.KEYS.enter:e.preventDefault(),Y(e)}},[D,W,M]),H=s.useMemo(()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===f,"k-scrollview-dark":"dark"===f},m),[m,f]),F=s.Children.map(h||null,(e,t)=>s.createElement("div",{className:"k-scrollview-view",role:"listitem","aria-roledescription":T},e)),B=s.useCallback(()=>{let e;return e=N>1,(y||e)&&O.length>0},[N,O.length,y]),G=s.useCallback(()=>{let e;return e=N<O.length,(y||e)&&O.length>0},[N,O.length,y]);return s.createElement("div",{className:H,style:w,ref:x,tabIndex:0,dir:S,onKeyDown:$,role:"application","aria-roledescription":P},s.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:V,id:L,role:"list"},F),s.createElement("div",{className:"k-scrollview-elements"},b&&s.createElement(s.Fragment,null,B()&&s.createElement("span",{className:"k-scrollview-prev","aria-label":j.toLanguageString(i,v[i]),role:"button",tabIndex:0,onClick:M,onKeyDown:$,"aria-controls":L},s.createElement(a.IconWrap,{name:D?"chevron-right":"chevron-left",icon:D?l.chevronRightIcon:l.chevronLeftIcon,size:"xxxlarge"})),G()&&s.createElement("span",{className:"k-scrollview-next","aria-label":j.toLanguageString(u,v[u]),role:"button",tabIndex:0,onClick:W,onKeyDown:$,"aria-controls":L},s.createElement(a.IconWrap,{name:D?"chevron-left":"chevron-right",icon:D?l.chevronLeftIcon:l.chevronRightIcon,size:"xxxlarge"}))),k&&s.createElement("div",{className:"k-scrollview-nav-wrap"},s.createElement("div",{className:"k-scrollview-nav"},O.map((e,t)=>s.createElement("span",{className:a.classNames("k-link",{"k-primary":N===t+1}),key:t+1,onClick:()=>R(t+1)}))))),s.createElement("div",{"aria-live":"polite",className:"k-sr-only"}),r&&s.createElement(a.WatermarkOverlay,{message:o}))});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 d={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};m.displayName="KendoScrollView",e.ScrollView=m});

package/messages.d.ts

@@ -13,10 +13,20 @@ export declare const previous = "scrollview.previous";
  * @hidden
  */
 export declare const next = "scrollview.next";
+/**
+ * @hidden
+ */
+export declare const slideAriaRoleDescription = "scrollview.slideAriaRoleDescription";
+/**
+ * @hidden
+ */
+export declare const carouselAriaRoleDescription = "scrollview.carouselAriaRoleDescription";
 /**
  * @hidden
  */
 export declare const messages: {
     "scrollview.previous": string;
     "scrollview.next": string;
+    "scrollview.slideAriaRoleDescription": string;
+    "scrollview.carouselAriaRoleDescription": string;
 };

package/messages.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="scrollview.previous",s="scrollview.next",o={[e]:"Previous",[s]:"Next"};exports.messages=o;exports.next=s;exports.previous=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="scrollview.previous",s="scrollview.next",i="scrollview.slideAriaRoleDescription",o="scrollview.carouselAriaRoleDescription",r={[e]:"Previous",[s]:"Next",[i]:"slide",[o]:"carousel"};exports.carouselAriaRoleDescription=o;exports.messages=r;exports.next=s;exports.previous=e;exports.slideAriaRoleDescription=i;

package/messages.mjs

@@ -5,12 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-const e = "scrollview.previous", s = "scrollview.next", o = {
+const e = "scrollview.previous", s = "scrollview.next", o = "scrollview.slideAriaRoleDescription", i = "scrollview.carouselAriaRoleDescription", r = {
   [e]: "Previous",
-  [s]: "Next"
+  [s]: "Next",
+  [o]: "slide",
+  [i]: "carousel"
 };
 export {
-  o as messages,
+  i as carouselAriaRoleDescription,
+  r as messages,
   s as next,
-  e as previous
+  e as previous,
+  o as slideAriaRoleDescription
 };

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1778745850,version:"14.5.0-develop.14",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1778773534,version:"14.5.0-develop.15",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
     productName: 'KendoReact',
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
-    publishDate: 1778745850,
-    version: '14.5.0-develop.14',
+    publishDate: 1778773534,
+    version: '14.5.0-develop.15',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-scrollview",
-  "version": "14.5.0-develop.14",
+  "version": "14.5.0-develop.15",
   "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",
@@ -26,8 +26,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-common": "14.5.0-develop.14",
-    "@progress/kendo-react-intl": "14.5.0-develop.14",
+    "@progress/kendo-react-common": "14.5.0-develop.15",
+    "@progress/kendo-react-intl": "14.5.0-develop.15",
     "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -53,7 +53,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1778745850,
+      "publishDate": 1778773534,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },