@progress/kendo-react-listview 8.2.0-develop.31 → 8.2.0-develop.32

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 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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),d=require("@progress/kendo-react-common"),I=require("./package-metadata.js");function h(a){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const l in a)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(a,l);Object.defineProperty(r,l,c.get?c:{enumerable:!0,get:()=>a[l]})}}return r.default=a,Object.freeze(r)}const s=h(R),o="k-focus",y=s.forwardRef((a,r)=>{d.validatePackage(I.packageMetadata);const{data:l=[],item:c,footer:f,header:m,className:L,style:C,onScroll:v,navigatable:b}=a,p=s.useRef(null),w=s.useRef(null),g=s.useCallback(()=>({onScroll:v,props:a,context:{},state:{},refs:{}}),[]);s.useImperativeHandle(w,g),s.useImperativeHandle(r,()=>w.current);const S=s.useCallback(e=>d.dispatchEvent(v,e,g(),void 0),[]),k=(e,t,n)=>{n.preventDefault(),t.focusNext(e),t.next(e).classList.add(o),t.previous(e).classList.remove(o)},E=(e,t,n)=>{n.preventDefault(),t.focusPrevious(e),t.next(e).classList.remove(o),t.previous(e).classList.add(o)},i=s.useMemo(()=>new d.Navigation({root:p,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:k,ArrowRight:k,ArrowUp:E,ArrowLeft:E,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}),[]),D=s.useCallback(i.triggerKeyboardEvent.bind(i),[]),N=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(b)return i.initializeRovingTab(),()=>i.removeFocusListener()},[]),s.createElement("div",{className:d.classNames("k-listview",L),style:C,onKeyDown:e=>b&&D(e),onClick:N},m?s.createElement(m,null):null,s.createElement("div",{role:"list",className:"k-listview-content",onScroll:S,ref:p},c&&l.map((e,t)=>s.createElement(c,{dataItem:e,index:t,key:t}))),f?s.createElement(f,null):null)});y.displayName="KendoReactListView";exports.ListView=y;

package/ListView.mjs

@@ -6,75 +6,87 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-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,
+import * as s from "react";
+import { validatePackage as N, dispatchEvent as h, Navigation as x, classNames as D } from "@progress/kendo-react-common";
+import { packageMetadata as R } from "./package-metadata.mjs";
+const o = "k-focus", S = s.forwardRef((r, k) => {
+  N(R);
+  const { data: b = [], item: i, footer: c, header: u, className: L, style: g, onScroll: m, navigatable: d } = r, v = s.useRef(null), f = s.useRef(null), p = s.useCallback(() => ({
+    onScroll: m,
+    props: r,
     context: {},
     state: {},
     refs: {}
   }), []);
-  e.useImperativeHandle(f, d), e.useImperativeHandle(p, () => f.current);
-  const b = e.useCallback(
-    (a) => I(u, a, d(), void 0),
+  s.useImperativeHandle(f, p), s.useImperativeHandle(k, () => f.current);
+  const C = s.useCallback(
+    (e) => h(m, e, p(), 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,
+  ), w = (e, t, a) => {
+    a.preventDefault(), t.focusNext(e), t.next(e).classList.add(o), t.previous(e).classList.remove(o);
+  }, E = (e, t, a) => {
+    a.preventDefault(), t.focusPrevious(e), t.next(e).classList.remove(o), t.previous(e).classList.add(o);
+  }, l = s.useMemo(
+    () => new x({
+      root: v,
       selectors: [".k-listview-item"],
+      rovingTabIndex: !0,
       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);
+          ArrowDown: w,
+          ArrowRight: w,
+          ArrowUp: E,
+          ArrowLeft: E,
+          Home: (e, t, a) => {
+            a.preventDefault();
+            const n = t.first;
+            n && t.focusElement(n, e);
           },
-          End: (a, t, s) => {
-            s.preventDefault();
-            const o = t.last;
-            o && t.focusElement(o, a);
+          End: (e, t, a) => {
+            a.preventDefault();
+            const n = t.last;
+            n && t.focusElement(n, e);
+          },
+          Tab: (e, t, a) => {
+            t.removeFocusClass(e);
           }
         }
       },
       tabIndex: 0,
-      focusClass: "k-focus"
+      focusClass: o
     }),
     []
-  ), N = e.useCallback(l.triggerKeyboardEvent.bind(l), []);
-  return e.useEffect(() => (l.initializeRovingTab(), () => l.removeFocusListener()), []), /* @__PURE__ */ e.createElement(
+  ), y = s.useCallback(l.triggerKeyboardEvent.bind(l), []), I = s.useCallback((e) => {
+    e.nativeEvent.target.classList.add(o), l.elements.forEach((t) => {
+      t !== e.nativeEvent.target && t.classList.remove(o);
+    });
+  }, []);
+  return s.useEffect(() => {
+    if (d)
+      return l.initializeRovingTab(), () => l.removeFocusListener();
+  }, []), /* @__PURE__ */ s.createElement(
     "div",
     {
-      className: h("k-listview", E),
+      className: D("k-listview", L),
       style: g,
-      onKeyDown: N
+      onKeyDown: (e) => d && y(e),
+      onClick: I
     },
-    i ? /* @__PURE__ */ e.createElement(i, null) : null,
-    /* @__PURE__ */ e.createElement(
+    u ? /* @__PURE__ */ s.createElement(u, null) : null,
+    /* @__PURE__ */ s.createElement(
       "div",
       {
         role: "list",
         className: "k-listview-content",
-        onScroll: b,
-        ref: m
+        onScroll: C,
+        ref: v
       },
-      r && k.map((a, t) => /* @__PURE__ */ e.createElement(r, { dataItem: a, index: t, key: t }))
+      i && b.map((e, t) => /* @__PURE__ */ s.createElement(i, { dataItem: e, index: t, key: t }))
     ),
-    c ? /* @__PURE__ */ e.createElement(c, null) : null
+    c ? /* @__PURE__ */ s.createElement(c, null) : null
   );
 });
-H.displayName = "KendoReactListView";
+S.displayName = "KendoReactListView";
 export {
-  H as ListView
+  S as ListView
 };

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 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)}}));
+!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",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},l="k-focus",o=r.forwardRef(((e,t)=>{s.validatePackage(n);const{data:a=[],item:o,footer:i,header:c,className:d,style:u,onScroll:m,navigatable:f}=e,v=r.useRef(null),p=r.useRef(null),w=r.useCallback((()=>({onScroll:m,props:e,context:{},state:{},refs:{}})),[]);r.useImperativeHandle(p,w),r.useImperativeHandle(t,(()=>p.current));const E=r.useCallback((e=>s.dispatchEvent(m,e,w(),void 0)),[]),b=(e,t,s)=>{s.preventDefault(),t.focusNext(e),t.next(e).classList.add(l),t.previous(e).classList.remove(l)},k=(e,t,s)=>{s.preventDefault(),t.focusPrevious(e),t.next(e).classList.remove(l),t.previous(e).classList.add(l)},y=r.useMemo((()=>new s.Navigation({root:v,selectors:[".k-listview-item"],rovingTabIndex:!0,keyboardEvents:{keydown:{ArrowDown:b,ArrowRight:b,ArrowUp:k,ArrowLeft:k,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(y.triggerKeyboardEvent.bind(y),[]),N=r.useCallback((e=>{e.nativeEvent.target.classList.add(l),y.elements.forEach((t=>{t!==e.nativeEvent.target&&t.classList.remove(l)}))}),[]);return r.useEffect((()=>{if(f)return y.initializeRovingTab(),()=>y.removeFocusListener()}),[]),r.createElement("div",{className:s.classNames("k-listview",d),style:u,onKeyDown:e=>f&&g(e),onClick:N},c?r.createElement(c,null):null,r.createElement("div",{role:"list",className:"k-listview-content",onScroll:E,ref:v},o&&a.map(((e,t)=>r.createElement(o,{dataItem:e,index:t,key:t})))),i?r.createElement(i,null):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

@@ -33,9 +33,7 @@ export declare interface ListViewFooterProps {
     className?: string;
 }
 
-/**
- * @hidden
- */
+/** @hidden */
 declare interface ListViewHandle {
     onScroll?: (event: ListViewEvent) => void;
     props: ListViewProps;
@@ -127,6 +125,11 @@ export declare interface ListViewProps {
      * Fires when the ListView has been scrolled.
      */
     onScroll?: (event: ListViewEvent) => void;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the ListView.
+     * By default, navigation is disabled.
+     */
+    navigatable?: boolean;
 }
 
 export { }

package/index.d.ts

@@ -33,9 +33,7 @@ export declare interface ListViewFooterProps {
     className?: string;
 }
 
-/**
- * @hidden
- */
+/** @hidden */
 declare interface ListViewHandle {
     onScroll?: (event: ListViewEvent) => void;
     props: ListViewProps;
@@ -127,6 +125,11 @@ export declare interface ListViewProps {
      * Fires when the ListView has been scrolled.
      */
     onScroll?: (event: ListViewEvent) => void;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the ListView.
+     * By default, navigation is disabled.
+     */
+    navigatable?: boolean;
 }
 
 export { }

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-listview",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1722495268,
+  publishDate: 1722507855,
   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.2.0-develop.31",
+  "version": "8.2.0-develop.32",
   "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.2.0-develop.31",
+    "@progress/kendo-react-common": "8.2.0-develop.32",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },