@progress/kendo-react-listview 10.2.0-develop.1 → 10.2.0-develop.11

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={name:"@progress/kendo-react-listview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.1",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"}),{data:o=[],item:i,footer:c,header:d,className:u,style:m,onScroll:f,navigatable:v}=e,p=r.useRef(null),w=r.useRef(null),E=r.useCallback((()=>({onScroll:f,props:e,context:{},state:{},refs:{}})),[]);r.useImperativeHandle(w,E),r.useImperativeHandle(t,(()=>w.current));const k=r.useCallback((e=>s.dispatchEvent(f,e,E(),void 0)),[]),y=(e,t,s)=>{s.preventDefault(),t.focusNext(e),t.next(e).classList.add(l),t.previous(e).classList.remove(l)},b=(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:p,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:b,ArrowLeft:b,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})),[]),g=r.useCallback(N.triggerKeyboardEvent.bind(N),[]),L=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(v)return N.initializeRovingTab(),()=>N.removeFocusListener()}),[]),r.createElement("div",{className:s.classNames("k-listview",u),style:m,onKeyDown:e=>v&&g(e),onClick:L},d?r.createElement(d,null):null,r.createElement("div",{role:"list",className:"k-listview-content",onScroll:k,ref:p},i&&o.map(((e,t)=>r.createElement(i,{dataItem:e,index:t,key:t})))),c?r.createElement(c,null):null,a&&r.createElement(s.WatermarkOverlay,null))}));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={name:"@progress/kendo-react-listview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.11",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"}),{data:o=[],item:i,footer:c,header:d,className:u,style:m,onScroll:f,navigatable:v}=e,p=r.useRef(null),w=r.useRef(null),E=r.useCallback((()=>({onScroll:f,props:e,context:{},state:{},refs:{}})),[]);r.useImperativeHandle(w,E),r.useImperativeHandle(t,(()=>w.current));const k=r.useCallback((e=>s.dispatchEvent(f,e,E(),void 0)),[]),y=(e,t,s)=>{s.preventDefault(),t.focusNext(e),t.next(e).classList.add(l),t.previous(e).classList.remove(l)},b=(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:p,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:b,ArrowLeft:b,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})),[]),g=r.useCallback(N.triggerKeyboardEvent.bind(N),[]),L=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(v)return N.initializeRovingTab(),()=>N.removeFocusListener()}),[]),r.createElement("div",{className:s.classNames("k-listview",u),style:m,onKeyDown:e=>v&&g(e),onClick:L},d?r.createElement(d,null):null,r.createElement("div",{role:"list",className:"k-listview-content",onScroll:k,ref:p},i&&o.map(((e,t)=>r.createElement(i,{dataItem:e,index:t,key:t})))),c?r.createElement(c,null):null,a&&r.createElement(s.WatermarkOverlay,null))}));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/index.d.mts

@@ -99,35 +99,81 @@ declare interface ListViewItemWrapperProps {
 export declare interface ListViewProps {
     /**
      * Sets a class of the ListView DOM element.
+     *
+     * @example
+     * ```jsx
+     * <ListView className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets the data of the ListView.
+     *
+     * @example
+     * ```jsx
+     * <ListView data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
+     * ```
      */
     data?: any[];
     /**
      * Defines the component that will be rendered for each item of the data collection.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     *
+     * <ListView item={CustomItem} />
+     * ```
      */
     item?: React.ComponentType<ListViewItemProps>;
     /**
-     * Defines the component that will be rendered for ListView header.
+     * Defines the component that will be rendered for the ListView header.
+     *
+     * @example
+     * ```jsx
+     * const CustomHeader = (props) => <div>Custom Header</div>;
+     *
+     * <ListView header={CustomHeader} />
+     * ```
      */
     header?: React.ComponentType<any>;
     /**
-     * Defines the component that will be rendered for ListView footer.
+     * Defines the component that will be rendered for the ListView footer.
+     *
+     * @example
+     * ```jsx
+     * const CustomFooter = (props) => <div>Custom Footer</div>;
+     *
+     * <ListView footer={CustomFooter} />
+     * ```
      */
     footer?: React.ComponentType<any>;
     /**
      * Sets styles to the ListView container.
+     *
+     * @example
+     * ```jsx
+     * <ListView style={{ height: '400px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Fires when the ListView has been scrolled.
+     *
+     * @example
+     * ```jsx
+     * <ListView onScroll={(event) => console.log(event)} />
+     * ```
      */
     onScroll?: (event: ListViewEvent) => void;
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the ListView.
      * By default, navigation is disabled.
+     *
+     * @example
+     * ```jsx
+     * <ListView navigatable={true} />
+     * ```
      */
     navigatable?: boolean;
 }

package/index.d.ts

@@ -99,35 +99,81 @@ declare interface ListViewItemWrapperProps {
 export declare interface ListViewProps {
     /**
      * Sets a class of the ListView DOM element.
+     *
+     * @example
+     * ```jsx
+     * <ListView className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets the data of the ListView.
+     *
+     * @example
+     * ```jsx
+     * <ListView data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
+     * ```
      */
     data?: any[];
     /**
      * Defines the component that will be rendered for each item of the data collection.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     *
+     * <ListView item={CustomItem} />
+     * ```
      */
     item?: React.ComponentType<ListViewItemProps>;
     /**
-     * Defines the component that will be rendered for ListView header.
+     * Defines the component that will be rendered for the ListView header.
+     *
+     * @example
+     * ```jsx
+     * const CustomHeader = (props) => <div>Custom Header</div>;
+     *
+     * <ListView header={CustomHeader} />
+     * ```
      */
     header?: React.ComponentType<any>;
     /**
-     * Defines the component that will be rendered for ListView footer.
+     * Defines the component that will be rendered for the ListView footer.
+     *
+     * @example
+     * ```jsx
+     * const CustomFooter = (props) => <div>Custom Footer</div>;
+     *
+     * <ListView footer={CustomFooter} />
+     * ```
      */
     footer?: React.ComponentType<any>;
     /**
      * Sets styles to the ListView container.
+     *
+     * @example
+     * ```jsx
+     * <ListView style={{ height: '400px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Fires when the ListView has been scrolled.
+     *
+     * @example
+     * ```jsx
+     * <ListView onScroll={(event) => console.log(event)} />
+     * ```
      */
     onScroll?: (event: ListViewEvent) => void;
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the ListView.
      * By default, navigation is disabled.
+     *
+     * @example
+     * ```jsx
+     * <ListView navigatable={true} />
+     * ```
      */
     navigatable?: boolean;
 }

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={name:"@progress/kendo-react-listview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1743432556,version:"10.2.0-develop.1",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={name:"@progress/kendo-react-listview",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1745388354,version:"10.2.0-develop.11",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1743432556,
-  version: "10.2.0-develop.1",
+  publishDate: 1745388354,
+  version: "10.2.0-develop.11",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-listview",
-  "version": "10.2.0-develop.1",
+  "version": "10.2.0-develop.11",
   "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.5.1",
-    "@progress/kendo-react-common": "10.2.0-develop.1",
+    "@progress/kendo-react-common": "10.2.0-develop.11",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },
@@ -51,7 +51,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1743432556,
+      "publishDate": 1745388354,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },