@progress/kendo-react-scrollview 14.5.0-develop.9 → 15.0.0-develop.2
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.
- package/README.md +4 -4
- package/ScrollView.js +1 -1
- package/ScrollView.mjs +102 -81
- package/ScrollViewProps.d.ts +6 -0
- package/dist/cdn/js/kendo-react-scrollview.js +1 -1
- package/messages.d.ts +10 -0
- package/messages.js +1 -1
- package/messages.mjs +8 -4
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-scrollview&utm_content=banner)
|
|
1
|
+
[](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-scrollview&utm_content=banner)
|
|
2
2
|
|
|
3
3
|
# KendoReact ScrollView Component for React
|
|
4
4
|
|
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
>
|
|
13
13
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-scrollview) and speed up your development process!
|
|
14
14
|
>
|
|
15
|
-
> If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
15
|
+
> If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
|
|
16
16
|
|
|
17
17
|
## Using for Free vs Commercial License
|
|
18
18
|
|
|
19
19
|
The following table outlines the key resources available with KendoReact and KendoReact Free.
|
|
20
20
|
|
|
21
|
-
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
|
|
21
|
+
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
|
|
22
22
|
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
23
23
|
| React components | 50+ | 120+ |
|
|
24
24
|
| Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
|
|
@@ -41,7 +41,7 @@ For any issues you might encounter while working with the KendoReact ScrollView,
|
|
|
41
41
|
## Resources
|
|
42
42
|
|
|
43
43
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-scrollview)
|
|
44
|
-
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
44
|
+
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
|
|
45
45
|
- [Get Started with the KendoReact ScrollView](https://www.telerik.com/kendo-react-ui/components/scrollview/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-scrollview)
|
|
46
46
|
- [API Reference of the KendoReact ScrollView](https://www.telerik.com/kendo-react-ui/components/scrollview/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-scrollview)
|
|
47
47
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-scrollview)
|
package/ScrollView.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
|
|
8
|
+
"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
CHANGED
|
@@ -7,158 +7,179 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as e from "react";
|
|
9
9
|
import s from "prop-types";
|
|
10
|
-
import { validatePackage as
|
|
11
|
-
import { packageMetadata as
|
|
12
|
-
import { chevronRightIcon as
|
|
13
|
-
import { useLocalization as
|
|
14
|
-
import {
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
className:
|
|
18
|
-
style:
|
|
19
|
-
children:
|
|
20
|
-
pagerOverlay:
|
|
21
|
-
pageable:
|
|
22
|
-
arrows:
|
|
10
|
+
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";
|
|
11
|
+
import { packageMetadata as T } from "./package-metadata.mjs";
|
|
12
|
+
import { chevronRightIcon as O, chevronLeftIcon as z } from "@progress/kendo-svg-icons";
|
|
13
|
+
import { useLocalization as ie } from "@progress/kendo-react-intl";
|
|
14
|
+
import { slideAriaRoleDescription as W, messages as h, carouselAriaRoleDescription as H, previous as B, next as $ } from "./messages.mjs";
|
|
15
|
+
const j = e.forwardRef((p, F) => {
|
|
16
|
+
const Y = !re(T, { component: "ScrollView" }), _ = se(T), {
|
|
17
|
+
className: E,
|
|
18
|
+
style: q,
|
|
19
|
+
children: I,
|
|
20
|
+
pagerOverlay: d = m.pageOverlay,
|
|
21
|
+
pageable: G = m.pageable,
|
|
22
|
+
arrows: J = m.arrows,
|
|
23
23
|
endless: r = m.endless,
|
|
24
|
-
activeView:
|
|
25
|
-
automaticViewChange:
|
|
26
|
-
automaticViewChangeInterval:
|
|
27
|
-
} =
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
activeView: Q = m.activeView,
|
|
25
|
+
automaticViewChange: R = m.automaticViewChange,
|
|
26
|
+
automaticViewChangeInterval: N = m.automaticViewChangeInterval
|
|
27
|
+
} = 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(
|
|
28
|
+
W,
|
|
29
|
+
h[W]
|
|
30
|
+
), X = w.toLanguageString(
|
|
31
|
+
H,
|
|
32
|
+
h[H]
|
|
33
|
+
), V = e.useCallback(() => {
|
|
34
|
+
o.current && o.current.focus();
|
|
35
|
+
}, []), L = e.useCallback(
|
|
30
36
|
() => ({
|
|
31
|
-
element:
|
|
32
|
-
focus:
|
|
37
|
+
element: o.current,
|
|
38
|
+
focus: V
|
|
33
39
|
}),
|
|
34
|
-
[
|
|
40
|
+
[V]
|
|
35
41
|
);
|
|
36
|
-
e.useImperativeHandle(
|
|
42
|
+
e.useImperativeHandle(F, L);
|
|
43
|
+
const D = e.useRef(null);
|
|
44
|
+
e.useImperativeHandle(D, L), oe("scrollview", D, p, p.webMcp);
|
|
37
45
|
const u = e.useCallback(() => {
|
|
38
46
|
r ? a > 1 ? n(a - 1) : n(l.length) : a > 1 && n(a - 1);
|
|
39
47
|
}, [a, l.length, r]), g = e.useCallback(() => {
|
|
40
48
|
r ? a < l.length ? n(a + 1) : n(1) : a < l.length && n(a + 1);
|
|
41
|
-
}, [a, l.length, r]),
|
|
49
|
+
}, [a, l.length, r]), x = e.useCallback(
|
|
42
50
|
(t) => {
|
|
43
|
-
var
|
|
44
|
-
const
|
|
45
|
-
|
|
51
|
+
var A, P;
|
|
52
|
+
const i = t.target;
|
|
53
|
+
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()));
|
|
46
54
|
},
|
|
47
55
|
[a, l.length, r]
|
|
48
56
|
);
|
|
49
57
|
e.useEffect(() => {
|
|
50
58
|
const t = l.length;
|
|
51
59
|
v.current && (v.current.style.setProperty("--kendo-scrollview-views", `${t}`), v.current.style.setProperty("--kendo-scrollview-current", `${a}`));
|
|
52
|
-
}, [l, a,
|
|
53
|
-
function
|
|
54
|
-
|
|
60
|
+
}, [l, a, b]);
|
|
61
|
+
function S() {
|
|
62
|
+
k.current && clearTimeout(k.current);
|
|
55
63
|
}
|
|
56
64
|
e.useEffect(() => {
|
|
57
|
-
if (
|
|
58
|
-
return
|
|
65
|
+
if (R)
|
|
66
|
+
return S(), k.current = setTimeout(
|
|
59
67
|
() => n((t) => t === l.length ? r ? 1 : t : t + 1),
|
|
60
|
-
|
|
68
|
+
N
|
|
61
69
|
), () => {
|
|
62
|
-
|
|
70
|
+
S();
|
|
63
71
|
};
|
|
64
|
-
}, [
|
|
65
|
-
const
|
|
72
|
+
}, [R, N, l.length, a, r]);
|
|
73
|
+
const C = e.useCallback(
|
|
66
74
|
(t) => {
|
|
67
75
|
switch (t.key) {
|
|
68
|
-
case
|
|
69
|
-
t.preventDefault(),
|
|
76
|
+
case f.left:
|
|
77
|
+
t.preventDefault(), c ? g() : u();
|
|
70
78
|
break;
|
|
71
|
-
case
|
|
72
|
-
t.preventDefault(),
|
|
79
|
+
case f.right:
|
|
80
|
+
t.preventDefault(), c ? u() : g();
|
|
73
81
|
break;
|
|
74
|
-
case
|
|
75
|
-
t.preventDefault(),
|
|
82
|
+
case f.space:
|
|
83
|
+
t.preventDefault(), x(t);
|
|
76
84
|
break;
|
|
77
|
-
case
|
|
78
|
-
t.preventDefault(),
|
|
85
|
+
case f.enter:
|
|
86
|
+
t.preventDefault(), x(t);
|
|
79
87
|
break;
|
|
80
88
|
}
|
|
81
89
|
},
|
|
82
|
-
[
|
|
83
|
-
),
|
|
84
|
-
() =>
|
|
90
|
+
[c, g, u]
|
|
91
|
+
), Z = e.useMemo(
|
|
92
|
+
() => K(
|
|
85
93
|
"k-scrollview",
|
|
86
94
|
{
|
|
87
|
-
"k-scrollview-light":
|
|
88
|
-
"k-scrollview-dark":
|
|
95
|
+
"k-scrollview-light": d === "light",
|
|
96
|
+
"k-scrollview-dark": d === "dark"
|
|
89
97
|
},
|
|
90
|
-
|
|
98
|
+
E
|
|
91
99
|
),
|
|
92
|
-
[
|
|
93
|
-
),
|
|
100
|
+
[E, d]
|
|
101
|
+
), 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(() => {
|
|
94
102
|
let t;
|
|
95
103
|
return t = a > 1, (r || t) && l.length > 0;
|
|
96
|
-
}, [a, l.length, r]),
|
|
104
|
+
}, [a, l.length, r]), ae = e.useCallback(() => {
|
|
97
105
|
let t;
|
|
98
106
|
return t = a < l.length, (r || t) && l.length > 0;
|
|
99
107
|
}, [a, l.length, r]);
|
|
100
108
|
return /* @__PURE__ */ e.createElement(
|
|
101
109
|
"div",
|
|
102
110
|
{
|
|
103
|
-
className:
|
|
104
|
-
style:
|
|
105
|
-
ref:
|
|
111
|
+
className: Z,
|
|
112
|
+
style: q,
|
|
113
|
+
ref: o,
|
|
106
114
|
tabIndex: 0,
|
|
107
|
-
dir:
|
|
108
|
-
onKeyDown:
|
|
115
|
+
dir: b,
|
|
116
|
+
onKeyDown: C,
|
|
117
|
+
role: "application",
|
|
118
|
+
"aria-roledescription": X
|
|
109
119
|
},
|
|
110
|
-
/* @__PURE__ */ e.createElement(
|
|
111
|
-
|
|
120
|
+
/* @__PURE__ */ e.createElement(
|
|
121
|
+
"div",
|
|
122
|
+
{
|
|
123
|
+
className: "k-scrollview-wrap k-scrollview-animate",
|
|
124
|
+
ref: v,
|
|
125
|
+
id: y,
|
|
126
|
+
role: "list"
|
|
127
|
+
},
|
|
128
|
+
ee
|
|
129
|
+
),
|
|
130
|
+
/* @__PURE__ */ e.createElement("div", { className: "k-scrollview-elements" }, J && /* @__PURE__ */ e.createElement(e.Fragment, null, te() && /* @__PURE__ */ e.createElement(
|
|
112
131
|
"span",
|
|
113
132
|
{
|
|
114
133
|
className: "k-scrollview-prev",
|
|
115
|
-
"aria-label":
|
|
134
|
+
"aria-label": w.toLanguageString(B, h[B]),
|
|
116
135
|
role: "button",
|
|
117
136
|
tabIndex: 0,
|
|
118
137
|
onClick: u,
|
|
119
|
-
onKeyDown:
|
|
138
|
+
onKeyDown: C,
|
|
139
|
+
"aria-controls": y
|
|
120
140
|
},
|
|
121
141
|
/* @__PURE__ */ e.createElement(
|
|
122
|
-
|
|
142
|
+
M,
|
|
123
143
|
{
|
|
124
|
-
name:
|
|
125
|
-
icon:
|
|
144
|
+
name: c ? "chevron-right" : "chevron-left",
|
|
145
|
+
icon: c ? O : z,
|
|
126
146
|
size: "xxxlarge"
|
|
127
147
|
}
|
|
128
148
|
)
|
|
129
|
-
),
|
|
149
|
+
), ae() && /* @__PURE__ */ e.createElement(
|
|
130
150
|
"span",
|
|
131
151
|
{
|
|
132
152
|
className: "k-scrollview-next",
|
|
133
|
-
"aria-label":
|
|
153
|
+
"aria-label": w.toLanguageString($, h[$]),
|
|
134
154
|
role: "button",
|
|
135
155
|
tabIndex: 0,
|
|
136
156
|
onClick: g,
|
|
137
|
-
onKeyDown:
|
|
157
|
+
onKeyDown: C,
|
|
158
|
+
"aria-controls": y
|
|
138
159
|
},
|
|
139
160
|
/* @__PURE__ */ e.createElement(
|
|
140
|
-
|
|
161
|
+
M,
|
|
141
162
|
{
|
|
142
|
-
name:
|
|
143
|
-
icon:
|
|
163
|
+
name: c ? "chevron-left" : "chevron-right",
|
|
164
|
+
icon: c ? z : O,
|
|
144
165
|
size: "xxxlarge"
|
|
145
166
|
}
|
|
146
167
|
)
|
|
147
|
-
)),
|
|
168
|
+
)), 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(
|
|
148
169
|
"span",
|
|
149
170
|
{
|
|
150
|
-
className:
|
|
151
|
-
"k-primary": a ===
|
|
171
|
+
className: K("k-link", {
|
|
172
|
+
"k-primary": a === i + 1
|
|
152
173
|
}),
|
|
153
|
-
key:
|
|
154
|
-
onClick: () => n(
|
|
174
|
+
key: i + 1,
|
|
175
|
+
onClick: () => n(i + 1)
|
|
155
176
|
}
|
|
156
177
|
))))),
|
|
157
|
-
/* @__PURE__ */ e.createElement("div", { "aria-live": "polite",
|
|
158
|
-
|
|
178
|
+
/* @__PURE__ */ e.createElement("div", { "aria-live": "polite", className: "k-sr-only" }),
|
|
179
|
+
Y && /* @__PURE__ */ e.createElement(ce, { message: _ })
|
|
159
180
|
);
|
|
160
181
|
});
|
|
161
|
-
|
|
182
|
+
j.propTypes = {
|
|
162
183
|
activeView: s.number,
|
|
163
184
|
arrows: s.bool,
|
|
164
185
|
automaticViewChange: s.bool,
|
|
@@ -180,7 +201,7 @@ const m = {
|
|
|
180
201
|
pageable: !0,
|
|
181
202
|
pageOverlay: "none"
|
|
182
203
|
};
|
|
183
|
-
|
|
204
|
+
j.displayName = "KendoScrollView";
|
|
184
205
|
export {
|
|
185
|
-
|
|
206
|
+
j as ScrollView
|
|
186
207
|
};
|
package/ScrollViewProps.d.ts
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
+
import { WebMcpProps } from '@progress/kendo-react-common';
|
|
8
9
|
/**
|
|
9
10
|
* Represents the props of the [KendoReact ScrollView component](https://www.telerik.com/kendo-react-ui/components/scrollview).
|
|
10
11
|
*/
|
|
@@ -133,4 +134,9 @@ export interface ScrollViewProps {
|
|
|
133
134
|
* ```
|
|
134
135
|
*/
|
|
135
136
|
style?: React.CSSProperties;
|
|
137
|
+
/**
|
|
138
|
+
* Enables Web MCP tool registration for this component.
|
|
139
|
+
* Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
|
|
140
|
+
*/
|
|
141
|
+
webMcp?: boolean | WebMcpProps;
|
|
136
142
|
}
|
|
@@ -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
|
|
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,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:"15.0.0-develop.2",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
CHANGED
|
@@ -13,10 +13,20 @@ export declare const previous = "scrollview.previous";
|
|
|
13
13
|
* @hidden
|
|
14
14
|
*/
|
|
15
15
|
export declare const next = "scrollview.next";
|
|
16
|
+
/**
|
|
17
|
+
* @hidden
|
|
18
|
+
*/
|
|
19
|
+
export declare const slideAriaRoleDescription = "scrollview.slideAriaRoleDescription";
|
|
20
|
+
/**
|
|
21
|
+
* @hidden
|
|
22
|
+
*/
|
|
23
|
+
export declare const carouselAriaRoleDescription = "scrollview.carouselAriaRoleDescription";
|
|
16
24
|
/**
|
|
17
25
|
* @hidden
|
|
18
26
|
*/
|
|
19
27
|
export declare const messages: {
|
|
20
28
|
"scrollview.previous": string;
|
|
21
29
|
"scrollview.next": string;
|
|
30
|
+
"scrollview.slideAriaRoleDescription": string;
|
|
31
|
+
"scrollview.carouselAriaRoleDescription": string;
|
|
22
32
|
};
|
package/messages.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="scrollview.previous",s="scrollview.next",o={[e]:"Previous",[s]:"Next"};exports.
|
|
8
|
+
"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
CHANGED
|
@@ -5,12 +5,16 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
const e = "scrollview.previous", s = "scrollview.next", o = {
|
|
8
|
+
const e = "scrollview.previous", s = "scrollview.next", o = "scrollview.slideAriaRoleDescription", i = "scrollview.carouselAriaRoleDescription", r = {
|
|
9
9
|
[e]: "Previous",
|
|
10
|
-
[s]: "Next"
|
|
10
|
+
[s]: "Next",
|
|
11
|
+
[o]: "slide",
|
|
12
|
+
[i]: "carousel"
|
|
11
13
|
};
|
|
12
14
|
export {
|
|
13
|
-
|
|
15
|
+
i as carouselAriaRoleDescription,
|
|
16
|
+
r as messages,
|
|
14
17
|
s as next,
|
|
15
|
-
e as previous
|
|
18
|
+
e as previous,
|
|
19
|
+
o as slideAriaRoleDescription
|
|
16
20
|
};
|
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:
|
|
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: 1779253373,version:"15.0.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
|
|
|
7
7
|
productName: 'KendoReact',
|
|
8
8
|
productCode: 'KENDOUIREACT',
|
|
9
9
|
productCodes: ['KENDOUIREACT'],
|
|
10
|
-
publishDate:
|
|
11
|
-
version: '
|
|
10
|
+
publishDate: 1779253373,
|
|
11
|
+
version: '15.0.0-develop.2',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-scrollview",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-develop.2",
|
|
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": "
|
|
30
|
-
"@progress/kendo-react-intl": "
|
|
29
|
+
"@progress/kendo-react-common": "15.0.0-develop.2",
|
|
30
|
+
"@progress/kendo-react-intl": "15.0.0-develop.2",
|
|
31
31
|
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
32
32
|
"react": "^18.0.0 || ^19.0.0",
|
|
33
33
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"package": {
|
|
54
54
|
"productName": "KendoReact",
|
|
55
55
|
"productCode": "KENDOUIREACT",
|
|
56
|
-
"publishDate":
|
|
56
|
+
"publishDate": 1779253373,
|
|
57
57
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
58
58
|
}
|
|
59
59
|
},
|