@progress/kendo-react-listview 14.5.0-develop.12 → 14.5.0-develop.14

package/ListView.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),c=require("@progress/kendo-react-common"),y=require("./package-metadata.js");function O(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const d=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(l,r,d.get?d:{enumerable:!0,get:()=>a[r]})}}return l.default=a,Object.freeze(l)}const s=O(M),o="k-focus",C=s.forwardRef((a,l)=>{const r=!c.validatePackage(y.packageMetadata,{component:"ListView"}),d=c.getLicenseMessage(y.packageMetadata),{data:S=[],item:m,footer:f,header:v,className:D,style:N,onScroll:g,navigatable:p}=a,b=s.useRef(null),k=s.useRef(null),w=s.useCallback(()=>({onScroll:g,props:a,context:{},state:{},refs:{}}),[]);s.useImperativeHandle(k,w),s.useImperativeHandle(l,()=>k.current);const R=s.useCallback(e=>c.dispatchEvent(g,e,w(),void 0),[]),E=(e,t,n)=>{n.preventDefault(),t.focusNext(e),t.next(e).classList.add(o),t.previous(e).classList.remove(o)},L=(e,t,n)=>{n.preventDefault(),t.focusPrevious(e),t.next(e).classList.remove(o),t.previous(e).classList.add(o)},i=s.useMemo(()=>new c.Navigation({root:b,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:E,ArrowRight:E,ArrowUp:L,ArrowLeft:L,Home:(e,t,n)=>{n.preventDefault();const u=t.first;u&&t.focusElement(u,e)},End:(e,t,n)=>{n.preventDefault();const u=t.last;u&&t.focusElement(u,e)},Tab:(e,t,n)=>{t.removeFocusClass(e)}}},tabIndex:0,focusClass:o}),[]),h=s.useCallback(i.triggerKeyboardEvent.bind(i),[]),I=s.useCallback(e=>{e.nativeEvent.target.classList.add(o),i.elements.forEach(t=>{t!==e.nativeEvent.target&&t.classList.remove(o)})},[]);return s.useEffect(()=>{if(p)return i.initializeRovingTab(),()=>i.removeFocusListener()},[]),s.createElement("div",{className:c.classNames("k-listview",D),style:N,onKeyDown:e=>p&&h(e),onClick:I},v?s.createElement(v,null):null,s.createElement("div",{role:"list",className:"k-listview-content",onScroll:R,ref:b},m&&S.map((e,t)=>s.createElement(m,{dataItem:e,index:t,key:t}))),f?s.createElement(f,null):null,r&&s.createElement(c.WatermarkOverlay,{message:d}))});C.displayName="KendoReactListView";exports.ListView=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),o=require("@progress/kendo-react-common"),y=require("./package-metadata.js");function O(a){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const l in a)if(l!=="default"){const d=Object.getOwnPropertyDescriptor(a,l);Object.defineProperty(r,l,d.get?d:{enumerable:!0,get:()=>a[l]})}}return r.default=a,Object.freeze(r)}const s=O(I),c="k-focus",C=s.forwardRef((a,r)=>{const l=!o.validatePackage(y.packageMetadata,{component:"ListView"}),d=o.getLicenseMessage(y.packageMetadata),{data:M=[],item:f,footer:v,header:g,className:R,style:S,onScroll:b,navigatable:w}=a,k=s.useRef(null),m=s.useRef(null),p=s.useCallback(()=>({onScroll:b,props:a,context:{},state:{},refs:{}}),[]);s.useImperativeHandle(m,p),s.useImperativeHandle(r,()=>m.current),o.useWebMcpRegister("listview",m,a,a.webMcp);const D=s.useCallback(e=>o.dispatchEvent(b,e,p(),void 0),[]),E=(e,t,n)=>{n.preventDefault(),t.focusNext(e),t.next(e).classList.add(c),t.previous(e).classList.remove(c)},L=(e,t,n)=>{n.preventDefault(),t.focusPrevious(e),t.next(e).classList.remove(c),t.previous(e).classList.add(c)},i=s.useMemo(()=>new o.Navigation({root:k,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:E,ArrowRight:E,ArrowUp:L,ArrowLeft:L,Home:(e,t,n)=>{n.preventDefault();const u=t.first;u&&t.focusElement(u,e)},End:(e,t,n)=>{n.preventDefault();const u=t.last;u&&t.focusElement(u,e)},Tab:(e,t,n)=>{t.removeFocusClass(e)}}},tabIndex:0,focusClass:c}),[]),N=s.useCallback(i.triggerKeyboardEvent.bind(i),[]),h=s.useCallback(e=>{e.nativeEvent.target.classList.add(c),i.elements.forEach(t=>{t!==e.nativeEvent.target&&t.classList.remove(c)})},[]);return s.useEffect(()=>{if(w)return i.initializeRovingTab(),()=>i.removeFocusListener()},[]),s.createElement("div",{className:o.classNames("k-listview",R),style:S,onKeyDown:e=>w&&N(e),onClick:h},g?s.createElement(g,null):null,s.createElement("div",{role:"list",className:"k-listview-content",onScroll:D,ref:k},f&&M.map((e,t)=>s.createElement(f,{dataItem:e,index:t,key:t}))),v?s.createElement(v,null):null,l&&s.createElement(o.WatermarkOverlay,{message:d}))});C.displayName="KendoReactListView";exports.ListView=C;

package/ListView.mjs

@@ -6,12 +6,12 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as s from "react";
-import { validatePackage as D, getLicenseMessage as R, dispatchEvent as S, Navigation as A, classNames as H, WatermarkOverlay as F } from "@progress/kendo-react-common";
-import { packageMetadata as E } from "./package-metadata.mjs";
-const o = "k-focus", K = s.forwardRef((r, L) => {
-  const g = !D(E, { component: "ListView" }), b = R(E), { data: y = [], item: c, footer: i, header: m, className: C, style: h, onScroll: u, navigatable: v } = r, d = s.useRef(null), f = s.useRef(null), w = s.useCallback(
+import { validatePackage as x, getLicenseMessage as D, useWebMcpRegister as M, dispatchEvent as S, Navigation as A, classNames as H, WatermarkOverlay as F } from "@progress/kendo-react-common";
+import { packageMetadata as p } from "./package-metadata.mjs";
+const o = "k-focus", K = s.forwardRef((r, b) => {
+  const g = !x(p, { component: "ListView" }), L = D(p), { data: y = [], item: c, footer: m, header: u, className: C, style: h, onScroll: v, navigatable: d } = r, f = s.useRef(null), i = s.useRef(null), w = s.useCallback(
     () => ({
-      onScroll: u,
+      onScroll: v,
       props: r,
       context: {},
       state: {},
@@ -19,25 +19,25 @@ const o = "k-focus", K = s.forwardRef((r, L) => {
     }),
     []
   );
-  s.useImperativeHandle(f, w), s.useImperativeHandle(L, () => f.current);
+  s.useImperativeHandle(i, w), s.useImperativeHandle(b, () => i.current), M("listview", i, r, r.webMcp);
   const I = s.useCallback(
-    (e) => S(u, e, w(), void 0),
+    (e) => S(v, e, w(), void 0),
     []
-  ), p = (e, t, a) => {
+  ), k = (e, t, a) => {
     a.preventDefault(), t.focusNext(e), t.next(e).classList.add(o), t.previous(e).classList.remove(o);
-  }, k = (e, t, a) => {
+  }, E = (e, t, a) => {
     a.preventDefault(), t.focusPrevious(e), t.next(e).classList.remove(o), t.previous(e).classList.add(o);
   }, n = s.useMemo(
     () => new A({
-      root: d,
+      root: f,
       selectors: [".k-listview-item"],
       rovingTabIndex: !0,
       keyboardEvents: {
         keydown: {
-          ArrowDown: p,
-          ArrowRight: p,
-          ArrowUp: k,
-          ArrowLeft: k,
+          ArrowDown: k,
+          ArrowRight: k,
+          ArrowUp: E,
+          ArrowLeft: E,
           Home: (e, t, a) => {
             a.preventDefault();
             const l = t.first;
@@ -57,26 +57,26 @@ const o = "k-focus", K = s.forwardRef((r, L) => {
       focusClass: o
     }),
     []
-  ), N = s.useCallback(n.triggerKeyboardEvent.bind(n), []), x = s.useCallback((e) => {
+  ), N = s.useCallback(n.triggerKeyboardEvent.bind(n), []), R = s.useCallback((e) => {
     e.nativeEvent.target.classList.add(o), n.elements.forEach((t) => {
       t !== e.nativeEvent.target && t.classList.remove(o);
     });
   }, []);
   return s.useEffect(() => {
-    if (v)
+    if (d)
       return n.initializeRovingTab(), () => n.removeFocusListener();
   }, []), /* @__PURE__ */ s.createElement(
     "div",
     {
       className: H("k-listview", C),
       style: h,
-      onKeyDown: (e) => v && N(e),
-      onClick: x
+      onKeyDown: (e) => d && N(e),
+      onClick: R
     },
+    u ? /* @__PURE__ */ s.createElement(u, null) : null,
+    /* @__PURE__ */ s.createElement("div", { role: "list", className: "k-listview-content", onScroll: I, ref: f }, c && y.map((e, t) => /* @__PURE__ */ s.createElement(c, { dataItem: e, index: t, key: t }))),
     m ? /* @__PURE__ */ s.createElement(m, null) : null,
-    /* @__PURE__ */ s.createElement("div", { role: "list", className: "k-listview-content", onScroll: I, ref: d }, c && y.map((e, t) => /* @__PURE__ */ s.createElement(c, { dataItem: e, index: t, key: t }))),
-    i ? /* @__PURE__ */ s.createElement(i, null) : null,
-    g && /* @__PURE__ */ s.createElement(F, { message: b })
+    g && /* @__PURE__ */ s.createElement(F, { message: L })
   );
 });
 K.displayName = "KendoReactListView";

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

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@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 r=a(t);const n=Object.freeze({name:"@progress/kendo-react-listview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.5.0-develop.12",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),l="k-focus",o=r.forwardRef((e,t)=>{const a=!s.validatePackage(n,{component:"ListView"}),o=s.getLicenseMessage(n),{data:i=[],item:c,footer:d,header:m,className:u,style:f,onScroll:v,navigatable:p}=e,w=r.useRef(null),E=r.useRef(null),b=r.useCallback(()=>({onScroll:v,props:e,context:{},state:{},refs:{}}),[]);r.useImperativeHandle(E,b),r.useImperativeHandle(t,()=>E.current);const k=r.useCallback(e=>s.dispatchEvent(v,e,b(),void 0),[]),y=(e,t,s)=>{s.preventDefault(),t.focusNext(e),t.next(e).classList.add(l),t.previous(e).classList.remove(l)},g=(e,t,s)=>{s.preventDefault(),t.focusPrevious(e),t.next(e).classList.remove(l),t.previous(e).classList.add(l)},N=r.useMemo(()=>new s.Navigation({root:w,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:g,ArrowLeft:g,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}),[]),L=r.useCallback(N.triggerKeyboardEvent.bind(N),[]),h=r.useCallback(e=>{e.nativeEvent.target.classList.add(l),N.elements.forEach(t=>{t!==e.nativeEvent.target&&t.classList.remove(l)})},[]);return r.useEffect(()=>{if(p)return N.initializeRovingTab(),()=>N.removeFocusListener()},[]),r.createElement("div",{className:s.classNames("k-listview",u),style:f,onKeyDown:e=>p&&L(e),onClick:h},m?r.createElement(m,null):null,r.createElement("div",{role:"list",className:"k-listview-content",onScroll:k,ref:w},c&&i.map((e,t)=>r.createElement(c,{dataItem:e,index:t,key:t}))),d?r.createElement(d,null):null,a&&r.createElement(s.WatermarkOverlay,{message:o}))});o.displayName="KendoReactListView";e.ListView=o,e.ListViewFooter=e=>r.createElement("div",{className:s.classNames("k-listview-footer",e.className),style:e.style},e.children),e.ListViewHeader=e=>r.createElement("div",{className:s.classNames("k-listview-header",e.className),style:e.style},e.children),e.ListViewItemWrapper=e=>{const{children:t,style:a,className:n}=e;return r.createElement("div",{role:"listitem",style:a,className:s.classNames("k-listview-item",n)},t)}});
+!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 r=a(t);const n=Object.freeze({name:"@progress/kendo-react-listview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.5.0-develop.14",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),l="k-focus",o=r.forwardRef((e,t)=>{const a=!s.validatePackage(n,{component:"ListView"}),o=s.getLicenseMessage(n),{data:i=[],item:c,footer:d,header:m,className:u,style:f,onScroll:v,navigatable:p}=e,w=r.useRef(null),b=r.useRef(null),E=r.useCallback(()=>({onScroll:v,props:e,context:{},state:{},refs:{}}),[]);r.useImperativeHandle(b,E),r.useImperativeHandle(t,()=>b.current),s.useWebMcpRegister("listview",b,e,e.webMcp);const g=r.useCallback(e=>s.dispatchEvent(v,e,E(),void 0),[]),k=(e,t,s)=>{s.preventDefault(),t.focusNext(e),t.next(e).classList.add(l),t.previous(e).classList.remove(l)},y=(e,t,s)=>{s.preventDefault(),t.focusPrevious(e),t.next(e).classList.remove(l),t.previous(e).classList.add(l)},N=r.useMemo(()=>new s.Navigation({root:w,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:k,ArrowRight:k,ArrowUp:y,ArrowLeft:y,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}),[]),L=r.useCallback(N.triggerKeyboardEvent.bind(N),[]),h=r.useCallback(e=>{e.nativeEvent.target.classList.add(l),N.elements.forEach(t=>{t!==e.nativeEvent.target&&t.classList.remove(l)})},[]);return r.useEffect(()=>{if(p)return N.initializeRovingTab(),()=>N.removeFocusListener()},[]),r.createElement("div",{className:s.classNames("k-listview",u),style:f,onKeyDown:e=>p&&L(e),onClick:h},m?r.createElement(m,null):null,r.createElement("div",{role:"list",className:"k-listview-content",onScroll:g,ref:w},c&&i.map((e,t)=>r.createElement(c,{dataItem:e,index:t,key:t}))),d?r.createElement(d,null):null,a&&r.createElement(s.WatermarkOverlay,{message:o}))});o.displayName="KendoReactListView";e.ListView=o,e.ListViewFooter=e=>r.createElement("div",{className:s.classNames("k-listview-footer",e.className),style:e.style},e.children),e.ListViewHeader=e=>r.createElement("div",{className:s.classNames("k-listview-header",e.className),style:e.style},e.children),e.ListViewItemWrapper=e=>{const{children:t,style:a,className:n}=e;return r.createElement("div",{role:"listitem",style:a,className:s.classNames("k-listview-item",n)},t)}});

package/interfaces/ListViewProps.d.ts

@@ -7,6 +7,7 @@
  */
 import { ListViewEvent } from '../events';
 import { ListViewItemProps } from './ListViewItemProps';
+import { WebMcpProps } from '@progress/kendo-react-common';
 /**
  * Represents the props of the [KendoReact ListView component](https://www.telerik.com/kendo-react-ui/components/listview).
  */
@@ -92,4 +93,9 @@ export interface ListViewProps {
      * ```
      */
     navigatable?: boolean;
+    /**
+     * Enables Web MCP tool registration for this component.
+     * Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
+     */
+    webMcp?: boolean | WebMcpProps;
 }

package/package-metadata.js

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

package/package-metadata.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-listview",
-  "version": "14.5.0-develop.12",
+  "version": "14.5.0-develop.14",
   "description": "React ListView enables you to display a custom layout of data items. KendoReact ListView package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-common": "14.5.0-develop.12",
+    "@progress/kendo-react-common": "14.5.0-develop.14",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -51,7 +51,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1778677335,
+      "publishDate": 1778746033,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },