@progress/kendo-react-scrollview 13.3.0 → 13.4.0-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/ScrollView.d.ts +54 -0
  2. package/ScrollViewProps.d.ts +136 -0
  3. package/dist/cdn/js/kendo-react-scrollview.js +1 -1
  4. package/index.d.mts +2 -180
  5. package/index.d.ts +2 -180
  6. package/messages.d.ts +22 -0
  7. package/package-metadata.d.ts +12 -0
  8. package/package-metadata.js +1 -1
  9. package/package-metadata.mjs +10 -16
  10. package/package.json +4 -4
package/ScrollView.d.ts ADDED
@@ -0,0 +1,54 @@
1
+ /**
2
+ * @license
3
+ *-------------------------------------------------------------------------------------------
4
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
5
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
6
+ *-------------------------------------------------------------------------------------------
7
+ */
8
+ import { ScrollViewProps } from './ScrollViewProps.js';
9
+ import * as React from 'react';
10
+ /**
11
+ * The ScrollView ref.
12
+ */
13
+ export interface ScrollViewHandle {
14
+ /**
15
+ * The ScrollView element.
16
+ */
17
+ element: HTMLDivElement | null;
18
+ /**
19
+ * Focus the ScrollView.
20
+ */
21
+ focus: () => void;
22
+ }
23
+ /**
24
+ * Represents the [KendoReact ScrollView component](https://www.telerik.com/kendo-react-ui/components/scrollview).
25
+ *
26
+ * @example
27
+ * ```jsx
28
+ * const App = () => {
29
+ * const items: any[] = [
30
+ * { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
31
+ * { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
32
+ * { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
33
+ * ];
34
+ * return (
35
+ * <ScrollView style={{width: 512, height: 384}}>
36
+ * {items.map((item, index) => {
37
+ * return (
38
+ * <div className="image-with-text" key={index}>
39
+ * <p>Showing image {item.position} of {items.length}.</p>
40
+ * <img
41
+ * src={item.url}
42
+ * alt={'Photo'}
43
+ * style={{width: 512, height: 384}}
44
+ * draggable={false}
45
+ * />
46
+ * </div>
47
+ * );
48
+ * })}
49
+ * </ScrollView>
50
+ * );
51
+ * };
52
+ * ```
53
+ */
54
+ export declare const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollViewHandle | null>>;
package/ScrollViewProps.d.ts ADDED
@@ -0,0 +1,136 @@
1
+ /**
2
+ * @license
3
+ *-------------------------------------------------------------------------------------------
4
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
5
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
6
+ *-------------------------------------------------------------------------------------------
7
+ */
8
+ /**
9
+ * Represents the props of the [KendoReact ScrollView component](https://www.telerik.com/kendo-react-ui/components/scrollview).
10
+ */
11
+ export interface ScrollViewProps {
12
+ /**
13
+ * Represents the current active view ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/active-view)).
14
+ * Defaults to `1`.
15
+ *
16
+ * @default 1
17
+ *
18
+ * @example
19
+ * ```jsx
20
+ * <ScrollView activeView={2} />
21
+ * ```
22
+ */
23
+ activeView?: number;
24
+ /**
25
+ * Enables or disables the built-in navigation arrows ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/arrows)).
26
+ * Defaults to `true`.
27
+ *
28
+ * @default true
29
+ *
30
+ * @example
31
+ * ```jsx
32
+ * <ScrollView arrows={false} />
33
+ * ```
34
+ */
35
+ arrows?: boolean;
36
+ /**
37
+ * Allows the ScrollView to switch the next page automatically after a short delay ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/automatic-scrolling)).
38
+ * Defaults to `true`.
39
+ *
40
+ * @default true
41
+ *
42
+ * @example
43
+ * ```jsx
44
+ * <ScrollView automaticViewChange={false} />
45
+ * ```
46
+ */
47
+ automaticViewChange?: boolean;
48
+ /**
49
+ * Defines the automatic page change delay in milliseconds ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/automatic-scrolling)).
50
+ * Defaults to `5000`.
51
+ *
52
+ * @default 5000
53
+ *
54
+ * @example
55
+ * ```jsx
56
+ * <ScrollView automaticViewChangeInterval={3000} />
57
+ * ```
58
+ */
59
+ automaticViewChangeInterval?: number;
60
+ /**
61
+ * Sets the ScrollView children elements.
62
+ *
63
+ * @example
64
+ * ```jsx
65
+ * <ScrollView>
66
+ * <div>Page 1</div>
67
+ * <div>Page 2</div>
68
+ * </ScrollView>
69
+ * ```
70
+ */
71
+ children?: React.ReactNode;
72
+ /**
73
+ * Specifies a list of CSS classes that will be added to the ScrollView.
74
+ *
75
+ * @example
76
+ * ```jsx
77
+ * <ScrollView className="custom-scrollview" />
78
+ * ```
79
+ */
80
+ className?: string;
81
+ /**
82
+ * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
83
+ *
84
+ * @example
85
+ * ```jsx
86
+ * <ScrollView dir="rtl" />
87
+ * ```
88
+ */
89
+ dir?: string;
90
+ /**
91
+ * Toggles the endless scrolling mode in which the data items are endlessly looped
92
+ * ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/endless-scrolling)). Defaults to `false`.
93
+ *
94
+ * @default false
95
+ *
96
+ * @example
97
+ * ```jsx
98
+ * <ScrollView endless={true} />
99
+ * ```
100
+ */
101
+ endless?: boolean;
102
+ /**
103
+ * Toggles the built-in pager ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/paging)). Defaults to `true`.
104
+ *
105
+ * @default true
106
+ *
107
+ * @example
108
+ * ```jsx
109
+ * <ScrollView pageable={false} />
110
+ * ```
111
+ */
112
+ pageable?: boolean;
113
+ /**
114
+ * Sets the pager overlay ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/paging)).
115
+ *
116
+ * The possible values are:
117
+ * * `none`(Default) &mdash; No overlay is set.
118
+ * * `dark` &mdash; Dark overlay is set.
119
+ * * `light` &mdash; Light overlay is set.
120
+ *
121
+ * @example
122
+ * ```jsx
123
+ * <ScrollView pagerOverlay="dark" />
124
+ * ```
125
+ */
126
+ pagerOverlay?: 'dark' | 'light' | 'none';
127
+ /**
128
+ * Sets additional CSS styles to the ScrollView.
129
+ *
130
+ * @example
131
+ * ```jsx
132
+ * <ScrollView style={{ width: '100%' }} />
133
+ * ```
134
+ */
135
+ style?: React.CSSProperties;
136
+ }
package/dist/cdn/js/kendo-react-scrollview.js CHANGED
@@ -12,4 +12,4 @@
12
12
  * Licensed under commercial license. See LICENSE.md in the package root for more information
13
13
  *-------------------------------------------------------------------------------------------
14
14
  */
15
- !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=Object.freeze({name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.3.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),i="scrollview.previous",u="scrollview.next",g={[i]:"Previous",[u]:"Next"},m=o.forwardRef(((e,t)=>{const r=!a.validatePackage(s,{component:"ScrollView"}),c=a.getLicenseMessage(s),{className:m,style:p,children:d,pagerOverlay:h=v.pageOverlay,pageable:w=v.pageable,arrows:f=v.arrows,endless:k=v.endless,activeView:b=v.activeView,automaticViewChange:y=v.automaticViewChange,automaticViewChangeInterval:C=v.automaticViewChangeInterval}=e,[E,N]=o.useState(b||1),I=o.useRef(null),x=o.useRef(null),V=o.useRef(null),K=o.Children.toArray(d),O=a.useRtl(I,e.dir),R="rtl"===O,S=l.useLocalization(),D=o.useCallback((()=>{I.current&&I.current.focus()}),[]),j=o.useCallback((()=>({element:I.current,focus:D})),[D]);o.useImperativeHandle(t,j);const L=o.useCallback((()=>{k?N(E>1?E-1:K.length):E>1&&N(E-1)}),[E,K.length,k]),T=o.useCallback((()=>{k?E<K.length?N(E+1):N(1):E<K.length&&N(E+1)}),[E,K.length,k]),P=o.useCallback((e=>{var t,r;const a=e.target;a.classList.contains("k-scrollview-prev")?(L(),!((k||E>2)&&K.length>0)&&(null==(t=I.current)||t.focus())):a.classList.contains("k-scrollview-next")&&(T(),!((k||E<K.length-1)&&K.length>0)&&(null==(r=I.current)||r.focus()))}),[E,K.length,k]);function q(){V.current&&clearTimeout(V.current)}o.useEffect((()=>{const e=K.length;x.current&&(x.current.style.setProperty("--kendo-scrollview-views",`${e}`),x.current.style.setProperty("--kendo-scrollview-current",`${E}`))}),[K,E,O]),o.useEffect((()=>{if(y)return q(),V.current=setTimeout((()=>N((e=>e===K.length?k?1:e:e+1))),C),()=>{q()}}),[y,C,K.length,E,k]);const z=o.useCallback((e=>{switch(e.key){case a.KEYS.left:e.preventDefault(),R?T():L();break;case a.KEYS.right:e.preventDefault(),R?L():T();break;case a.KEYS.space:case a.KEYS.enter:e.preventDefault(),P(e)}}),[R,T,L]),Y=o.useMemo((()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===h,"k-scrollview-dark":"dark"===h},m)),[m,h]),A=o.Children.map(d||null,((e,t)=>o.createElement("div",{className:"k-scrollview-view","aria-hidden":E!==t+1},e))),U=o.useCallback((()=>{let e;return e=E>1,(k||e)&&K.length>0}),[E,K.length,k]),W=o.useCallback((()=>{let e;return e=E<K.length,(k||e)&&K.length>0}),[E,K.length,k]);return o.createElement("div",{className:Y,style:p,ref:I,tabIndex:0,dir:O,onKeyDown:z},o.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:x},A),o.createElement("div",{className:"k-scrollview-elements"},f&&o.createElement(o.Fragment,null,U()&&o.createElement("span",{className:"k-scrollview-prev","aria-label":S.toLanguageString(u,g[u]),role:"button",tabIndex:0,onClick:L,onKeyDown:z},o.createElement(a.IconWrap,{name:R?"chevron-right":"chevron-left",icon:R?n.chevronRightIcon:n.chevronLeftIcon,size:"xxxlarge"})),W()&&o.createElement("span",{className:"k-scrollview-next","aria-label":S.toLanguageString(i,g[i]),role:"button",tabIndex:0,onClick:T,onKeyDown:z},o.createElement(a.IconWrap,{name:R?"chevron-left":"chevron-right",icon:R?n.chevronLeftIcon:n.chevronRightIcon,size:"xxxlarge"}))),w&&o.createElement("div",{className:"k-scrollview-nav-wrap"},o.createElement("div",{className:"k-scrollview-nav"},K.map(((e,t)=>o.createElement("span",{className:a.classNames("k-link",{"k-primary":E===t+1}),key:t+1,onClick:()=>N(t+1)})))))),o.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}),r&&o.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}));
15
+ !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=Object.freeze({name:"@progress/kendo-react-scrollview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.4.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),i="scrollview.previous",u="scrollview.next",g={[i]:"Previous",[u]:"Next"},m=o.forwardRef((e,t)=>{const r=!a.validatePackage(s,{component:"ScrollView"}),c=a.getLicenseMessage(s),{className:m,style:p,children:d,pagerOverlay:h=v.pageOverlay,pageable:w=v.pageable,arrows:f=v.arrows,endless:k=v.endless,activeView:b=v.activeView,automaticViewChange:y=v.automaticViewChange,automaticViewChangeInterval:C=v.automaticViewChangeInterval}=e,[E,N]=o.useState(b||1),I=o.useRef(null),x=o.useRef(null),V=o.useRef(null),K=o.Children.toArray(d),O=a.useRtl(I,e.dir),R="rtl"===O,S=l.useLocalization(),D=o.useCallback(()=>{I.current&&I.current.focus()},[]),j=o.useCallback(()=>({element:I.current,focus:D}),[D]);o.useImperativeHandle(t,j);const L=o.useCallback(()=>{k?N(E>1?E-1:K.length):E>1&&N(E-1)},[E,K.length,k]),T=o.useCallback(()=>{k?E<K.length?N(E+1):N(1):E<K.length&&N(E+1)},[E,K.length,k]),P=o.useCallback(e=>{var t,r;const a=e.target;a.classList.contains("k-scrollview-prev")?(L(),!((k||E>2)&&K.length>0)&&(null==(t=I.current)||t.focus())):a.classList.contains("k-scrollview-next")&&(T(),!((k||E<K.length-1)&&K.length>0)&&(null==(r=I.current)||r.focus()))},[E,K.length,k]);function q(){V.current&&clearTimeout(V.current)}o.useEffect(()=>{const e=K.length;x.current&&(x.current.style.setProperty("--kendo-scrollview-views",`${e}`),x.current.style.setProperty("--kendo-scrollview-current",`${E}`))},[K,E,O]),o.useEffect(()=>{if(y)return q(),V.current=setTimeout(()=>N(e=>e===K.length?k?1:e:e+1),C),()=>{q()}},[y,C,K.length,E,k]);const z=o.useCallback(e=>{switch(e.key){case a.KEYS.left:e.preventDefault(),R?T():L();break;case a.KEYS.right:e.preventDefault(),R?L():T();break;case a.KEYS.space:case a.KEYS.enter:e.preventDefault(),P(e)}},[R,T,L]),Y=o.useMemo(()=>a.classNames("k-scrollview",{"k-scrollview-light":"light"===h,"k-scrollview-dark":"dark"===h},m),[m,h]),A=o.Children.map(d||null,(e,t)=>o.createElement("div",{className:"k-scrollview-view","aria-hidden":E!==t+1},e)),U=o.useCallback(()=>{let e;return e=E>1,(k||e)&&K.length>0},[E,K.length,k]),W=o.useCallback(()=>{let e;return e=E<K.length,(k||e)&&K.length>0},[E,K.length,k]);return o.createElement("div",{className:Y,style:p,ref:I,tabIndex:0,dir:O,onKeyDown:z},o.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:x},A),o.createElement("div",{className:"k-scrollview-elements"},f&&o.createElement(o.Fragment,null,U()&&o.createElement("span",{className:"k-scrollview-prev","aria-label":S.toLanguageString(u,g[u]),role:"button",tabIndex:0,onClick:L,onKeyDown:z},o.createElement(a.IconWrap,{name:R?"chevron-right":"chevron-left",icon:R?n.chevronRightIcon:n.chevronLeftIcon,size:"xxxlarge"})),W()&&o.createElement("span",{className:"k-scrollview-next","aria-label":S.toLanguageString(i,g[i]),role:"button",tabIndex:0,onClick:T,onKeyDown:z},o.createElement(a.IconWrap,{name:R?"chevron-left":"chevron-right",icon:R?n.chevronLeftIcon:n.chevronRightIcon,size:"xxxlarge"}))),w&&o.createElement("div",{className:"k-scrollview-nav-wrap"},o.createElement("div",{className:"k-scrollview-nav"},K.map((e,t)=>o.createElement("span",{className:a.classNames("k-link",{"k-primary":E===t+1}),key:t+1,onClick:()=>N(t+1)}))))),o.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}),r&&o.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});
package/index.d.mts CHANGED
@@ -5,183 +5,5 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import * as React_2 from 'react';
9
-
10
- /**
11
- * Represents the [KendoReact ScrollView component](https://www.telerik.com/kendo-react-ui/components/scrollview).
12
- *
13
- * @example
14
- * ```jsx
15
- * const App = () => {
16
- * const items: any[] = [
17
- * { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
18
- * { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
19
- * { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
20
- * ];
21
- * return (
22
- * <ScrollView style={{width: 512, height: 384}}>
23
- * {items.map((item, index) => {
24
- * return (
25
- * <div className="image-with-text" key={index}>
26
- * <p>Showing image {item.position} of {items.length}.</p>
27
- * <img
28
- * src={item.url}
29
- * alt={'Photo'}
30
- * style={{width: 512, height: 384}}
31
- * draggable={false}
32
- * />
33
- * </div>
34
- * );
35
- * })}
36
- * </ScrollView>
37
- * );
38
- * };
39
- * ```
40
- */
41
- export declare const ScrollView: React_2.ForwardRefExoticComponent<ScrollViewProps & React_2.RefAttributes<ScrollViewHandle | null>>;
42
-
43
- /**
44
- * The ScrollView ref.
45
- */
46
- export declare interface ScrollViewHandle {
47
- /**
48
- * The ScrollView element.
49
- */
50
- element: HTMLDivElement | null;
51
- /**
52
- * Focus the ScrollView.
53
- */
54
- focus: () => void;
55
- }
56
-
57
- /**
58
- * Represents the props of the [KendoReact ScrollView component](https://www.telerik.com/kendo-react-ui/components/scrollview).
59
- */
60
- export declare interface ScrollViewProps {
61
- /**
62
- * Represents the current active view ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/active-view)).
63
- * Defaults to `1`.
64
- *
65
- * @default 1
66
- *
67
- * @example
68
- * ```jsx
69
- * <ScrollView activeView={2} />
70
- * ```
71
- */
72
- activeView?: number;
73
- /**
74
- * Enables or disables the built-in navigation arrows ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/arrows)).
75
- * Defaults to `true`.
76
- *
77
- * @default true
78
- *
79
- * @example
80
- * ```jsx
81
- * <ScrollView arrows={false} />
82
- * ```
83
- */
84
- arrows?: boolean;
85
- /**
86
- * Allows the ScrollView to switch the next page automatically after a short delay ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/automatic-scrolling)).
87
- * Defaults to `true`.
88
- *
89
- * @default true
90
- *
91
- * @example
92
- * ```jsx
93
- * <ScrollView automaticViewChange={false} />
94
- * ```
95
- */
96
- automaticViewChange?: boolean;
97
- /**
98
- * Defines the automatic page change delay in milliseconds ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/automatic-scrolling)).
99
- * Defaults to `5000`.
100
- *
101
- * @default 5000
102
- *
103
- * @example
104
- * ```jsx
105
- * <ScrollView automaticViewChangeInterval={3000} />
106
- * ```
107
- */
108
- automaticViewChangeInterval?: number;
109
- /**
110
- * Sets the ScrollView children elements.
111
- *
112
- * @example
113
- * ```jsx
114
- * <ScrollView>
115
- * <div>Page 1</div>
116
- * <div>Page 2</div>
117
- * </ScrollView>
118
- * ```
119
- */
120
- children?: React.ReactNode;
121
- /**
122
- * Specifies a list of CSS classes that will be added to the ScrollView.
123
- *
124
- * @example
125
- * ```jsx
126
- * <ScrollView className="custom-scrollview" />
127
- * ```
128
- */
129
- className?: string;
130
- /**
131
- * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
132
- *
133
- * @example
134
- * ```jsx
135
- * <ScrollView dir="rtl" />
136
- * ```
137
- */
138
- dir?: string;
139
- /**
140
- * Toggles the endless scrolling mode in which the data items are endlessly looped
141
- * ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/endless-scrolling)). Defaults to `false`.
142
- *
143
- * @default false
144
- *
145
- * @example
146
- * ```jsx
147
- * <ScrollView endless={true} />
148
- * ```
149
- */
150
- endless?: boolean;
151
- /**
152
- * Toggles the built-in pager ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/paging)). Defaults to `true`.
153
- *
154
- * @default true
155
- *
156
- * @example
157
- * ```jsx
158
- * <ScrollView pageable={false} />
159
- * ```
160
- */
161
- pageable?: boolean;
162
- /**
163
- * Sets the pager overlay ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/paging)).
164
- *
165
- * The possible values are:
166
- * * `none`(Default) &mdash; No overlay is set.
167
- * * `dark` &mdash; Dark overlay is set.
168
- * * `light` &mdash; Light overlay is set.
169
- *
170
- * @example
171
- * ```jsx
172
- * <ScrollView pagerOverlay="dark" />
173
- * ```
174
- */
175
- pagerOverlay?: 'dark' | 'light' | 'none';
176
- /**
177
- * Sets additional CSS styles to the ScrollView.
178
- *
179
- * @example
180
- * ```jsx
181
- * <ScrollView style={{ width: '100%' }} />
182
- * ```
183
- */
184
- style?: React.CSSProperties;
185
- }
186
-
187
- export { }
8
+ export * from './ScrollView.js';
9
+ export * from './ScrollViewProps.js';
package/index.d.ts CHANGED
@@ -5,183 +5,5 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import * as React_2 from 'react';
9
-
10
- /**
11
- * Represents the [KendoReact ScrollView component](https://www.telerik.com/kendo-react-ui/components/scrollview).
12
- *
13
- * @example
14
- * ```jsx
15
- * const App = () => {
16
- * const items: any[] = [
17
- * { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
18
- * { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
19
- * { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
20
- * ];
21
- * return (
22
- * <ScrollView style={{width: 512, height: 384}}>
23
- * {items.map((item, index) => {
24
- * return (
25
- * <div className="image-with-text" key={index}>
26
- * <p>Showing image {item.position} of {items.length}.</p>
27
- * <img
28
- * src={item.url}
29
- * alt={'Photo'}
30
- * style={{width: 512, height: 384}}
31
- * draggable={false}
32
- * />
33
- * </div>
34
- * );
35
- * })}
36
- * </ScrollView>
37
- * );
38
- * };
39
- * ```
40
- */
41
- export declare const ScrollView: React_2.ForwardRefExoticComponent<ScrollViewProps & React_2.RefAttributes<ScrollViewHandle | null>>;
42
-
43
- /**
44
- * The ScrollView ref.
45
- */
46
- export declare interface ScrollViewHandle {
47
- /**
48
- * The ScrollView element.
49
- */
50
- element: HTMLDivElement | null;
51
- /**
52
- * Focus the ScrollView.
53
- */
54
- focus: () => void;
55
- }
56
-
57
- /**
58
- * Represents the props of the [KendoReact ScrollView component](https://www.telerik.com/kendo-react-ui/components/scrollview).
59
- */
60
- export declare interface ScrollViewProps {
61
- /**
62
- * Represents the current active view ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/active-view)).
63
- * Defaults to `1`.
64
- *
65
- * @default 1
66
- *
67
- * @example
68
- * ```jsx
69
- * <ScrollView activeView={2} />
70
- * ```
71
- */
72
- activeView?: number;
73
- /**
74
- * Enables or disables the built-in navigation arrows ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/arrows)).
75
- * Defaults to `true`.
76
- *
77
- * @default true
78
- *
79
- * @example
80
- * ```jsx
81
- * <ScrollView arrows={false} />
82
- * ```
83
- */
84
- arrows?: boolean;
85
- /**
86
- * Allows the ScrollView to switch the next page automatically after a short delay ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/automatic-scrolling)).
87
- * Defaults to `true`.
88
- *
89
- * @default true
90
- *
91
- * @example
92
- * ```jsx
93
- * <ScrollView automaticViewChange={false} />
94
- * ```
95
- */
96
- automaticViewChange?: boolean;
97
- /**
98
- * Defines the automatic page change delay in milliseconds ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/automatic-scrolling)).
99
- * Defaults to `5000`.
100
- *
101
- * @default 5000
102
- *
103
- * @example
104
- * ```jsx
105
- * <ScrollView automaticViewChangeInterval={3000} />
106
- * ```
107
- */
108
- automaticViewChangeInterval?: number;
109
- /**
110
- * Sets the ScrollView children elements.
111
- *
112
- * @example
113
- * ```jsx
114
- * <ScrollView>
115
- * <div>Page 1</div>
116
- * <div>Page 2</div>
117
- * </ScrollView>
118
- * ```
119
- */
120
- children?: React.ReactNode;
121
- /**
122
- * Specifies a list of CSS classes that will be added to the ScrollView.
123
- *
124
- * @example
125
- * ```jsx
126
- * <ScrollView className="custom-scrollview" />
127
- * ```
128
- */
129
- className?: string;
130
- /**
131
- * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
132
- *
133
- * @example
134
- * ```jsx
135
- * <ScrollView dir="rtl" />
136
- * ```
137
- */
138
- dir?: string;
139
- /**
140
- * Toggles the endless scrolling mode in which the data items are endlessly looped
141
- * ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/endless-scrolling)). Defaults to `false`.
142
- *
143
- * @default false
144
- *
145
- * @example
146
- * ```jsx
147
- * <ScrollView endless={true} />
148
- * ```
149
- */
150
- endless?: boolean;
151
- /**
152
- * Toggles the built-in pager ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/paging)). Defaults to `true`.
153
- *
154
- * @default true
155
- *
156
- * @example
157
- * ```jsx
158
- * <ScrollView pageable={false} />
159
- * ```
160
- */
161
- pageable?: boolean;
162
- /**
163
- * Sets the pager overlay ([see example](https://www.telerik.com/kendo-react-ui/components/scrollview/paging)).
164
- *
165
- * The possible values are:
166
- * * `none`(Default) &mdash; No overlay is set.
167
- * * `dark` &mdash; Dark overlay is set.
168
- * * `light` &mdash; Light overlay is set.
169
- *
170
- * @example
171
- * ```jsx
172
- * <ScrollView pagerOverlay="dark" />
173
- * ```
174
- */
175
- pagerOverlay?: 'dark' | 'light' | 'none';
176
- /**
177
- * Sets additional CSS styles to the ScrollView.
178
- *
179
- * @example
180
- * ```jsx
181
- * <ScrollView style={{ width: '100%' }} />
182
- * ```
183
- */
184
- style?: React.CSSProperties;
185
- }
186
-
187
- export { }
8
+ export * from './ScrollView.js';
9
+ export * from './ScrollViewProps.js';
package/messages.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ /**
2
+ * @license
3
+ *-------------------------------------------------------------------------------------------
4
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
5
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
6
+ *-------------------------------------------------------------------------------------------
7
+ */
8
+ /**
9
+ * @hidden
10
+ */
11
+ export declare const previous = "scrollview.previous";
12
+ /**
13
+ * @hidden
14
+ */
15
+ export declare const next = "scrollview.next";
16
+ /**
17
+ * @hidden
18
+ */
19
+ export declare const messages: {
20
+ "scrollview.previous": string;
21
+ "scrollview.next": string;
22
+ };
package/package-metadata.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ *-------------------------------------------------------------------------------------------
4
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
5
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
6
+ *-------------------------------------------------------------------------------------------
7
+ */
8
+ import { PackageMetadata } from '@progress/kendo-licensing';
9
+ /**
10
+ * @hidden
11
+ */
12
+ export declare const packageMetadata: PackageMetadata;
package/package-metadata.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "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: 1768550500,version:"13.3.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
8
+ "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: 1770219268,version:"13.4.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
package/package-metadata.mjs CHANGED
@@ -1,19 +1,13 @@
1
+ // Generated file. DO NOT EDIT.
1
2
  /**
2
- * @license
3
- *-------------------------------------------------------------------------------------------
4
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
5
- * Licensed under commercial license. See LICENSE.md in the package root for more information
6
- *-------------------------------------------------------------------------------------------
3
+ * @hidden
7
4
  */
8
- const e = Object.freeze({
9
- name: "@progress/kendo-react-scrollview",
10
- productName: "KendoReact",
11
- productCode: "KENDOUIREACT",
12
- productCodes: ["KENDOUIREACT"],
13
- publishDate: 1768550500,
14
- version: "13.3.0",
15
- licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
5
+ export const packageMetadata = Object.freeze({
6
+ name: '@progress/kendo-react-scrollview',
7
+ productName: 'KendoReact',
8
+ productCode: 'KENDOUIREACT',
9
+ productCodes: ['KENDOUIREACT'],
10
+ publishDate: 0,
11
+ version: '13.4.0-develop.1',
12
+ licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
16
13
  });
17
- export {
18
- e as packageMetadata
19
- };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-scrollview",
3
- "version": "13.3.0",
3
+ "version": "13.4.0-develop.1",
4
4
  "description": "React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView package",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -26,8 +26,8 @@
26
26
  "sideEffects": false,
27
27
  "peerDependencies": {
28
28
  "@progress/kendo-licensing": "^1.7.2",
29
- "@progress/kendo-react-common": "13.3.0",
30
- "@progress/kendo-react-intl": "13.3.0",
29
+ "@progress/kendo-react-common": "13.4.0-develop.1",
30
+ "@progress/kendo-react-intl": "13.4.0-develop.1",
31
31
  "@progress/kendo-svg-icons": "^4.0.0",
32
32
  "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
33
33
  "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -53,7 +53,7 @@
53
53
  "package": {
54
54
  "productName": "KendoReact",
55
55
  "productCode": "KENDOUIREACT",
56
- "publishDate": 1768550500,
56
+ "publishDate": 1770219268,
57
57
  "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
58
58
  }
59
59
  },