@progress/kendo-react-listview 14.5.0-develop.9 → 15.0.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.
- package/ListView.js +1 -1
- package/ListView.mjs +50 -33
- package/ListViewItemContext.d.ts +15 -0
- package/ListViewItemContext.js +8 -0
- package/ListViewItemContext.mjs +12 -0
- package/ListViewItemWrapper.js +1 -1
- package/ListViewItemWrapper.mjs +17 -6
- package/README.md +4 -4
- package/dist/cdn/js/kendo-react-listview.js +1 -1
- package/interfaces/ListViewProps.d.ts +6 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +3 -3
package/ListView.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 N=require("react"),l=require("@progress/kendo-react-common"),C=require("./package-metadata.js"),V=require("./ListViewItemContext.js");function O(a){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const o in a)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(a,o);Object.defineProperty(r,o,c.get?c:{enumerable:!0,get:()=>a[o]})}}return r.default=a,Object.freeze(r)}const s=O(N),i="k-focus",M=s.forwardRef((a,r)=>{const o=!l.validatePackage(C.packageMetadata,{component:"ListView"}),c=l.getLicenseMessage(C.packageMetadata),{data:d=[],item:f,footer:w,header:g,className:I,style:R,onScroll:b,navigatable:p}=a,k=s.useRef(null),v=s.useRef(null),E=s.useCallback(()=>({onScroll:b,props:a,context:{},state:{},refs:{}}),[]);s.useImperativeHandle(v,E),s.useImperativeHandle(r,()=>v.current),l.useWebMcpRegister("listview",v,a,a.webMcp);const S=s.useCallback(e=>l.dispatchEvent(b,e,E(),void 0),[]),L=(e,t,n)=>{n.preventDefault(),t.focusNext(e),t.next(e).classList.add(i),t.previous(e).classList.remove(i)},y=(e,t,n)=>{n.preventDefault(),t.focusPrevious(e),t.next(e).classList.remove(i),t.previous(e).classList.add(i)},u=s.useMemo(()=>new l.Navigation({root:k,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:L,ArrowRight:L,ArrowUp:y,ArrowLeft:y,Home:(e,t,n)=>{n.preventDefault();const m=t.first;m&&t.focusElement(m,e)},End:(e,t,n)=>{n.preventDefault();const m=t.last;m&&t.focusElement(m,e)},Tab:(e,t,n)=>{t.removeFocusClass(e)}}},tabIndex:0,focusClass:i}),[]),h=s.useCallback(u.triggerKeyboardEvent.bind(u),[]),D=s.useCallback(e=>{e.nativeEvent.target.classList.add(i),u.elements.forEach(t=>{t!==e.nativeEvent.target&&t.classList.remove(i)})},[]);return s.useEffect(()=>{if(p)return u.initializeRovingTab(),()=>u.removeFocusListener()},[]),s.createElement("div",{className:l.classNames("k-listview",I),style:R,onKeyDown:e=>p&&h(e),onClick:D},g?s.createElement(g,null):null,s.createElement("div",{role:"list",className:"k-listview-content",onScroll:S,ref:k},f&&d.map((e,t)=>{var n;return s.createElement(x,{key:(n=e.id)!=null?n:t,Item:f,dataItem:e,index:t,totalCount:d.length})})),w?s.createElement(w,null):null,o&&s.createElement(l.WatermarkOverlay,{message:c}))});M.displayName="KendoReactListView";const x=({Item:a,dataItem:r,index:o,totalCount:c})=>{const d=s.useMemo(()=>({index:o,totalCount:c}),[o,c]);return s.createElement(V.ListViewItemContext.Provider,{value:d},s.createElement(a,{dataItem:r,index:o}))};exports.ListView=M;
|
package/ListView.mjs
CHANGED
|
@@ -6,47 +6,48 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as s from "react";
|
|
9
|
-
import { validatePackage as
|
|
10
|
-
import { packageMetadata as
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
import { validatePackage as x, getLicenseMessage as D, useWebMcpRegister as M, dispatchEvent as V, Navigation as S, classNames as A, WatermarkOverlay as H } from "@progress/kendo-react-common";
|
|
10
|
+
import { packageMetadata as C } from "./package-metadata.mjs";
|
|
11
|
+
import { ListViewItemContext as F } from "./ListViewItemContext.mjs";
|
|
12
|
+
const o = "k-focus", K = s.forwardRef((n, u) => {
|
|
13
|
+
const l = !x(C, { component: "ListView" }), c = D(C), { data: m = [], item: d, footer: f, header: w, className: h, style: y, onScroll: p, navigatable: E } = n, k = s.useRef(null), v = s.useRef(null), L = s.useCallback(
|
|
13
14
|
() => ({
|
|
14
|
-
onScroll:
|
|
15
|
-
props:
|
|
15
|
+
onScroll: p,
|
|
16
|
+
props: n,
|
|
16
17
|
context: {},
|
|
17
18
|
state: {},
|
|
18
19
|
refs: {}
|
|
19
20
|
}),
|
|
20
21
|
[]
|
|
21
22
|
);
|
|
22
|
-
s.useImperativeHandle(
|
|
23
|
+
s.useImperativeHandle(v, L), s.useImperativeHandle(u, () => v.current), M("listview", v, n, n.webMcp);
|
|
23
24
|
const I = s.useCallback(
|
|
24
|
-
(e) =>
|
|
25
|
+
(e) => V(p, e, L(), void 0),
|
|
25
26
|
[]
|
|
26
|
-
),
|
|
27
|
+
), g = (e, t, a) => {
|
|
27
28
|
a.preventDefault(), t.focusNext(e), t.next(e).classList.add(o), t.previous(e).classList.remove(o);
|
|
28
|
-
},
|
|
29
|
+
}, b = (e, t, a) => {
|
|
29
30
|
a.preventDefault(), t.focusPrevious(e), t.next(e).classList.remove(o), t.previous(e).classList.add(o);
|
|
30
|
-
},
|
|
31
|
-
() => new
|
|
32
|
-
root:
|
|
31
|
+
}, r = s.useMemo(
|
|
32
|
+
() => new S({
|
|
33
|
+
root: k,
|
|
33
34
|
selectors: [".k-listview-item"],
|
|
34
35
|
rovingTabIndex: !0,
|
|
35
36
|
keyboardEvents: {
|
|
36
37
|
keydown: {
|
|
37
|
-
ArrowDown:
|
|
38
|
-
ArrowRight:
|
|
39
|
-
ArrowUp:
|
|
40
|
-
ArrowLeft:
|
|
38
|
+
ArrowDown: g,
|
|
39
|
+
ArrowRight: g,
|
|
40
|
+
ArrowUp: b,
|
|
41
|
+
ArrowLeft: b,
|
|
41
42
|
Home: (e, t, a) => {
|
|
42
43
|
a.preventDefault();
|
|
43
|
-
const
|
|
44
|
-
|
|
44
|
+
const i = t.first;
|
|
45
|
+
i && t.focusElement(i, e);
|
|
45
46
|
},
|
|
46
47
|
End: (e, t, a) => {
|
|
47
48
|
a.preventDefault();
|
|
48
|
-
const
|
|
49
|
-
|
|
49
|
+
const i = t.last;
|
|
50
|
+
i && t.focusElement(i, e);
|
|
50
51
|
},
|
|
51
52
|
Tab: (e, t, a) => {
|
|
52
53
|
t.removeFocusClass(e);
|
|
@@ -57,29 +58,45 @@ const o = "k-focus", K = s.forwardRef((r, L) => {
|
|
|
57
58
|
focusClass: o
|
|
58
59
|
}),
|
|
59
60
|
[]
|
|
60
|
-
), N = s.useCallback(
|
|
61
|
-
e.nativeEvent.target.classList.add(o),
|
|
61
|
+
), N = s.useCallback(r.triggerKeyboardEvent.bind(r), []), R = s.useCallback((e) => {
|
|
62
|
+
e.nativeEvent.target.classList.add(o), r.elements.forEach((t) => {
|
|
62
63
|
t !== e.nativeEvent.target && t.classList.remove(o);
|
|
63
64
|
});
|
|
64
65
|
}, []);
|
|
65
66
|
return s.useEffect(() => {
|
|
66
|
-
if (
|
|
67
|
-
return
|
|
67
|
+
if (E)
|
|
68
|
+
return r.initializeRovingTab(), () => r.removeFocusListener();
|
|
68
69
|
}, []), /* @__PURE__ */ s.createElement(
|
|
69
70
|
"div",
|
|
70
71
|
{
|
|
71
|
-
className:
|
|
72
|
-
style:
|
|
73
|
-
onKeyDown: (e) =>
|
|
74
|
-
onClick:
|
|
72
|
+
className: A("k-listview", h),
|
|
73
|
+
style: y,
|
|
74
|
+
onKeyDown: (e) => E && N(e),
|
|
75
|
+
onClick: R
|
|
75
76
|
},
|
|
76
|
-
|
|
77
|
-
/* @__PURE__ */ s.createElement("div", { role: "list", className: "k-listview-content", onScroll: I, ref:
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
w ? /* @__PURE__ */ s.createElement(w, null) : null,
|
|
78
|
+
/* @__PURE__ */ s.createElement("div", { role: "list", className: "k-listview-content", onScroll: I, ref: k }, d && m.map((e, t) => {
|
|
79
|
+
var a;
|
|
80
|
+
return /* @__PURE__ */ s.createElement(
|
|
81
|
+
P,
|
|
82
|
+
{
|
|
83
|
+
key: (a = e.id) != null ? a : t,
|
|
84
|
+
Item: d,
|
|
85
|
+
dataItem: e,
|
|
86
|
+
index: t,
|
|
87
|
+
totalCount: m.length
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
})),
|
|
91
|
+
f ? /* @__PURE__ */ s.createElement(f, null) : null,
|
|
92
|
+
l && /* @__PURE__ */ s.createElement(H, { message: c })
|
|
80
93
|
);
|
|
81
94
|
});
|
|
82
95
|
K.displayName = "KendoReactListView";
|
|
96
|
+
const P = ({ Item: n, dataItem: u, index: l, totalCount: c }) => {
|
|
97
|
+
const m = s.useMemo(() => ({ index: l, totalCount: c }), [l, c]);
|
|
98
|
+
return /* @__PURE__ */ s.createElement(F.Provider, { value: m }, /* @__PURE__ */ s.createElement(n, { dataItem: u, index: l }));
|
|
99
|
+
};
|
|
83
100
|
export {
|
|
84
101
|
K as ListView
|
|
85
102
|
};
|
|
@@ -0,0 +1,15 @@
|
|
|
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 * as React from 'react';
|
|
9
|
+
/** @hidden */
|
|
10
|
+
export interface ListViewItemContextValue {
|
|
11
|
+
index: number;
|
|
12
|
+
totalCount: number;
|
|
13
|
+
}
|
|
14
|
+
/** @hidden */
|
|
15
|
+
export declare const ListViewItemContext: React.Context<ListViewItemContextValue | null>;
|
|
@@ -0,0 +1,8 @@
|
|
|
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
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function c(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=c(r),i=a.createContext(null);exports.ListViewItemContext=i;
|
|
@@ -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 * as t from "react";
|
|
9
|
+
const e = t.createContext(null);
|
|
10
|
+
export {
|
|
11
|
+
e as ListViewItemContext
|
|
12
|
+
};
|
package/ListViewItemWrapper.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 s=require("react"),a=require("@progress/kendo-react-common"),c=require("./ListViewItemContext.js");function l(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return i.default=e,Object.freeze(i)}const r=l(s),u=e=>{const{children:i,style:t,className:n}=e,o=r.useContext(c.ListViewItemContext);return r.createElement("div",{role:"listitem",style:t,className:a.classNames("k-listview-item",n),"aria-posinset":o?o.index+1:void 0,"aria-setsize":o?o.totalCount:void 0},i)};exports.ListViewItemWrapper=u;
|
package/ListViewItemWrapper.mjs
CHANGED
|
@@ -5,12 +5,23 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
import { classNames as
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
import * as e from "react";
|
|
9
|
+
import { classNames as a } from "@progress/kendo-react-common";
|
|
10
|
+
import { ListViewItemContext as m } from "./ListViewItemContext.mjs";
|
|
11
|
+
const c = (i) => {
|
|
12
|
+
const { children: s, style: o, className: r } = i, t = e.useContext(m);
|
|
13
|
+
return /* @__PURE__ */ e.createElement(
|
|
14
|
+
"div",
|
|
15
|
+
{
|
|
16
|
+
role: "listitem",
|
|
17
|
+
style: o,
|
|
18
|
+
className: a("k-listview-item", r),
|
|
19
|
+
"aria-posinset": t ? t.index + 1 : void 0,
|
|
20
|
+
"aria-setsize": t ? t.totalCount : void 0
|
|
21
|
+
},
|
|
22
|
+
s
|
|
23
|
+
);
|
|
13
24
|
};
|
|
14
25
|
export {
|
|
15
|
-
|
|
26
|
+
c as ListViewItemWrapper
|
|
16
27
|
};
|
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-listview&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-listview&utm_content=banner)
|
|
2
2
|
|
|
3
3
|
# KendoReact ListView Component for React
|
|
4
4
|
|
|
@@ -12,7 +12,7 @@
|
|
|
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-listview) 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
|
The [React ListView](https://www.telerik.com/kendo-react-ui/listview), part of KendoReact, enables you to display a custom layout of data items.
|
|
18
18
|
|
|
@@ -30,7 +30,7 @@ Among the features which the KendoReact ListView component delivers are:
|
|
|
30
30
|
|
|
31
31
|
The following table outlines the key resources available with KendoReact and KendoReact Free.
|
|
32
32
|
|
|
33
|
-
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
|
|
33
|
+
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
|
|
34
34
|
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
35
35
|
| React components | 50+ | 120+ |
|
|
36
36
|
| 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> |
|
|
@@ -53,7 +53,7 @@ For any issues you might encounter while working with the KendoReact ListView, u
|
|
|
53
53
|
## Resources
|
|
54
54
|
|
|
55
55
|
- [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-listview)
|
|
56
|
-
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
56
|
+
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
|
|
57
57
|
- [Get Started with the KendoReact ListView](https://www.telerik.com/kendo-react-ui/components/listview/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listview)
|
|
58
58
|
- [API Reference of the KendoReact ListView](https://www.telerik.com/kendo-react-ui/components/listview/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-listview)
|
|
59
59
|
- [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-listview)
|
|
@@ -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("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListview={},e.React,e.KendoReactCommon)}(this,function(e,t,s){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(s){if("default"!==s){var a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,a.get?a:{enumerable:!0,get:function(){return e[s]}})}}),t.default=e,Object.freeze(t)}var
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListview={},e.React,e.KendoReactCommon)}(this,function(e,t,s){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(s){if("default"!==s){var a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,a.get?a:{enumerable:!0,get:function(){return e[s]}})}}),t.default=e,Object.freeze(t)}var n=a(t);const r=Object.freeze({name:"@progress/kendo-react-listview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"15.0.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),o=n.createContext(null),l="k-focus",i=n.forwardRef((e,t)=>{const a=!s.validatePackage(r,{component:"ListView"}),o=s.getLicenseMessage(r),{data:i=[],item:u,footer:d,header:m,className:v,style:f,onScroll:p,navigatable:w}=e,E=n.useRef(null),b=n.useRef(null),g=n.useCallback(()=>({onScroll:p,props:e,context:{},state:{},refs:{}}),[]);n.useImperativeHandle(b,g),n.useImperativeHandle(t,()=>b.current),s.useWebMcpRegister("listview",b,e,e.webMcp);const k=n.useCallback(e=>s.dispatchEvent(p,e,g(),void 0),[]),y=(e,t,s)=>{s.preventDefault(),t.focusNext(e),t.next(e).classList.add(l),t.previous(e).classList.remove(l)},N=(e,t,s)=>{s.preventDefault(),t.focusPrevious(e),t.next(e).classList.remove(l),t.previous(e).classList.add(l)},C=n.useMemo(()=>new s.Navigation({root:E,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:N,ArrowLeft:N,Home:(e,t,s)=>{s.preventDefault();const a=t.first;a&&t.focusElement(a,e)},End:(e,t,s)=>{s.preventDefault();const a=t.last;a&&t.focusElement(a,e)},Tab:(e,t,s)=>{t.removeFocusClass(e)}}},tabIndex:0,focusClass:l}),[]),x=n.useCallback(C.triggerKeyboardEvent.bind(C),[]),L=n.useCallback(e=>{e.nativeEvent.target.classList.add(l),C.elements.forEach(t=>{t!==e.nativeEvent.target&&t.classList.remove(l)})},[]);return n.useEffect(()=>{if(w)return C.initializeRovingTab(),()=>C.removeFocusListener()},[]),n.createElement("div",{className:s.classNames("k-listview",v),style:f,onKeyDown:e=>w&&x(e),onClick:L},m?n.createElement(m,null):null,n.createElement("div",{role:"list",className:"k-listview-content",onScroll:k,ref:E},u&&i.map((e,t)=>{var s;return n.createElement(c,{key:null!=(s=e.id)?s:t,Item:u,dataItem:e,index:t,totalCount:i.length})})),d?n.createElement(d,null):null,a&&n.createElement(s.WatermarkOverlay,{message:o}))});i.displayName="KendoReactListView";const c=({Item:e,dataItem:t,index:s,totalCount:a})=>{const r=n.useMemo(()=>({index:s,totalCount:a}),[s,a]);return n.createElement(o.Provider,{value:r},n.createElement(e,{dataItem:t,index:s}))};e.ListView=i,e.ListViewFooter=e=>n.createElement("div",{className:s.classNames("k-listview-footer",e.className),style:e.style},e.children),e.ListViewHeader=e=>n.createElement("div",{className:s.classNames("k-listview-header",e.className),style:e.style},e.children),e.ListViewItemWrapper=e=>{const{children:t,style:a,className:r}=e,l=n.useContext(o);return n.createElement("div",{role:"listitem",style:a,className:s.classNames("k-listview-item",r),"aria-posinset":l?l.index+1:void 0,"aria-setsize":l?l.totalCount:void 0},t)}});
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import { ListViewEvent } from '../events';
|
|
9
9
|
import { ListViewItemProps } from './ListViewItemProps';
|
|
10
|
+
import { WebMcpProps } from '@progress/kendo-react-common';
|
|
10
11
|
/**
|
|
11
12
|
* Represents the props of the [KendoReact ListView component](https://www.telerik.com/kendo-react-ui/components/listview).
|
|
12
13
|
*/
|
|
@@ -92,4 +93,9 @@ export interface ListViewProps {
|
|
|
92
93
|
* ```
|
|
93
94
|
*/
|
|
94
95
|
navigatable?: boolean;
|
|
96
|
+
/**
|
|
97
|
+
* Enables Web MCP tool registration for this component.
|
|
98
|
+
* Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
|
|
99
|
+
*/
|
|
100
|
+
webMcp?: boolean | WebMcpProps;
|
|
95
101
|
}
|
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-listview",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-listview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1779199832,version:"15.0.0-develop.1",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: 1779199832,
|
|
11
|
+
version: '15.0.0-develop.1',
|
|
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-listview",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-develop.1",
|
|
4
4
|
"description": "React ListView enables you to display a custom layout of data items. KendoReact ListView package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-react-common": "
|
|
29
|
+
"@progress/kendo-react-common": "15.0.0-develop.1",
|
|
30
30
|
"react": "^18.0.0 || ^19.0.0",
|
|
31
31
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
32
32
|
},
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"package": {
|
|
52
52
|
"productName": "KendoReact",
|
|
53
53
|
"productCode": "KENDOUIREACT",
|
|
54
|
-
"publishDate":
|
|
54
|
+
"publishDate": 1779199832,
|
|
55
55
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
56
56
|
}
|
|
57
57
|
},
|