@progress/kendo-react-listview 8.1.0-develop.9 → 8.1.1-develop.1

package/ListView.js

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

package/ListView.mjs

@@ -7,29 +7,77 @@
  */
 "use client";
 import * as e from "react";
-import { dispatchEvent as l, validatePackage as a, classNames as i } from "@progress/kendo-react-common";
-import { packageMetadata as p } from "./package-metadata.mjs";
-class h extends e.PureComponent {
-  constructor(s) {
-    super(s), this.onScroll = (t) => l(this.props.onScroll, t, this, void 0), a(p);
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const { data: s = [], item: t } = this.props;
-    return /* @__PURE__ */ e.createElement(
+import { validatePackage as y, dispatchEvent as I, Navigation as R, classNames as h } from "@progress/kendo-react-common";
+import { packageMetadata as D } from "./package-metadata.mjs";
+const H = e.forwardRef((n, p) => {
+  y(D);
+  const { data: k = [], item: r, footer: c, header: i, className: E, style: g, onScroll: u } = n, m = e.useRef(null), f = e.useRef(null), d = e.useCallback(
+    () => ({
+      onScroll: u,
+      props: n,
+      context: {},
+      state: {},
+      refs: {}
+    }),
+    []
+  );
+  e.useImperativeHandle(f, d), e.useImperativeHandle(p, () => f.current);
+  const b = e.useCallback(
+    (a) => I(u, a, d(), void 0),
+    []
+  ), v = (a, t, s) => {
+    s.preventDefault(), t.focusNext(a);
+  }, w = (a, t, s) => {
+    s.preventDefault(), t.focusPrevious(a);
+  }, l = e.useMemo(
+    () => new R({
+      root: m,
+      selectors: [".k-listview-item"],
+      keyboardEvents: {
+        keydown: {
+          ArrowDown: v,
+          ArrowRight: v,
+          ArrowUp: w,
+          ArrowLeft: w,
+          Home: (a, t, s) => {
+            s.preventDefault();
+            const o = t.first;
+            o && t.focusElement(o, a);
+          },
+          End: (a, t, s) => {
+            s.preventDefault();
+            const o = t.last;
+            o && t.focusElement(o, a);
+          }
+        }
+      },
+      tabIndex: 0,
+      focusClass: "k-focus"
+    }),
+    []
+  ), N = e.useCallback(l.triggerKeyboardEvent.bind(l), []);
+  return e.useEffect(() => (l.initializeRovingTab(), () => l.removeFocusListener()), []), /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: h("k-listview", E),
+      style: g,
+      onKeyDown: N
+    },
+    i ? /* @__PURE__ */ e.createElement(i, null) : null,
+    /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: i("k-listview", this.props.className),
-        style: this.props.style
+        role: "list",
+        className: "k-listview-content",
+        onScroll: b,
+        ref: m
       },
-      this.props.header ? /* @__PURE__ */ e.createElement(this.props.header, null) : null,
-      /* @__PURE__ */ e.createElement("div", { role: "list", className: "k-listview-content", onScroll: this.onScroll }, t && s.map((o, r) => /* @__PURE__ */ e.createElement(t, { dataItem: o, index: r, key: r }))),
-      this.props.footer ? /* @__PURE__ */ e.createElement(this.props.footer, null) : null
-    );
-  }
-}
+      r && k.map((a, t) => /* @__PURE__ */ e.createElement(r, { dataItem: a, index: t, key: t }))
+    ),
+    c ? /* @__PURE__ */ e.createElement(c, null) : null
+  );
+});
+H.displayName = "KendoReactListView";
 export {
-  h as ListView
+  H as ListView
 };

package/ListViewItemWrapper.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),s=require("@progress/kendo-react-common");function a(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const i=a(n),o=e=>{const{children:r,style:t,className:c}=e;return i.createElement("div",{role:"listitem",style:t,className:s.classNames("k-listview-item",c)},r)};exports.ListViewItemWrapper=o;

package/ListViewItemWrapper.mjs

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as r from "react";
+import { classNames as m } from "@progress/kendo-react-common";
+const l = (e) => {
+  const { children: t, style: s, className: i } = e;
+  return /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      role: "listitem",
+      style: s,
+      className: m("k-listview-item", i)
+    },
+    t
+  );
+};
+export {
+  l as ListViewItemWrapper
+};

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

@@ -5,4 +5,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 r(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var r=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,r.get?r:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var o=r(t);const n={name:"@progress/kendo-react-listview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};class i extends o.PureComponent{constructor(e){super(e),this.onScroll=e=>s.dispatchEvent(this.props.onScroll,e,this,void 0),s.validatePackage(n)}render(){const{data:e=[],item:t}=this.props;return o.createElement("div",{className:s.classNames("k-listview",this.props.className),style:this.props.style},this.props.header?o.createElement(this.props.header,null):null,o.createElement("div",{role:"list",className:"k-listview-content",onScroll:this.onScroll},t&&e.map(((e,s)=>o.createElement(t,{dataItem:e,index:s,key:s})))),this.props.footer?o.createElement(this.props.footer,null):null)}}e.ListView=i,e.ListViewFooter=e=>o.createElement("div",{className:s.classNames("k-listview-footer",e.className),style:e.style},e.children),e.ListViewHeader=e=>o.createElement("div",{className:s.classNames("k-listview-header",e.className),style:e.style},e.children)}));
+!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 r(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var r=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,r.get?r:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var a=r(t);const n={name:"@progress/kendo-react-listview",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},l=a.forwardRef(((e,t)=>{s.validatePackage(n);const{data:r=[],item:l,footer:o,header:i,className:c,style:u,onScroll:d}=e,m=a.useRef(null),f=a.useRef(null),p=a.useCallback((()=>({onScroll:d,props:e,context:{},state:{},refs:{}})),[]);a.useImperativeHandle(f,p),a.useImperativeHandle(t,(()=>f.current));const v=a.useCallback((e=>s.dispatchEvent(d,e,p(),void 0)),[]),w=(e,t,s)=>{s.preventDefault(),t.focusNext(e)},y=(e,t,s)=>{s.preventDefault(),t.focusPrevious(e)},E=a.useMemo((()=>new s.Navigation({root:m,selectors:[".k-listview-item"],keyboardEvents:{keydown:{ArrowDown:w,ArrowRight:w,ArrowUp:y,ArrowLeft:y,Home:(e,t,s)=>{s.preventDefault();const r=t.first;r&&t.focusElement(r,e)},End:(e,t,s)=>{s.preventDefault();const r=t.last;r&&t.focusElement(r,e)}}},tabIndex:0,focusClass:"k-focus"})),[]),k=a.useCallback(E.triggerKeyboardEvent.bind(E),[]);return a.useEffect((()=>(E.initializeRovingTab(),()=>E.removeFocusListener())),[]),a.createElement("div",{className:s.classNames("k-listview",c),style:u,onKeyDown:k},i?a.createElement(i,null):null,a.createElement("div",{role:"list",className:"k-listview-content",onScroll:v,ref:m},l&&r.map(((e,t)=>a.createElement(l,{dataItem:e,index:t,key:t})))),o?a.createElement(o,null):null)}));l.displayName="KendoReactListView";e.ListView=l,e.ListViewFooter=e=>a.createElement("div",{className:s.classNames("k-listview-footer",e.className),style:e.style},e.children),e.ListViewHeader=e=>a.createElement("div",{className:s.classNames("k-listview-header",e.className),style:e.style},e.children),e.ListViewItemWrapper=e=>{const{children:t,style:r,className:n}=e;return a.createElement("div",{role:"listitem",style:r,className:s.classNames("k-listview-item",n)},t)}}));

package/index.d.mts

@@ -6,17 +6,12 @@
  *-------------------------------------------------------------------------------------------
  */
 import { BaseEvent } from '@progress/kendo-react-common';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 
-export declare class ListView extends React_2.PureComponent<ListViewProps, {}> {
-    constructor(props: ListViewProps);
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private onScroll;
-}
+export declare const ListView: React_2.ForwardRefExoticComponent<ListViewProps & React_2.RefAttributes<ListViewHandle | null>>;
+
+/** @hidden */
+export declare type ListView = ListViewHandle;
 
 export declare interface ListViewEvent extends BaseEvent<ListView> {
 }
@@ -38,6 +33,17 @@ export declare interface ListViewFooterProps {
     className?: string;
 }
 
+/**
+ * @hidden
+ */
+declare interface ListViewHandle {
+    onScroll?: (event: ListViewEvent) => void;
+    props: ListViewProps;
+    context: {};
+    state: {};
+    refs: {};
+}
+
 export declare const ListViewHeader: React_2.FunctionComponent<ListViewHeaderProps>;
 
 export declare interface ListViewHeaderProps {
@@ -69,6 +75,26 @@ export declare interface ListViewItemProps {
     index?: number;
 }
 
+export declare const ListViewItemWrapper: React_2.FunctionComponent<ListViewItemWrapperProps>;
+
+/**
+ * Represents the props of the each ListViewWrapper item.
+ */
+declare interface ListViewItemWrapperProps {
+    /**
+     * Sets the ListViewItemWrapper children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the ListViewItemWrapper.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the CSS class names which are set to the ListViewItemWrapper.
+     */
+    className?: string;
+}
+
 /**
  * Represents the props of the [KendoReact ListView component]({% slug overview_listview %}).
  */

package/index.d.ts

@@ -6,17 +6,12 @@
  *-------------------------------------------------------------------------------------------
  */
 import { BaseEvent } from '@progress/kendo-react-common';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 
-export declare class ListView extends React_2.PureComponent<ListViewProps, {}> {
-    constructor(props: ListViewProps);
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private onScroll;
-}
+export declare const ListView: React_2.ForwardRefExoticComponent<ListViewProps & React_2.RefAttributes<ListViewHandle | null>>;
+
+/** @hidden */
+export declare type ListView = ListViewHandle;
 
 export declare interface ListViewEvent extends BaseEvent<ListView> {
 }
@@ -38,6 +33,17 @@ export declare interface ListViewFooterProps {
     className?: string;
 }
 
+/**
+ * @hidden
+ */
+declare interface ListViewHandle {
+    onScroll?: (event: ListViewEvent) => void;
+    props: ListViewProps;
+    context: {};
+    state: {};
+    refs: {};
+}
+
 export declare const ListViewHeader: React_2.FunctionComponent<ListViewHeaderProps>;
 
 export declare interface ListViewHeaderProps {
@@ -69,6 +75,26 @@ export declare interface ListViewItemProps {
     index?: number;
 }
 
+export declare const ListViewItemWrapper: React_2.FunctionComponent<ListViewItemWrapperProps>;
+
+/**
+ * Represents the props of the each ListViewWrapper item.
+ */
+declare interface ListViewItemWrapperProps {
+    /**
+     * Sets the ListViewItemWrapper children elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS styles to the ListViewItemWrapper.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the CSS class names which are set to the ListViewItemWrapper.
+     */
+    className?: string;
+}
+
 /**
  * Represents the props of the [KendoReact ListView component]({% slug overview_listview %}).
  */

package/index.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ListView.js"),i=require("./ListViewHeader.js"),t=require("./ListViewFooter.js");exports.ListView=e.ListView;exports.ListViewHeader=i.ListViewHeader;exports.ListViewFooter=t.ListViewFooter;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ListView.js"),i=require("./ListViewHeader.js"),t=require("./ListViewFooter.js"),r=require("./ListViewItemWrapper.js");exports.ListView=e.ListView;exports.ListViewHeader=i.ListViewHeader;exports.ListViewFooter=t.ListViewFooter;exports.ListViewItemWrapper=r.ListViewItemWrapper;

package/index.mjs

@@ -6,11 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { ListView as r } from "./ListView.mjs";
+import { ListView as t } from "./ListView.mjs";
 import { ListViewHeader as i } from "./ListViewHeader.mjs";
-import { ListViewFooter as f } from "./ListViewFooter.mjs";
+import { ListViewFooter as m } from "./ListViewFooter.mjs";
+import { ListViewItemWrapper as f } from "./ListViewItemWrapper.mjs";
 export {
-  r as ListView,
-  f as ListViewFooter,
-  i as ListViewHeader
+  t as ListView,
+  m as ListViewFooter,
+  i as ListViewHeader,
+  f as ListViewItemWrapper
 };

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-listview",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1718182643,
+  publishDate: 1719494638,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-listview",
-  "version": "8.1.0-develop.9",
+  "version": "8.1.1-develop.1",
   "description": "React ListView enables you to display a custom layout of data items. KendoReact ListView package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,7 +23,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "8.1.0-develop.9",
+    "@progress/kendo-react-common": "8.1.1-develop.1",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },