@progress/kendo-react-scrollview 7.2.4-develop.3 → 7.3.0-develop.1

package/ScrollView.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 M=require("react"),r=require("prop-types"),o=require("@progress/kendo-react-common"),A=require("./package-metadata.js"),p=require("@progress/kendo-svg-icons");function _(c){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const f=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(m,i,f.get?f:{enumerable:!0,get:()=>c[i]})}}return m.default=c,Object.freeze(m)}const e=_(M),k=e.forwardRef((c,m)=>{o.validatePackage(A.packageMetadata);const{className:i,style:f,children:N,pagerOverlay:b,pageable:O,arrows:P,endless:n,activeView:S,automaticViewChange:E,automaticViewChangeInterval:R}=c,[t,s]=e.useState(S||1),g=e.useRef(null),d=e.useRef(null),y=e.useRef(null),l=e.Children.toArray(N),C=o.useRtl(g,c.dir),u=C==="rtl",I=e.useCallback(()=>{g.current&&g.current.focus()},[]),T=e.useCallback(()=>({element:g.current,focus:I}),[I]);e.useImperativeHandle(m,T);const h=e.useCallback(()=>{n?t>1?s(t-1):s(l.length):t>1&&s(t-1)},[t,l.length,n]),w=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;d.current&&(d.current.style.setProperty("--kendo-scrollview-views",`${a}`),d.current.style.setProperty("--kendo-scrollview-current",`${t}`))},[l,t,C]);function V(){y.current&&clearTimeout(y.current)}e.useEffect(()=>{if(E)return V(),y.current=setTimeout(()=>s(a=>a===l.length?n?1:a:a+1),R),()=>{V()}},[E,R,l.length,t,n]);const j=e.useCallback(a=>{switch(a.keyCode){case o.Keys.left:a.preventDefault(),u?w():h();break;case o.Keys.right:a.preventDefault(),u?h():w();break}},[u,w,h]),D=e.useMemo(()=>o.classNames("k-scrollview",{"k-scrollview-light":b==="light","k-scrollview-dark":b==="dark"},i),[i,b]),q=e.Children.map(N||null,(a,v)=>e.createElement("div",{className:"k-scrollview-view","aria-hidden":t!==v+1},a)),x=e.useCallback(()=>{let a;return a=t>1,(n||a)&&l.length>0},[t,l.length,n]),K=e.useCallback(()=>{let a;return a=t<l.length,(n||a)&&l.length>0},[t,l.length,n]);return e.createElement("div",{className:D,style:f,ref:g,tabIndex:0,dir:C,onKeyDown:j},e.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:d},q),e.createElement("div",{className:"k-scrollview-elements"},P&&e.createElement(e.Fragment,null,x()&&e.createElement("span",{className:"k-scrollview-prev","aria-label":"previous",onClick:h},e.createElement(o.IconWrap,{name:u?"chevron-right":"chevron-left",icon:u?p.chevronRightIcon:p.chevronLeftIcon,size:"xxxlarge"})),K()&&e.createElement("span",{className:"k-scrollview-next",onClick:w},e.createElement(o.IconWrap,{name:u?"chevron-left":"chevron-right",icon:u?p.chevronLeftIcon:p.chevronRightIcon,size:"xxxlarge"}))),O&&e.createElement("div",{className:"k-scrollview-nav-wrap"},e.createElement("div",{className:"k-scrollview-nav"},l.map((a,v)=>e.createElement("span",{className:o.classNames("k-link",{"k-primary":t===v+1}),key:v+1,onClick:()=>s(v+1)}))))))});k.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 z={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};k.defaultProps=z;k.displayName="KendoScrollView";exports.ScrollView=k;

package/ScrollView.mjs

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

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

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

package/index.d.mts

@@ -1,5 +1,117 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-export * from './index';
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React_2 from 'react';
+
+/**
+ * Represents the [KendoReact ScrollView component]({% slug overview_scrollview %}).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   const items: any[] = [
+ *     { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
+ *     { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
+ *     { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
+ *   ];
+ *   return (
+ *     <ScrollView style={{width: 512, height: 384}}>
+ *       {items.map((item, index) => {
+ *         return (
+ *           <div className="image-with-text" key={index}>
+ *             <p>Showing image {item.position} of {items.length}.</p>
+ *             <img
+ *               src={item.url}
+ *               alt={'Photo'}
+ *               style={{width: 512, height: 384}}
+ *               draggable={false}
+ *             />
+ *           </div>
+ *         );
+ *       })}
+ *     </ScrollView>
+ *   );
+ * };
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const ScrollView: React_2.ForwardRefExoticComponent<ScrollViewProps & React_2.RefAttributes<ScrollViewHandle | null>>;
+
+/**
+ * The ScrollView ref.
+ */
+export declare interface ScrollViewHandle {
+    /**
+     * The ScrollView element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focus the ScrollView.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the props of the [KendoReact ScrollView component]({% slug overview_scrollview %}).
+ */
+export declare interface ScrollViewProps {
+    /**
+     * Represents the current active view ([see example]({% slug activeview_scrollview %})). Defaults to `1`.
+     */
+    activeView?: number;
+    /**
+     * Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})). Defaults to `true`.
+     */
+    arrows?: boolean;
+    /**
+     * Allows the ScrollView to switch the next page automatically after a short delay ([see example]({% slug automatic_scrolling_scrollview %})).
+     * Defaults to `true`.
+     */
+    automaticViewChange?: boolean;
+    /**
+     * Defines the automatic page change delay in milliseconds ([see example]({% slug automatic_scrolling_scrollview %})).
+     * Defaults to `5000`.
+     */
+    automaticViewChangeInterval?: number;
+    /**
+     * Sets the ScrollView children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies a list of CSS classes that will be added to the ScrollView.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Toggles the endless scrolling mode in which the data items are endlessly looped
+     * ([see example]({% slug endlessscrolling_scrollview %})). Defaults to `false`.
+     */
+    endless?: boolean;
+    /**
+     * Toggles the built-in pager ([see example]({% slug paging_scrollview %})). Defaults to `true`.
+     */
+    pageable?: boolean;
+    /**
+     * Sets the pager overlay ([see example]({% slug paging_scrollview %})).
+     *
+     *  * The possible values are:
+     * * `none`(Default) &mdash; No overlay is set.
+     * * `dark` &mdash; Dark overlay is set.
+     * * `light` &mdash; Light overlay is set.
+     *
+     */
+    pagerOverlay?: 'dark' | 'light' | 'none';
+    /**
+     * Sets additional CSS styles to the ScrollView.
+     */
+    style?: React.CSSProperties;
+}
+
+export { }

package/index.d.ts

@@ -1,6 +1,117 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-export * from './ScrollView';
-export * from './ScrollViewProps';
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React_2 from 'react';
+
+/**
+ * Represents the [KendoReact ScrollView component]({% slug overview_scrollview %}).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   const items: any[] = [
+ *     { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
+ *     { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
+ *     { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
+ *   ];
+ *   return (
+ *     <ScrollView style={{width: 512, height: 384}}>
+ *       {items.map((item, index) => {
+ *         return (
+ *           <div className="image-with-text" key={index}>
+ *             <p>Showing image {item.position} of {items.length}.</p>
+ *             <img
+ *               src={item.url}
+ *               alt={'Photo'}
+ *               style={{width: 512, height: 384}}
+ *               draggable={false}
+ *             />
+ *           </div>
+ *         );
+ *       })}
+ *     </ScrollView>
+ *   );
+ * };
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const ScrollView: React_2.ForwardRefExoticComponent<ScrollViewProps & React_2.RefAttributes<ScrollViewHandle | null>>;
+
+/**
+ * The ScrollView ref.
+ */
+export declare interface ScrollViewHandle {
+    /**
+     * The ScrollView element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Focus the ScrollView.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the props of the [KendoReact ScrollView component]({% slug overview_scrollview %}).
+ */
+export declare interface ScrollViewProps {
+    /**
+     * Represents the current active view ([see example]({% slug activeview_scrollview %})). Defaults to `1`.
+     */
+    activeView?: number;
+    /**
+     * Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})). Defaults to `true`.
+     */
+    arrows?: boolean;
+    /**
+     * Allows the ScrollView to switch the next page automatically after a short delay ([see example]({% slug automatic_scrolling_scrollview %})).
+     * Defaults to `true`.
+     */
+    automaticViewChange?: boolean;
+    /**
+     * Defines the automatic page change delay in milliseconds ([see example]({% slug automatic_scrolling_scrollview %})).
+     * Defaults to `5000`.
+     */
+    automaticViewChangeInterval?: number;
+    /**
+     * Sets the ScrollView children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies a list of CSS classes that will be added to the ScrollView.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     */
+    dir?: string;
+    /**
+     * Toggles the endless scrolling mode in which the data items are endlessly looped
+     * ([see example]({% slug endlessscrolling_scrollview %})). Defaults to `false`.
+     */
+    endless?: boolean;
+    /**
+     * Toggles the built-in pager ([see example]({% slug paging_scrollview %})). Defaults to `true`.
+     */
+    pageable?: boolean;
+    /**
+     * Sets the pager overlay ([see example]({% slug paging_scrollview %})).
+     *
+     *  * The possible values are:
+     * * `none`(Default) &mdash; No overlay is set.
+     * * `dark` &mdash; Dark overlay is set.
+     * * `light` &mdash; Light overlay is set.
+     *
+     */
+    pagerOverlay?: 'dark' | 'light' | 'none';
+    /**
+     * Sets additional CSS styles to the ScrollView.
+     */
+    style?: React.CSSProperties;
+}
+
+export { }

package/index.js

@@ -1,5 +1,8 @@
-/**-----------------------------------------------------------------------------------------
-* 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 M=require("react"),a=require("prop-types"),o=require("@progress/kendo-react-common"),h=require("@progress/kendo-svg-icons");function q(c){const m=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(m,i,d.get?d:{enumerable:!0,get:()=>c[i]})}}return m.default=c,Object.freeze(m)}const e=q(M),L={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},k=e.forwardRef((c,m)=>{o.validatePackage(L);const{className:i,style:d,children:E,pagerOverlay:b,pageable:O,arrows:D,endless:n,activeView:P,automaticViewChange:N,automaticViewChangeInterval:R}=c,[t,s]=e.useState(P||1),g=e.useRef(null),f=e.useRef(null),y=e.useRef(null),r=e.Children.toArray(E),C=o.useRtl(g,c.dir),u=C==="rtl",I=e.useCallback(()=>{g.current&&g.current.focus()},[]),S=e.useCallback(()=>({element:g.current,focus:I}),[I]);e.useImperativeHandle(m,S);const p=e.useCallback(()=>{n?t>1?s(t-1):s(r.length):t>1&&s(t-1)},[t,r.length,n]),w=e.useCallback(()=>{n?t<r.length?s(t+1):s(1):t<r.length&&s(t+1)},[t,r.length,n]);e.useEffect(()=>{let l=r.length;f.current&&(f.current.style.setProperty("--kendo-scrollview-views",`${l}`),f.current.style.setProperty("--kendo-scrollview-current",`${t}`))},[r,t,C]);function V(){y.current&&clearTimeout(y.current)}e.useEffect(()=>{if(N)return V(),y.current=setTimeout(()=>s(l=>l===r.length?n?1:l:l+1),R),()=>{V()}},[N,R,r.length,t,n]);const T=e.useCallback(l=>{switch(l.keyCode){case o.Keys.left:l.preventDefault(),u?w():p();break;case o.Keys.right:l.preventDefault(),u?p():w();break}},[u,w,p]),K=e.useMemo(()=>o.classNames("k-scrollview",{"k-scrollview-light":b==="light","k-scrollview-dark":b==="dark"},i),[i,b]),j=e.Children.map(E||null,(l,v)=>e.createElement("div",{className:"k-scrollview-view","aria-hidden":t!==v+1},l)),x=e.useCallback(()=>{let l;return l=t>1,(n||l)&&r.length>0},[t,r.length,n]),A=e.useCallback(()=>{let l;return l=t<r.length,(n||l)&&r.length>0},[t,r.length,n]);return e.createElement("div",{className:K,style:d,ref:g,tabIndex:0,dir:C,onKeyDown:T},e.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:f},j),e.createElement("div",{className:"k-scrollview-elements"},D&&e.createElement(e.Fragment,null,x()&&e.createElement("span",{className:"k-scrollview-prev","aria-label":"previous",onClick:p},e.createElement(o.IconWrap,{name:u?"chevron-right":"chevron-left",icon:u?h.chevronRightIcon:h.chevronLeftIcon,size:"xxxlarge"})),A()&&e.createElement("span",{className:"k-scrollview-next",onClick:w},e.createElement(o.IconWrap,{name:u?"chevron-left":"chevron-right",icon:u?h.chevronLeftIcon:h.chevronRightIcon,size:"xxxlarge"}))),O&&e.createElement("div",{className:"k-scrollview-nav-wrap"},e.createElement("div",{className:"k-scrollview-nav"},r.map((l,v)=>e.createElement("span",{className:o.classNames("k-link",{"k-primary":t===v+1}),key:v+1,onClick:()=>s(v+1)}))))))});k.propTypes={activeView:a.number,arrows:a.bool,automaticViewChange:a.bool,automaticViewChangeInterval:a.number,children:a.any,className:a.string,dir:a.string,endless:a.bool,pageable:a.bool,pageOverlay:a.string,style:a.object};const _={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};k.defaultProps=_;k.displayName="KendoScrollView";exports.ScrollView=k;
+/**
+ * @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=require("./ScrollView.js");exports.ScrollView=e.ScrollView;

package/index.mjs

@@ -1,154 +1,12 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
+/**
+ * @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";
-import * as e from "react";
-import r from "prop-types";
-import { validatePackage as B, useRtl as H, Keys as N, classNames as R, IconWrap as V } from "@progress/kendo-react-common";
-import { chevronRightIcon as I, chevronLeftIcon as D } from "@progress/kendo-svg-icons";
-const $ = {
-  name: "@progress/kendo-react-scrollview",
-  productName: "KendoReact",
-  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1709632272,
-  version: "",
-  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
-}, d = e.forwardRef((f, K) => {
-  B($);
-  const {
-    className: h,
-    style: P,
-    children: k,
-    pagerOverlay: w,
-    pageable: T,
-    arrows: x,
-    endless: n,
-    activeView: O,
-    automaticViewChange: C,
-    automaticViewChangeInterval: y
-  } = f, [t, s] = e.useState(O || 1), o = e.useRef(null), m = e.useRef(null), g = e.useRef(null), a = e.Children.toArray(k), p = H(o, f.dir), c = p === "rtl", b = e.useCallback(
-    () => {
-      o.current && o.current.focus();
-    },
-    []
-  ), A = e.useCallback(
-    () => ({
-      element: o.current,
-      focus: b
-    }),
-    [b]
-  );
-  e.useImperativeHandle(K, A);
-  const u = e.useCallback(() => {
-    n ? t > 1 ? s(t - 1) : s(a.length) : t > 1 && s(t - 1);
-  }, [t, a.length, n]), v = e.useCallback(() => {
-    n ? t < a.length ? s(t + 1) : s(1) : t < a.length && s(t + 1);
-  }, [t, a.length, n]);
-  e.useEffect(() => {
-    let l = a.length;
-    m.current && (m.current.style.setProperty("--kendo-scrollview-views", `${l}`), m.current.style.setProperty("--kendo-scrollview-current", `${t}`));
-  }, [a, t, p]);
-  function E() {
-    g.current && clearTimeout(g.current);
-  }
-  e.useEffect(() => {
-    if (C)
-      return E(), g.current = setTimeout(
-        () => s((l) => l === a.length ? n ? 1 : l : l + 1),
-        y
-      ), () => {
-        E();
-      };
-  }, [C, y, a.length, t, n]);
-  const L = e.useCallback(
-    (l) => {
-      switch (l.keyCode) {
-        case N.left:
-          l.preventDefault(), c ? v() : u();
-          break;
-        case N.right:
-          l.preventDefault(), c ? u() : v();
-          break;
-      }
-    },
-    [c, v, u]
-  ), M = e.useMemo(
-    () => R(
-      "k-scrollview",
-      {
-        "k-scrollview-light": w === "light",
-        "k-scrollview-dark": w === "dark"
-      },
-      h
-    ),
-    [h, w]
-  ), S = e.Children.map(k || null, (l, i) => /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: "k-scrollview-view",
-      "aria-hidden": t !== i + 1
-    },
-    l
-  )), U = e.useCallback(() => {
-    let l;
-    return l = t > 1, (n || l) && a.length > 0;
-  }, [t, a.length, n]), z = e.useCallback(() => {
-    let l;
-    return l = t < a.length, (n || l) && a.length > 0;
-  }, [t, a.length, n]);
-  return /* @__PURE__ */ e.createElement("div", { className: M, style: P, ref: o, tabIndex: 0, dir: p, onKeyDown: L }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-wrap k-scrollview-animate", ref: m }, S), /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-elements" }, x && /* @__PURE__ */ e.createElement(e.Fragment, null, U() && /* @__PURE__ */ e.createElement("span", { className: "k-scrollview-prev", "aria-label": "previous", onClick: u }, /* @__PURE__ */ e.createElement(
-    V,
-    {
-      name: c ? "chevron-right" : "chevron-left",
-      icon: c ? I : D,
-      size: "xxxlarge"
-    }
-  )), z() && /* @__PURE__ */ e.createElement("span", { className: "k-scrollview-next", onClick: v }, /* @__PURE__ */ e.createElement(
-    V,
-    {
-      name: c ? "chevron-left" : "chevron-right",
-      icon: c ? D : I,
-      size: "xxxlarge"
-    }
-  ))), T && /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav-wrap" }, /* @__PURE__ */ e.createElement("div", { className: "k-scrollview-nav" }, a.map((l, i) => /* @__PURE__ */ e.createElement(
-    "span",
-    {
-      className: R(
-        "k-link",
-        {
-          "k-primary": t === i + 1
-        }
-      ),
-      key: i + 1,
-      onClick: () => s(i + 1)
-    }
-  ))))));
-});
-d.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 j = {
-  activeView: 1,
-  arrows: !0,
-  automaticViewChange: !0,
-  automaticViewChangeInterval: 5e3,
-  endless: !1,
-  pageable: !0,
-  pageOverlay: "none"
-};
-d.defaultProps = j;
-d.displayName = "KendoScrollView";
+import { ScrollView as o } from "./ScrollView.mjs";
 export {
-  d as ScrollView
+  o as ScrollView
 };

package/package-metadata.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={name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -0,0 +1,19 @@
+/**
+ * @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 = {
+  name: "@progress/kendo-react-scrollview",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1709715749,
+  version: "",
+  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
+};
+export {
+  e as packageMetadata
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-scrollview",
-  "version": "7.2.4-develop.3",
+  "version": "7.3.0-develop.1",
   "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": "7.2.4-develop.3",
+    "@progress/kendo-react-common": "7.3.0-develop.1",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/ScrollView.d.ts

@@ -1,52 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import { ScrollViewProps } from './ScrollViewProps';
-/**
- * The ScrollView ref.
- */
-export interface ScrollViewHandle {
-    /**
-     * The ScrollView element.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * Focus the ScrollView.
-     */
-    focus: () => void;
-}
-/**
- * Represents the [KendoReact ScrollView component]({% slug overview_scrollview %}).
- *
- * @example
- * ```jsx
- * const App = () => {
- *   const items: any[] = [
- *     { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
- *     { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
- *     { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
- *   ];
- *   return (
- *     <ScrollView style={{width: 512, height: 384}}>
- *       {items.map((item, index) => {
- *         return (
- *           <div className="image-with-text" key={index}>
- *             <p>Showing image {item.position} of {items.length}.</p>
- *             <img
- *               src={item.url}
- *               alt={'Photo'}
- *               style={{width: 512, height: 384}}
- *               draggable={false}
- *             />
- *           </div>
- *         );
- *       })}
- *     </ScrollView>
- *   );
- * };
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollViewHandle | null>>;

package/ScrollViewProps.d.ts

@@ -1,62 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * Represents the props of the [KendoReact ScrollView component]({% slug overview_scrollview %}).
- */
-export interface ScrollViewProps {
-    /**
-     * Represents the current active view ([see example]({% slug activeview_scrollview %})). Defaults to `1`.
-     */
-    activeView?: number;
-    /**
-     * Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})). Defaults to `true`.
-     */
-    arrows?: boolean;
-    /**
-     * Allows the ScrollView to switch the next page automatically after a short delay ([see example]({% slug automatic_scrolling_scrollview %})).
-     * Defaults to `true`.
-     */
-    automaticViewChange?: boolean;
-    /**
-     * Defines the automatic page change delay in milliseconds ([see example]({% slug automatic_scrolling_scrollview %})).
-     * Defaults to `5000`.
-     */
-    automaticViewChangeInterval?: number;
-    /**
-     * Sets the ScrollView children elements.
-     */
-    children?: React.ReactNode;
-    /**
-     * Specifies a list of CSS classes that will be added to the ScrollView.
-     */
-    className?: string;
-    /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
-     */
-    dir?: string;
-    /**
-     * Toggles the endless scrolling mode in which the data items are endlessly looped
-     * ([see example]({% slug endlessscrolling_scrollview %})). Defaults to `false`.
-     */
-    endless?: boolean;
-    /**
-     * Toggles the built-in pager ([see example]({% slug paging_scrollview %})). Defaults to `true`.
-     */
-    pageable?: boolean;
-    /**
-     * Sets the pager overlay ([see example]({% slug paging_scrollview %})).
-     *
-     *  * The possible values are:
-     * * `none`(Default) — No overlay is set.
-     * * `dark` — Dark overlay is set.
-     * * `light` — Light overlay is set.
-     *
-     */
-    pagerOverlay?: 'dark' | 'light' | 'none';
-    /**
-     * Sets additional CSS styles to the ScrollView.
-     */
-    style?: React.CSSProperties;
-}

package/package-metadata.d.ts

@@ -1,9 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import { PackageMetadata } from '@progress/kendo-licensing';
-/**
- * @hidden
- */
-export declare const packageMetadata: PackageMetadata;