@progress/kendo-react-layout 7.4.0 → 7.5.0-develop.2

package/drawer/Drawer.mjs

@@ -12,11 +12,11 @@ import { DrawerContext as S } from "./context/DrawerContext.mjs";
 import { DrawerNavigation as I } from "./DrawerNavigation.mjs";
 import { validatePackage as W, useDir as O, classNames as T } from "@progress/kendo-react-common";
 import { packageMetadata as j } from "../package-metadata.mjs";
-const s = t.forwardRef((l, u) => {
+const l = t.forwardRef((d, u) => {
   W(j);
   const {
-    expanded: d,
-    mode: n,
+    expanded: n,
+    mode: i,
     position: p,
     className: f,
     children: v,
@@ -29,8 +29,8 @@ const s = t.forwardRef((l, u) => {
     item: k,
     tabIndex: g,
     onOverlayClick: x,
-    onSelect: i
-  } = l, r = t.useRef(null), E = t.useCallback(
+    onSelect: o
+  } = d, r = t.useRef(null), E = t.useCallback(
     () => {
       r.current && r.current.focus();
     },
@@ -41,26 +41,26 @@ const s = t.forwardRef((l, u) => {
     focus: E
   }));
   const N = t.useCallback(
-    (D, P, o) => {
-      if (a && i) {
+    (D, P, s) => {
+      if (a && o) {
         const R = {
           itemTarget: D,
           itemIndex: P,
-          syntheticEvent: o,
-          nativeEvent: o && o.nativeEvent,
+          syntheticEvent: s,
+          nativeEvent: s && s.nativeEvent,
           target: void 0
         };
-        i.call(void 0, R);
+        o.call(void 0, R);
       }
     },
-    [a, i]
-  ), c = O(r, l.dir), C = T(
+    [a, o]
+  ), c = O(r, d.dir), C = T(
     {
       "k-drawer-container": !0,
-      "k-drawer-expanded": d,
-      "k-drawer-overlay": n === "overlay",
-      "k-drawer-push": n === "push",
-      "k-drawer-mini": m
+      "k-drawer-expanded": n,
+      "k-drawer-overlay": i === "overlay",
+      "k-drawer-push": i === "push",
+      "k-drawer-mini": m && !n
     },
     f
   );
@@ -69,8 +69,8 @@ const s = t.forwardRef((l, u) => {
     {
       value: {
         animation: y,
-        expanded: d,
-        mode: n,
+        expanded: n,
+        mode: i,
         position: p,
         mini: m,
         dir: c,
@@ -96,7 +96,7 @@ const s = t.forwardRef((l, u) => {
     )
   );
 });
-s.propTypes = {
+l.propTypes = {
   animation: e.any,
   expanded: e.bool,
   children: e.any,
@@ -123,8 +123,8 @@ const H = {
   width: 240,
   miniWidth: 50
 };
-s.defaultProps = H;
-s.displayName = "KendoDrawer";
+l.defaultProps = H;
+l.displayName = "KendoDrawer";
 export {
-  s as Drawer
+  l as Drawer
 };

package/drawer/DrawerNavigation.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 U=require("react"),i=require("prop-types"),H=require("./context/DrawerContext.js"),B=require("./DrawerItem.js"),u=require("@progress/kendo-react-common"),h=require("../package-metadata.js");function z(a){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const n in a)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(r,n,l.get?l:{enumerable:!0,get:()=>a[n]})}}return r.default=a,Object.freeze(r)}const t=z(U),K=240,V=50,G={type:"slide",duration:200},J={type:"slide",duration:0},y=t.forwardRef((a,r)=>{const{children:n,className:l,style:f}=a;u.validatePackage(h.packageMetadata);const O=u.shouldShowValidationUI(h.packageMetadata),{animation:p,expanded:c,mode:d,position:s,onOverlayClick:E,mini:o,dir:w,width:k,miniWidth:v,items:b,item:W,onSelect:M}=t.useContext(H.DrawerContext),m=t.useRef(null),x=t.useCallback(()=>{m.current&&m.current.focus()},[]),e=typeof p!="boolean"?p:p===!1?J:G,N=k||K,g=v||V;t.useImperativeHandle(r,()=>({element:m.current,focus:x}));const A=t.useMemo(()=>"k-widget k-drawer "+u.classNames({"k-drawer-start":s==="start","k-drawer-end":s==="end"},l),[s]),C={opacity:1,flexBasis:N,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},P={opacity:1,transform:"translateX(0px)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},_={opacity:o?1:0,flexBasis:o?g:0,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},R={opacity:0,transform:"translateX(-100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},S={opacity:0,transform:"translateX(100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},D={transform:"translateX(0%)",WebkitTransitionDuration:(e&&e.duration)+"ms",transitionDuration:(e&&e.duration)+"ms"},j=c?d==="push"?C:P:d==="push"?_:w==="ltr"&&s==="start"||w==="rtl"&&s==="end"?o?D:R:o?D:S,q=b&&t.createElement("ul",{className:"k-drawer-items",role:"menubar","aria-label":"drawer-list","aria-expanded":c},b.map((X,I)=>{const F={index:I,...X,onSelect:M},L=W||B.DrawerItem;return t.createElement(L,{key:I,...F})})),T=t.createElement("div",{style:e?{...j,...f}:f,className:A,ref:m},t.createElement("div",{className:"k-drawer-wrapper",style:!c&&o&&d==="overlay"?{width:g}:{width:N}},q||n),O&&t.createElement(u.WatermarkOverlay,null));return d==="overlay"?t.createElement(t.Fragment,null,c&&t.createElement("div",{className:"k-overlay",onClick:E}),T):T});y.propTypes={children:i.any,className:i.string,style:i.object,item:i.any,tabIndex:i.number};y.displayName="KendoDrawerNavigation";exports.DrawerNavigation=y;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react"),i=require("prop-types"),$=require("./context/DrawerContext.js"),G=require("./DrawerItem.js"),l=require("@progress/kendo-react-common"),O=require("../package-metadata.js");function J(a){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const n in a)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(s,n,c.get?c:{enumerable:!0,get:()=>a[n]})}}return s.default=a,Object.freeze(s)}const t=J(V),Q=240,Y=50,Z={type:"slide",duration:200},ee={type:"slide",duration:0},f=t.forwardRef((a,s)=>{const{children:n,className:c,style:k}=a;l.validatePackage(O.packageMetadata);const E=l.shouldShowValidationUI(O.packageMetadata),{animation:p,expanded:m,mode:d,position:o,onOverlayClick:W,mini:r,dir:w,width:v,miniWidth:N,items:b,item:C,onSelect:M}=t.useContext($.DrawerContext),u=t.useRef(null),x=t.useCallback(()=>{u.current&&u.current.focus()},[]),e=typeof p!="boolean"?p:p===!1?ee:Z,g=v||Q,D=N||Y;t.useImperativeHandle(s,()=>({element:u.current,focus:x}));const A=t.useMemo(()=>"k-drawer "+l.classNames({"k-drawer-start":o==="start","k-drawer-end":o==="end"},c),[o]),P={opacity:1,flexBasis:g,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},_={opacity:1,transform:"translateX(0px)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},R={opacity:r?1:0,flexBasis:r?D:0,WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},S={opacity:0,transform:"translateX(-100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},j={opacity:0,transform:"translateX(100%)",WebkitTransition:"all "+(e&&e.duration)+"ms",transition:"all "+(e&&e.duration)+"ms"},T={transform:"translateX(0%)",WebkitTransitionDuration:(e&&e.duration)+"ms",transitionDuration:(e&&e.duration)+"ms"},q=m?d==="push"?P:_:d==="push"?R:w==="ltr"&&o==="start"||w==="rtl"&&o==="end"?r?T:S:r?T:j,L=b&&t.createElement("ul",{className:"k-drawer-items",role:"menubar","aria-label":"drawer-list","aria-expanded":m},b.map((X,I)=>{const{className:F,level:y,...U}=X,H=y!=null?y:0,B=l.classNames(F,r?"":`k-level-${H}`),z={index:I,className:B,...U,onSelect:M},K=C||G.DrawerItem;return t.createElement(K,{key:I,...z})})),h=t.createElement("div",{style:e?{...q,...k}:k,className:A,ref:u},t.createElement("div",{className:"k-drawer-wrapper",style:!m&&r&&d==="overlay"?{width:D}:{width:g}},L||n),E&&t.createElement(l.WatermarkOverlay,null));return d==="overlay"?t.createElement(t.Fragment,null,m&&t.createElement("div",{className:"k-overlay",onClick:W}),h):h});f.propTypes={children:i.any,className:i.string,style:i.object,item:i.any,tabIndex:i.number};f.displayName="KendoDrawerNavigation";exports.DrawerNavigation=f;

package/drawer/DrawerNavigation.mjs

@@ -7,82 +7,82 @@
  */
 "use client";
 import * as a from "react";
-import n from "prop-types";
-import { DrawerContext as S } from "./context/DrawerContext.mjs";
-import { DrawerItem as B } from "./DrawerItem.mjs";
-import { validatePackage as j, shouldShowValidationUI as K, classNames as V, WatermarkOverlay as q } from "@progress/kendo-react-common";
-import { packageMetadata as N } from "../package-metadata.mjs";
-const z = 240, G = 50, J = { type: "slide", duration: 200 }, Q = { type: "slide", duration: 0 }, h = a.forwardRef((I, T) => {
-  const { children: b, className: D, style: m } = I;
-  j(N);
-  const E = K(N), {
+import r from "prop-types";
+import { DrawerContext as q } from "./context/DrawerContext.mjs";
+import { DrawerItem as z } from "./DrawerItem.mjs";
+import { validatePackage as G, shouldShowValidationUI as J, classNames as h, WatermarkOverlay as Q } from "@progress/kendo-react-common";
+import { packageMetadata as I } from "../package-metadata.mjs";
+const Y = 240, Z = 50, tt = { type: "slide", duration: 200 }, at = { type: "slide", duration: 0 }, T = a.forwardRef((b, D) => {
+  const { children: E, className: W, style: c } = b;
+  G(I);
+  const x = J(I), {
     animation: l,
     expanded: s,
     mode: o,
-    position: e,
-    onOverlayClick: W,
-    mini: r,
-    dir: c,
-    width: d,
-    miniWidth: u,
-    items: p,
-    item: g,
-    onSelect: x
-  } = a.useContext(S), i = a.useRef(null), A = a.useCallback(
+    position: n,
+    onOverlayClick: g,
+    mini: e,
+    dir: d,
+    width: u,
+    miniWidth: p,
+    items: y,
+    item: A,
+    onSelect: C
+  } = a.useContext(q), i = a.useRef(null), O = a.useCallback(
     () => {
       i.current && i.current.focus();
     },
     []
-  ), t = typeof l != "boolean" ? l : l === !1 ? Q : J, y = d || z, f = u || G;
-  a.useImperativeHandle(T, () => ({
+  ), t = typeof l != "boolean" ? l : l === !1 ? at : tt, f = u || Y, k = p || Z;
+  a.useImperativeHandle(D, () => ({
     element: i.current,
-    focus: A
+    focus: O
   }));
-  const O = a.useMemo(
-    () => "k-widget k-drawer " + V(
+  const M = a.useMemo(
+    () => "k-drawer " + h(
       {
-        "k-drawer-start": e === "start",
-        "k-drawer-end": e === "end"
+        "k-drawer-start": n === "start",
+        "k-drawer-end": n === "end"
       },
-      D
+      W
     ),
-    [e]
-  ), C = {
+    [n]
+  ), P = {
     opacity: 1,
-    flexBasis: y,
+    flexBasis: f,
     WebkitTransition: "all " + (t && t.duration) + "ms",
     /* Safari */
     transition: "all " + (t && t.duration) + "ms"
-  }, M = {
+  }, _ = {
     opacity: 1,
     transform: "translateX(0px)",
     WebkitTransition: "all " + (t && t.duration) + "ms",
     /* Safari */
     transition: "all " + (t && t.duration) + "ms"
-  }, P = {
-    opacity: r ? 1 : 0,
-    flexBasis: r ? f : 0,
+  }, L = {
+    opacity: e ? 1 : 0,
+    flexBasis: e ? k : 0,
     WebkitTransition: "all " + (t && t.duration) + "ms",
     /* Safari */
     transition: "all " + (t && t.duration) + "ms"
-  }, _ = {
+  }, R = {
     opacity: 0,
     transform: "translateX(-100%)",
     WebkitTransition: "all " + (t && t.duration) + "ms",
     /* Safari */
     transition: "all " + (t && t.duration) + "ms"
-  }, R = {
+  }, X = {
     opacity: 0,
     transform: "translateX(100%)",
     WebkitTransition: "all " + (t && t.duration) + "ms",
     /* Safari */
     transition: "all " + (t && t.duration) + "ms"
-  }, w = {
+  }, v = {
     transform: "translateX(0%)",
     WebkitTransitionDuration: (t && t.duration) + "ms",
     /* Safari */
     transitionDuration: (t && t.duration) + "ms"
-  }, X = s ? o === "push" ? C : M : o === "push" ? P : c === "ltr" && e === "start" || c === "rtl" && e === "end" ? r ? w : _ : r ? w : R, F = p && /* @__PURE__ */ a.createElement(
+  }, F = s ? o === "push" ? P : _ : o === "push" ? L : d === "ltr" && n === "start" || d === "rtl" && n === "end" ? e ? v : R : e ? v : X, U = y && /* @__PURE__ */ a.createElement(
     "ul",
     {
       className: "k-drawer-items",
@@ -90,43 +90,47 @@ const z = 240, G = 50, J = { type: "slide", duration: 200 }, Q = { type: "slide"
       "aria-label": "drawer-list",
       "aria-expanded": s
     },
-    p.map(
-      (L, v) => {
-        const U = {
-          index: v,
-          ...L,
-          onSelect: x
-        }, H = g || B;
-        return /* @__PURE__ */ a.createElement(H, { key: v, ...U });
+    y.map(
+      (H, N) => {
+        const { className: S, level: m, ...B } = H, j = m != null ? m : 0, K = h(
+          S,
+          e ? "" : `k-level-${j}`
+        ), V = {
+          index: N,
+          className: K,
+          ...B,
+          onSelect: C
+        }, $ = A || z;
+        return /* @__PURE__ */ a.createElement($, { key: N, ...V });
       }
     )
-  ), k = /* @__PURE__ */ a.createElement(
+  ), w = /* @__PURE__ */ a.createElement(
     "div",
     {
-      style: t ? { ...X, ...m } : m,
-      className: O,
+      style: t ? { ...F, ...c } : c,
+      className: M,
       ref: i
     },
     /* @__PURE__ */ a.createElement(
       "div",
       {
         className: "k-drawer-wrapper",
-        style: !s && r && o === "overlay" ? { width: f } : { width: y }
+        style: !s && e && o === "overlay" ? { width: k } : { width: f }
       },
-      F || b
+      U || E
     ),
-    E && /* @__PURE__ */ a.createElement(q, null)
+    x && /* @__PURE__ */ a.createElement(Q, null)
   );
-  return o === "overlay" ? /* @__PURE__ */ a.createElement(a.Fragment, null, s && /* @__PURE__ */ a.createElement("div", { className: "k-overlay", onClick: W }), k) : k;
+  return o === "overlay" ? /* @__PURE__ */ a.createElement(a.Fragment, null, s && /* @__PURE__ */ a.createElement("div", { className: "k-overlay", onClick: g }), w) : w;
 });
-h.propTypes = {
-  children: n.any,
-  className: n.string,
-  style: n.object,
-  item: n.any,
-  tabIndex: n.number
+T.propTypes = {
+  children: r.any,
+  className: r.string,
+  style: r.object,
+  item: r.any,
+  tabIndex: r.number
 };
-h.displayName = "KendoDrawerNavigation";
+T.displayName = "KendoDrawerNavigation";
 export {
-  h as DrawerNavigation
+  T as DrawerNavigation
 };

package/index.d.mts

@@ -1112,7 +1112,7 @@ export declare interface BreadcrumbLinkHandle {
     /**
      * The current element or `null` if there is none.
      */
-    element: HTMLLIElement | null;
+    element: HTMLAnchorElement | null;
     /**
      * The props values of the BreadcrumbLink.
      */
@@ -1903,6 +1903,11 @@ export declare interface DrawerItemProps {
      * Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
      */
     [customProp: string]: any;
+    /**
+     * This property is used in scenarios with hierarchical drawer. The rendering of the component requires each node to have a "`k-level-` + the level of nesting" className.
+     * The nesting levels should be handled by the developer. The root level items have a level of 0.
+     */
+    level?: number;
     /**
      * @hidden
      */

package/index.d.ts

@@ -1112,7 +1112,7 @@ export declare interface BreadcrumbLinkHandle {
     /**
      * The current element or `null` if there is none.
      */
-    element: HTMLLIElement | null;
+    element: HTMLAnchorElement | null;
     /**
      * The props values of the BreadcrumbLink.
      */
@@ -1903,6 +1903,11 @@ export declare interface DrawerItemProps {
      * Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
      */
     [customProp: string]: any;
+    /**
+     * This property is used in scenarios with hierarchical drawer. The rendering of the component requires each node to have a "`k-level-` + the level of nesting" className.
+     * The nesting levels should be handled by the developer. The root level items have a level of 0.
+     */
+    level?: number;
     /**
      * @hidden
      */

package/package-metadata.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-layout",
-  "version": "7.4.0",
+  "version": "7.5.0-develop.2",
   "description": "React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,11 +23,11 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "7.4.0",
-    "@progress/kendo-react-common": "7.4.0",
-    "@progress/kendo-react-intl": "7.4.0",
-    "@progress/kendo-react-popup": "7.4.0",
-    "@progress/kendo-react-progressbars": "7.4.0",
+    "@progress/kendo-react-animation": "7.5.0-develop.2",
+    "@progress/kendo-react-common": "7.5.0-develop.2",
+    "@progress/kendo-react-intl": "7.5.0-develop.2",
+    "@progress/kendo-react-popup": "7.5.0-develop.2",
+    "@progress/kendo-react-progressbars": "7.5.0-develop.2",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/panelbar/PanelBar.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 v=require("react"),r=require("prop-types"),g=require("./PanelBarItem.js"),d=require("./util.js"),o=require("@progress/kendo-react-common"),y=require("../package-metadata.js"),l=require("./interfaces/NavigationAction.js");function x(p){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const a in p)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(p,a);Object.defineProperty(s,a,e.get?e:{enumerable:!0,get:()=>p[a]})}}return s.default=p,Object.freeze(s)}const u=x(v),h=class h extends u.Component{constructor(s){super(s),this._element=null,this.showLicenseWatermark=!1,this.handleSelect=e=>{this.onSelect(e),this.onFocus(e)},this.onSelect=e=>{const n=d.flatChildren(u.Children.toArray(this.children));let i,t;switch(n.forEach(c=>{c.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)&&(i=c)}),this.expandMode){case"single":t=[...i.props.parentUniquePrivateKey,i.props.uniquePrivateKey],d.isArrayEqual(this.expandedItems,t)&&(i.props.parentUniquePrivateKey?t=[...i.props.parentUniquePrivateKey]:t=[]);break;case"multiple":{t=this.expandedItems.slice();const c=t.indexOf(i.props.uniquePrivateKey);c===-1?t.push(i.props.uniquePrivateKey):t.splice(c,1);break}default:t=this.expandedItems.slice();break}this.setState({selected:i.props.uniquePrivateKey,expanded:t}),this.props.onSelect&&this.props.onSelect.call(void 0,{target:i,expandedItems:t})},this.onFocus=(e,n=0)=>{const i=d.flatVisibleChildren(u.Children.toArray(this.children));let t;i.forEach((c,f)=>{if(c.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)){const k=f+n<0?0:f+n>i.length?i.length-1:f+n;t=i[k]}}),t&&(this.activeDescendant=t.props.id,this.setState({focused:t.props.uniquePrivateKey}))},this.onNavigate=(e,n)=>{let i;switch(n){case l.NavigationAction.Previous:i=-1,this.onFocus(e,i);break;case l.NavigationAction.Next:i=1,this.onFocus(e,i);break;case l.NavigationAction.Toggle:this.onSelect(e);break}},this.handleWrapperFocus=()=>{clearTimeout(this.nextTickId),this.state.wrapperFocused||this.setState({wrapperFocused:!0})},this.handleWrapperBlur=()=>{this.nextTick(()=>{this.setState({wrapperFocused:!1})})},this.handleKeyDown=e=>{const n=this._element&&getComputedStyle(this._element).direction==="rtl"||!1;if(e.target===e.currentTarget){const i=e.keyCode;let t;switch(i){case o.Keys.left:t=n?l.NavigationAction.Next:l.NavigationAction.Previous;break;case o.Keys.up:t=l.NavigationAction.Previous;break;case o.Keys.right:t=n?l.NavigationAction.Previous:l.NavigationAction.Next;break;case o.Keys.down:t=l.NavigationAction.Next;break;case o.Keys.space:case o.Keys.enter:t=l.NavigationAction.Toggle;break;default:t=null;break}t!==null&&(e.preventDefault(),this.onNavigate(e,t))}},o.validatePackage(y.packageMetadata),this.showLicenseWatermark=o.shouldShowValidationUI(y.packageMetadata);const a=d.getInitialState(s,this.expandMode);a.focused||(a.focused=d.getFirstId(s)),this.state=a}get expandMode(){return this.props.expandMode||"multiple"}get selectedItem(){const{selected:s=this.state.selected}=this.props;return s}get expandedItems(){return this.props.isControlled?this.props.expanded||[]:this.state.expanded}get children(){const s={...this.state,selected:this.selectedItem},a={animation:this.props.animation,keepItemsMounted:this.props.keepItemsMounted,state:s,expanded:this.expandedItems,handleSelect:this.handleSelect,children:this.props.children};return d.renderChildren(a)}render(){const s={"aria-activedescendant":this.activeDescendant},a=o.classNames("k-panelbar","k-pos-relative",this.props.className);return u.createElement("ul",{ref:e=>{this._element=e},dir:this.props.dir,role:"tree",tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleWrapperFocus,onBlur:this.handleWrapperBlur,className:a,style:this.props.style,...s},this.children,this.showLicenseWatermark&&u.createElement(o.WatermarkOverlay,null))}nextTick(s){this.nextTickId=window.setTimeout(()=>s())}};h.propTypes={animation:r.bool,children:function(s,a){const e=s[a];if(e){if(Array.isArray(e)){for(const n of e)if(!n.type||n.type!==g.PanelBarItem)return new Error("PanelBar children should be either PanelBarItem or Array of PanelBarItem.")}else if(e.type!==g.PanelBarItem)return new Error("PanelBar child should be either PanelBarItem or Array of PanelBarItem.");return null}return null},dir:r.string,selected:r.string,expanded:r.arrayOf(r.string),focused:r.string,expandMode:r.oneOf(["single","multiple"]),className:r.string,keepItemsMounted:r.bool,onSelect:r.func,style:r.object},h.defaultProps={expandMode:"multiple",animation:!0,keepItemsMounted:!1};let m=h;exports.PanelBar=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),r=require("prop-types"),g=require("./PanelBarItem.js"),d=require("./util.js"),o=require("@progress/kendo-react-common"),y=require("../package-metadata.js"),l=require("./interfaces/NavigationAction.js");function x(p){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const a in p)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(p,a);Object.defineProperty(s,a,e.get?e:{enumerable:!0,get:()=>p[a]})}}return s.default=p,Object.freeze(s)}const u=x(v),h=class h extends u.Component{constructor(s){super(s),this._element=null,this.showLicenseWatermark=!1,this.handleSelect=e=>{this.onSelect(e),this.onFocus(e)},this.onSelect=e=>{const n=d.flatChildren(u.Children.toArray(this.children));let i,t;switch(n.forEach(c=>{c.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)&&(i=c)}),this.expandMode){case"single":t=[...i.props.parentUniquePrivateKey,i.props.uniquePrivateKey],d.isArrayEqual(this.expandedItems,t)&&(i.props.parentUniquePrivateKey?t=[...i.props.parentUniquePrivateKey]:t=[]);break;case"multiple":{t=this.expandedItems.slice();const c=t.indexOf(i.props.uniquePrivateKey);c===-1?t.push(i.props.uniquePrivateKey):t.splice(c,1);break}default:t=this.expandedItems.slice();break}this.setState({selected:i.props.uniquePrivateKey,expanded:t}),this.props.onSelect&&this.props.onSelect.call(void 0,{target:i,expandedItems:t})},this.onFocus=(e,n=0)=>{const i=d.flatVisibleChildren(u.Children.toArray(this.children));let t;i.forEach((c,f)=>{if(c.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)){const k=f+n<0?0:f+n>i.length?i.length-1:f+n;t=i[k]}}),t&&(this.activeDescendant=t.props.id,this.setState({focused:t.props.uniquePrivateKey}))},this.onNavigate=(e,n)=>{let i;switch(n){case l.NavigationAction.Previous:i=-1,this.onFocus(e,i);break;case l.NavigationAction.Next:i=1,this.onFocus(e,i);break;case l.NavigationAction.Toggle:this.onSelect(e);break}},this.handleWrapperFocus=()=>{clearTimeout(this.nextTickId),this.state.wrapperFocused||this.setState({wrapperFocused:!0})},this.handleWrapperBlur=()=>{this.nextTick(()=>{this.setState({wrapperFocused:!1})})},this.handleKeyDown=e=>{const n=this._element&&getComputedStyle(this._element).direction==="rtl"||!1;if(e.target===e.currentTarget){const i=e.keyCode;let t;switch(i){case o.Keys.left:t=n?l.NavigationAction.Next:l.NavigationAction.Previous;break;case o.Keys.up:t=l.NavigationAction.Previous;break;case o.Keys.right:t=n?l.NavigationAction.Previous:l.NavigationAction.Next;break;case o.Keys.down:t=l.NavigationAction.Next;break;case o.Keys.space:case o.Keys.enter:t=l.NavigationAction.Toggle;break;default:t=null;break}t!==null&&(e.preventDefault(),this.onNavigate(e,t))}},o.validatePackage(y.packageMetadata),this.showLicenseWatermark=o.shouldShowValidationUI(y.packageMetadata);const a=d.getInitialState(s,this.expandMode);a.focused||(a.focused=d.getFirstId(s)),this.state=a}get expandMode(){return this.props.expandMode||"multiple"}get selectedItem(){const{selected:s=this.state.selected}=this.props;return s}get expandedItems(){return this.props.isControlled?this.props.expanded||[]:this.state.expanded}get children(){const s={...this.state,selected:this.selectedItem},a={animation:this.props.animation,keepItemsMounted:this.props.keepItemsMounted,state:s,expanded:this.expandedItems,handleSelect:this.handleSelect,children:this.props.children};return d.renderChildren(a)}render(){const s={"aria-activedescendant":this.activeDescendant},a=o.classNames("k-panelbar",this.props.className);return u.createElement("ul",{ref:e=>{this._element=e},dir:this.props.dir,role:"tree",tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleWrapperFocus,onBlur:this.handleWrapperBlur,className:a,style:this.props.style,...s},this.children,this.showLicenseWatermark&&u.createElement(o.WatermarkOverlay,null))}nextTick(s){this.nextTickId=window.setTimeout(()=>s())}};h.propTypes={animation:r.bool,children:function(s,a){const e=s[a];if(e){if(Array.isArray(e)){for(const n of e)if(!n.type||n.type!==g.PanelBarItem)return new Error("PanelBar children should be either PanelBarItem or Array of PanelBarItem.")}else if(e.type!==g.PanelBarItem)return new Error("PanelBar child should be either PanelBarItem or Array of PanelBarItem.");return null}return null},dir:r.string,selected:r.string,expanded:r.arrayOf(r.string),focused:r.string,expandMode:r.oneOf(["single","multiple"]),className:r.string,keepItemsMounted:r.bool,onSelect:r.func,style:r.object},h.defaultProps={expandMode:"multiple",animation:!0,keepItemsMounted:!1};let m=h;exports.PanelBar=m;

package/panelbar/PanelBar.mjs

@@ -9,8 +9,8 @@
 import * as p from "react";
 import a from "prop-types";
 import { PanelBarItem as u } from "./PanelBarItem.mjs";
-import { flatChildren as x, isArrayEqual as k, flatVisibleChildren as g, getInitialState as P, getFirstId as I, renderChildren as v } from "./util.mjs";
-import { Keys as d, validatePackage as b, shouldShowValidationUI as w, classNames as S, WatermarkOverlay as K } from "@progress/kendo-react-common";
+import { flatChildren as x, isArrayEqual as g, flatVisibleChildren as k, getInitialState as P, getFirstId as I, renderChildren as b } from "./util.mjs";
+import { Keys as d, validatePackage as v, shouldShowValidationUI as w, classNames as S, WatermarkOverlay as K } from "@progress/kendo-react-common";
 import { packageMetadata as m } from "../package-metadata.mjs";
 import { NavigationAction as n } from "./interfaces/NavigationAction.mjs";
 const c = class c extends p.Component {
@@ -24,7 +24,7 @@ const c = class c extends p.Component {
         l.props.uniquePrivateKey === (t.uniquePrivateKey || this.state.focused) && (s = l);
       }), this.expandMode) {
         case "single":
-          e = [...s.props.parentUniquePrivateKey, s.props.uniquePrivateKey], k(this.expandedItems, e) && (s.props.parentUniquePrivateKey ? e = [...s.props.parentUniquePrivateKey] : e = []);
+          e = [...s.props.parentUniquePrivateKey, s.props.uniquePrivateKey], g(this.expandedItems, e) && (s.props.parentUniquePrivateKey ? e = [...s.props.parentUniquePrivateKey] : e = []);
           break;
         case "multiple": {
           e = this.expandedItems.slice();
@@ -41,7 +41,7 @@ const c = class c extends p.Component {
         expandedItems: e
       });
     }, this.onFocus = (t, r = 0) => {
-      const s = g(p.Children.toArray(this.children));
+      const s = k(p.Children.toArray(this.children));
       let e;
       s.forEach((l, h) => {
         if (l.props.uniquePrivateKey === (t.uniquePrivateKey || this.state.focused)) {
@@ -96,7 +96,7 @@ const c = class c extends p.Component {
         }
         e !== null && (t.preventDefault(), this.onNavigate(t, e));
       }
-    }, b(m), this.showLicenseWatermark = w(m);
+    }, v(m), this.showLicenseWatermark = w(m);
     const o = P(i, this.expandMode);
     o.focused || (o.focused = I(i)), this.state = o;
   }
@@ -119,7 +119,7 @@ const c = class c extends p.Component {
       handleSelect: this.handleSelect,
       children: this.props.children
     };
-    return v(o);
+    return b(o);
   }
   /**
    * @hidden
@@ -129,7 +129,6 @@ const c = class c extends p.Component {
       "aria-activedescendant": this.activeDescendant
     }, o = S(
       "k-panelbar",
-      "k-pos-relative",
       this.props.className
     );
     return /* @__PURE__ */ p.createElement(

package/panelbar/PanelBarItem.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 w=require("react"),t=require("prop-types"),c=require("@progress/kendo-react-common"),f=require("@progress/kendo-svg-icons"),C=require("@progress/kendo-react-animation");function P(i){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const e in i)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(i,e);Object.defineProperty(n,e,o.get?o:{enumerable:!0,get:()=>i[e]})}}return n.default=i,Object.freeze(n)}const a=P(w);function T({imageUrl:i,icon:n,svgIcon:e,iconClass:o}){return i?a.createElement("img",{role:"presentation",className:"k-panelbar-item-icon k-image",src:i}):n||e?a.createElement(c.IconWrap,{className:"k-panelbar-item-icon",name:n,icon:e}):o?a.createElement("span",{role:"presentation",className:"k-panelbar-item-icon "+o}):null}const p=class p extends a.PureComponent{constructor(n){super(n),this.handleItemClick=()=>{const{onSelect:e,disabled:o,id:d}=this.props;e&&!o&&e.call(void 0,{uniquePrivateKey:this.props.uniquePrivateKey,id:d,target:this})},this.childFactory=e=>this.props.keepItemsMounted?a.cloneElement(e,{...e.props,in:this.props.expanded}):e,this.state={show:n.expanded||!1}}render(){const{id:n,children:e,title:o,uniquePrivateKey:d,disabled:s,selected:m,focused:g,expanded:r,className:y,level:h,headerClassName:v,animation:b,keepItemsMounted:l}=this.props,N={role:"treeitem","aria-disabled":s,"aria-hidden":!s&&!r,"aria-selected":!s&&m,"aria-expanded":!s&&r&&!!e},E=c.classNames("k-panelbar-item",{"k-panelbar-header":h===0,"k-expanded":r&&!!e,"k-disabled":s},`k-level-${h}`,y),x=c.classNames("k-link",{"k-selected":!s&&m,"k-focus":!s&&g},v),I={display:"block"},S=T(this.props),O=!s&&e?a.createElement(c.IconWrap,{name:r?"chevron-up":"chevron-down",icon:r?f.chevronUpIcon:f.chevronDownIcon,className:c.classNames("k-panelbar-toggle",r?"k-panelbar-collapse":"k-panelbar-expand")}):null,k=!s&&r||l?a.createElement("ul",{role:"group","aria-expanded":r,"aria-hidden":!r,className:"k-panelbar-group k-panel k-group",style:{display:l?this.state.show?"block":"none":"block"}},e):null,q=(b===void 0||b)&&!s&&e?a.createElement(C.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,key:d+"_animation",style:I,children:k,childFactory:l&&this.childFactory,unmountOnExit:!l,onBeforeEnter:()=>l&&this.setState({show:!0}),onAfterExited:()=>l&&this.setState({show:!1})}):k;return a.createElement("li",{id:n,className:E,...N},a.createElement("span",{className:x,onClick:this.handleItemClick},S,a.createElement("span",{className:"k-panelbar-item-text"},o),O),q)}};p.propTypes={animation:t.bool,children:t.any,className:t.string,icon:t.string,iconClass:t.string,imageUrl:t.string,svgIcon:c.svgIconPropType,expanded:t.bool,disabled:t.bool,onSelect:t.func,selected:t.bool,level:t.number,title:t.oneOfType([t.string,t.element]),id:t.oneOfType([t.string,t.number]),focused:t.bool,keepItemsMounted:t.bool},p.defaultProps={title:"Untitled"};let u=p;exports.PanelBarItem=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),t=require("prop-types"),c=require("@progress/kendo-react-common"),y=require("@progress/kendo-svg-icons"),T=require("@progress/kendo-react-animation");function A(i){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const e in i)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(i,e);Object.defineProperty(n,e,r.get?r:{enumerable:!0,get:()=>i[e]})}}return n.default=i,Object.freeze(n)}const a=A(P);function j({imageUrl:i,icon:n,svgIcon:e,iconClass:r}){return i?a.createElement("img",{role:"presentation",className:"k-panelbar-item-icon k-image",src:i}):n||e?a.createElement(c.IconWrap,{className:"k-panelbar-item-icon",name:n,icon:e}):r?a.createElement("span",{role:"presentation",className:"k-panelbar-item-icon "+r}):null}const d=class d extends a.PureComponent{constructor(n){super(n),this.handleItemClick=()=>{const{onSelect:e,disabled:r,id:p}=this.props;e&&!r&&e.call(void 0,{uniquePrivateKey:this.props.uniquePrivateKey,id:p,target:this})},this.childFactory=e=>this.props.keepItemsMounted?a.cloneElement(e,{...e.props,in:this.props.expanded}):e,this.state={show:n.expanded||!1}}render(){const{id:n,children:e,title:r,uniquePrivateKey:p,disabled:s,selected:m,focused:g,expanded:o,className:v,level:h,headerClassName:N,animation:b,keepItemsMounted:l}=this.props,E={role:"treeitem","aria-disabled":s,"aria-hidden":!s&&!o,"aria-selected":!s&&m,"aria-expanded":!s&&o&&!!e},x=c.classNames("k-panelbar-item",{"k-panelbar-header":h===0,"k-expanded":o&&!!e,"k-disabled":s},`k-level-${h}`,v),I=c.classNames("k-link",{"k-selected":!s&&m,"k-focus":!s&&g},N),S={display:"block"},C=j(this.props),O=!s&&e?a.createElement(c.IconWrap,{name:o?"chevron-up":"chevron-down",icon:o?y.chevronUpIcon:y.chevronDownIcon,className:c.classNames("k-panelbar-toggle",o?"k-panelbar-collapse":"k-panelbar-expand")}):null;let k=!1;e&&Array.isArray(e)&&(k=e[0].type===d);const q=k?a.createElement("ul",{role:"group","aria-expanded":o,"aria-hidden":!o,className:"k-panelbar-group",style:{display:l?this.state.show?"block":"none":"block"}},e):e,f=!s&&o||l?q:null,w=(b===void 0||b)&&!s&&e?a.createElement(T.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,key:p+"_animation",style:S,children:f,childFactory:l&&this.childFactory,unmountOnExit:!l,onBeforeEnter:()=>l&&this.setState({show:!0}),onAfterExited:()=>l&&this.setState({show:!1})}):f;return a.createElement("li",{id:n,className:x,...E},a.createElement("span",{className:I,onClick:this.handleItemClick},C,a.createElement("span",{className:"k-panelbar-item-text"},r),O),w)}};d.propTypes={animation:t.bool,children:t.any,className:t.string,icon:t.string,iconClass:t.string,imageUrl:t.string,svgIcon:c.svgIconPropType,expanded:t.bool,disabled:t.bool,onSelect:t.func,selected:t.bool,level:t.number,title:t.oneOfType([t.string,t.element]),id:t.oneOfType([t.string,t.number]),focused:t.bool,keepItemsMounted:t.bool},d.defaultProps={title:"Untitled"};let u=d;exports.PanelBarItem=u;