@progress/kendo-react-listview/ListView.js

React ListView enables you to display a custom layout of data items. KendoReact ListView package

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